fix(item): align stacked and floating items start (#18379)

fixes #16375

core/src/components/input/test/spec/index.html

@@ -30,6 +30,10 @@
         <ion-label position="stacked">Stacked: input value</ion-label>
         <ion-input value="value"></ion-input>
       </ion-item>
+      <ion-item>
+        <ion-label position="stacked">Stacked: div</ion-label>
+        <div>A div</div>
+      </ion-item>
       <ion-item>
         <ion-label position="floating">Floating: textarea</ion-label>
         <ion-textarea></ion-textarea>

core/src/components/item-sliding/test/test.utils.ts

@@ -8,14 +8,36 @@ export async function openItemSliding(id: string, page: any, rtl = false) {
     const centerX = parseFloat(boundingBox.x + boundingBox.width / 2);
     const centerY = parseFloat(boundingBox.y + boundingBox.height / 2);
 
+    // In LTR start the drag at the center, move halfway in between the
+    // center and 0, then end at 0
+    //
+    //  0                                boundingBox.width
+    //  |---------|---------|---------|---------|
+    // endX     halfX    centerX
+
+    let halfX = centerX / 2;
     let endX = 0;
+
+    // In RTL start at the center, move halfway in between the center and
+    // the total width, then end at the total width
+    //
+    //  0                                boundingBox.width
+    //  |---------|---------|---------|---------|
+    //                   centerX    halfX      endX
+
     if (rtl) {
+      halfX = centerX + (centerX / 2);
       endX = boundingBox.width;
     }
 
+    // Start in the center of the item
     await page.mouse.move(centerX, centerY);
     await page.mouse.down();
-    await page.mouse.move(centerX / 2, centerY);
+
+    // Move halfway first
+    await page.mouse.move(halfX, centerY);
+
+    // Move all of the way to the end
     await page.mouse.move(endX, centerY);
     await page.mouse.up();
 

core/src/components/item/item.scss

@@ -255,6 +255,11 @@ button, a {
   box-sizing: border-box;
 }
 
+:host(.item-label-stacked) .item-native,
+:host(.item-label-floating) .item-native {
+  align-items: start;
+}
+
 :host(.item-label-stacked) .input-wrapper,
 :host(.item-label-floating) .input-wrapper {
   flex: 1;