fix quick scroll with different segment button widths

fix: handle button clicking scrolling multiple views
fix: calculate distance to button using rect & container scroll offset
2026-03-13 10:22:08 +08:00 · 2024-10-22 16:32:02 -04:00 · 2024-10-18 17:19:27 -04:00 · 2024-10-18 16:23:22 -04:00 · 2024-10-18 13:34:58 -04:00 · 2024-10-18 12:56:48 -04:00
1005 changed files with 16608 additions and 12507 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
@@ -13,6 +13,6 @@ jobs:
      - name: 'Auto-assign issue'
        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,139 @@
 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)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,127 @@
 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)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.44.0
+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
@@ -1541,6 +1541,7 @@ ion-segment,css-prop,--background,ios
 ion-segment,css-prop,--background,md

 ion-segment-button,shadow
+ion-segment-button,prop,contentId,string | undefined,undefined,false,true
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
@@ -1606,6 +1607,16 @@ ion-segment-button,part,indicator
 ion-segment-button,part,indicator-background
 ion-segment-button,part,native

+ion-segment-content,shadow
+ion-segment-content,prop,disabled,boolean,false,false,false
+
+ion-segment-view,shadow
+ion-segment-view,prop,disabled,boolean,false,false,false
+ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise<void>
+ion-segment-view,event,ionSegmentViewScroll,{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; },true
+ion-segment-view,event,ionSegmentViewScrollEnd,{ activeContentId: string; },true
+ion-segment-view,event,ionSegmentViewScrollStart,void,true
+
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1615,7 +1626,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 +1933,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.3",
+  "version": "8.3.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.1.3",
+      "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.44.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
-      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "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.44.0"
+        "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.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.1.tgz",
-      "integrity": "sha512-WoRctLuXqoiLquS4EEvMoyLsbQ5+xuk8wp0+n4mYjoAoXy8NppXmMqKrMlFyYXL/zUI5ODS7U7IcLCpZ3IcKZQ==",
+      "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.44.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
-      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "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.44.0"
+        "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.44.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
-      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
+      "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.44.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
-      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "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.44.0"
+        "playwright": "1.46.1"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -11516,9 +11598,9 @@
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.1.tgz",
-      "integrity": "sha512-WoRctLuXqoiLquS4EEvMoyLsbQ5+xuk8wp0+n4mYjoAoXy8NppXmMqKrMlFyYXL/zUI5ODS7U7IcLCpZ3IcKZQ=="
+      "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.44.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
-      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "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.44.0"
+        "playwright-core": "1.46.1"
      }
    },
    "playwright-core": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
-      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
+      "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
    },
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.1.3",
+  "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",
--- 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.
         */
@@ -2676,6 +2676,10 @@ export namespace Components {
          * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
         */
        "scrollable": boolean;
+        /**
+          * The `id` of the `segment-view` element to be associated with this segment.
+         */
+        "segmentViewId"?: string;
        /**
          * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
         */
@@ -2690,10 +2694,15 @@ export namespace Components {
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
         */
        "disabled": boolean;
+        "hasIndicator": boolean;
        /**
          * Set the layout of the text and icon in the segment.
         */
@@ -2712,6 +2721,24 @@ export namespace Components {
         */
        "value": SegmentValue;
    }
+    interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled": boolean;
+    }
+    interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled": boolean;
+        /**
+          * This method is used to programmatically set the displayed segment content in the segment view. Calling this method will update the `value` of the corresponding segment button.
+          * @param id : The id of the segment content to display.
+          * @param smoothScroll : Whether to animate the scroll transition.
+         */
+        "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
+    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
@@ -2748,7 +2775,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 +3241,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 +3261,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.
         */
@@ -3413,6 +3440,10 @@ export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSegmentElement;
 }
+export interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSegmentViewElement;
+}
 export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSelectElement;
@@ -4409,6 +4440,35 @@ declare global {
        prototype: HTMLIonSegmentButtonElement;
        new (): HTMLIonSegmentButtonElement;
    };
+    interface HTMLIonSegmentContentElement extends Components.IonSegmentContent, HTMLStencilElement {
+    }
+    var HTMLIonSegmentContentElement: {
+        prototype: HTMLIonSegmentContentElement;
+        new (): HTMLIonSegmentContentElement;
+    };
+    interface HTMLIonSegmentViewElementEventMap {
+        "ionSegmentViewScroll": {
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  };
+        "ionSegmentViewScrollEnd": { activeContentId: string };
+        "ionSegmentViewScrollStart": void;
+    }
+    interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonSegmentViewElement: {
+        prototype: HTMLIonSegmentViewElement;
+        new (): HTMLIonSegmentViewElement;
+    };
    interface HTMLIonSelectElementEventMap {
        "ionChange": SelectChangeEventDetail;
        "ionCancel": void;
@@ -4718,6 +4778,8 @@ declare global {
        "ion-searchbar": HTMLIonSearchbarElement;
        "ion-segment": HTMLIonSegmentElement;
        "ion-segment-button": HTMLIonSegmentButtonElement;
+        "ion-segment-content": HTMLIonSegmentContentElement;
+        "ion-segment-view": HTMLIonSegmentViewElement;
        "ion-select": HTMLIonSelectElement;
        "ion-select-option": HTMLIonSelectOptionElement;
        "ion-select-popover": HTMLIonSelectPopoverElement;
@@ -5321,7 +5383,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 +5403,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 +7001,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 +7013,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';
        /**
@@ -7433,6 +7495,10 @@ declare namespace LocalJSX {
          * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
         */
        "scrollable"?: boolean;
+        /**
+          * The `id` of the `segment-view` element to be associated with this segment.
+         */
+        "segmentViewId"?: string;
        /**
          * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
         */
@@ -7447,10 +7513,15 @@ declare namespace LocalJSX {
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
         */
        "disabled"?: boolean;
+        "hasIndicator"?: boolean;
        /**
          * Set the layout of the text and icon in the segment.
         */
@@ -7468,6 +7539,31 @@ declare namespace LocalJSX {
         */
        "value"?: SegmentValue;
    }
+    interface IonSegmentContent {
+        /**
+          * If `true`, the segment content will not be displayed.
+         */
+        "disabled"?: boolean;
+    }
+    interface IonSegmentView {
+        /**
+          * If `true`, the segment view cannot be interacted with.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the segment view is scrolled.
+         */
+        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  }>) => void;
+        /**
+          * Emitted when the segment view scroll has ended.
+         */
+        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void;
+        "onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent<void>) => void;
+    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
@@ -8020,7 +8116,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 +8136,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';
        /**
@@ -8159,6 +8255,8 @@ declare namespace LocalJSX {
        "ion-searchbar": IonSearchbar;
        "ion-segment": IonSegment;
        "ion-segment-button": IonSegmentButton;
+        "ion-segment-content": IonSegmentContent;
+        "ion-segment-view": IonSegmentView;
        "ion-select": IonSelect;
        "ion-select-option": IonSelectOption;
        "ion-select-popover": IonSelectPopover;
@@ -8258,6 +8356,8 @@ declare module "@stencil/core" {
            "ion-searchbar": LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
            "ion-segment": LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
            "ion-segment-button": LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
+            "ion-segment-content": LocalJSX.IonSegmentContent & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
+            "ion-segment-view": LocalJSX.IonSegmentView & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
            "ion-select": LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
            "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
            "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
--- 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/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Chrome-linux.png
--- a/Show More
+++ b/Show More