@ionic/core 7.5.7 → 7.5.8-dev.11701293337.112ba209

package/dist/collection/components/textarea/test/highlight/textarea.e2e.js

@@ -7,10 +7,10 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  * The textarea highlight does not vary across directions.
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('textarea: highlights'), () => {
-    test.describe('textarea: no fill', () => {
-      test('should render valid state correctly', async ({ page }) => {
-        await page.setContent(`
+    test.describe(title('textarea: highlights'), () => {
+        test.describe('textarea: no fill', () => {
+            test('should render valid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             value="hi@ionic.io"
             class="ion-valid has-focus"
@@ -21,11 +21,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
-      });
-      test('should render invalid state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
+            });
+            test('should render invalid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             value="hi@ionic.io"
             class="ion-touched ion-invalid"
@@ -36,11 +36,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
-      });
-      test('should render focused state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
+            });
+            test('should render focused state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             value="hi@ionic.io"
             class="has-focus"
@@ -51,13 +51,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
-      });
-    });
-    test.describe('textarea: solid', () => {
-      test('should render valid state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
+            });
+        });
+        test.describe('textarea: solid', () => {
+            test('should render valid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="solid"
             value="hi@ionic.io"
@@ -69,11 +69,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-valid`));
-      });
-      test('should render invalid state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-valid`));
+            });
+            test('should render invalid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="solid"
             value="hi@ionic.io"
@@ -85,11 +85,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-invalid`));
-      });
-      test('should render focused state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-invalid`));
+            });
+            test('should render focused state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="solid"
             value="hi@ionic.io"
@@ -101,13 +101,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
-      });
-    });
-    test.describe('textarea: outline', () => {
-      test('should render valid state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
+            });
+        });
+        test.describe('textarea: outline', () => {
+            test('should render valid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="outline"
             value="hi@ionic.io"
@@ -119,11 +119,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-valid`));
-      });
-      test('should render invalid state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-valid`));
+            });
+            test('should render invalid state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="outline"
             value="hi@ionic.io"
@@ -135,11 +135,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-invalid`));
-      });
-      test('should render focused state correctly', async ({ page }) => {
-        await page.setContent(`
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-invalid`));
+            });
+            test('should render focused state correctly', async ({ page }) => {
+                await page.setContent(`
           <ion-textarea
             fill="outline"
             value="hi@ionic.io"
@@ -151,9 +151,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             maxlength="20"
           ></ion-textarea>
         `, config);
-        const textarea = page.locator('ion-textarea');
-        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
-      });
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
+            });
+        });
     });
-  });
 });

package/dist/collection/components/textarea/test/item/textarea.e2e.js

@@ -4,9 +4,9 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('textarea: item'), () => {
-    test('should render correctly in list with no fill', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: item'), () => {
+        test('should render correctly in list with no fill', async ({ page }) => {
+            await page.setContent(`
         <ion-list>
           <ion-item>
             <ion-textarea
@@ -19,11 +19,11 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-item>
         </ion-list>
       `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`textarea-list-no-fill`));
-    });
-    test('should render correctly in inset list with no fill', async ({ page }) => {
-      await page.setContent(`
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`textarea-list-no-fill`));
+        });
+        test('should render correctly in inset list with no fill', async ({ page }) => {
+            await page.setContent(`
         <ion-list inset="true">
           <ion-item>
             <ion-textarea
@@ -36,8 +36,8 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-item>
         </ion-list>
       `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`textarea-inset-list-no-fill`));
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`textarea-inset-list-no-fill`));
+        });
     });
-  });
 });

package/dist/collection/components/textarea/test/label-placement/textarea.e2e.js

@@ -4,212 +4,212 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('textarea: label placement start'), () => {
-    test('label should appear on the starting side of the textarea', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label placement start'), () => {
+        test('label should appear on the starting side of the textarea', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="start"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start`));
-    });
-    test('textarea should render multiple lines of text', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start`));
+        });
+        test('textarea should render multiple lines of text', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Standard" label-placement="start" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start-multi-line-value`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start-multi-line-value`));
+        });
     });
-  });
-  test.describe(title('textarea: label placement end'), () => {
-    test('label should appear on the ending side of the textarea', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label placement end'), () => {
+        test('label should appear on the ending side of the textarea', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="end"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end`));
-    });
-    test('textarea should render multiple lines of text', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end`));
+        });
+        test('textarea should render multiple lines of text', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Standard" label-placement="end" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end-multi-line-value`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end-multi-line-value`));
+        });
     });
-  });
-  test.describe(title('textarea: label placement fixed'), () => {
-    test('label should appear on the starting side of the textarea and have a fixed width', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label placement fixed'), () => {
+        test('label should appear on the starting side of the textarea and have a fixed width', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="fixed"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed`));
-    });
-    test('textarea should render multiple lines of text', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed`));
+        });
+        test('textarea should render multiple lines of text', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Standard" label-placement="fixed" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-multi-line-value`));
-    });
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-multi-line-value`));
+        });
+        test('label should be truncated', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="fixed"></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-label-truncated`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-label-truncated`));
+        });
     });
-  });
-  test.describe(title('textarea: label placement stacked'), () => {
-    test('label should appear above the textarea when there is a value', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label placement stacked'), () => {
+        test('label should appear above the textarea when there is a value', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="stacked"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-value`));
-    });
-    test('label should appear above the textarea when there is a no value', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-value`));
+        });
+        test('label should appear above the textarea when there is a no value', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" label-placement="stacked"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-no-value`));
-    });
-    test('textarea should render multiple lines of text', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-no-value`));
+        });
+        test('textarea should render multiple lines of text', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Standard" label-placement="stacked" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-multi-line-value`));
-    });
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-multi-line-value`));
+        });
+        test('label should be truncated', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="stacked"></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-label-truncated`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-label-truncated`));
+        });
     });
-  });
-  test.describe(title('textarea: label placement floating'), () => {
-    test('label should appear above the textarea when there is a value', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label placement floating'), () => {
+        test('label should appear above the textarea when there is a value', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="floating"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-value`));
-    });
-    test('label should appear on top of the textarea and hide the textarea when there is a no value', async ({ page, }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-value`));
+        });
+        test('label should appear on top of the textarea and hide the textarea when there is a no value', async ({ page, }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value`));
-    });
-    test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value`));
+        });
+        test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => {
+            await page.setContent(`
          <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
        `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value-placeholder`));
-    });
-    test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-no-value-placeholder`));
+        });
+        test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => {
+            await page.setContent(`
         <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      const nativeTextarea = textarea.locator('textarea');
-      await nativeTextarea.click();
-      await page.waitForChanges();
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-focused-placement-floating-no-value`));
-    });
-    test('textarea should render multiple lines of text', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            const nativeTextarea = textarea.locator('textarea');
+            await nativeTextarea.click();
+            await page.waitForChanges();
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-focused-placement-floating-no-value`));
+        });
+        test('textarea should render multiple lines of text', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Standard" label-placement="floating" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-multi-line-value`));
-    });
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-multi-line-value`));
+        });
+        test('label should be truncated', async ({ page }) => {
+            await page.setContent(`
       <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="floating"></ion-textarea>
     `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-label-truncated`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-label-truncated`));
+        });
     });
-  });
 });
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('textarea: label overflow'), () => {
-    test('label property should be truncated with an ellipsis', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: label overflow'), () => {
+        test('label property should be truncated with an ellipsis', async ({ page }) => {
+            await page.setContent(`
             <ion-textarea label="Label Label Label Label Label" placeholder="Text Input"></ion-textarea>
           `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-truncate`));
-    });
-    test('label slot should be truncated with an ellipsis', async ({ page }) => {
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-truncate`));
+        });
+        test('label slot should be truncated with an ellipsis', async ({ page }) => {
+            await page.setContent(`
             <ion-textarea placeholder="Text Input">
               <div slot="label">Label Label Label Label Label</div>
             </ion-textarea>
           `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-slot-truncate`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-slot-truncate`));
+        });
     });
-  });
 });
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('textarea: async label'), () => {
-    test('textarea should re-render when label slot is added async', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: async label'), () => {
+        test('textarea should re-render when label slot is added async', async ({ page }) => {
+            await page.setContent(`
             <ion-textarea fill="solid" label-placement="stacked" placeholder="Text Input"></ion-textarea>
           `, config);
-      const textarea = page.locator('ion-textarea');
-      await textarea.evaluate((el) => {
-        const labelEl = document.createElement('div');
-        labelEl.slot = 'label';
-        labelEl.innerHTML = 'Comments <span class="required" style="color: red">*</span';
-        el.appendChild(labelEl);
-      });
-      await page.waitForChanges();
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-async-label`));
-    });
-  });
-  test.describe(title('textarea: flex in grid rendering'), () => {
-    test('should correctly render new lines in stacked textarea', async ({ page }) => {
-      /**
-       * While this bug only impacts Safari, we run this
-       * text on all browsers to make sure the Safari fix
-       * does not negatively impact other browsers.
-       */
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/27345',
-      });
-      /**
-       * Add padding to make it easier to see
-       * if the text is incorrectly flowing outside
-       * the container on Safari.
-       */
-      await page.setContent(`
+            const textarea = page.locator('ion-textarea');
+            await textarea.evaluate((el) => {
+                const labelEl = document.createElement('div');
+                labelEl.slot = 'label';
+                labelEl.innerHTML = 'Comments <span class="required" style="color: red">*</span';
+                el.appendChild(labelEl);
+            });
+            await page.waitForChanges();
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-async-label`));
+        });
+    });
+    test.describe(title('textarea: flex in grid rendering'), () => {
+        test('should correctly render new lines in stacked textarea', async ({ page }) => {
+            /**
+             * While this bug only impacts Safari, we run this
+             * text on all browsers to make sure the Safari fix
+             * does not negatively impact other browsers.
+             */
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/27345',
+            });
+            /**
+             * Add padding to make it easier to see
+             * if the text is incorrectly flowing outside
+             * the container on Safari.
+             */
+            await page.setContent(`
         <div style="padding: 20px;" class="container">
           <ion-textarea fill="solid" label="Comments" label-placement="stacked"></ion-textarea>
         </div>
       `, config);
-      const nativeTextarea = page.locator('ion-textarea textarea');
-      await nativeTextarea.type(`Comment
+            const nativeTextarea = page.locator('ion-textarea textarea');
+            await nativeTextarea.type(`Comment
         With
         Multiple
         Lines`);
-      await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
-    });
-  });
-  test.describe(title('textarea: floating/stacked label layering'), () => {
-    test('label should not be covered by text field', async ({ page }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/27812',
-      });
-      await page.setContent(`
+            await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
+        });
+    });
+    test.describe(title('textarea: floating/stacked label layering'), () => {
+        test('label should not be covered by text field', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/27812',
+            });
+            await page.setContent(`
         <style>
           .custom-textarea .native-wrapper {
             background: pink;
@@ -217,8 +217,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </style>
         <ion-textarea class="custom-textarea" label="My Label" label-placement="stacked"></ion-textarea>
       `, config);
-      const textarea = page.locator('ion-textarea');
-      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-layering`));
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-layering`));
+        });
     });
-  });
 });

package/dist/collection/components/textarea/test/legacy/a11y/textarea.e2e.js

@@ -7,25 +7,25 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('textarea: a11y'), () => {
-    test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
-      await page.setContent(`<ion-textarea></ion-textarea>`, config);
-      await page.setIonViewport();
-      const textarea = page.locator('ion-textarea textarea');
-      const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
-      expect(ariaLabelledBy).toBe(null);
-    });
-    test('set a default aria-labelledby when a neighboring ion-label exist', async ({ page }) => {
-      await page.setContent(`
+    test.describe(title('textarea: a11y'), () => {
+        test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
+            await page.setContent(`<ion-textarea></ion-textarea>`, config);
+            await page.setIonViewport();
+            const textarea = page.locator('ion-textarea textarea');
+            const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
+            expect(ariaLabelledBy).toBe(null);
+        });
+        test('set a default aria-labelledby when a neighboring ion-label exist', async ({ page }) => {
+            await page.setContent(`
         <ion-item>
           <ion-label>A11y Test</ion-label>
           <ion-textarea></ion-textarea>
         </ion-item>
       `, config);
-      const label = page.locator('ion-label');
-      const textarea = page.locator('ion-textarea textarea');
-      const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
-      expect(ariaLabelledBy).toBe(await label.getAttribute('id'));
+            const label = page.locator('ion-label');
+            const textarea = page.locator('ion-textarea textarea');
+            const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
+            expect(ariaLabelledBy).toBe(await label.getAttribute('id'));
+        });
     });
-  });
 });