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

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

@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -52,7 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
       });
     });
     test.describe('textarea: solid', () => {
@@ -70,7 +70,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -86,7 +86,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
       });
     });
     test.describe('textarea: outline', () => {
@@ -120,7 +120,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -136,7 +136,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -152,7 +152,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
       });
     });
   });

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

@@ -20,7 +20,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`textarea-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`textarea-list-no-fill`));
     });
     test('should render correctly in inset list with no fill', async ({ page }) => {
       await page.setContent(`
@@ -37,7 +37,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`textarea-inset-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`textarea-inset-list-no-fill`));
     });
   });
 });

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/textarea/textarea.ios.css

@@ -55,6 +55,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 :host(.legacy-textarea) {
   flex: 1;
   background: var(--background);

package/dist/collection/components/textarea/textarea.js

@@ -689,7 +689,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
           "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
         },
         "attribute": "cols",
-        "reflect": false
+        "reflect": true
       },
       "rows": {
         "type": "number",

package/dist/collection/components/textarea/textarea.md.css

@@ -55,6 +55,22 @@
   box-sizing: border-box;
 }
 
+/**
+ * When the cols property is set we should
+ * respect that width instead of defaulting
+ * to taking up the entire line.
+ * Requires both the cols and autoGrow
+ * properties to be reflected as attributes
+ * on the host.
+ *
+ * cols does not work with autoGrow because
+ * autoGrow would prevent line breaks from naturally
+ * occurring until the textarea takes up the entire line width.
+ */
+:host([cols]:not([auto-grow])) {
+  width: fit-content;
+}
+
 :host(.legacy-textarea) {
   flex: 1;
   background: var(--background);

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/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-31T04:02:26",
+  "timestamp": "2023-09-01T18:21:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.1.0",
@@ -26092,7 +26092,7 @@
           },
           "mutable": false,
           "attr": "cols",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.",
           "docsTags": [],
           "values": [

package/dist/esm/{framework-delegate-2b76c681.js → framework-delegate-aa433dea.js}

@@ -39,6 +39,7 @@ 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.
@@ -65,6 +66,7 @@ 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 &&
@@ -73,7 +75,7 @@ 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
@@ -88,6 +90,12 @@ 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;
       }
     }
     /**
@@ -103,7 +111,18 @@ 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/esm/index.js

@@ -11,12 +11,12 @@ export { c as componentOnReady } from './helpers-3379ba19.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
 export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD } from './index-6391de89.js';
 export { m as menuController } from './index-b3e05099.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-c3387ec0.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-e1dadfe6.js';
 import './index-7a14ecec.js';
 import './gesture-controller-0fa396c4.js';
 import './index-847f2fde.js';
 import './hardware-back-button-39299f84.js';
-import './framework-delegate-2b76c681.js';
+import './framework-delegate-aa433dea.js';
 import './index-595d62c9.js';
 
 const IonicSlides = (opts) => {