diff --git a/core/src/components/item/test/alignment/index.html b/core/src/components/item/test/alignment/index.html
index 5429c9007f..66ac739fe0 100644
--- a/core/src/components/item/test/alignment/index.html
+++ b/core/src/components/item/test/alignment/index.html
@@ -27,11 +27,11 @@
           <ion-list-header>Leading Icons</ion-list-header>
           <ion-item>
             <ion-icon slot="start" name="radio-button-off"></ion-icon>
-            <ion-input placeholder="Choose Starting Point"></ion-input>
+            <ion-input aria-label="Starting Point" placeholder="Choose Starting Point"></ion-input>
           </ion-item>
           <ion-item>
             <ion-icon slot="start" name="pin"></ion-icon>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select aria-label="Destination" placeholder="Choose Really Really Long Destination Here">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -41,12 +41,10 @@
         <ion-list>
           <ion-list-header>Default Labels</ion-list-header>
           <ion-item>
-            <ion-label>From</ion-label>
-            <ion-input placeholder="Choose Starting Point"></ion-input>
+            <ion-input label="From" placeholder="Choose Starting Point"></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label>Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select label="Destination" placeholder="Choose Really Really Long Destination Here">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -56,12 +54,14 @@
         <ion-list>
           <ion-list-header>Fixed Labels</ion-list-header>
           <ion-item>
-            <ion-label position="fixed">From</ion-label>
-            <ion-input placeholder="Choose Starting Point"></ion-input>
+            <ion-input label="From" label-placement="fixed" placeholder="Choose Starting Point"></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label position="fixed">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select
+              label="Destination"
+              label-placement="fixed"
+              placeholder="Choose Really Really Long Destination Here"
+            >
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -71,12 +71,10 @@
         <ion-list>
           <ion-list-header>Floating Labels</ion-list-header>
           <ion-item>
-            <ion-label position="floating">From</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="From" label-placement="floating"></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label position="floating">Destination</ion-label>
-            <ion-select>
+            <ion-select label="Destination" label-placement="floating">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -86,12 +84,14 @@
         <ion-list>
           <ion-list-header>Stacked Labels</ion-list-header>
           <ion-item>
-            <ion-label position="stacked">From</ion-label>
-            <ion-input placeholder="Choose Starting Point"></ion-input>
+            <ion-input label="From" label-placement="stacked" placeholder="Choose Starting Point"></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select
+              label="Destination"
+              label-placement="stacked"
+              placeholder="Choose Really Really Long Destination Here"
+            >
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -101,12 +101,14 @@
         <ion-list>
           <ion-list-header>End Labels</ion-list-header>
           <ion-item>
-            <ion-label slot="end">From</ion-label>
-            <ion-input placeholder="Choose Starting Point"></ion-input>
+            <ion-input label="From" label-placement="end" placeholder="Choose Starting Point"></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label slot="end">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select
+              label="Destination"
+              label-placement="end"
+              placeholder="Choose Really Really Long Destination Here"
+            >
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png
index 98c953b8e0..df5de07f81 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png
index a49a925de1..921b687e05 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png
index 7cb6a83972..44c3b53f82 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png
index f9c2de8c19..da97669615 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png
index d30c4a9254..1050426d53 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png
index 04faa7fefd..1654fcfc25 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png
index 28726cb818..a9eff2ce75 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png
index a6719f8eb0..d3396382cc 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png
index 079c0463f2..6231ea2f80 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png
index 543c3d752d..4986774144 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png
index 70952228c9..3dc2c821e2 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png
index 7c43091f4d..6a82537391 100644
Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html
index d4c645ee57..91e14fb24c 100644
--- a/core/src/components/item/test/disabled/index.html
+++ b/core/src/components/item/test/disabled/index.html
@@ -40,13 +40,7 @@
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Datetime</ion-label>
-            <ion-datetime disabled value="2019"></ion-datetime>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Disabled Select</ion-label>
-            <ion-select disabled value="n64">
+            <ion-select label="Disabled Select" disabled value="n64">
               <ion-select-option value="">No Game Console</ion-select-option>
               <ion-select-option value="nes">NES</ion-select-option>
               <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -58,23 +52,21 @@
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Input</ion-label>
-            <ion-input placeholder="Disabled" disabled></ion-input>
+            <ion-input label="Disabled Input" placeholder="Disabled" disabled></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Toggle</ion-label>
-            <ion-toggle disabled checked slot="end"></ion-toggle>
+            <ion-toggle disabled checked> Disabled Toggle </ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Checkbox</ion-label>
-            <ion-checkbox disabled checked slot="start"></ion-checkbox>
+            <ion-checkbox disabled checked> Disabled Checkbox </ion-checkbox>
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Range</ion-label>
-            <ion-range disabled value="10"></ion-range>
+            <ion-range disabled value="10">
+              <span slot="label">Disabled Range</span>
+            </ion-range>
           </ion-item>
         </ion-list>
 
@@ -84,45 +76,45 @@
           </ion-list-header>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
-            <ion-input placeholder="Disabled Checkbox w/ Input"></ion-input>
+            <ion-checkbox aria-label="Checkbox" disabled slot="start"></ion-checkbox>
+            <ion-input aria-label="Input" placeholder="Disabled Checkbox w/ Input"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="end"></ion-checkbox>
-            <ion-input placeholder="Disabled Checkbox w/ Input"></ion-input>
+            <ion-checkbox aria-label="Checkbox" disabled slot="end"></ion-checkbox>
+            <ion-input aria-label="Input" placeholder="Disabled Checkbox w/ Input"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-radio disabled slot="start"></ion-radio>
-            <ion-input placeholder="Disabled Radio w/ Input"></ion-input>
+            <ion-radio aria-label="Radio" disabled slot="start"></ion-radio>
+            <ion-input aria-label="Input" placeholder="Disabled Radio w/ Input"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-radio disabled slot="end"></ion-radio>
-            <ion-input placeholder="Disabled Radio w/ Input"></ion-input>
+            <ion-radio aria-label="Radio" disabled slot="end"></ion-radio>
+            <ion-input aria-label="Input" placeholder="Disabled Radio w/ Input"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox aria-label="Checkbox" disabled slot="start"></ion-checkbox>
             <ion-label>Checkbox + Radio</ion-label>
-            <ion-radio slot="end"></ion-radio>
+            <ion-radio aria-label="Radio" slot="end"></ion-radio>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
-            <ion-radio slot="start"></ion-radio>
+            <ion-checkbox aria-label="Checkbox" disabled slot="start"></ion-checkbox>
+            <ion-radio aria-label="Radio" slot="start"></ion-radio>
             <ion-label>Checkbox + Radio</ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Selects</ion-label>
-            <ion-select placeholder="month">
+            <ion-label slot="start">Disabled Selects</ion-label>
+            <ion-select aria-label="Month" placeholder="month">
               <ion-select-option value="1">January</ion-select-option>
               <ion-select-option value="2">February</ion-select-option>
               <ion-select-option value="3">March</ion-select-option>
             </ion-select>
-            <ion-select disabled placeholder="year">
+            <ion-select aria-label="Year" disabled placeholder="year">
               <ion-select-option value="1990">1990</ion-select-option>
               <ion-select-option value="1991">1991</ion-select-option>
               <ion-select-option value="1992">1992</ion-select-option>
@@ -135,40 +127,26 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox slot="start" aria-label="Checkbox"></ion-checkbox>
             <ion-label>Checkbox + Range</ion-label>
-            <ion-range disabled value="45"></ion-range>
+            <ion-range disabled value="45" aria-label="Range"></ion-range>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox aria-label="Checkbox" slot="start"></ion-checkbox>
             <ion-label>Checkbox + Toggle</ion-label>
-            <ion-toggle disabled value="45"></ion-toggle>
+            <ion-toggle aria-label="Checkbox" disabled value="45"></ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox aria-label="Checkbox" disabled slot="start"></ion-checkbox>
             <ion-label>Checkbox + Buttons</ion-label>
             <ion-button slot="end">Default</ion-button>
             <ion-button slot="end">Buttons</ion-button>
           </ion-item>
 
           <ion-item>
-            <ion-label>Disabled Input</ion-label>
-            <ion-input slot="start" placeholder="Disabled" disabled></ion-input>
-            <ion-segment>
-              <ion-segment-button value="friends">
-                <ion-label>Friends</ion-label>
-              </ion-segment-button>
-              <ion-segment-button value="enemies">
-                <ion-label>Enemies</ion-label>
-              </ion-segment-button>
-            </ion-segment>
-          </ion-item>
-
-          <ion-item>
-            <ion-checkbox slot="start" disabled></ion-checkbox>
-            <ion-label>Disabled Checkbox</ion-label>
+            <ion-checkbox slot="start" disabled aria-label="Checkbox"></ion-checkbox>
             <ion-searchbar></ion-searchbar>
           </ion-item>
         </ion-list>
diff --git a/core/src/components/item/test/disabled/item.e2e.ts b/core/src/components/item/test/disabled/item.e2e.ts
index e215836e33..d443d8e3b0 100644
--- a/core/src/components/item/test/disabled/item.e2e.ts
+++ b/core/src/components/item/test/disabled/item.e2e.ts
@@ -7,6 +7,7 @@ test.describe('item: disabled state', () => {
 
     await page.setIonViewport();
 
+    // TODO: FW-4037 - Fix label color inconsistency between disabled controls
     await expect(page).toHaveScreenshot(`item-disabled-diff-${page.getSnapshotSettings()}.png`);
   });
 });
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png
index 034bb8e7c2..b173700334 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png
index e7b441f903..3c81cfe3eb 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png
index 4d217f7988..2517894983 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png
index 88f05a7a8b..80536800e0 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png
index 9ff193516a..1523cb13cc 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png
index f68392b035..a26a6d404b 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png
index efaa9b8763..2f3a1e84ec 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
index cf1075a53a..afe935fe28 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png
index 7670602f0a..b95fc3fdb5 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png
index 5393b68d0d..6d006dcd69 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png
index bb0b29407e..97e57d0f1e 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png
index 5d6ee5ceb4..84b416bb2b 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index f894aafcdf..0000000000
Binary files a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 51f52ecf16..0000000000
Binary files a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 47a22c6260..0000000000
Binary files a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 28874dc524..0000000000
Binary files a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/legacy/alignment/index.html b/core/src/components/item/test/legacy/alignment/index.html
new file mode 100644
index 0000000000..e4f9a35514
--- /dev/null
+++ b/core/src/components/item/test/legacy/alignment/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Item - Alignment</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item - Alignment</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-list-header>Leading Icons</ion-list-header>
+          <ion-item>
+            <ion-icon slot="start" name="radio-button-off"></ion-icon>
+            <ion-input placeholder="Choose Starting Point" legacy="true"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-icon slot="start" name="pin"></ion-icon>
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Default Labels</ion-list-header>
+          <ion-item>
+            <ion-label>From</ion-label>
+            <ion-input placeholder="Choose Starting Point"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label>Destination</ion-label>
+            <ion-select placeholder="Choose Really Really Long Destination Here">
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Fixed Labels</ion-list-header>
+          <ion-item>
+            <ion-label position="fixed">From</ion-label>
+            <ion-input placeholder="Choose Starting Point"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="fixed">Destination</ion-label>
+            <ion-select placeholder="Choose Really Really Long Destination Here">
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Floating Labels</ion-list-header>
+          <ion-item>
+            <ion-label position="floating">From</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="floating">Destination</ion-label>
+            <ion-select>
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Stacked Labels</ion-list-header>
+          <ion-item>
+            <ion-label position="stacked">From</ion-label>
+            <ion-input placeholder="Choose Starting Point"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label position="stacked">Destination</ion-label>
+            <ion-select placeholder="Choose Really Really Long Destination Here">
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>End Labels</ion-list-header>
+          <ion-item>
+            <ion-label slot="end">From</ion-label>
+            <ion-input placeholder="Choose Starting Point"></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label slot="end">Destination</ion-label>
+            <ion-select placeholder="Choose Really Really Long Destination Here">
+              <ion-select-option>Madison, WI</ion-select-option>
+              <ion-select-option>Atlanta, GA</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-item {
+        --border-width: 0;
+        --inner-border-width: 0;
+        --background: #ddd;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+    </style>
+  </body>
+</html>
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts b/core/src/components/item/test/legacy/alignment/item.e2e.ts
new file mode 100644
index 0000000000..5dfb6456ef
--- /dev/null
+++ b/core/src/components/item/test/legacy/alignment/item.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: alignment', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/legacy/alignment`);
+
+    await page.setIonViewport();
+
+    await expect(page).toHaveScreenshot(`item-alignment-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c8dd332d5f
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2d77b74bc9
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0f43354740
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6695c22473
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6b1e8351cc
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1665b93af8
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..28726cb818
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..60c7f53ab5
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..079c0463f2
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..543c3d752d
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a6aba2c30d
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7c43091f4d
Binary files /dev/null and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html
new file mode 100644
index 0000000000..a728328928
--- /dev/null
+++ b/core/src/components/item/test/legacy/disabled/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Item - Disabled</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item: Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding-vertical">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Single Input Disabled Items</ion-label>
+          </ion-list-header>
+
+          <ion-item disabled>
+            <ion-label>Disabled Item</ion-label>
+          </ion-item>
+
+          <ion-item disabled button>
+            <ion-label>Disabled Item Button</ion-label>
+          </ion-item>
+
+          <ion-item disabled href="#">
+            <ion-label>Disabled Item Anchor</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Select</ion-label>
+            <ion-select disabled value="n64">
+              <ion-select-option value="">No Game Console</ion-select-option>
+              <ion-select-option value="nes">NES</ion-select-option>
+              <ion-select-option value="n64">Nintendo64</ion-select-option>
+              <ion-select-option value="ps">PlayStation</ion-select-option>
+              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+              <ion-select-option value="snes">SNES</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Input</ion-label>
+            <ion-input placeholder="Disabled" disabled></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Toggle</ion-label>
+            <ion-toggle disabled checked slot="end"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Checkbox</ion-label>
+            <ion-checkbox disabled checked slot="start"></ion-checkbox>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Range</ion-label>
+            <ion-range disabled value="10"></ion-range>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Multiple Input Disabled Items</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
+            <ion-input placeholder="Disabled Checkbox w/ Input" legacy="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox disabled slot="end" legacy="true"></ion-checkbox>
+            <ion-input placeholder="Disabled Checkbox w/ Input" legacy="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-radio disabled slot="start" legacy="true"></ion-radio>
+            <ion-input placeholder="Disabled Radio w/ Input" legacy="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-radio disabled slot="end" legacy="true"></ion-radio>
+            <ion-input placeholder="Disabled Radio w/ Input" legacy="true"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-label>Checkbox + Radio</ion-label>
+            <ion-radio slot="end"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-radio slot="start"></ion-radio>
+            <ion-label>Checkbox + Radio</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Selects</ion-label>
+            <ion-select placeholder="month">
+              <ion-select-option value="1">January</ion-select-option>
+              <ion-select-option value="2">February</ion-select-option>
+              <ion-select-option value="3">March</ion-select-option>
+            </ion-select>
+            <ion-select disabled placeholder="year">
+              <ion-select-option value="1990">1990</ion-select-option>
+              <ion-select-option value="1991">1991</ion-select-option>
+              <ion-select-option value="1992">1992</ion-select-option>
+              <ion-select-option value="1993">1993</ion-select-option>
+              <ion-select-option value="1994">1994</ion-select-option>
+              <ion-select-option value="1995">1995</ion-select-option>
+              <ion-select-option value="1996">1996</ion-select-option>
+              <ion-select-option value="1997">1997</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-label>Checkbox + Range</ion-label>
+            <ion-range disabled value="45"></ion-range>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-label>Checkbox + Toggle</ion-label>
+            <ion-toggle disabled value="45"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-label>Checkbox + Buttons</ion-label>
+            <ion-button slot="end">Default</ion-button>
+            <ion-button slot="end">Buttons</ion-button>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled Input</ion-label>
+            <ion-input slot="start" placeholder="Disabled" disabled></ion-input>
+            <ion-segment>
+              <ion-segment-button value="friends">
+                <ion-label>Friends</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="enemies">
+                <ion-label>Enemies</ion-label>
+              </ion-segment-button>
+            </ion-segment>
+          </ion-item>
+
+          <ion-item>
+            <ion-checkbox slot="start" disabled></ion-checkbox>
+            <ion-label>Disabled Checkbox</ion-label>
+            <ion-searchbar></ion-searchbar>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button onClick="toggleDisabled()">Toggle</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+
+    <script>
+      const disabledEls = document.querySelectorAll('[disabled]');
+
+      function toggleDisabled() {
+        for (var i = 0; i < disabledEls.length; i++) {
+          disabledEls[i].disabled = !disabledEls[i].disabled;
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts b/core/src/components/item/test/legacy/disabled/item.e2e.ts
new file mode 100644
index 0000000000..116790e309
--- /dev/null
+++ b/core/src/components/item/test/legacy/disabled/item.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: disabled state', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/legacy/disabled`);
+
+    await page.setIonViewport();
+
+    await expect(page).toHaveScreenshot(`item-disabled-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfbbd7762d
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..784f4c4160
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..359ba33681
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4b47b30be4
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3a4b76c5f8
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..64cb2c49d9
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1fa8fce932
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1ed264e02f
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..51c35b2405
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e2fe464ded
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9a5f89fd4f
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..677b343c1f
Binary files /dev/null and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/fill/index.html b/core/src/components/item/test/legacy/fill/index.html
similarity index 95%
rename from core/src/components/item/test/fill/index.html
rename to core/src/components/item/test/legacy/fill/index.html
index 174fb20f94..034764e720 100644
--- a/core/src/components/item/test/fill/index.html
+++ b/core/src/components/item/test/legacy/fill/index.html
@@ -379,21 +379,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-input></ion-input>
+                <ion-input legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-input value="Has Initial Value"></ion-input>
+                <ion-input value="Has Initial Value" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round">
-                <ion-input></ion-input>
+                <ion-input legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -402,21 +402,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid" class="item-has-focus">
-                <ion-input></ion-input>
+                <ion-input legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" class="item-has-focus">
-                <ion-input value="Has Initial Value"></ion-input>
+                <ion-input value="Has Initial Value" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round" class="item-has-focus">
-                <ion-input></ion-input>
+                <ion-input legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -429,21 +429,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid" counter="true">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" counter="true">
-                <ion-input value="Has Initial Value" maxlength="20"></ion-input>
+                <ion-input value="Has Initial Value" maxlength="20" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round" counter="true">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -452,21 +452,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid" counter="true" class="item-has-focus">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" counter="true" class="item-has-focus">
-                <ion-input value="Has Initial Value" maxlength="20"></ion-input>
+                <ion-input value="Has Initial Value" maxlength="20" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round" counter="true" class="item-has-focus">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -535,21 +535,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-textarea></ion-textarea>
+                <ion-textarea legacy="true"></ion-textarea>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-textarea value="Has Initial Value"></ion-textarea>
+                <ion-textarea value="Has Initial Value" legacy="true"></ion-textarea>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round">
-                <ion-textarea></ion-textarea>
+                <ion-textarea legacy="true"></ion-textarea>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -614,21 +614,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid" counter="true">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" counter="true">
-                <ion-input value="Has Initial Value" maxlength="20"></ion-input>
+                <ion-input value="Has Initial Value" maxlength="20" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round" counter="true">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -637,21 +637,21 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid" counter="true" class="item-has-focus">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" counter="true" class="item-has-focus">
-                <ion-input value="Has Initial Value" maxlength="20"></ion-input>
+                <ion-input value="Has Initial Value" maxlength="20" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline" shape="round" counter="true" class="item-has-focus">
-                <ion-input maxlength="10"></ion-input>
+                <ion-input maxlength="10" legacy="true"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
diff --git a/core/src/components/item/test/fill/item.e2e.ts b/core/src/components/item/test/legacy/fill/item.e2e.ts
similarity index 84%
rename from core/src/components/item/test/fill/item.e2e.ts
rename to core/src/components/item/test/legacy/fill/item.e2e.ts
index 2343d8f37e..43fcd787ef 100644
--- a/core/src/components/item/test/fill/item.e2e.ts
+++ b/core/src/components/item/test/legacy/fill/item.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright';
 
 test.describe('item: fill', () => {
   test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/item/test/fill`);
+    await page.goto(`/src/components/item/test/legacy/fill`);
 
     await page.setIonViewport();
 
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 69%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png
index 3c34151253..f9da7aca3c 100644
Binary files a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png
similarity index 69%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png
index 8f2e02dc6b..5aa0c8b857 100644
Binary files a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png
similarity index 68%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png
index 5d6abaced5..e4c746bc36 100644
Binary files a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/form/index.html b/core/src/components/item/test/legacy/form/index.html
similarity index 74%
rename from core/src/components/item/test/form/index.html
rename to core/src/components/item/test/legacy/form/index.html
index 05a35b0a02..ec9736a44f 100644
--- a/core/src/components/item/test/form/index.html
+++ b/core/src/components/item/test/legacy/form/index.html
@@ -7,11 +7,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <link href="../../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
       .grid {
         display: grid;
@@ -44,126 +44,126 @@
           <div class="grid-item">
             <h2>No fill, Invalid, untouched</h2>
             <ion-item class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>No fill, Invalid, untouched, focused</h2>
             <ion-item class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>No fill, Invalid, touched</h2>
             <ion-item class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>No fill, Valid, untouched</h2>
             <ion-item class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>No fill, Valid, untouched, focused</h2>
             <ion-item class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>No fill, Valid, touched</h2>
             <ion-item class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Invalid, untouched</h2>
             <ion-item fill="outline" class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Invalid, untouched, focused</h2>
             <ion-item fill="outline" class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Invalid, touched</h2>
             <ion-item fill="outline" class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Valid, untouched</h2>
             <ion-item fill="outline" class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Valid, untouched, focused</h2>
             <ion-item fill="outline" class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Outline, Valid, touched</h2>
             <ion-item fill="outline" class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Invalid, untouched</h2>
             <ion-item fill="solid" class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Invalid, untouched, focused</h2>
             <ion-item fill="solid" class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Invalid, touched</h2>
             <ion-item fill="solid" class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Valid, untouched</h2>
             <ion-item fill="solid" class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Valid, untouched, focused</h2>
             <ion-item fill="solid" class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Solid, Valid, touched</h2>
             <ion-item fill="solid" class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
         </div>
@@ -172,126 +172,126 @@
           <div class="grid-item">
             <h2>Color, No fill, Invalid, untouched</h2>
             <ion-item color="primary" class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, No fill, Invalid, untouched, focused</h2>
             <ion-item color="primary" class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, No fill, Invalid, touched</h2>
             <ion-item color="primary" class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, No fill, Valid, untouched</h2>
             <ion-item color="primary" class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, No fill, Valid, untouched, focused</h2>
             <ion-item color="primary" class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, No fill, Valid, touched</h2>
             <ion-item color="primary" class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Invalid, untouched</h2>
             <ion-item color="primary" fill="outline" class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Invalid, untouched, focused</h2>
             <ion-item color="primary" fill="outline" class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Invalid, touched</h2>
             <ion-item color="primary" fill="outline" class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Valid, untouched</h2>
             <ion-item color="primary" fill="outline" class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Valid, untouched, focused</h2>
             <ion-item color="primary" fill="outline" class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Outline, Valid, touched</h2>
             <ion-item color="primary" fill="outline" class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Invalid, untouched</h2>
             <ion-item color="primary" fill="solid" class="ion-invalid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Invalid, untouched, focused</h2>
             <ion-item color="primary" fill="solid" class="ion-invalid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Invalid, touched</h2>
             <ion-item color="primary" fill="solid" class="ion-invalid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Valid, untouched</h2>
             <ion-item color="primary" fill="solid" class="ion-valid ion-untouched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Valid, untouched, focused</h2>
             <ion-item color="primary" fill="solid" class="ion-valid ion-untouched item-has-focus">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
 
           <div class="grid-item">
             <h2>Color, Solid, Valid, touched</h2>
             <ion-item color="primary" fill="solid" class="ion-valid ion-touched">
-              <ion-input placeholder="Text"></ion-input>
+              <ion-input placeholder="Text" legacy="true"></ion-input>
             </ion-item>
           </div>
         </div>
diff --git a/core/src/components/item/test/form/item.e2e.ts b/core/src/components/item/test/legacy/form/item.e2e.ts
similarity index 85%
rename from core/src/components/item/test/form/item.e2e.ts
rename to core/src/components/item/test/legacy/form/item.e2e.ts
index e55b42d8e7..eb292390b4 100644
--- a/core/src/components/item/test/form/item.e2e.ts
+++ b/core/src/components/item/test/legacy/form/item.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright';
 
 test.describe('item: form', () => {
   test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/item/test/form`);
+    await page.goto(`/src/components/item/test/legacy/form`);
 
     await page.setIonViewport({ resizeViewportWidth: true });
 
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..88b981e542
Binary files /dev/null and b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..99b9b0792a
Binary files /dev/null and b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a6efa699d2
Binary files /dev/null and b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f90bc89e4e
Binary files /dev/null and b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/item/test/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/item/test/legacy/form/item.e2e.ts-snapshots/item-form-diff-md-rtl-Mobile-Safari-linux.png