feat(react): migrate to new React Output Target with Next.js support

2026-03-13 10:22:08 +08:00 · 2024-07-16 10:36:36 -07:00
972 changed files with 9639 additions and 9232 deletions
--- 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, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
+          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva
          numOfAssignee: 1
          allowSelfAssign: false
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,78 +3,6 @@
 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)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,73 +3,6 @@
 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
--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.46.1
+FROM mcr.microsoft.com/playwright:v1.44.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" | undefined,undefined,false,false
+ion-checkbox,prop,alignment,"center" | "start",'center',false,false
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
-ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',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
@@ -1319,10 +1319,10 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track

 ion-radio,shadow
-ion-radio,prop,alignment,"center" | "start" | undefined,undefined,false,false
+ion-radio,prop,alignment,"center" | "start",'center',false,false
 ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
-ion-radio,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',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,7 +1541,6 @@ 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
@@ -1607,16 +1606,6 @@ 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
@@ -1626,7 +1615,7 @@ ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
-ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-select,prop,justify,"end" | "space-between" | "start",'space-between',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
@@ -1933,12 +1922,12 @@ ion-toast,part,icon
 ion-toast,part,message

 ion-toggle,shadow
-ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
+ion-toggle,prop,alignment,"center" | "start",'center',false,false
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
-ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',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,5 +67,4 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
  'toHaveTitle',
  'toHaveURL',
  'toBeOK',
-  'click'
 ];
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.3.1",
+  "version": "8.2.5",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,12 +31,12 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "4.20.0",
+    "@stencil/core": "^4.19.2",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.10.0",
+    "@axe-core/playwright": "^4.9.1",
    "@capacitor/core": "^6.0.0",
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/keyboard": "^6.0.0",
@@ -44,13 +44,13 @@
    "@clack/prompts": "^0.7.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.44.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.0.1-dev.11721063914.1cb11145",
    "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.9",
+    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
--- 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. Setting this property will change the checkbox `display` to `block`.
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "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. Setting this property will change the checkbox `display` to `block`.
+          * 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.
         */
-        "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. Setting this property will change the radio `display` to `block`.
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "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. Setting this property will change the radio `display` to `block`.
+          * 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.
         */
-        "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,10 +2676,6 @@ 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.
         */
@@ -2694,15 +2690,10 @@ 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.
         */
@@ -2721,24 +2712,6 @@ 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.
@@ -2775,7 +2748,7 @@ export namespace Components {
        /**
          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
         */
-        "justify"?: 'start' | 'end' | 'space-between';
+        "justify": 'start' | 'end' | 'space-between';
        /**
          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
@@ -3241,9 +3214,9 @@ export namespace Components {
    }
    interface IonToggle {
        /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "alignment": 'start' | 'center';
        /**
          * If `true`, the toggle is selected.
         */
@@ -3261,9 +3234,9 @@ export namespace Components {
         */
        "enableOnOffLabels": boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
+          * 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.
         */
-        "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.
         */
@@ -3440,10 +3413,6 @@ 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;
@@ -4440,35 +4409,6 @@ 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;
@@ -4778,8 +4718,6 @@ 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;
@@ -5383,7 +5321,7 @@ declare namespace LocalJSX {
    }
    interface IonCheckbox {
        /**
-          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -5403,7 +5341,7 @@ declare namespace LocalJSX {
         */
        "indeterminate"?: boolean;
        /**
-          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
+          * 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.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -7001,7 +6939,7 @@ declare namespace LocalJSX {
    }
    interface IonRadio {
        /**
-          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -7013,7 +6951,7 @@ declare namespace LocalJSX {
         */
        "disabled"?: boolean;
        /**
-          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
+          * 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.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -7495,10 +7433,6 @@ 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.
         */
@@ -7513,15 +7447,10 @@ 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.
         */
@@ -7539,31 +7468,6 @@ 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.
@@ -8116,7 +8020,7 @@ declare namespace LocalJSX {
    }
    interface IonToggle {
        /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -8136,7 +8040,7 @@ declare namespace LocalJSX {
         */
        "enableOnOffLabels"?: boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
+          * 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.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -8255,8 +8159,6 @@ 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;
@@ -8356,8 +8258,6 @@ 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/);

-      await accordion.click();
+      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/);

-      await accordion.click();
+      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/);

-      await accordion.click();
+      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/);

-      await accordion.click();
+      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,9 +310,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  componentWillLoad() {
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    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
@@ -0,0 +1,41 @@
+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
@@ -1,55 +0,0 @@
-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/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
@@ -0,0 +1,41 @@
+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
@@ -1,55 +0,0 @@
-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/alert/test/alert.spec.tsx
+++ b/core/src/components/alert/test/alert.spec.tsx
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';

 import { config } from '../../../global/config';
 import { Alert } from '../alert';
+import { h } from '@stencil/core';

 describe('alert: custom html', () => {
  it('should not allow for custom html by default', async () => {
@@ -38,4 +39,15 @@ describe('alert: custom html', () => {
    expect(content.textContent).toContain('Custom Text');
    expect(content.querySelector('button.custom-html')).toBe(null);
  });
+
+  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,7 +72,6 @@
  flex-grow: 1;

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

  height: inherit;

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

-// 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 {
+:host(.in-item) .label-text-wrapper {
  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }

@@ -174,20 +170,6 @@ 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,17 +86,15 @@ 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';
+  @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';

  /**
   * How to control the alignment of the checkbox and label on the cross axis.
   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
-   * Setting this property will change the checkbox `display` to `block`.
   */
-  @Prop() alignment?: 'start' | 'center';
+  @Prop() alignment: 'start' | 'center' = 'center';

  /**
   * Emitted when the checked property has changed as a result of a user action such as a click.
@@ -196,8 +194,8 @@ export class Checkbox implements ComponentInterface {
          'checkbox-disabled': disabled,
          'checkbox-indeterminate': indeterminate,
          interactive: true,
-          [`checkbox-justify-${justify}`]: justify !== undefined,
-          [`checkbox-alignment-${alignment}`]: alignment !== undefined,
+          [`checkbox-justify-${justify}`]: true,
+          [`checkbox-alignment-${alignment}`]: true,
          [`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 checked>Checked</ion-checkbox>
+            <ion-checkbox justify="start" checked>Checked</ion-checkbox>
          `,
          config
        );
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -15,6 +15,7 @@
  </head>
  <style>
    ion-checkbox {
+      display: block;
      margin-bottom: 8px;
    }

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

      <ion-content class="ion-padding">
-        <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 />
+        <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-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'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['md'] }).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,28 +69,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
      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,15 +181,6 @@
              </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,50 +2,20 @@ 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 should take up the full line (such as in an
- * ion-item or when it has 100% width).
+ * 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.
 */
 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">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -57,7 +27,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">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -69,7 +39,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">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -81,7 +51,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">
+           <ion-checkbox label-placement="start" justify="start" style="width: 200px">
             Long Label Long Label Long Label Long Label Long Label Long Label
           </ion-checkbox>
         `,
@@ -89,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
        );

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

@@ -97,7 +67,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">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -109,7 +79,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">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -121,7 +91,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">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
         `,
          config
        );
@@ -135,7 +105,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">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -147,7 +117,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">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -159,7 +129,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">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
         `,
          config
        );
@@ -173,7 +143,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">This is a long label</ion-checkbox>
+            <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
          `,
          config
        );
@@ -185,7 +155,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">This is a long label</ion-checkbox>
+            <ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
          `,
          config
        );
@@ -202,7 +172,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">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
+          <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
        `,
        config
      );
--- 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/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-end-justify-start-md-rtl-Mobile-Firefox-linux.png
--- a/Show More
+++ b/Show More