@ionic/core 7.3.3-dev.11693454416.1cb6a7ec → 7.3.3-dev.11693592322.138d91e6

package/dist/collection/components/picker/picker.js

@@ -3,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -15,6 +16,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 export class Picker {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
@@ -81,24 +83,13 @@ export class Picker {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline picker
-     * and dismissing an picker it is possible to
-     * quickly present the picker while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -110,14 +101,15 @@ export class Picker {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/popover/popover.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
@@ -29,6 +30,7 @@ export class Popover {
   constructor() {
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
+    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -202,28 +204,24 @@ export class Popover {
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * When using an inline popover
-     * and dismissing a popover it is possible to
-     * quickly present the popover while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -246,7 +244,7 @@ export class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -254,8 +252,6 @@ export class Popover {
       side: this.side,
       align: this.alignment,
     });
-    await this.currentTransition;
-    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -265,6 +261,7 @@ export class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -275,23 +272,12 @@ export class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * When using an inline popover
-     * and presenting a popover it is possible to
-     * quickly dismiss the popover while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -309,7 +295,7 @@ export class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**

package/dist/collection/components/popover/test/async/popover.e2e.js

@@ -0,0 +1,42 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: alignment with async component'), async () => {
+    test('should align popover centered with button when component is added async', async ({ page }) => {
+      await page.goto('/src/components/popover/test/async', config);
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const button = page.locator('#button');
+      await button.click();
+      await ionPopoverDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`popover-async`));
+    });
+    /**
+     * Framework delegate should fall back to returning the host
+     * component when no child content is passed otherwise
+     * the overlay will get stuck when trying to re-present.
+     */
+    test('should open popover even if nothing was passed', async ({ page }) => {
+      await page.setContent(`
+        <ion-popover></ion-popover>
+      `, config);
+      const popover = page.locator('ion-popover');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+      await popover.evaluate((el) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+      await expect(popover).toBeHidden();
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+    });
+  });
+});

package/dist/collection/components/progress-bar/test/buffer/progress-bar.e2e.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: buffer'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+        `, config);
+        await page.setIonViewport();
+        const progressBar = await page.locator('ion-progress-bar');
+        await progressBar.evaluate((node) => (node.value = 0.8));
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});

package/dist/collection/components/progress-bar/test/determinate/progress-bar.e2e.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: determinate'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-progress-bar value="0.20"></ion-progress-bar>
+        `, config);
+        await page.setIonViewport();
+        const progressBar = await page.locator('ion-progress-bar');
+        await progressBar.evaluate((node) => (node.value = 0.8));
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});

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

@@ -16,7 +16,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`toggle-list`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(`

package/dist/collection/components/router-outlet/router-outlet.js

@@ -174,6 +174,7 @@ export class RouterOutlet {
     this.ionNavDidChange.emit();
     return true;
   }
+  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
   async lock() {
     const p = this.waitPromise;
     let resolve;

package/dist/collection/components/textarea/test/bottom-content/textarea.e2e.js

@@ -41,7 +41,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea class="ion-invalid ion-touched custom-textarea" label="my label" error-text="my error"></ion-textarea>
         `, config);
         const errorText = page.locator('ion-textarea .error-text');
-        expect(await errorText.screenshot()).toMatchSnapshot(screenshot(`textarea-error-custom-color`));
+        await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-custom-color`));
       });
     });
     test.describe('textarea: hint text rendering', () => {
@@ -49,12 +49,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering helper text', async ({ page }) => {
           await page.setContent(`<ion-textarea helper-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-helper`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-helper`));
         });
         test('should not have visual regressions when rendering error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" error-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-error`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-error`));
         });
       });
     });
@@ -102,17 +102,17 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering counter', async ({ page }) => {
           await page.setContent(`<ion-textarea counter="true" maxlength="20" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter`));
         });
         test('should not have visual regressions when rendering counter with helper text', async ({ page }) => {
           await page.setContent(`<ion-textarea label="my textarea" counter="true" maxlength="20" helper-text="my helper"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-helper-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-helper-text`));
         });
         test('should not have visual regressions when rendering counter with error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" label="my textarea" counter="true" maxlength="20" error-text="my error"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-error-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-error-text`));
         });
       });
     });

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

@@ -16,7 +16,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-card>
       `, config);
       const card = page.locator('ion-card');
-      expect(await card.screenshot()).toMatchSnapshot(screenshot(`textarea-card`));
+      await expect(card).toHaveScreenshot(screenshot(`textarea-card`));
     });
   });
 });

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

@@ -22,35 +22,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-stacked`));
       });
     });
     test.describe('textarea: fill solid', () => {
@@ -59,35 +59,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-stacked`));
       });
     });
     test.describe('textarea: fill outline', () => {
@@ -96,35 +96,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-stacked`));
       });
     });
   });

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

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: cols'), () => {
+    test('should respect cols when autogrow is not set', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols'));
+    });
+    test('should ignore cols when autogrow is set', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-textarea {
+            border: 1px solid red;
+          }
+        </style>
+        <div id="container" style="width: 300px; margin: 20px;">
+          <ion-textarea label="Textarea" cols="5" auto-grow="true" value="Lorem Ipsum"></ion-textarea>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('textarea-cols-autogrow'));
+    });
+  });
+});

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

@@ -21,7 +21,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -36,7 +36,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
       });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(`
@@ -51,7 +51,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -75,7 +75,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid-custom`));
       });
     });
     test.describe('textarea: fill outline', () => {
@@ -91,7 +91,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -106,7 +106,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
       });
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(`
@@ -121,7 +121,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -145,7 +145,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
       });
     });
   });
@@ -179,7 +179,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the textarea was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const textarea = page.locator('ion-textarea');
       await textarea.evaluate((el) => el.style.removeProperty('display'));
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
     });
   });
 });