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/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,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,44 @@
 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)
 
 

angular/CHANGELOG.md

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

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.5",
+  "version": "7.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.5",
+      "version": "7.0.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.5",
+        "@ionic/core": "^7.0.7",
         "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.7",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.5",
+    "@ionic/core": "^7.0.7",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

angular/src/directives/proxies.ts

@@ -977,7 +977,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
 
 
 @ProxyCmp({
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'mask', 'maskPlaceholder', 'maskVisibility', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -985,7 +985,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'mask', 'maskPlaceholder', 'maskVisibility', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'legacy', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
 })
 export class IonInput {
   protected el: HTMLElement;

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/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/

core/CHANGELOG.md

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

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.
 

core/api.txt

@@ -553,9 +553,6 @@ ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "
 ion-input,prop,label,string | undefined,undefined,false,false
 ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
 ion-input,prop,legacy,boolean | undefined,undefined,false,false
-ion-input,prop,mask,(string | RegExp)[] | RegExp | undefined,undefined,false,false
-ion-input,prop,maskPlaceholder,null | string | undefined,'_',false,false
-ion-input,prop,maskVisibility,"always" | "focus" | "never" | undefined,'always',false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.5",
+  "version": "7.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.5",
+      "version": "7.0.7",
       "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.7",
   "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.d.ts

@@ -17,7 +17,6 @@ import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
-import { MaskExpression, MaskPlaceholder, MaskVisibility } from "./utils/input-masking/public-api";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
 import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
@@ -54,7 +53,6 @@ export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
-export { MaskExpression, MaskPlaceholder, MaskVisibility } from "./utils/input-masking/public-api";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
 export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
@@ -1227,18 +1225,6 @@ export namespace Components {
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
         "legacy"?: boolean;
-        /**
-          * The predefined format of the user's input. For example, you can set a mask that only accepts digits, or you can configure a more complex pattern like a phone number or credit card number.  The mask supports two formats: 1. A valid [regular expression pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) 2. An array containing regular expression and fixed character patterns  The fixed characters in the mask cannot be erased or replaced by the user. For example in a phone number mask, the `(`, `)` and `-` are examples of fixed characters.
-         */
-        "mask"?: MaskExpression;
-        /**
-          * Character or string to cover unfilled parts of the mask. The default character is `_`. If set to `null`, `undefined` or an empty string, unfilled parts will be empty as in a regular input.
-         */
-        "maskPlaceholder"?: MaskPlaceholder;
-        /**
-          * The visibility of the mask placeholder. With `always`, the placeholder will be visible even when the control does not have focus. With `focus`, the placeholder will only be visible when the control has focus. With `never`, the placeholder will never be visibly displayed.
-         */
-        "maskVisibility"?: MaskVisibility;
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -5269,18 +5255,6 @@ declare namespace LocalJSX {
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
         "legacy"?: boolean;
-        /**
-          * The predefined format of the user's input. For example, you can set a mask that only accepts digits, or you can configure a more complex pattern like a phone number or credit card number.  The mask supports two formats: 1. A valid [regular expression pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) 2. An array containing regular expression and fixed character patterns  The fixed characters in the mask cannot be erased or replaced by the user. For example in a phone number mask, the `(`, `)` and `-` are examples of fixed characters.
-         */
-        "mask"?: MaskExpression;
-        /**
-          * Character or string to cover unfilled parts of the mask. The default character is `_`. If set to `null`, `undefined` or an empty string, unfilled parts will be empty as in a regular input.
-         */
-        "maskPlaceholder"?: MaskPlaceholder;
-        /**
-          * The visibility of the mask placeholder. With `always`, the placeholder will be visible even when the control does not have focus. With `focus`, the placeholder will only be visible when the control has focus. With `never`, the placeholder will never be visibly displayed.
-         */
-        "maskVisibility"?: MaskVisibility;
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */

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/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/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,9 +1,12 @@
 import { expect } from '@playwright/test';
-import type { Locator } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
-import type { E2EPage } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+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 }) => {
@@ -35,58 +38,11 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('action sheet: attributes'), () => {
-    test('should set htmlAttributes', async ({ page }) => {
-      await page.goto(`/src/components/action-sheet/test/basic`, config);
-      const actionSheetFixture = new ActionSheetFixture(page);
 
-      await actionSheetFixture.open('#basic');
-
-      const actionSheet = page.locator('ion-action-sheet');
-      await expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
-    });
-  });
-});
-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');
-    });
-  });
-});
-configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+/**
+ * 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 }) => {
@@ -118,7 +74,11 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+
+/**
+ * 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);
@@ -140,42 +100,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-
-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`));
-  }
-}

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`));
+  }
+}

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/checkbox/checkbox.scss

@@ -194,7 +194,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, 8px, 0, 0);
+  @include margin(0, $form-control-label-margin, 0, 0);
 }
 
 
@@ -215,7 +215,7 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, 8px);
+  @include margin(0, 0, 0, $form-control-label-margin);
 }
 
 
@@ -228,7 +228,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, 8px, 0, 0);
+  @include margin(0, $form-control-label-margin, 0, 0);
 }
 
 /**