v8.3.1

fix(react): revert react output target version (#29869 )
Issue number: resolves ionic-team/stencil-ds-output-targets#476, resolves ionic-team/stencil-ds-output-targets#475, resolves #29848 ---------   ## What is the current behavior?  In v0.6.0 of the [React output target](https://www.npmjs.com/package/@stencil/react-output-target), the implementation was changed to leverage Lit's utility for creating React components from web components. This introduced some unforseen issues and breaking changes. ## What is the new behavior?  - Reverts many of the changes from https://github.com/ionic-team/ionic-framework/pull/29782 to downgrade the React output target package to the last stable version (v0.5.3) - Downgrades the version of Stencil to v4.20.0 (due to https://github.com/ionic-team/stencil/issues/5983 causing problems with the downgraded output target) - Pins these versions and prevents Renovate from attempting to upgrade until the associated issues are resolved ## Does this introduce a breaking change? - [ ] Yes - [X] No  ## Other information  Dev build for this version: `8.3.1-dev.11726167750.15400355` I tested the dev build against the use cases outlined in https://github.com/ionic-team/stencil-ds-output-targets/issues/475 and https://github.com/ionic-team/stencil-ds-output-targets/issues/476
2026-03-13 10:22:08 +08:00 · 2024-09-17 14:53:07 +00:00 · 2024-09-16 14:44:03 +00:00 · 2024-09-12 23:18:35 +00:00 · 2024-09-12 17:35:30 +00:00 · 2024-09-11 16:39:37 +00:00
989 changed files with 15563 additions and 12585 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -6,11 +6,19 @@ runs:
    - uses: actions/setup-node@v4
      with:
        node-version: 18.x
-
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core
+        path: ./core
+        filename: CoreBuild.zip
    - name: Install Angular Server Dependencies
      run: npm ci
      shell: bash
      working-directory: ./packages/angular-server
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/angular-server
    - name: Build
      run: npm run build.prod
      shell: bash
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -29,7 +29,7 @@ runs:
      shell: bash
      working-directory: ./packages/angular/test
    - name: Install Dependencies
-      run: npm install --legacy-peer-deps # TODO(FW-6227): Remove legacy-peer-deps flag
+      run: npm install
      shell: bash
      working-directory: ./packages/angular/test/build/${{ inputs.app }}
    - name: Sync Built Changes
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -11,8 +11,8 @@ jobs:
      issues: write
    steps:
      - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
+        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
        with:
-          assignees: brandyscarney, thetaPC
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
          numOfAssignee: 1
          allowSelfAssign: false
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,150 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
+* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
+* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
+* **react, vue:** add default value for navManager on tabs ([#29865](https://github.com/ionic-team/ionic-framework/issues/29865)) ([df39cea](https://github.com/ionic-team/ionic-framework/commit/df39ceac6db6511518aed4766e6a59aa24fb53ec))
+* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
+
+
+
+
+
+# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
+
+
+### Features
+
+* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
+* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
+* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
+* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
+
+
+
+
+
+## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
+
+
+### Bug Fixes
+
+* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
+* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
+
+
+
+
+
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
+## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
+
+
+### Bug Fixes
+
+* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681)
+* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+* **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518)
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+
+### Features
+
+* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876)
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
  <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
  </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
  </a>
  <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
    Documentation
  </a>
  <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">Contribute</a>
  <span> · </span>
  <a href="https://blog.ionicframework.com/">Blog</a>
  <br />
@@ -63,14 +63,15 @@ Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v

 ### Getting Started

-Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
+Start a new project by following our [documentation](https://ionicframework.com/docs/).
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
-an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
+an [issue](https://github.com/ionic-team/ionic-framework/issues/new) on this repository.

 ### Migration Guides

 Already have an Ionic app? These guides will help you migrate to the latest versions.

+* [Migrate from v7 to v8](https://ionicframework.com/docs/updating/8-0)
 * [Migrate from v6 to v7](https://ionicframework.com/docs/updating/7-0)
 * [Migrate from v5 to v6](https://ionicframework.com/docs/updating/6-0)
 * [Migrate from v4 to v5](https://ionicframework.com/docs/updating/5-0)
@@ -82,21 +83,16 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin

 - [Angular Ionic Conference App](https://github.com/ionic-team/ionic-conference-app)
 - [React Ionic Conference App](https://github.com/ionic-team/ionic-react-conference-app)
-<!-- TODO(FW-3811): add this when the vue conference app is updated -->
-<!-- - [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app) -->
+- [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app)

 ### Contributing

 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
-and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[contributing](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.

-Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
-
-### Future Goals
-
-As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

 ### Earlier Versions

--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,138 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
+* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
+* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
+* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
+
+
+
+
+
+# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
+
+
+### Features
+
+* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
+* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
+* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
+* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
+
+
+
+
+
+## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
+
+
+### Bug Fixes
+
+* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
+* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
+
+
+
+
+
+## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
+* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
+
+
+
+
+
+## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
+
+
+### Bug Fixes
+
+* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
+* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
+
+
+
+
+
+## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
+
+
+### Bug Fixes
+
+* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
+
+
+
+
+
+## 8.2.3
+
+This version should be skipped. Install 8.2.4 instead.
+
+
+
+
+
+## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
+
+
+
+
+
+## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
+
+
+### Bug Fixes
+
+* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
+
+
+
+
+
 ## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.43.1
+FROM mcr.microsoft.com/playwright:v1.46.1

 # Set the working directory
 WORKDIR /ionic
--- a/core/api.txt
+++ b/core/api.txt
@@ -393,12 +393,12 @@ ion-card-title,css-prop,--color,ios
 ion-card-title,css-prop,--color,md

 ion-checkbox,shadow
-ion-checkbox,prop,alignment,"center" | "start",'center',false,false
+ion-checkbox,prop,alignment,"center" | "start" | undefined,undefined,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,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
@@ -783,7 +783,7 @@ ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,chevronForward,false,false
-ion-item,prop,disabled,boolean,false,false,false
+ion-item,prop,disabled,boolean,false,false,true
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
@@ -1319,10 +1319,10 @@ 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,alignment,"center" | "start" | undefined,undefined,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,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -1615,7 +1615,7 @@ ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
-ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-select,prop,label,string | undefined,undefined,false,false
 ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
 ion-select,prop,mode,"ios" | "md",undefined,false,false
@@ -1922,12 +1922,12 @@ ion-toast,part,icon
 ion-toast,part,message

 ion-toggle,shadow
-ion-toggle,prop,alignment,"center" | "start",'center',false,false
+ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,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,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
--- a/core/custom-rules/await-playwright-promise-assertion.js
+++ b/core/custom-rules/await-playwright-promise-assertion.js
@@ -67,4 +67,5 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
  'toHaveTitle',
  'toHaveURL',
  'toBeOK',
+  'click'
 ];
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,33 +1,34 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.3.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.1.2",
+      "version": "8.3.1",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^4.17.2",
+        "@stencil/core": "4.20.0",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      },
      "devDependencies": {
-        "@axe-core/playwright": "^4.8.5",
+        "@axe-core/playwright": "^4.10.0",
        "@capacitor/core": "^6.0.0",
        "@capacitor/haptics": "^6.0.0",
        "@capacitor/keyboard": "^6.0.0",
        "@capacitor/status-bar": "^6.0.0",
+        "@clack/prompts": "^0.7.0",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.39.0",
+        "@playwright/test": "^1.46.1",
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/angular-output-target": "^0.8.4",
-        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/react-output-target": "0.5.3",
        "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.7",
+        "@stencil/vue-output-target": "^0.8.9",
        "@types/jest": "^29.5.6",
        "@types/node": "^14.6.0",
        "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -56,12 +57,12 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
      "dev": true,
      "dependencies": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.10.0"
      },
      "peerDependencies": {
        "playwright-core": ">= 1.0.0"
@@ -660,41 +661,78 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz",
-      "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^6.0.0"
      }
    },
    "node_modules/@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^6.0.0"
      }
    },
    "node_modules/@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^6.0.0"
      }
    },
+    "node_modules/@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "bundleDependencies": [
+        "is-unicode-supported"
+      ],
+      "dev": true,
+      "dependencies": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1691,18 +1729,18 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.43.1"
+        "playwright": "1.46.1"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      }
    },
    "node_modules/@rollup/plugin-node-resolve": {
@@ -1786,9 +1824,10 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w==",
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz",
+      "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==",
+      "license": "MIT",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -1802,6 +1841,7 @@
      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
      "dev": true,
+      "license": "MIT",
      "peerDependencies": {
        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
@@ -1820,9 +1860,9 @@
      }
    },
    "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
      "dev": true,
      "peerDependencies": {
        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -2703,9 +2743,9 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
      "dev": true,
      "engines": {
        "node": ">=4"
@@ -4753,9 +4793,9 @@
      "dev": true
    },
    "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
      "dev": true,
      "dependencies": {
        "@nodelib/fs.stat": "^2.0.2",
@@ -5379,6 +5419,19 @@
        "@stencil/core": "^4.0.3"
      }
    },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+      "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
    "node_modules/is-alphabetical": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -8222,33 +8275,33 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
      "dev": true,
      "dependencies": {
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.46.1"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      },
      "optionalDependencies": {
        "fsevents": "2.3.2"
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
      "dev": true,
      "bin": {
        "playwright-core": "cli.js"
      },
      "engines": {
-        "node": ">=16"
+        "node": ">=18"
      }
    },
    "node_modules/postcss": {
@@ -9772,9 +9825,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
      "dev": true,
      "peer": true,
      "bin": {
@@ -10256,12 +10309,12 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
-      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.0.tgz",
+      "integrity": "sha512-kEr3JPEVUSnKIYp/egV2jvFj+chIjCjPp3K3zlpJMza/CB3TFw8UZNbI9agEC2uMz4YbgAOyzlbUy0QS+OofFA==",
      "dev": true,
      "requires": {
-        "axe-core": "~4.9.0"
+        "axe-core": "~4.10.0"
      }
    },
    "@babel/code-frame": {
@@ -10703,35 +10756,64 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz",
-      "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@capacitor/haptics": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz",
-      "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
+      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
      "dev": true,
      "requires": {}
    },
    "@capacitor/keyboard": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz",
-      "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
+      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
      "dev": true,
      "requires": {}
    },
    "@capacitor/status-bar": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz",
-      "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
+      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
      "dev": true,
      "requires": {}
    },
+    "@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dev": true,
+      "requires": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "dev": true,
+      "requires": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      },
+      "dependencies": {
+        "is-unicode-supported": {
+          "version": "1.3.0",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
    "@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -11443,12 +11525,12 @@
      }
    },
    "@playwright/test": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz",
-      "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
+      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
      "dev": true,
      "requires": {
-        "playwright": "1.43.1"
+        "playwright": "1.46.1"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -11516,9 +11598,9 @@
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.0.tgz",
-      "integrity": "sha512-cN+nvjy0L8KyYq7N1bmswN/AcBustFlsAxfyPQ+fd3m98lPo53jNKIxKve1ZQ4ZmzSzYO7alDhZvjIesM0rl7w=="
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.20.0.tgz",
+      "integrity": "sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg=="
    },
    "@stencil/react-output-target": {
      "version": "0.5.3",
@@ -11535,9 +11617,9 @@
      "requires": {}
    },
    "@stencil/vue-output-target": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
-      "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
+      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
      "dev": true,
      "requires": {}
    },
@@ -12150,9 +12232,9 @@
      }
    },
    "axe-core": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
-      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
+      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
      "dev": true
    },
    "babel-jest": {
@@ -13645,9 +13727,9 @@
      "dev": true
    },
    "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
      "dev": true,
      "requires": {
        "@nodelib/fs.stat": "^2.0.2",
@@ -14122,6 +14204,13 @@
      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
      "requires": {
        "@stencil/core": "^4.0.3"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "4.21.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.21.0.tgz",
+          "integrity": "sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw=="
+        }
      }
    },
    "is-alphabetical": {
@@ -16167,19 +16256,19 @@
      }
    },
    "playwright": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz",
-      "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
+      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
      "dev": true,
      "requires": {
        "fsevents": "2.3.2",
-        "playwright-core": "1.43.1"
+        "playwright-core": "1.46.1"
      }
    },
    "playwright-core": {
-      "version": "1.43.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz",
-      "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==",
+      "version": "1.46.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
+      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
      "dev": true
    },
    "postcss": {
@@ -17323,9 +17412,9 @@
      }
    },
    "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
      "dev": true,
      "peer": true
    },
@@ -17678,4 +17767,4 @@
      "dev": true
    }
  }
-}
+}
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.2",
+  "version": "8.3.1",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,25 +31,26 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.17.2",
+    "@stencil/core": "4.20.0",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
+    "@axe-core/playwright": "^4.10.0",
    "@capacitor/core": "^6.0.0",
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/keyboard": "^6.0.0",
    "@capacitor/status-bar": "^6.0.0",
+    "@clack/prompts": "^0.7.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.46.1",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "0.5.3",
    "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.7",
+    "@stencil/vue-output-target": "^0.8.9",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -99,7 +100,8 @@
    "docker.build": "docker build -t ionic-playwright .",
    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
    "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
+    "test.e2e.script": "node scripts/testing/e2e-script.mjs"
  },
  "author": "Ionic Team",
  "license": "MIT",
@@ -108,7 +110,7 @@
    "url": "git+https://github.com/ionic-team/ionic-framework.git"
  },
  "bugs": {
-    "url": "https://github.com/ionic-team/ionic/issues"
+    "url": "https://github.com/ionic-team/ionic-framework/issues"
  },
  "homepage": "https://ionicframework.com/",
  "jest": {
--- a/core/scripts/testing/e2e-script.mjs
+++ b/core/scripts/testing/e2e-script.mjs
@@ -0,0 +1,260 @@
+// The purpose of this script is to provide a way run the E2E tests
+// without having the developer to manually run multiple commands based
+// on the desired end result.
+// E.g. update the local ground truths for a specific component or
+// open the Playwright report after running the E2E tests.
+
+import {
+  intro,
+  outro,
+  confirm,
+  spinner,
+  isCancel,
+  cancel,
+  text,
+  log,
+} from '@clack/prompts';
+import { exec, spawn } from 'child_process';
+import fs from 'node:fs';
+import { setTimeout as sleep } from 'node:timers/promises';
+import util from 'node:util';
+import color from 'picocolors';
+
+async function main() {
+  const execAsync = util.promisify(exec);
+  const cleanUpFiles = async () => {
+    // Clean up the local ground truths.
+    const cleanUp = spinner();
+  
+    // Inform the user that the local ground truths are being cleaned up.
+    cleanUp.start('Restoring local ground truths');
+  
+    // Reset the local ground truths.
+    await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to reset local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Restore the local ground truths.
+    await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
+      cleanUp.stop('Failed to restore local ground truths');
+      console.error(error);
+      return process.exit(0);
+    });
+  
+    // Inform the user that the local ground truths have been cleaned up.
+    cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
+  };
+
+  intro(color.inverse(' Update Local Ground Truths'));
+
+  // Ask user for the component name they want to test.
+  const componentValue = await text({
+    message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
+    placeholder: 'Empty for all components',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(componentValue)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // Ask user if they want to update their local ground truths.
+  const shouldUpdateTruths = await confirm({
+    message: 'Do you want to update your local ground truths?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldUpdateTruths)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  if (shouldUpdateTruths) {
+    const defaultBaseBranch = 'main';
+
+    // Ask user for the base branch.
+    let baseBranch = await text({
+      message: 'Enter the base branch name:',
+      placeholder: `default: ${defaultBaseBranch}`,
+    })
+
+    // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+    if (isCancel(baseBranch)) {
+      cancel('Operation cancelled');
+      return process.exit(0);
+    }
+
+    // User didn't provide a base branch.
+    if (!baseBranch) {
+      baseBranch = defaultBaseBranch;
+    }
+
+    /**
+     * The provided base branch needs to be fetched.
+     * This ensures that the local base branch is up-to-date with the 
+     * remote base branch. Otherwise, there might be errors stating that
+     * certain files don't exist in the local base branch.
+     */
+    const fetchBaseBranch = spinner();
+
+    // Inform the user that the base branch is being fetched.
+    fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
+
+    // Fetch the base branch.
+    await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
+      fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
+      console.error(error);
+      return process.exit(0);
+    });
+
+    // Inform the user that the base branch has been fetched.
+    fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
+
+
+    const updateGroundTruth = spinner();
+
+    // Inform the user that the local ground truths are being updated.
+    updateGroundTruth.start('Updating local ground truths');
+
+    // Check if user provided an existing file or directory.
+    const isValidLocation = fs.existsSync(componentValue);
+
+    // User provided an existing file or directory.
+    if (isValidLocation) {
+      const stats = fs.statSync(componentValue);
+
+      // User provided a file as the component.
+      // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
+      if (stats.isFile()) {
+        // Update the local ground truths for the provided path.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+
+      // User provided a directory as the component.
+      // ex: `componentValue` = `src/components/chip`
+      if (stats.isDirectory()) {
+        // Update the local ground truths for the provided directory.
+        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+          updateGroundTruth.stop('Failed to update local ground truths');
+          console.error(error);
+          return process.exit(0);
+        });
+      }
+    }
+    // User provided a component name as the component.
+    // ex: `componentValue` = `chip`
+    else if (componentValue) {
+      // Update the local ground truths for the provided component.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+    // User provided an empty string.
+    else {
+      // Update the local ground truths for all components.
+      await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
+        updateGroundTruth.stop('Failed to update local ground truths');
+        console.error(error);
+        return process.exit(0);
+      });
+    }
+
+    // Inform the user that the local ground truths have been updated.
+    updateGroundTruth.stop('Updated local ground truths');
+  }
+
+  const buildCore = spinner();
+
+  // Inform the user that the core is being built.
+  buildCore.start('Building core');
+
+  /**
+   * Build core
+   * Otherwise, the uncommitted changes will not be reflected in the tests because:
+   * - popping the stash doesn't trigger a re-render even if `npm start` is running
+   * - app is not running the `npm start` command
+   */
+  await execAsync('npm run build').catch((error) => {
+    // Clean up the local ground truths.
+    cleanUpFiles();
+
+    buildCore.stop('Failed to build core');
+    console.error(error);
+    return process.exit(0);
+  });
+
+  buildCore.stop('Built core');
+
+  const runE2ETests = spinner();
+
+  // Inform the user that the E2E tests are being run.
+  runE2ETests.start('Running E2E tests');
+
+  // User provided a component value.
+  if (componentValue) {
+    await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  } else {
+    await execAsync('npm run test.e2e.docker.ci').catch((error) => {
+      // Clean up the local ground truths.
+      cleanUpFiles();
+
+      runE2ETests.stop('Failed to run E2E tests');
+      console.error(error);
+      return process.exit(0);
+    });
+  }
+
+  runE2ETests.stop('Ran E2E tests');
+
+  // Clean up the local ground truths.
+  await cleanUpFiles();
+
+  // Ask user if they want to open the Playwright report.
+  const shouldOpenReport = await confirm({
+    message: 'Do you want to open the Playwright report?',
+  });
+
+  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
+  if (isCancel(shouldOpenReport)) {
+    cancel('Operation cancelled');
+    return process.exit(0);
+  }
+
+  // User chose to open the Playwright report.
+  if (shouldOpenReport) {
+    // Use spawn to display the server information and the key to quit the server.
+    spawn('npx', ['playwright', 'show-report'], {
+      stdio: 'inherit',
+    });
+  } else {
+    // Inform the user that the Playwright report can be opened by running the following command.
+    log.info('If you change your mind, you can open the Playwright report by running the following command:');
+    log.info(color.bold('npx playwright show-report'));
+  }
+
+  if (shouldOpenReport) {
+    outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
+  } else {
+    outro("You're all set!");
+  }
+
+  await sleep(1000);
+}
+
+main().catch(console.error);
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -601,9 +601,9 @@ export namespace Components {
    }
    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.
+          * 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. Setting this property will change the checkbox `display` to `block`.
         */
-        "alignment": 'start' | 'center';
+        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the checkbox is selected.
         */
@@ -621,9 +621,9 @@ export namespace Components {
         */
        "indeterminate": boolean;
        /**
-          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
         */
-        "justify": 'start' | 'end' | 'space-between';
+        "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 ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -2248,9 +2248,9 @@ export namespace Components {
    }
    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.
+          * 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. Setting this property will change the radio `display` to `block`.
         */
-        "alignment": 'start' | 'center';
+        "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).
         */
@@ -2260,9 +2260,9 @@ export namespace Components {
         */
        "disabled": boolean;
        /**
-          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
         */
-        "justify": 'start' | 'end' | 'space-between';
+        "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 ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -2748,7 +2748,7 @@ export namespace Components {
        /**
          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
         */
-        "justify": 'start' | 'end' | 'space-between';
+        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
@@ -3214,9 +3214,9 @@ export namespace Components {
    }
    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.
+          * 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. Setting this property will change the toggle `display` to `block`.
         */
-        "alignment": 'start' | 'center';
+        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the toggle is selected.
         */
@@ -3234,9 +3234,9 @@ export namespace Components {
         */
        "enableOnOffLabels": boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
         */
-        "justify": 'start' | 'end' | 'space-between';
+        "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 ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -5321,7 +5321,7 @@ declare namespace LocalJSX {
    }
    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.
+          * 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. Setting this property will change the checkbox `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -5341,7 +5341,7 @@ declare namespace LocalJSX {
         */
        "indeterminate"?: boolean;
        /**
-          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -6939,7 +6939,7 @@ declare namespace LocalJSX {
    }
    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.
+          * 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. Setting this property will change the radio `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -6951,7 +6951,7 @@ declare namespace LocalJSX {
         */
        "disabled"?: boolean;
        /**
-          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -8020,7 +8020,7 @@ declare namespace LocalJSX {
    }
    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.
+          * 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. Setting this property will change the toggle `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -8040,7 +8040,7 @@ declare namespace LocalJSX {
         */
        "enableOnOffLabels"?: boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/disabled/accordion.e2e.ts
+++ b/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {

      await expect(accordion).toHaveClass(/accordion-collapsed/);

-      accordion.click();
+      await accordion.click();
      await page.waitForChanges();

      await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {

      await expect(accordion).toHaveClass(/accordion-collapsed/);

-      accordion.click();
+      await accordion.click();
      await page.waitForChanges();

      await expect(accordion).toHaveClass(/accordion-collapsed/);
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/readonly/accordion.e2e.ts
+++ b/core/src/components/accordion/test/readonly/accordion.e2e.ts
@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {

      await expect(accordion).toHaveClass(/accordion-collapsed/);

-      accordion.click();
+      await accordion.click();
      await page.waitForChanges();

      await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {

      await expect(accordion).toHaveClass(/accordion-collapsed/);

-      accordion.click();
+      await accordion.click();
      await page.waitForChanges();

      await expect(accordion).toHaveClass(/accordion-collapsed/);
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -310,7 +310,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
  }

  componentDidLoad() {
--- a/core/src/components/action-sheet/test/action-sheet-id.spec.ts
+++ b/core/src/components/action-sheet/test/action-sheet-id.spec.ts
@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { ActionSheet } from '../action-sheet';
-
-it('action sheet should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [ActionSheet],
-    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
-  });
-  let actionSheet: HTMLIonActionSheetElement;
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet).not.toBe(null);
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the action sheet from the DOM
-  actionSheet.remove();
-  await page.waitForChanges();
-
-  // Create a new action sheet to verify the id is incremented
-  actionSheet = document.createElement('ion-action-sheet');
-  actionSheet.isOpen = true;
-  page.body.appendChild(actionSheet);
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same action sheet again should reuse the existing id
-
-  actionSheet.isOpen = false;
-  await page.waitForChanges();
-  actionSheet.isOpen = true;
-  await page.waitForChanges();
-
-  actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-});
--- a/core/src/components/action-sheet/test/action-sheet-id.spec.tsx
+++ b/core/src/components/action-sheet/test/action-sheet-id.spec.tsx
@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+import { h } from '@stencil/core';
+
+describe('action-sheet: id', () => {
+  it('action sheet should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+    });
+    let actionSheet: HTMLIonActionSheetElement;
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet).not.toBe(null);
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the action sheet from the DOM
+    actionSheet.remove();
+    await page.waitForChanges();
+
+    // Create a new action sheet to verify the id is incremented
+    actionSheet = document.createElement('ion-action-sheet');
+    actionSheet.isOpen = true;
+    page.body.appendChild(actionSheet);
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same action sheet again should reuse the existing id
+
+    actionSheet.isOpen = false;
+    await page.waitForChanges();
+    actionSheet.isOpen = true;
+    await page.waitForChanges();
+
+    actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
+    });
+
+    const alert = page.body.querySelector('ion-action-sheet')!;
+    expect(alert.id).toBe(id);
+  });
+});
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -341,7 +341,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    setOverlayId(this.el);
+    if (!this.htmlAttributes?.id) {
+      setOverlayId(this.el);
+    }
    this.inputsChanged();
    this.buttonsChanged();
  }
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/alert/test/alert-id.spec.ts
+++ b/core/src/components/alert/test/alert-id.spec.ts
@@ -1,41 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Alert } from '../alert';
-
-it('alert should be assigned an incrementing id', async () => {
-  const page = await newSpecPage({
-    components: [Alert],
-    html: `<ion-alert is-open="true"></ion-alert>`,
-  });
-  let alert: HTMLIonAlertElement;
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert).not.toBe(null);
-  expect(alert.getAttribute('id')).toBe('ion-overlay-1');
-
-  // Remove the alert from the DOM
-  alert.remove();
-  await page.waitForChanges();
-
-  // Create a new alert to verify the id is incremented
-  alert = document.createElement('ion-alert');
-  alert.isOpen = true;
-  page.body.appendChild(alert);
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-
-  // Presenting the same alert again should reuse the existing id
-
-  alert.isOpen = false;
-  await page.waitForChanges();
-  alert.isOpen = true;
-  await page.waitForChanges();
-
-  alert = page.body.querySelector('ion-alert')!;
-
-  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
-});
--- a/core/src/components/alert/test/alert-id.spec.tsx
+++ b/core/src/components/alert/test/alert-id.spec.tsx
@@ -0,0 +1,55 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Alert } from '../alert';
+import { h } from '@stencil/core';
+
+describe('alert: id', () => {
+  it('alert should be assigned an incrementing id', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert is-open="true"></ion-alert>`,
+    });
+    let alert: HTMLIonAlertElement;
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert).not.toBe(null);
+    expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+
+    // Remove the alert from the DOM
+    alert.remove();
+    await page.waitForChanges();
+
+    // Create a new alert to verify the id is incremented
+    alert = document.createElement('ion-alert');
+    alert.isOpen = true;
+    page.body.appendChild(alert);
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+
+    // Presenting the same alert again should reuse the existing id
+
+    alert.isOpen = false;
+    await page.waitForChanges();
+    alert.isOpen = true;
+    await page.waitForChanges();
+
+    alert = page.body.querySelector('ion-alert')!;
+
+    expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+  });
+
+  it('should not overwrite the id set in htmlAttributes', async () => {
+    const id = 'custom-id';
+    const page = await newSpecPage({
+      components: [Alert],
+      template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
+    });
+
+    const alert = page.body.querySelector('ion-alert')!;
+    expect(alert.id).toBe(id);
+  });
+});
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -72,6 +72,7 @@
  flex-grow: 1;

  align-items: center;
+  justify-content: space-between;

  height: inherit;

@@ -86,7 +87,10 @@
  overflow: hidden;
 }

-:host(.in-item) .label-text-wrapper {
+// Checkboxes that are not slotted inside an item and are not used with a
+// stacked label should have margins equal to those of the label.
+:host(.in-item) .label-text-wrapper,
+:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }

@@ -170,6 +174,20 @@ input {
  align-items: center;
 }

+// Justify Content & Align Items
+// ---------------------------------------------
+
+// The checkbox should be displayed as block when either justify
+// or alignment is set; otherwise, these properties will have no
+// visible effect.
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end),
+:host(.checkbox-alignment-start),
+:host(.checkbox-alignment-center) {
+  display: block;
+}
+
 // Label Placement - Start
 // ----------------------------------------------------------------

--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -86,15 +86,17 @@ export class Checkbox implements ComponentInterface {
   * on the left in RTL.
   * `"space-between"`: The label and checkbox will appear on opposite
   * ends of the line with space between the two elements.
+   * Setting this property will change the checkbox `display` to `block`.
   */
-  @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
+  @Prop() justify?: 'start' | 'end' | '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.
+   * Setting this property will change the checkbox `display` to `block`.
   */
-  @Prop() alignment: 'start' | 'center' = 'center';
+  @Prop() alignment?: 'start' | 'center';

  /**
   * Emitted when the checked property has changed as a result of a user action such as a click.
@@ -194,8 +196,8 @@ export class Checkbox implements ComponentInterface {
          'checkbox-disabled': disabled,
          'checkbox-indeterminate': indeterminate,
          interactive: true,
-          [`checkbox-justify-${justify}`]: true,
-          [`checkbox-alignment-${alignment}`]: true,
+          [`checkbox-justify-${justify}`]: justify !== undefined,
+          [`checkbox-alignment-${alignment}`]: alignment !== undefined,
          [`checkbox-label-placement-${labelPlacement}`]: true,
        })}
        onClick={this.onClick}
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
                font-size: 310%;
              }
            </style>
-            <ion-checkbox justify="start" checked>Checked</ion-checkbox>
+            <ion-checkbox checked>Checked</ion-checkbox>
          `,
          config
        );
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -15,7 +15,6 @@
  </head>
  <style>
    ion-checkbox {
-      display: block;
      margin-bottom: 8px;
    }

@@ -23,6 +22,10 @@
      transform: scale(0.5);
      transform-origin: center;
    }
+
+    hr {
+      background: #ddd;
+    }
  </style>
  <body>
    <ion-app>
@@ -33,15 +36,19 @@
      </ion-header>

      <ion-content class="ion-padding">
-        <div id="checkboxes">
-          <ion-checkbox justify="start">Unchecked</ion-checkbox>
-          <ion-checkbox justify="start" checked>Checked</ion-checkbox>
-          <ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
-          <ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
-          <ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
-          <ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
-          <ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>
-        </div>
+        <ion-checkbox>Unchecked</ion-checkbox><br />
+        <ion-checkbox checked>Checked</ion-checkbox><br />
+        <ion-checkbox disabled>Disabled</ion-checkbox><br />
+        <ion-checkbox disabled checked>Disabled, Checked</ion-checkbox><br />
+        <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox><br />
+        <ion-checkbox checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox><br />
+        <ion-checkbox checked style="--size: 100px">--size</ion-checkbox><br />
+
+        <hr />
+
+        <ion-checkbox checked>Default width</ion-checkbox><br />
+        <ion-checkbox checked style="width: 200px">Specified width</ion-checkbox><br />
+        <ion-checkbox checked style="width: 100%">Full-width</ion-checkbox><br />
      </ion-content>
    </ion-app>
  </body>
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  });
 });

-configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('checkbox: long label in item'), () => {
    test('should render margins correctly when using long label in item', async ({ page }) => {
      await page.setContent(
@@ -69,6 +69,28 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
      const list = page.locator('ion-list');
      await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item`));
    });
+    test('should render margins correctly when using long label in item with start alignment', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29837',
+      });
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start" alignment="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item-align-start`));
+    });
  });

  test.describe(title('checkbox: stacked label in item'), () => {
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-align-start-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -181,6 +181,15 @@
              </ion-checkbox>
            </ion-item>
          </div>
+          <div class="grid-item">
+            <ion-item>
+              <ion-checkbox justify="start" alignment="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </div>
        </div>
      </ion-content>
    </ion-app>
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts
@@ -2,20 +2,50 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';

 /**
- * By default ion-checkbox only takes up
- * as much space as it needs. Justification is
- * used for when the checkbox takes up the full
- * line (such as in an ion-item). As a result,
- * we set the width of the checkbox so we can
- * see the justification results.
+ * By default ion-checkbox only takes up as much space
+ * as it needs. Justification is used for when the
+ * checkbox should take up the full line (such as in an
+ * ion-item or when it has 100% width).
 */
 configs().forEach(({ title, screenshot, config }) => {
  test.describe(title('checkbox: label'), () => {
+    test.describe('checkbox: default placement', () => {
+      test('should render a space between justification with a full width checkbox', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-checkbox style="width: 100%">
+             Label
+           </ion-checkbox>
+         `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-full-width`));
+      });
+
+      test('should truncate long labels with ellipses', async ({ page }) => {
+        // Checkbox needs to be full width to truncate properly
+        // because it is not inside of an `ion-app` in tests
+        await page.setContent(
+          `
+          <ion-checkbox style="width: 100%">
+             Long Label Long Label Long Label Long Label Long Label Long Label
+           </ion-checkbox>
+         `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-long-label`));
+      });
+    });
+
    test.describe('checkbox: start placement', () => {
      test('should render a start justification with label in the start position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="start">Label</ion-checkbox>
         `,
          config
        );
@@ -27,7 +57,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render an end justification with label in the start position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="end">Label</ion-checkbox>
         `,
          config
        );
@@ -39,7 +69,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render a space between justification with label in the start position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="space-between">Label</ion-checkbox>
         `,
          config
        );
@@ -51,7 +81,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should truncate long labels with ellipses', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="start" justify="start" style="width: 200px">
+           <ion-checkbox label-placement="start" justify="start">
             Long Label Long Label Long Label Long Label Long Label Long Label
           </ion-checkbox>
         `,
@@ -59,7 +89,7 @@ configs().forEach(({ title, screenshot, config }) => {
        );

        const checkbox = page.locator('ion-checkbox');
-        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start-long-label`));
      });
    });

@@ -67,7 +97,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render a start justification with label in the end position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="start">Label</ion-checkbox>
         `,
          config
        );
@@ -79,7 +109,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render an end justification with label in the end position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="end">Label</ion-checkbox>
         `,
          config
        );
@@ -91,7 +121,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render a space between justification with label in the end position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="space-between">Label</ion-checkbox>
         `,
          config
        );
@@ -105,7 +135,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render a start justification with label in the fixed position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="start">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -117,7 +147,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render an end justification with label in the fixed position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="end">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -129,7 +159,7 @@ configs().forEach(({ title, screenshot, config }) => {
      test('should render a space between justification with label in the fixed position', async ({ page }) => {
        await page.setContent(
          `
-           <ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="space-between">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -143,7 +173,7 @@ configs().forEach(({ title, screenshot, config }) => {
      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>
+            <ion-checkbox label-placement="stacked" alignment="start">This is a long label</ion-checkbox>
          `,
          config
        );
@@ -155,7 +185,7 @@ configs().forEach(({ title, screenshot, config }) => {
      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>
+            <ion-checkbox label-placement="stacked" alignment="center">This is a long label</ion-checkbox>
          `,
          config
        );
@@ -172,7 +202,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
    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>
+          <ion-checkbox label-placement="stacked" alignment="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
        `,
        config
      );
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-end-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-space-between-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-ios-rtl-Mobile-Safari-linux.png
--- a/Show More
+++ b/Show More