@ionic/core 7.3.2 → 7.3.3-dev.11693533652.1969cc78

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

@@ -10,14 +10,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="start"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-start-multi-line-value`));
     });
   });
   test.describe(title('textarea: label placement end'), () => {
@@ -26,14 +26,14 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="end"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-multi-line-value`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-end-multi-line-value`));
     });
   });
   test.describe(title('textarea: label placement fixed'), () => {
@@ -42,21 +42,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="fixed"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed-multi-line-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-fixed-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-fixed-label-truncated`));
     });
   });
   test.describe(title('textarea: label placement stacked'), () => {
@@ -65,28 +65,28 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="stacked"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-no-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-multi-line-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-stacked-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-stacked-label-truncated`));
     });
   });
   test.describe(title('textarea: label placement floating'), () => {
@@ -95,21 +95,21 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Standard" value="Lorem ipsum" label-placement="floating"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value-placeholder`));
+      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(`
@@ -119,21 +119,21 @@ configs().forEach(({ title, screenshot, config }) => {
       const nativeTextarea = textarea.locator('textarea');
       await nativeTextarea.click();
       await page.waitForChanges();
-      expect(await textarea.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`textarea-focused-placement-floating-no-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-multi-line-value`));
+      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');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-label-truncated`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-placement-floating-label-truncated`));
     });
   });
 });
@@ -144,7 +144,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             <ion-textarea label="Label Label Label Label Label" placeholder="Text Input"></ion-textarea>
           `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-truncate`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-truncate`));
     });
     test('label slot should be truncated with an ellipsis', async ({ page }) => {
       await page.setContent(`
@@ -153,7 +153,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-label-slot-truncate`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-slot-truncate`));
     });
   });
 });
@@ -171,7 +171,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         el.appendChild(labelEl);
       });
       await page.waitForChanges();
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-async-label`));
     });
   });
   test.describe(title('textarea: flex in grid rendering'), () => {
@@ -218,7 +218,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-textarea class="custom-textarea" label="My Label" label-placement="stacked"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-layering`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-label-layering`));
     });
   });
 });

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

@@ -11,7 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/textarea/test/legacy/autogrow`, config);
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-diff`));
+      await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`));
     });
     test('should grow when typing', async ({ page }) => {
       await page.setContent(`
@@ -24,19 +24,19 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             </ion-list>
           </ion-content>
         </ion-app>`, config);
-      const textarea = await page.waitForSelector('ion-textarea');
+      const textarea = page.locator('ion-textarea');
       await textarea.click();
       await page.waitForChanges();
       await textarea.type('Now, this is a story all about how');
       await page.setIonViewport();
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-initial`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`));
       await textarea.type([
         `\nMy life got flipped-turned upside down`,
         `And I'd like to take a minute`,
         `Just sit right there`,
         `I'll tell you how I became the prince of a town called Bel-Air`,
       ].join('\n'));
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-after`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-after`));
     });
     test('should break long lines without white space', async ({ page }) => {
       test.info().annotations.push({
@@ -52,7 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           </ion-content>
         </ion-app>`, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-word-break`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-word-break`));
     });
   });
 });

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

@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-textarea label="Email" value="hi@ionic.io" readonly="true"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-readonly`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-readonly`));
     });
     test('should render disabled textarea correctly', async ({ page }) => {
       await page.setContent(`
         <ion-textarea label="Email" value="hi@ionic.io" disabled="true"></ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-disabled`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-disabled`));
     });
   });
 });

package/dist/collection/components/toast/toast.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
@@ -28,6 +29,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class Toast {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -97,30 +99,19 @@ export class Toast {
    * Present the toast overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline toast
-     * and dismissing a toast it is possible to
-     * quickly present the toast 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, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
-    await this.currentTransition;
+    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
      * state updates will cause a re-render.
      */
     this.revealContentToScreenReader = true;
-    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the toast overlay after it has been presented.
@@ -132,15 +123,16 @@ export class Toast {
    * 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, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
+    unlock();
     return dismissed;
   }
   /**

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

@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-toggle color="danger" checked="true">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-checked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-checked`));
     });
     test('should not apply color when unchecked', async ({ page }) => {
       await page.setContent(`
         <ion-toggle color="danger">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-unchecked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-unchecked`));
     });
   });
 });

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

@@ -14,7 +14,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-list`));
+      await expect(list).toHaveScreenshot(screenshot(`toggle-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(`
@@ -25,7 +25,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-inset-list`));
+      await expect(list).toHaveScreenshot(screenshot(`toggle-inset-list`));
     });
   });
 });
@@ -38,7 +38,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-item>
       `, config);
       const item = page.locator('ion-item');
-      expect(await item.screenshot()).toMatchSnapshot(screenshot(`toggle-item-color`));
+      await expect(item).toHaveScreenshot(screenshot(`toggle-item-color`));
     });
   });
 });
@@ -55,7 +55,7 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
           </ion-list>
         `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-long-label-in-item`));
+      await expect(list).toHaveScreenshot(screenshot(`toggle-long-label-in-item`));
     });
   });
 });

package/dist/collection/components/toggle/test/label/toggle.e2e.js

@@ -19,7 +19,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="start" justify="start" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-start`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-justify-start`));
     });
     test('should render an end justification with label in the start position', async ({ page }) => {
       await page.setContent(`
@@ -27,7 +27,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="start" justify="end" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-end`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-justify-end`));
     });
     test('should render a space between justification with label in the start position', async ({ page }) => {
       await page.setContent(`
@@ -35,7 +35,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="start" justify="space-between" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-start-justify-space-between`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-justify-space-between`));
     });
   });
   test.describe(title('toggle: end placement'), () => {
@@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="end" justify="start" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-start`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end-justify-start`));
     });
     test('should render an end justification with label in the end position', async ({ page }) => {
       await page.setContent(`
@@ -53,7 +53,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="end" justify="end" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-end`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end-justify-end`));
     });
     test('should render a space between justification with label in the end position', async ({ page }) => {
       await page.setContent(`
@@ -61,7 +61,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="end" justify="space-between" style="width: 200px">Label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-end-justify-space-between`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end-justify-space-between`));
     });
   });
   test.describe(title('toggle: fixed placement'), () => {
@@ -71,7 +71,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-start`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-fixed-justify-start`));
     });
     test('should render an end justification with label in the fixed position', async ({ page }) => {
       await page.setContent(`
@@ -79,7 +79,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-end`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-fixed-justify-end`));
     });
     test('should render a space between justification with label in the fixed position', async ({ page }) => {
       await page.setContent(`
@@ -87,7 +87,7 @@ configs().forEach(({ title, screenshot, config }) => {
          <ion-toggle label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-toggle>
        `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-label-fixed-justify-space-between`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-fixed-justify-space-between`));
     });
   });
 });

package/dist/collection/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.js

@@ -8,7 +8,7 @@ configs().forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`, config);
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`toggle-on-off-labels-diff`));
+      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
     });
   });
 });
@@ -31,7 +31,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await ionPopoverDidDismiss.next();
       await page.waitForChanges();
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
+      await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
     });
   });
 });

package/dist/collection/components/toggle/test/legacy/sizes/toggle.e2e.js

@@ -8,7 +8,7 @@ configs().forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/toggle/test/legacy/sizes`, config);
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`toggle-sizes-diff`));
+      await expect(page).toHaveScreenshot(screenshot(`toggle-sizes-diff`));
     });
   });
 });

package/dist/collection/components/toggle/test/states/toggle.e2e.js

@@ -10,21 +10,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-toggle disabled="true">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-disabled`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-disabled`));
     });
     test('should render checked toggle correctly', async ({ page }) => {
       await page.setContent(`
         <ion-toggle checked="true">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-checked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-checked`));
     });
     test('should render unchecked toggle correctly', async ({ page }) => {
       await page.setContent(`
         <ion-toggle>Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-unchecked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-unchecked`));
     });
   });
 });

package/dist/collection/utils/framework-delegate.js

@@ -38,6 +38,7 @@ export const CoreDelegate = () => {
   const attachViewToDom = async (parentElement, userComponent, userComponentProps = {}, cssClasses = []) => {
     var _a, _b;
     BaseComponent = parentElement;
+    let ChildComponent;
     /**
      * If passing in a component via the `component` props
      * we need to append it inside of our overlay component.
@@ -64,6 +65,7 @@ export const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
+      ChildComponent = el;
       await new Promise((resolve) => componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -72,7 +74,7 @@ export const CoreDelegate = () => {
        * The delegate host wrapper el is only needed for modals and popovers
        * because they allow the dev to provide custom content to the overlay.
        */
-      const root = BaseComponent.children[0];
+      const root = (ChildComponent = BaseComponent.children[0]);
       if (!root.classList.contains('ion-delegate-host')) {
         /**
          * If the root element is not a delegate host, it means
@@ -87,6 +89,12 @@ export const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        /**
+         * Update the ChildComponent to be the
+         * newly created div in the event that one
+         * does not already exist.
+         */
+        ChildComponent = el;
       }
     }
     /**
@@ -102,7 +110,18 @@ export const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    /**
+     * We return the child component rather than the overlay
+     * reference itself since modal and popover will
+     * use this to wait for any Ionic components in the child view
+     * to be ready (i.e. componentOnReady) when using the
+     * lazy loaded component bundle.
+     *
+     * However, we fall back to returning BaseComponent
+     * in the event that a modal or popover is presented
+     * with no child content.
+     */
+    return ChildComponent !== null && ChildComponent !== void 0 ? ChildComponent : BaseComponent;
   };
   const removeViewFromDom = () => {
     /**

package/dist/collection/utils/lock-controller.js

@@ -0,0 +1,36 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Creates a lock controller.
+ *
+ * Claiming a lock means that nothing else can acquire the lock until it is released.
+ * This can momentarily prevent execution of code that needs to wait for the earlier code to finish.
+ * For example, this can be used to prevent multiple transitions from occurring at the same time.
+ */
+export const createLockController = () => {
+  let waitPromise;
+  /**
+   * When lock() is called, the lock is claimed.
+   * Once a lock has been claimed, it cannot be claimed again until it is released.
+   * When this function gets resolved, the lock is released, allowing it to be claimed again.
+   *
+   * @example ```tsx
+   * const unlock = await this.lockController.lock();
+   * // do other stuff
+   * unlock();
+   * ```
+   */
+  const lock = async () => {
+    const p = waitPromise;
+    let resolve;
+    waitPromise = new Promise((r) => (resolve = r));
+    if (p !== undefined) {
+      await p;
+    }
+    return resolve;
+  };
+  return {
+    lock,
+  };
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-30T12:42:07",
+  "timestamp": "2023-09-01T02:03:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.1.0",