v7.3.4

Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.2.0
to 4.2.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/releases"><code>@​stencil/core</code>'s
releases</a>.</em></p>
<blockquote>
<h2>😀  v4.2.1 (2023-09-11)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> add heritage clauses earlier in native
transform (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4769">#4769</a>)
(<a
href="9a92ad12f6">9a92ad1</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@​stencil/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2>🌝 <a
href="https://github.com/ionic-team/stencil/compare/v4.2.0...v4.2.1">4.2.1</a>
(2023-09-11)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> add heritage clauses earlier in native
transform (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4769">#4769</a>)
(<a
href="9a92ad12f6">9a92ad1</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="29fa4b38c4"><code>29fa4b3</code></a>
v4.2.1 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4780">#4780</a>)</li>
<li><a
href="9a92ad12f6"><code>9a92ad1</code></a>
fix(compiler): add heritage clauses earlier in native transform (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4769">#4769</a>)</li>
<li><a
href="9ee02c518f"><code>9ee02c5</code></a>
chore(deps): update typescript-eslint to v6.6.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4777">#4777</a>)</li>
<li><a
href="9229a62033"><code>9229a62</code></a>
chore(deps): update actions/upload-artifact action to v3.1.3 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4773">#4773</a>)</li>
<li><a
href="25fcaa9e8e"><code>25fcaa9</code></a>
chore(deps): update dependency terser to v5.19.4 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4774">#4774</a>)</li>
<li><a
href="81a1e2c67c"><code>81a1e2c</code></a>
chore(deps): update node.js to v20.6.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4776">#4776</a>)</li>
<li><a
href="f4724f6341"><code>f4724f6</code></a>
chore(deps): update actions/checkout action to v4 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4778">#4778</a>)</li>
<li><a
href="a1ab21bdeb"><code>a1ab21b</code></a>
chore(deps): update dependency npm to v10 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4766">#4766</a>)</li>
<li><a
href="dd1fe1d0b0"><code>dd1fe1d</code></a>
chore(deps): update node.js to v20.5.1 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4607">#4607</a>)</li>
<li><a
href="4d8ff00915"><code>4d8ff00</code></a>
refactor(compiler): use updateConstructor in lazy transform (<a
href="https://redirect.github.com/ionic-team/stencil/issues/4768">#4768</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/ionic-team/stencil/compare/v4.2.0...v4.2.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/core&package-manager=npm_and_yarn&previous-version=4.2.0&new-version=4.2.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/actions/build-angular-server/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - name: Install Angular Server Dependencies
       run: npm ci

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - name: Install Dependencies
       run: npm ci

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

@@ -6,7 +6,7 @@ runs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -21,7 +21,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

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

@@ -13,7 +13,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

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

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
     - uses: actions/download-artifact@v3
       with:
         path: ./artifacts
@@ -35,7 +35,16 @@ runs:
         git config user.name ionitron
         git config user.email hi@ionicframework.com
         git add src/\*.png --force
-        git commit -m "chore(): add updated snapshots"
-        git push
+
+        if git diff --exit-code; then
+          echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m"
+          echo -e "\033[1;31mThis means that there were zero visual diffs when running screenshot tests.\033[0m"
+          echo -e "\033[1;31mMake sure you have pushed any code changes that would result in visual diffs.\033[0m"
+          exit 1
+        else
+          git commit -m "chore(): add updated snapshots"
+          git push
+        fi
+
       shell: bash
       working-directory: ./core

.stackblitz/codeflow.json

@@ -4,7 +4,7 @@
       "enabled": false
     },
     "pullRequests": {
-      "enabled": true
+      "enabled": false
     }
   }
 }

CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
+
+
+### Bug Fixes
+
+* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
+
+
+
+
+
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+
+### Bug Fixes
+
+* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
+* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
+* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
+* **react:** overlay content is shown with hook  ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102)
+* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 

core/.eslintrc.js

@@ -46,7 +46,8 @@ module.exports = {
     {
       "files": ["*.e2e.ts"],
       "rules": {
-        "custom-rules/await-playwright-promise-assertion": "error"
+        "custom-rules/await-playwright-promise-assertion": "error",
+        "custom-rules/no-playwright-to-match-snapshot-assertion": "error"
       }
     }
   ]

core/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
+
+
+### Bug Fixes
+
+* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
+
+
+
+
+
+## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
+
+
+### Bug Fixes
+
+* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
+* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
+* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
+* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
+
+
+
+
+
 ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
 
 

core/api.txt

@@ -1364,7 +1364,7 @@ ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
 ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-textarea,prop,cols,number | undefined,undefined,false,false
+ion-textarea,prop,cols,number | undefined,undefined,false,true
 ion-textarea,prop,counter,boolean,false,false,false
 ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false

core/custom-rules/index.js

@@ -1,6 +1,7 @@
 module.exports = {
   rules: {
     'no-component-on-ready-method': require('./no-component-on-ready-method.js'),
-    'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js')
+    'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js'),
+    'no-playwright-to-match-snapshot-assertion': require('./no-playwright-to-match-snapshot-assertion.js')
   }
 }

core/custom-rules/no-playwright-to-match-snapshot-assertion.js

@@ -0,0 +1,29 @@
+module.exports = {
+  meta: {
+    messages: {
+      noPlaywrightToMatchSnapshotAssertion: '"toHaveScreenshot" assertions should be used in favor of "toMatchSnapshot". "toHaveScreenshot" brings file size reductions and anti-flake behaviors such as disabling animations by default.',
+    },
+  },
+  create(context) {
+    return {
+      ExpressionStatement(node) {
+        if (node.expression.callee === undefined) {
+          return;
+        }
+
+        const { property } = node.expression.callee;
+
+        /**
+         * Check to see if toMatchSnapshot is being used
+         */
+        if (
+          property !== undefined &&
+          property.type === 'Identifier' &&
+          property.name === 'toMatchSnapshot'
+        ) {
+          context.report({ node: node, messageId: 'noPlaywrightToMatchSnapshotAssertion' });
+        }
+      }
+    }
+  }
+};

core/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.3.2",
+      "version": "7.3.4",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.1.0",
+        "@stencil/core": "^4.2.1",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
@@ -25,7 +25,7 @@
         "@playwright/test": "^1.37.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.7.1",
+        "@stencil/angular-output-target": "^0.8.2",
         "@stencil/react-output-target": "^0.5.3",
         "@stencil/sass": "^3.0.5",
         "@stencil/vue-output-target": "^0.8.6",
@@ -1625,18 +1625,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz",
+      "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -11517,16 +11517,16 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.2.tgz",
+      "integrity": "sha512-i2Oxq2VPQTo1OoP3iDN39N2f/CDO9crS8oUfGEtjwzMgMNuYSMB2VprFoVDUTwqaCP6N409M8+/wJK3oApTDuQ==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz",
-      "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg=="
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.3.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.1.0",
+    "@stencil/core": "^4.2.1",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
@@ -47,7 +47,7 @@
     "@playwright/test": "^1.37.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.7.1",
+    "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.5",
     "@stencil/vue-output-target": "^0.8.6",

core/playwright.config.ts

@@ -55,9 +55,6 @@ const config: PlaywrightTestConfig = {
     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. */

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

@@ -3,6 +3,7 @@ import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } fro
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
+import { createLockController } from '@utils/lock-controller';
 import {
   BACKDROP,
   createDelegateController,
@@ -40,8 +41,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
 })
 export class ActionSheet implements ComponentInterface, OverlayInterface {
   private readonly delegateController = createDelegateController(this);
+  private readonly lockController = createLockController();
   private readonly triggerController = createTriggerController();
-  private currentTransition?: Promise<any>;
   private wrapperEl?: HTMLElement;
   private groupEl?: HTMLElement;
   private gesture?: Gesture;
@@ -198,25 +199,13 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async present(): Promise<void> {
-    /**
-     * When using an inline action sheet
-     * and dismissing a action sheet it is possible to
-     * quickly present the action sheet while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
 
     await this.delegateController.attachViewToDom();
 
-    this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+    await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
 
-    await this.currentTransition;
-
-    this.currentTransition = undefined;
+    unlock();
   }
 
   /**
@@ -230,13 +219,16 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {
-    this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+
+    const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
 
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
 
+    unlock();
+
     return dismissed;
   }
 

core/src/components/alert/alert.tsx

@@ -4,6 +4,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
+import { createLockController } from '@utils/lock-controller';
 import {
   createDelegateController,
   createTriggerController,
@@ -46,6 +47,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
 })
 export class Alert implements ComponentInterface, OverlayInterface {
   private readonly delegateController = createDelegateController(this);
+  private readonly lockController = createLockController();
   private readonly triggerController = createTriggerController();
   private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
   private activeId?: string;
@@ -54,7 +56,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private processedButtons: AlertButton[] = [];
   private wrapperEl?: HTMLElement;
   private gesture?: Gesture;
-  private currentTransition?: Promise<any>;
 
   presented = false;
   lastFocus?: HTMLElement;
@@ -373,23 +374,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async present(): Promise<void> {
-    /**
-     * When using an inline alert
-     * and dismissing an alert it is possible to
-     * quickly present the alert while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
 
     await this.delegateController.attachViewToDom();
 
-    this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+
+    unlock();
   }
 
   /**
@@ -403,13 +394,16 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {
-    this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+
+    const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
 
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
 
+    unlock();
+
     return dismissed;
   }
 

core/src/components/checkbox/test/color/checkbox.e2e.ts

@@ -12,7 +12,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       );
 
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-color-checked`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-color-checked`));
     });
 
     test('should not apply color when unchecked', async ({ page }) => {
@@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       );
 
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-color-unchecked`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-color-unchecked`));
     });
   });
 });

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

@@ -15,7 +15,7 @@ configs().forEach(({ title, screenshot, config }) => {
         config
       );
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-list`));
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
         config
       );
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-inset-list`));
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-inset-list`));
     });
   });
 });
@@ -46,7 +46,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         config
       );
       const item = page.locator('ion-item');
-      expect(await item.screenshot()).toMatchSnapshot(screenshot(`checkbox-item-color`));
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-item-color`));
     });
   });
 });
@@ -67,7 +67,7 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
         config
       );
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label-in-item`));
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item`));
     });
   });
 });

core/src/components/checkbox/test/label/checkbox.e2e.ts

@@ -21,7 +21,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start`));
       });
 
       test('should render an end justification with label in the start position', async ({ page }) => {
@@ -33,7 +33,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-end`));
       });
 
       test('should render a space between justification with label in the start position', async ({ page }) => {
@@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-space-between`));
       });
 
       test('should truncate long labels with ellipses', async ({ page }) => {
@@ -59,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
       });
     });
 
@@ -73,7 +73,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-start`));
       });
 
       test('should render an end justification with label in the end position', async ({ page }) => {
@@ -85,7 +85,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-end`));
       });
 
       test('should render a space between justification with label in the end position', async ({ page }) => {
@@ -97,7 +97,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-space-between`));
       });
     });
 
@@ -111,7 +111,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-start`));
       });
 
       test('should render an end justification with label in the fixed position', async ({ page }) => {
@@ -123,7 +123,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-end`));
       });
 
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
@@ -135,7 +135,7 @@ configs().forEach(({ title, screenshot, config }) => {
         );
 
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-space-between`));
       });
     });
   });