@ionic/core 7.3.2-dev.11692887667.1614d10a → 7.3.2-dev.11693254222.1822966d

package/components/framework-delegate.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,7 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        ChildComponent = el;
       }
     }
     /**
@@ -103,7 +106,7 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    return ChildComponent;
   };
   const removeViewFromDom = () => {
     /**

package/components/ion-menu.js

@@ -32,6 +32,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     this.ionMenuChange = createEvent(this, "ionMenuChange", 7);
     this.lastOnEnd = 0;
     this.blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
+    this.didLoad = false;
     this.isAnimating = false;
     this._isOpen = false;
     this.inheritedAttributes = {};
@@ -119,6 +120,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     this.sideChanged();
     // register this menu with the app's menu controller
     menuController._register(this);
+    this.menuChanged();
     this.gesture = (await import('./index2.js')).createGesture({
       el: document,
       gestureName: 'menu-swipe',
@@ -137,9 +139,20 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   async componentDidLoad() {
-    this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    this.didLoad = true;
+    this.menuChanged();
     this.updateState();
   }
+  menuChanged() {
+    /**
+     * Inform dependent components such as ion-menu-button
+     * that the menu is ready. Note that we only want to do this
+     * once the menu has been rendered which is why we check for didLoad.
+     */
+    if (this.didLoad) {
+      this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    }
+  }
   async disconnectedCallback() {
     /**
      * The menu should be closed when it is

package/components/popover.js

@@ -1173,12 +1173,12 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    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

package/dist/cjs/{framework-delegate-e8174951.js → framework-delegate-91be3b84.js}

@@ -41,6 +41,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.
@@ -67,6 +68,7 @@ const CoreDelegate = () => {
        * inside of the overlay component.
        */
       BaseComponent.appendChild(el);
+      ChildComponent = el;
       await new Promise((resolve) => helpers.componentOnReady(el, resolve));
     }
     else if (BaseComponent.children.length > 0 &&
@@ -75,7 +77,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
@@ -90,6 +92,7 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        ChildComponent = el;
       }
     }
     /**
@@ -105,7 +108,7 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    return ChildComponent;
   };
   const removeViewFromDom = () => {
     /**

package/dist/cjs/index.cjs.js

@@ -15,12 +15,12 @@ const helpers = require('./helpers-ea4ccbcb.js');
 const config = require('./config-d5882735.js');
 const index$1 = require('./index-8568bedb.js');
 const index$2 = require('./index-653be4df.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 require('./index-306a7476.js');
 require('./gesture-controller-b46721be.js');
 require('./index-484b1104.js');
 require('./hardware-back-button-b67c8e75.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./index-cc7dfb7c.js');
 
 const IonicSlides = (opts) => {

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-484b1104.js');
 const buttonActive = require('./button-active-dfd2756e.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
@@ -17,7 +17,7 @@ require('./capacitor-2ffba62a.js');
 require('./index-306a7476.js');
 require('./index-0ee995e4.js');
 require('./gesture-controller-b46721be.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 

package/dist/cjs/ion-alert.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const buttonActive = require('./button-active-dfd2756e.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
@@ -18,7 +18,7 @@ require('./capacitor-2ffba62a.js');
 require('./index-306a7476.js');
 require('./index-0ee995e4.js');
 require('./gesture-controller-b46721be.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -13,7 +13,7 @@ const theme = require('./theme-fbc56b3b.js');
 const index$1 = require('./index-10873539.js');
 const keyboardController = require('./keyboard-controller-50beb83a.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 const index$2 = require('./index-8568bedb.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -14,10 +14,10 @@ const theme = require('./theme-fbc56b3b.js');
 const index$2 = require('./index-d8d1fc0b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const data = require('./data-967b9c15.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const animation = require('./animation-2bb33618.js');
 const haptic = require('./haptic-c5f6b4d5.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-306a7476.js');
 require('./capacitor-2ffba62a.js');

package/dist/cjs/ion-loading.cjs.entry.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');

package/dist/cjs/ion-menu_3.cjs.entry.js

@@ -11,13 +11,13 @@ const index$2 = require('./index-306a7476.js');
 const gestureController = require('./gesture-controller-b46721be.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-653be4df.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$3 = require('./index-d8d1fc0b.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./index-cc7dfb7c.js');
 
 const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
@@ -39,6 +39,7 @@ const Menu = class {
     this.ionMenuChange = index.createEvent(this, "ionMenuChange", 7);
     this.lastOnEnd = 0;
     this.blocker = gestureController.GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
+    this.didLoad = false;
     this.isAnimating = false;
     this._isOpen = false;
     this.inheritedAttributes = {};
@@ -123,6 +124,7 @@ const Menu = class {
     this.sideChanged();
     // register this menu with the app's menu controller
     index$1.menuController._register(this);
+    this.menuChanged();
     this.gesture = (await Promise.resolve().then(function () { return require('./index-0ee995e4.js'); })).createGesture({
       el: document,
       gestureName: 'menu-swipe',
@@ -141,9 +143,20 @@ const Menu = class {
     this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
   }
   async componentDidLoad() {
-    this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    this.didLoad = true;
+    this.menuChanged();
     this.updateState();
   }
+  menuChanged() {
+    /**
+     * Inform dependent components such as ion-menu-button
+     * that the menu is ready. Note that we only want to do this
+     * once the menu has been rendered which is why we check for didLoad.
+     */
+    if (this.didLoad) {
+      this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    }
+  }
   async disconnectedCallback() {
     /**
      * The menu should be closed when it is

package/dist/cjs/ion-modal.cjs.entry.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$3 = require('./index-484b1104.js');
 const index$2 = require('./index-10873539.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$4 = require('./index-cc7dfb7c.js');
 const capacitor = require('./capacitor-2ffba62a.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$5 = require('./index-8568bedb.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');

package/dist/cjs/ion-nav_2.cjs.entry.js

@@ -10,7 +10,7 @@ const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-8568bedb.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;

package/dist/cjs/ion-popover.cjs.entry.js

@@ -6,10 +6,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-484b1104.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$2 = require('./index-8568bedb.js');
@@ -1176,12 +1176,12 @@ const Popover = class {
     }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    this.ionMount.emit();
     this.usersElement = await frameworkDelegate.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

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -10,14 +10,14 @@ const formController = require('./form-controller-5e223b54.js');
 const notchController = require('./notch-controller-c27fe0b7.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const dir = require('./dir-f1e0ca26.js');
 const theme = require('./theme-fbc56b3b.js');
 const watchOptions = require('./watch-options-f3f77e54.js');
 const index$2 = require('./index-d8d1fc0b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 require('./index-306a7476.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 
 const selectIosCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:0.6;--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(:not(.legacy-select)){width:100%}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.legacy-select){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.in-item.legacy-select){position:static;max-width:45%}:host(.select-disabled){pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}:host([slot=start]:not(.legacy-select)),:host([slot=end]:not(.legacy-select)){width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}:host(.legacy-select) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-select) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-select) label{left:0}:host-context([dir=rtl]):host(.legacy-select) label,:host-context([dir=rtl]).legacy-select label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-select) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-select) label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-expanded.select-label-placement-floating) .label-text-wrapper,:host(.ion-focused.select-label-placement-floating) .label-text-wrapper,:host(.has-value.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}:host(.legacy-select){--padding-top:10px;--padding-end:8px;--padding-bottom:10px;--padding-start:16px}:host(:not(.legacy-select)){min-height:44px}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}.select-icon{width:18px;height:18px;color:var(--ion-color-step-650, #595959)}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{width:calc(100% - 18px - 4px)}:host(.select-disabled){opacity:0.3}";

package/dist/cjs/ion-tab_2.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-484b1104.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 require('./helpers-ea4ccbcb.js');
 
 const tabCss = ":host(.tab-hidden){display:none !important}";

package/dist/cjs/ion-toast.cjs.entry.js

@@ -9,11 +9,11 @@ const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-cf7fa4cf.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-91be3b84.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-306a7476.js');
 

package/dist/cjs/{overlays-0ea06fcb.js → overlays-cf7fa4cf.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-91be3b84.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index = require('./index-cc7dfb7c.js');

package/dist/collection/components/menu/menu.js

@@ -23,6 +23,7 @@ export class Menu {
   constructor() {
     this.lastOnEnd = 0;
     this.blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
+    this.didLoad = false;
     this.isAnimating = false;
     this._isOpen = false;
     this.inheritedAttributes = {};
@@ -110,6 +111,7 @@ export class Menu {
     this.sideChanged();
     // register this menu with the app's menu controller
     menuController._register(this);
+    this.menuChanged();
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: document,
       gestureName: 'menu-swipe',
@@ -128,9 +130,20 @@ export class Menu {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   async componentDidLoad() {
-    this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    this.didLoad = true;
+    this.menuChanged();
     this.updateState();
   }
+  menuChanged() {
+    /**
+     * Inform dependent components such as ion-menu-button
+     * that the menu is ready. Note that we only want to do this
+     * once the menu has been rendered which is why we check for didLoad.
+     */
+    if (this.didLoad) {
+      this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+    }
+  }
   async disconnectedCallback() {
     /**
      * The menu should be closed when it is

package/dist/collection/components/menu-button/test/async/menu-button.e2e.js

@@ -0,0 +1,23 @@
+/*!
+ * (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, config }) => {
+  test.describe(title('menu button: async'), () => {
+    test('menu button should be visible if menu is moved', async ({ page }) => {
+      await page.goto(`/src/components/menu-button/test/async`, config);
+      const menu = page.locator('ion-menu');
+      const menuButton = page.locator('ion-menu-button');
+      const triggerButton = page.locator('#trigger');
+      await expect(menu).not.toBeAttached();
+      await expect(menuButton).toBeHidden();
+      await triggerButton.click();
+      await expect(menu).toBeAttached();
+      await expect(menuButton).toBeVisible();
+    });
+  });
+});

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

@@ -218,12 +218,12 @@ export class Popover {
     }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    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

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,7 @@ export const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        ChildComponent = el;
       }
     }
     /**
@@ -102,7 +105,7 @@ export const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    return ChildComponent;
   };
   const removeViewFromDom = () => {
     /**

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-24T14:37:16",
+  "timestamp": "2023-08-28T20:26:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.1.0",

package/dist/esm/{framework-delegate-2b76c681.js → framework-delegate-43758c88.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,7 @@ const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+        ChildComponent = el;
       }
     }
     /**
@@ -103,7 +106,7 @@ const CoreDelegate = () => {
     Reference = document.createComment('ionic teleport');
     BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
     app.appendChild(BaseComponent);
-    return BaseComponent;
+    return ChildComponent;
   };
   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-236d01c6.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-43758c88.js';
 import './index-595d62c9.js';
 
 const IonicSlides = (opts) => {

package/dist/esm/ion-action-sheet.entry.js

@@ -4,7 +4,7 @@
 import { r as registerInstance, d as createEvent, e as readTask, h, H as Host, f as getElement } from './index-847f2fde.js';
 import { c as createButtonActiveGesture } from './button-active-2da0f611.js';
 import { r as raf } from './helpers-3379ba19.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-c3387ec0.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-236d01c6.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { b as getIonMode } from './ionic-global-1ef19007.js';
 import { c as createAnimation } from './animation-a1d9e088.js';
@@ -13,7 +13,7 @@ import './capacitor-b4979570.js';
 import './index-7a14ecec.js';
 import './index-ff313b19.js';
 import './gesture-controller-0fa396c4.js';
-import './framework-delegate-2b76c681.js';
+import './framework-delegate-43758c88.js';
 import './hardware-back-button-39299f84.js';
 import './index-595d62c9.js';
 

package/dist/esm/ion-alert.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, i as forceUpdate, h, H as Host
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-96c9ace3.js';
 import { c as createButtonActiveGesture } from './button-active-2da0f611.js';
 import { r as raf } from './helpers-3379ba19.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-c3387ec0.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-236d01c6.js';
 import { g as getClassMap } from './theme-17531cdf.js';
 import { c as config, b as getIonMode } from './ionic-global-1ef19007.js';
 import { c as createAnimation } from './animation-a1d9e088.js';
@@ -14,7 +14,7 @@ import './capacitor-b4979570.js';
 import './index-7a14ecec.js';
 import './index-ff313b19.js';
 import './gesture-controller-0fa396c4.js';
-import './framework-delegate-2b76c681.js';
+import './framework-delegate-43758c88.js';
 import './hardware-back-button-39299f84.js';
 import './index-595d62c9.js';