Rename tag; upsert instead of recreate

Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.38.0 to 1.38.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@​playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.38.1</h2>
<h3>Highlights</h3>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/27071">microsoft/playwright#27071</a>
- expect(value).toMatchSnapshot() deprecation announcement on V1.38
<a
href="https://redirect.github.com/microsoft/playwright/issues/27072">microsoft/playwright#27072</a>
- [BUG] PWT trace viewer fails to load trace and throws TypeError
<a
href="https://redirect.github.com/microsoft/playwright/issues/27073">microsoft/playwright#27073</a>
- [BUG] RangeError: Invalid time value
<a
href="https://redirect.github.com/microsoft/playwright/issues/27087">microsoft/playwright#27087</a>
- [REGRESSION]: npx playwright test --list prints all tests twice
<a
href="https://redirect.github.com/microsoft/playwright/issues/27113">microsoft/playwright#27113</a>
- [REGRESSION]: No longer able to extend PlaywrightTest.Matchers type
for locators and pages
<a
href="https://redirect.github.com/microsoft/playwright/issues/27144">microsoft/playwright#27144</a>
- [BUG]can not display trace
<a
href="https://redirect.github.com/microsoft/playwright/issues/27163">microsoft/playwright#27163</a>
- [REGRESSION] Single Quote Wrongly Escaped by Locator When Using
Unicode Flag
<a
href="https://redirect.github.com/microsoft/playwright/issues/27181">microsoft/playwright#27181</a>
- [BUG] evaluate serializing fails at 1.38</p>
<h3>Browser Versions</h3>
<ul>
<li>Chromium 117.0.5938.62</li>
<li>Mozilla Firefox 117.0</li>
<li>WebKit 17.0</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 116</li>
<li>Microsoft Edge 116</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="4743420999"><code>4743420</code></a>
chore: mark 1.38.1 (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27237">#27237</a>)</li>
<li><a
href="c41012b055"><code>c41012b</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27219">#27219</a>):
Revert &quot;feat(evaluate): serialize map and set (<a
href="https://redirect.github.com/Microsoft/playwright/issues/26730">#26730</a>)&quot;
...</li>
<li><a
href="ed619b6fcb"><code>ed619b6</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27162">#27162</a>):
fix(tracing): bump trace version to V5, migrate V4 trace...</li>
<li><a
href="abf9df39cf"><code>abf9df3</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27188">#27188</a>):
fix(locators): do not escape regular expressions with u ...</li>
<li><a
href="35d8604f8d"><code>35d8604</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27167">#27167</a>):
docs: 1.38 release notes for language ports (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27168">#27168</a>)</li>
<li><a
href="6cc43d81c5"><code>6cc43d8</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27117">#27117</a>):
fix: custom expect matchers on Locator/Page/APIResponse ...</li>
<li><a
href="2a577a5caf"><code>2a577a5</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27095">#27095</a>):
fix(tracing): support old traces with consoleMessage.arg...</li>
<li><a
href="ed919f3dda"><code>ed919f3</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27098">#27098</a>):
fix(har): handle invalid Expires/Max-Age (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27123">#27123</a>)</li>
<li><a
href="476b74f7c4"><code>476b74f</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27103">#27103</a>):
fix: list tests only once (<a
href="https://redirect.github.com/Microsoft/playwright/issues/27107">#27107</a>)</li>
<li><a
href="0861364c28"><code>0861364</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/27100">#27100</a>):
chore: fit body in the network panel</li>
<li>Additional commits viewable in <a
href="https://github.com/Microsoft/playwright/compare/v1.38.0...v1.38.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@playwright/test&package-manager=npm_and_yarn&previous-version=1.38.0&new-version=1.38.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
@@ -34,8 +34,24 @@ runs:
       run: |
         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
+
+        # This adds an empty entry for new
+        # screenshot files so we can track them with
+        # git diff
+        git add src/\*.png --force -N
+
+        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
+          # This actually adds the contents
+          # of the screenshots (including new ones)
+          git add src/\*.png --force
+          git commit -m "chore(): add updated snapshots"
+          git push
+        fi
+
       shell: bash
       working-directory: ./core

.github/workflows/dev-build.yml

@@ -1,4 +1,4 @@
-name: 'Ionic Dev Build'
+name: "Ionic Dev Build"
 
 on:
   workflow_dispatch:
@@ -40,3 +40,26 @@ jobs:
     steps:
       - run: echo ${{ needs.create-dev-hash.outputs.dev-hash }}
 
+  comment-on-pr:
+    runs-on: ubuntu-latest
+    needs: [create-dev-hash, release-ionic]
+    continue-on-error: true
+    outputs:
+      pr-number: ${{ steps.PR.outputs.number }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: 8BitJonny/gh-get-current-pr@2.2.0
+        id: PR
+
+      - name: Comment on PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            A dev build has been generated for this PR. To use the dev build, update your Ionic packages to the following version:
+            ```
+            ${{ needs.create-dev-hash.outputs.dev-hash }}
+            ```
+          pr_number: ${{ steps.PR.outputs.number }}
+          comment_tag: dev-build

.stackblitz/codeflow.json

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

CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
+# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
+* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
+* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
+
+
+### Features
+
+* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
+* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
+* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
+* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
+
+
+
+
+
+## [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,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
+* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
+* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
+* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
+
+
+
+
+
+# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
+* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
+* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
+
+
+### Features
+
+* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
+* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
+* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
+* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
+
+
+
+
+
+## [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

@@ -289,12 +289,13 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
+ion-checkbox,prop,alignment,"center" | "start",'center',false,false
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-checkbox,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
@@ -427,6 +428,10 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,part,calendar-day
+ion-datetime,part,calendar-day active
+ion-datetime,part,calendar-day disabled
+ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
@@ -1008,10 +1013,11 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track
 
 ion-radio,shadow
+ion-radio,prop,alignment,"center" | "start",'center',false,false
 ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -1038,7 +1044,7 @@ ion-range,prop,debounce,number | undefined,undefined,false,false
 ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
 ion-range,prop,label,string | undefined,undefined,false,false
-ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-range,prop,legacy,boolean | undefined,undefined,false,false
 ion-range,prop,max,number,100,false,false
 ion-range,prop,min,number,0,false,false
@@ -1364,7 +1370,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
@@ -1478,12 +1484,13 @@ ion-toast,part,icon
 ion-toast,part,message
 
 ion-toggle,shadow
+ion-toggle,prop,alignment,"center" | "start",'center',false,false
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
 ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,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,31 +1,31 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.3.2",
+      "version": "7.4.1",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.1.0",
+        "@stencil/core": "^4.3.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.3.0",
+        "@capacitor/core": "^5.4.1",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/keyboard": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.37.1",
+        "@playwright/test": "^1.38.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",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.3.0.tgz",
-      "integrity": "sha512-mvhh1yJtcUTZ0hUUriBKKpxq47hn75bjxH3tYPRgAFu1z3gowCg+OtG4Rce3W5gr5fSfCjQgOSL0Vp7k9hPUWw==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
+      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1541,22 +1541,18 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz",
-      "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
         "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1625,18 +1621,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.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8193,10 +8189,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.38.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/playwright-core": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz",
-      "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -10788,9 +10802,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.3.0.tgz",
-      "integrity": "sha512-mvhh1yJtcUTZ0hUUriBKKpxq47hn75bjxH3tYPRgAFu1z3gowCg+OtG4Rce3W5gr5fSfCjQgOSL0Vp7k9hPUWw==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
+      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11455,14 +11469,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz",
-      "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
       "dev": true,
       "requires": {
-        "@types/node": "*",
-        "fsevents": "2.3.2",
-        "playwright-core": "1.37.1"
+        "playwright": "1.38.1"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11517,16 +11529,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.3.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
+      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -16331,10 +16343,20 @@
         "find-up": "^4.0.0"
       }
     },
+    "playwright": {
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.38.1"
+      }
+    },
     "playwright-core": {
-      "version": "1.37.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz",
-      "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==",
+      "version": "1.38.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.3.2",
+  "version": "7.4.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,23 +31,23 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.1.0",
+    "@stencil/core": "^4.3.0",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.3.0",
+    "@capacitor/core": "^5.4.1",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.38.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,15 +55,13 @@ 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. */
   forbidOnly: !!process.env.CI,
   maxFailures: 0,
-  retries: 2,
+  /* Test retries help catch flaky tests on CI */
+  retries: process.env.CI ? 2 : 0,
   reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,

core/src/components.d.ts

@@ -602,6 +602,10 @@ export namespace Components {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -623,9 +627,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. 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.
          */
@@ -1332,6 +1336,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -2216,6 +2221,10 @@ export namespace Components {
         "value": number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -2229,9 +2238,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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 default slot that contains the label text. 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.
          */
@@ -2291,9 +2300,9 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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.
          */
@@ -3165,6 +3174,10 @@ export namespace Components {
         "trigger": string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -3186,9 +3199,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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 default slot that contains the label text. 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.
          */
@@ -4625,6 +4638,10 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -4646,9 +4663,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. 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.
          */
@@ -5391,6 +5408,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6226,6 +6244,10 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -6239,9 +6261,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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 default slot that contains the label text. 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.
          */
@@ -6319,9 +6341,9 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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.
          */
@@ -7298,6 +7320,10 @@ declare namespace LocalJSX {
         "trigger"?: string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -7319,9 +7345,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * 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 default slot that contains the label text. 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.
          */

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

@@ -108,6 +108,14 @@
   @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }
 
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  @include margin($checkbox-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $checkbox-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -181,6 +189,17 @@ input {
   justify-content: end;
 }
 
+// Align Items
+// ---------------------------------------------
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
 
 // Label Placement - Start
 // ----------------------------------------------------------------
@@ -248,6 +267,40 @@ input {
   max-width: 200px;
 }
 
+// Label Placement - Stacked
+// ----------------------------------------------------------------
+
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the checkbox.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
+  @include transform-origin(start, top);
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
+  @include transform-origin(center, top);
+}
 
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------

core/src/components/checkbox/checkbox.tsx

@@ -81,8 +81,9 @@ export class Checkbox implements ComponentInterface {
    * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
 
   /**
    * How to pack the label and checkbox within a line.
@@ -95,6 +96,13 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
 
+  /**
+   * How to control the alignment of the checkbox and label on the cross axis.
+   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  @Prop() alignment: 'start' | 'center' = 'center';
+
   // TODO(FW-3100): remove this
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
@@ -132,9 +140,8 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el);
+    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
   }
 
   componentWillLoad() {
@@ -187,7 +194,7 @@ export class Checkbox implements ComponentInterface {
     });
   };
 
-  private toggleChecked = (ev: any) => {
+  private toggleChecked = (ev: Event) => {
     ev.preventDefault();
 
     this.setFocus();
@@ -203,6 +210,10 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
+  private onClick = (ev: MouseEvent) => {
+    this.toggleChecked(ev);
+  };
+
   // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
     const { legacyFormController } = this;
@@ -224,6 +235,7 @@ export class Checkbox implements ComponentInterface {
       labelPlacement,
       name,
       value,
+      alignment,
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
@@ -240,8 +252,10 @@ export class Checkbox implements ComponentInterface {
           'checkbox-indeterminate': indeterminate,
           interactive: true,
           [`checkbox-justify-${justify}`]: true,
+          [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
+        onClick={this.onClick}
       >
         <label class="checkbox-wrapper">
           {/*
@@ -323,6 +337,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           'legacy-checkbox': true,
           interactive: true,
         })}
+        onClick={this.onClick}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}

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

@@ -83,5 +83,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
+
+    test('clicking padded space within item should click the checkbox', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>Size</ion-checkbox>
+        </ion-item>
+      `,
+        config
+      );
+      const itemNative = page.locator('.item-native');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      // Clicks the padded space within the item
+      await itemNative.click({
+        position: {
+          x: 5,
+          y: 5,
+        },
+      });
+
+      expect(ionChange).toHaveReceivedEvent();
+    });
   });
 });

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,24 @@ 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`));
+    });
+  });
+
+  test.describe(title('checkbox: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox label-placement="stacked">Enable Notifications</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-stacked-label-in-item`));
     });
   });
 });

core/src/components/checkbox/test/item/index.html

@@ -137,6 +137,27 @@
           </div>
         </div>
 
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox label-placement="stacked" alignment="start">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox label-placement="stacked" alignment="center">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
         <h1>States</h1>
         <div class="grid">
           <div class="grid-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,8 +135,50 @@ 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`));
+      });
+    });
+
+    test.describe('checkbox: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
+          `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-start`));
+      });
+
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
+          `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-center`));
       });
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('checkbox: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
+        `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-long-label`));
+    });
+  });
+});