chore(): sync with main

.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-core-screenshot/action.yml

@@ -7,8 +7,6 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
-  commandModifier:
-    description: 'Command modifier to run. This is should only be used to temporarily run legacy E2E tests as we migrate to the generator infrastructure.'
 
 runs:
   using: 'composite'
@@ -27,7 +25,7 @@ runs:
       working-directory: ./core
     - name: Test
       if: inputs.update != 'true'
-      run: npm run test.e2e${{ inputs.commandModifier }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
     - name: Test and Update
@@ -49,14 +47,14 @@ runs:
       # which is why we not using the upload-archive
       # composite step here.
       run: |
-        npm run test.e2e${{ inputs.commandModifier }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
         if [ -d core/updated-screenshots/core ]; then
           echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd core/updated-screenshots
-          zip -q -r ../../UpdatedScreenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
+          zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
         fi
       shell: bash
       working-directory: ./core
@@ -64,8 +62,8 @@ runs:
       if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
       uses: actions/upload-artifact@v3
       with:
-        name: updated-screenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}
-        path: UpdatedScreenshots${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
+        name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
+        path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
     - name: Archive Test Results
       # The always() ensures that this step
       # runs even if the previous step fails.
@@ -76,6 +74,6 @@ runs:
       if: always()
       uses: ./.github/workflows/actions/upload-archive
       with:
-        name: test-results${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}
-        output: core/TestResults${{ inputs.commandModifier }}-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
+        name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}
+        output: core/TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
         paths: core/playwright-report

.github/workflows/build.yml

@@ -81,45 +81,6 @@ jobs:
         if: ${{ needs.test-core-screenshot.result != 'success' }}
         run: exit 1
 
-  test-core-screenshot-legacy:
-    strategy:
-      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]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-screenshot
-        with:
-          shard: ${{ matrix.shard }}
-          totalShards: ${{ matrix.totalShards }}
-          commandModifier: '.legacy'
-
-  # 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-legacy:
-    if: ${{ always() }}
-    needs: test-core-screenshot-legacy
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-core-screenshot-legacy.result != 'success' }}
-        run: exit 1
-
   build-vue:
     needs: [build-core]
     runs-on: ubuntu-latest

.github/workflows/stencil-nightly.yml

@@ -87,45 +87,6 @@ jobs:
         if: ${{ needs.test-core-screenshot.result != 'success' }}
         run: exit 1
 
-  test-core-screenshot-legacy:
-    strategy:
-      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-nightly]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-screenshot
-        with:
-          shard: ${{ matrix.shard }}
-          totalShards: ${{ matrix.totalShards }}
-          commandModifier: '.legacy'
-
-  # 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-legacy:
-    if: ${{ always() }}
-    needs: test-core-screenshot-legacy
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-core-screenshot-legacy.result != 'success' }}
-        run: exit 1
-
   build-vue:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest

CHANGELOG.md

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

angular/CHANGELOG.md

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

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.5",
+      "version": "7.0.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.5",
+        "@ionic/core": "^7.0.6",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,9 +1227,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.5.tgz",
-      "integrity": "sha512-dcuE/PEF+GHsPEsLppUASSwWnzVcxFZE7uPMDzTwUPMOFTTaRgWbPxIly/4/VRbV6GSL6MEcuVVxhEdWjSODTg==",
+      "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.2",
         "ionicons": "^7.1.0",
@@ -8104,9 +8104,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.5.tgz",
-      "integrity": "sha512-dcuE/PEF+GHsPEsLppUASSwWnzVcxFZE7uPMDzTwUPMOFTTaRgWbPxIly/4/VRbV6GSL6MEcuVVxhEdWjSODTg==",
+      "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.2",
         "ionicons": "^7.1.0",

angular/package.json

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

core/CHANGELOG.md

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

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.5",
+  "version": "7.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.5",
+      "version": "7.0.6",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^3.2.2",
@@ -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"
@@ -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": {
@@ -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.5",
+  "version": "7.0.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -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",
@@ -90,8 +90,7 @@
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
-    "test.e2e": "npx playwright test --config playwright.config.ts",
-    "test.e2e.legacy": "npx playwright test --config playwright.config-legacy.ts",
+    "test.e2e": "npx playwright test",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"

core/playwright.config-legacy.ts

@@ -1,119 +0,0 @@
-import type { PlaywrightTestConfig, PlaywrightTestOptions, PlaywrightWorkerOptions, Project } from '@playwright/test';
-import { devices, expect } from '@playwright/test';
-
-import { matchers } from './src/utils/test/playwright';
-
-expect.extend(matchers);
-
-const projects: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [
-  {
-    /**
-     * This is really just desktop Firefox
-     * but with a mobile viewport.
-     */
-    name: 'Mobile Firefox',
-    use: {
-      browserName: 'firefox',
-      /**
-       * This is the Pixel 5 configuration.
-       * We can't use devices['Pixel 5']
-       * because the "isMobile" option is
-       * not supported on Firefox.
-       */
-      viewport: {
-        width: 393,
-        height: 727
-      },
-    },
-  },
-  {
-    name: 'Mobile Chrome',
-    use: {
-      browserName: 'chromium',
-      ...devices['Pixel 5']
-    }
-  },
-  {
-    name: 'Mobile Safari',
-    use: {
-      browserName: 'webkit',
-      ...devices['iPhone 12']
-    }
-  }
-];
-
-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.
- */
-const config: PlaywrightTestConfig = {
-  testMatch: '*.e2e-legacy.ts',
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000
-  },
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Fail fast on CI */
-  maxFailures: process.env.CI ? 1 : 0,
-  /* Flaky test should be either addressed or disabled until we can address them */
-  retries: 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /**
-     * All failed tests should create
-     * a trace file for easier debugging.
-     *
-     * See https://playwright.dev/docs/trace-viewer
-     */
-    trace: 'retain-on-failure',
-    baseURL: 'http://localhost:3333',
-  },
-
-  /* Configure projects for major browsers */
-  projects: generateProjects(),
-  webServer: {
-    command: 'serve -p 3333',
-    port: 3333,
-    reuseExistingServer: !process.env.CI
-  }
-};
-
-export default config;

core/playwright.config.ts

@@ -52,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,

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

@@ -6,7 +6,7 @@ import { ActionSheetFixture } from './fixture';
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ mode: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('action sheet: data'), () => {
     let actionSheetFixture!: ActionSheetFixture;
     test.beforeEach(async ({ page }) => {
@@ -42,7 +42,7 @@ configs({ mode: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ mode: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('action sheet: variant functionality'), () => {
     let actionSheetFixture!: ActionSheetFixture;
     test.beforeEach(async ({ page }) => {
@@ -78,7 +78,7 @@ configs({ mode: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ mode: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+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);

core/src/components/checkbox/checkbox.md.vars.scss

@@ -38,7 +38,7 @@ $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 
 /// @prop - Border color of the checkbox icon when off
-$checkbox-md-icon-border-color-off:      rgba($text-color-rgb, .51) !default;
+$checkbox-md-icon-border-color-off:      rgb($text-color-rgb, 0.60) !default;
 
 /// @prop - Border color of the checkbox icon when on
 $checkbox-md-icon-border-color-on:       ion-color(primary, base) !default;

core/src/components/content/content.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
 import { componentOnReady } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
@@ -172,6 +172,15 @@ export class Content implements ComponentInterface {
   }
 
   private resize() {
+    /**
+     * Only force update if the component is rendered in a browser context.
+     * Using `forceUpdate` in a server context with pre-rendering can lead to an infinite loop.
+     * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
+     * `forceUpdate` will trigger another render, locking up the server.
+     *
+     * TODO: Remove if STENCIL-834 determines Stencil will account for this.
+     */
+    if (Build.isBrowser) {
       if (this.fullscreen) {
         readTask(() => this.readDimensions());
       } else if (this.cTop !== 0 || this.cBottom !== 0) {
@@ -179,6 +188,7 @@ export class Content implements ComponentInterface {
         forceUpdate(this);
       }
     }
+  }
 
   private readDimensions() {
     const page = getPageElement(this.el);

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

@@ -1,7 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { Input } from '../input';
 
-it('should inherit attributes', async () => {
+describe('input: rendering', () => {
+  it('should inherit attributes', async () => {
     const page = await newSpecPage({
       components: [Input],
       html: '<ion-input title="my title" tabindex="-1" data-form-type="password"></ion-input>',
@@ -11,4 +12,35 @@ it('should inherit attributes', async () => {
     expect(nativeEl.getAttribute('title')).toBe('my title');
     expect(nativeEl.getAttribute('tabindex')).toBe('-1');
     expect(nativeEl.getAttribute('data-form-type')).toBe('password');
+  });
+
+  it('should render bottom content when helper text is defined', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" helper-text="Helper Text"></ion-input>`,
+    });
+
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).not.toBe(null);
+  });
+
+  it('should render bottom content when helper text is undefined', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input"></ion-input>`,
+    });
+
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).toBe(null);
+  });
+
+  it('should render bottom content when helper text is empty string', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" helper-text=""></ion-input>`,
+    });
+
+    const bottomContent = page.body.querySelector('ion-input .input-bottom');
+    expect(bottomContent).toBe(null);
+  });
 });

core/src/components/input/test/input.spec.tsx

@@ -1,32 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { Input } from '../input';
-
-it('should render bottom content when helper text is defined', async () => {
-  const page = await newSpecPage({
-    components: [Input],
-    html: `<ion-input label="Input" helper-text="Helper Text"></ion-input>`,
-  });
-
-  const bottomContent = page.body.querySelector('ion-input .input-bottom');
-  expect(bottomContent).not.toBe(null);
-});
-
-it('should render bottom content when helper text is undefined', async () => {
-  const page = await newSpecPage({
-    components: [Input],
-    html: `<ion-input label="Input"></ion-input>`,
-  });
-
-  const bottomContent = page.body.querySelector('ion-input .input-bottom');
-  expect(bottomContent).toBe(null);
-});
-
-it('should render bottom content when helper text is empty string', async () => {
-  const page = await newSpecPage({
-    components: [Input],
-    html: `<ion-input label="Input" helper-text=""></ion-input>`,
-  });
-
-  const bottomContent = page.body.querySelector('ion-input .input-bottom');
-  expect(bottomContent).toBe(null);
-});

core/src/components/item/test/inputs/item.e2e.ts

@@ -1,30 +1,34 @@
 import type { Locator } from '@playwright/test';
 import { expect } from '@playwright/test';
 import type { EventSpy } from '@utils/test/playwright';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('item: inputs', () => {
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: inputs'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item/test/inputs`, config);
+
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`item-inputs`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('disabled state rendering'), () => {
     let ionPopoverDidPresent: EventSpy;
     let ionPopoverDidDismiss: EventSpy;
-  let formData: EventSpy;
 
     let popover: Locator;
 
     test.beforeEach(async ({ page }) => {
-    await page.goto(`/src/components/item/test/inputs`);
+      await page.goto(`/src/components/item/test/inputs`, config);
 
       ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
       ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-    formData = await page.spyOnEvent('formData');
 
       popover = page.locator('ion-popover#optionsPopover');
     });
-
-  test('should not have visual regressions', async ({ page }) => {
-    await page.setIonViewport();
-    await expect(page).toHaveScreenshot(`item-inputs-${page.getSnapshotSettings()}.png`);
-  });
-
     test('disabled controls should not have visual regressions', async ({ page }) => {
       await page.click('#popover-trigger');
       await ionPopoverDidPresent.next();
@@ -37,12 +41,27 @@ test.describe('item: inputs', () => {
       await ionPopoverDidDismiss.next();
 
       await page.setIonViewport();
-    await expect(page).toHaveScreenshot(`item-inputs-disabled-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`item-inputs-disabled`));
     });
+  });
+});
 
-  test.describe('form data', () => {
-    test.beforeEach(async ({ skip }) => {
-      skip.rtl();
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('form data'), () => {
+    let ionPopoverDidPresent: EventSpy;
+    let ionPopoverDidDismiss: EventSpy;
+    let formData: EventSpy;
+
+    let popover: Locator;
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/item/test/inputs`, config);
+
+      ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+      formData = await page.spyOnEvent('formData');
+
+      popover = page.locator('ion-popover#optionsPopover');
     });
 
     test('initial form data should be empty', async ({ page }) => {

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

@@ -1,70 +1,69 @@
 import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
+import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('loading: basic'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/loading/test/basic', config);
-    });
-    test.describe('loading: visual regression tests', () => {
-      const runVisualTest = async (page: E2EPage, selector: string, screenshotModifier: string) => {
+const runVisualTest = async (page: E2EPage, selector: string, screenshot: ScreenshotFn, screenshotModifier: string) => {
   const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-        const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
 
   await page.click(selector);
 
   await ionLoadingDidPresent.next();
 
   await expect(page).toHaveScreenshot(screenshot(`loading-${screenshotModifier}-diff`));
+};
 
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('loading: basic'), () => {
+    test('should open a basic loader', async ({ page }) => {
+      await page.goto('/src/components/loading/test/basic', config);
       const loading = page.locator('ion-loading');
+      const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidPresent');
+
+      await runVisualTest(page, '#basic-loading', screenshot, 'basic');
+
       await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
 
       await ionLoadingDidDismiss.next();
 
       await expect(loading).toBeHidden();
-      };
-      test('should open a basic loader', async ({ page }) => {
-        await runVisualTest(page, '#basic-loading', 'basic');
-      });
-      test('should open a loader with long text', async ({ page }) => {
-        await runVisualTest(page, '#long-content-loading', 'long-content');
-      });
-      test('should open a loader with no spinner', async ({ page }) => {
-        await runVisualTest(page, '#no-spinner-loading', 'no-spinner');
-      });
-      test('should open a translucent loader', async ({ page }) => {
-        await runVisualTest(page, '#translucent-loading', 'translucent');
-      });
-      test('should open a loader with a custom class', async ({ page }) => {
-        await runVisualTest(page, '#custom-class-loading', 'custom-class');
-      });
-      test('should open a loader with html content', async ({ page }) => {
-        await runVisualTest(page, '#html-content-loading', 'html-content');
-      });
     });
   });
 });
 
 /**
+ * These behaviors do not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('loading: variants rendering'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/loading/test/basic', config);
+    });
+    test('should open a loader with long text', async ({ page }) => {
+      await runVisualTest(page, '#long-content-loading', screenshot, 'long-content');
+    });
+    test('should open a loader with no spinner', async ({ page }) => {
+      await runVisualTest(page, '#no-spinner-loading', screenshot, 'no-spinner');
+    });
+    test('should open a loader with a custom class', async ({ page }) => {
+      await runVisualTest(page, '#custom-class-loading', screenshot, 'custom-class');
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Translucency is only available on iOS.
+   */
+  test.describe(title('loading: translucent rendering'), () => {
+    test('should open a translucent loader', async ({ page }) => {
+      await page.goto('/src/components/loading/test/basic', config);
+      await runVisualTest(page, '#translucent-loading', screenshot, 'translucent');
+    });
+  });
+
+  /**
    * These behaviors do not vary across modes/directions
    */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('loading: html attributes'), () => {
-    test('it should pass html attributes to the loader', async ({ page }) => {
-      await page.goto('/src/components/loading/test/basic', config);
-
-      const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
-
-      await page.click('#basic-loading');
-
-      await ionLoadingDidPresent.next();
-
-      const loading = page.locator('ion-loading');
-      await expect(loading).toHaveAttribute('data-testid', 'basic-loading');
-    });
-  });
   test.describe(title('loading: focus trapping'), () => {
     test('it should trap focus in the loader', async ({ page, browserName }) => {
       await page.goto('/src/components/loading/test/basic', config);