test(item): use modern form syntax (#27186)

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are tests for `ion-item` that use the legacy syntax for form
controls, without being in the `/legacy` test folder.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the tests to use the modern form syntax
- Moves the `fill` and `form` tests to a `/legacy` folder
- Removes invalid control UI from test templates (i.e. rendering a
segment with other controls in a single item).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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>

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>

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`);
   });
 });

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>

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`);
+  });
+});

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>

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`);
+  });
+});

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>

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();
 

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>

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 });