@ionic/core 8.6.3-dev.11750799190.186437ae → 8.6.3-dev.11751305829.1112929c

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

@@ -242,7 +242,7 @@ const Menu = class {
         return Promise.resolve(this._isOpen);
     }
     /**
-     * Returns `true` is the menu is active.
+     * Returns `true` if the menu is active.
      *
      * A menu is active when it can be opened or closed, meaning it's enabled
      * and it's not part of a `ion-split-pane`.
@@ -253,6 +253,10 @@ const Menu = class {
     /**
      * Opens the menu. If the menu is already open or it can't be opened,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening.
+     * If `false`, the menu will open instantly without animation.
+     * Defaults to `true`.
      */
     open(animated = true) {
         return this.setOpen(true, animated);
@@ -260,20 +264,38 @@ const Menu = class {
     /**
      * Closes the menu. If the menu is already closed or it can't be closed,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when closing. If `false`,
+     * the menu will close instantly without animation. Defaults to `true`.
+     * @param role The role of the element that is closing the menu.
+     * This can be useful in a button handler for determining which button was
+     * clicked to close the menu. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     close(animated = true, role) {
         return this.setOpen(false, animated, role);
     }
     /**
-     * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
+     * Toggles the menu. If the menu is already open, it will try to close,
+     * otherwise it will try to open it.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * Defaults to `true`.
      */
     toggle(animated = true) {
         return this.setOpen(!this._isOpen, animated);
     }
     /**
-     * Opens or closes the button.
+     * Opens or closes the menu.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param shouldOpen If `true`, the menu will open. If `false`, the menu
+     * will close.
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
         return index$1.menuController._setOpen(this, shouldOpen, animated, role);
@@ -638,14 +660,14 @@ const Menu = class {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (index.h(index.Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (index.h(index.Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': theme.hostContext('ion-split-pane', el),
-            } }, index.h("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), index.h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, index.h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), index.h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -589,7 +589,7 @@ const iosEnterAnimation = (baseEl, opts) => {
         baseAnimation.addAnimation(contentAnimation);
     }
     if (presentingEl) {
-        const isMobile = window.innerWidth < 768;
+        const isPortrait = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
         const presentingElRoot = helpers.getElementRoot(presentingEl);
         const presentingAnimation = animation.createAnimation().beforeStyles({
@@ -598,7 +598,7 @@ const iosEnterAnimation = (baseEl, opts) => {
             overflow: 'hidden',
         });
         const bodyEl = document.body;
-        if (isMobile) {
+        if (isPortrait) {
             /**
              * Fallback for browsers that does not support `max()` (ex: Firefox)
              * No need to worry about statusbar padding since engines like Gecko
@@ -676,7 +676,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
         .duration(duration)
         .addAnimation(wrapperAnimation);
     if (presentingEl) {
-        const isMobile = window.innerWidth < 768;
+        const isPortrait = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
         const presentingElRoot = helpers.getElementRoot(presentingEl);
         const presentingAnimation = animation.createAnimation()
@@ -694,7 +694,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
             }
         });
         const bodyEl = document.body;
-        if (isMobile) {
+        if (isPortrait) {
             const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
             const modalTransform = hasCardModal ? '-10px' : transformOffset;
             const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
@@ -741,6 +741,125 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
     return baseAnimation;
 };
 
+/**
+ * Transition animation from portrait view to landscape view
+ * This handles the case where a card modal is open in portrait view
+ * and the user switches to landscape view
+ */
+const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return animation.createAnimation('portrait-to-landscape-transition');
+    }
+    const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = helpers.getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = animation.createAnimation('portrait-to-landscape-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = animation.createAnimation();
+    if (!hasCardModal) {
+        // Non-card modal: transition from portrait state to landscape state
+        // Portrait: presentingEl has transform and body has black background
+        // Landscape: no transform, no body background, modal wrapper opacity changes
+        const root = helpers.getElementRoot(baseEl);
+        const wrapperAnimation = animation.createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
+        const backdropAnimation = animation.createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from portrait state back to normal
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
+            .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
+            .fromTo('border-radius', '10px 10px 0 0', '0px');
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // Card modal: transition from portrait card state to landscape card state
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .fromTo('transform', fromTransform, toTransform)
+            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+        const shadowAnimation = animation.createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};
+/**
+ * Transition animation from landscape view to portrait view
+ * This handles the case where a card modal is open in landscape view
+ * and the user switches to portrait view
+ */
+const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return animation.createAnimation('landscape-to-portrait-transition');
+    }
+    const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = helpers.getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = animation.createAnimation('landscape-to-portrait-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = animation.createAnimation();
+    if (!hasCardModal) {
+        // Non-card modal: transition from landscape state to portrait state
+        const root = helpers.getElementRoot(baseEl);
+        const wrapperAnimation = animation.createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible
+        const backdropAnimation = animation.createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from normal state to portrait state
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
+            .fromTo('transform', 'translateY(0px) scale(1)', toTransform)
+            .fromTo('filter', 'contrast(1)', 'contrast(0.85)')
+            .fromTo('border-radius', '0px', '10px 10px 0 0');
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // Card modal: transition from landscape card state to portrait card state
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .fromTo('transform', fromTransform, toTransform)
+            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+        const shadowAnimation = animation.createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .fromTo('opacity', '0', '0') // Shadow stays hidden
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};
+
 const createEnterAnimation = () => {
     const backdropAnimation = animation.createAnimation()
         .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -1484,6 +1603,17 @@ const Modal = class {
                 el.dispatchEvent(ev);
             }
         };
+        /**
+         * When the modal receives focus directly, pass focus to the handle
+         * if it exists and is focusable, otherwise let the focus trap handle it.
+         */
+        this.onModalFocus = (ev) => {
+            const { dragHandleEl, el } = this;
+            // Only handle focus if the modal itself was focused (not a child element)
+            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+                dragHandleEl.focus();
+            }
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -1511,6 +1641,7 @@ const Modal = class {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        this.cleanupViewTransitionListener();
     }
     componentWillLoad() {
         var _a;
@@ -1721,6 +1852,8 @@ const Modal = class {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
+        // Initialize view transition listener for iOS card modals
+        this.initViewTransitionListener();
         unlock();
     }
     initSwipeToClose() {
@@ -1815,13 +1948,13 @@ const Modal = class {
     }
     /**
      * Dismiss the modal overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
-     *
      * This is a no-op if the overlay has not been presented yet. If you want
      * to remove an overlay from the DOM that was never presented, use the
      * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the modal.
+     * For example, `cancel` or `backdrop`.
      */
     async dismiss(data, role) {
         var _a;
@@ -1874,6 +2007,7 @@ const Modal = class {
             if (this.gesture) {
                 this.gesture.destroy();
             }
+            this.cleanupViewTransitionListener();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -1893,8 +2027,10 @@ const Modal = class {
         return overlays.eventMethod(this.el, 'ionModalWillDismiss');
     }
     /**
-     * Move a sheet style modal to a specific breakpoint. The breakpoint value must
-     * be a value defined in your `breakpoints` array.
+     * Move a sheet style modal to a specific breakpoint.
+     *
+     * @param breakpoint The breakpoint value to move the sheet modal to.
+     * Must be a value defined in your `breakpoints` array.
      */
     async setCurrentBreakpoint(breakpoint) {
         if (!this.isSheetModal) {
@@ -1947,26 +2083,88 @@ const Modal = class {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    initViewTransitionListener() {
+        // Only enable for iOS card modals when no custom animations are provided
+        if (index$3.getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        // Set initial view state
+        this.currentViewIsPortrait = window.innerWidth < 768;
+        // Create debounced resize handler
+        let resizeTimeout;
+        this.resizeListener = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                this.handleViewTransition();
+            }, 100); // Debounce for 100ms to avoid excessive calls
+        };
+        window.addEventListener('resize', this.resizeListener);
+    }
+    handleViewTransition() {
+        const isPortrait = window.innerWidth < 768;
+        // Only transition if view state actually changed
+        if (this.currentViewIsPortrait === isPortrait) {
+            return;
+        }
+        // Cancel any ongoing transition animation
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+        const { presentingElement } = this;
+        if (!presentingElement) {
+            return;
+        }
+        // Create transition animation
+        let transitionAnimation;
+        if (this.currentViewIsPortrait && !isPortrait) {
+            // Portrait to landscape transition
+            transitionAnimation = portraitToLandscapeTransition(this.el, {
+                presentingEl: presentingElement});
+        }
+        else {
+            // Landscape to portrait transition
+            transitionAnimation = landscapeToPortraitTransition(this.el, {
+                presentingEl: presentingElement});
+        }
+        // Update state and play animation
+        this.currentViewIsPortrait = isPortrait;
+        this.viewTransitionAnimation = transitionAnimation;
+        transitionAnimation.play().then(() => {
+            this.viewTransitionAnimation = undefined;
+        });
+    }
+    cleanupViewTransitionListener() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = undefined;
+        }
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = index$3.getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (index$3.h(index$3.Host, Object.assign({ key: '04c094d52dcd7095fc08d74ab7f3e37b498ec480', "no-router": true,
+        const isSheetModalWithHandle = isSheetModal && showHandle;
+        return (index$3.h(index$3.Host, Object.assign({ key: 'd5bcaa588471573e1bcbd99997b306c8ecdd124f', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
-            tabIndex: !isHandleCycle ? -1 : 0 }, htmlAttributes, { style: {
+            tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '20e56317fbf12a75fbcfd4abb394146de1764b9b', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'cb87817485a204ee7bc117aaa9472de8acaebfd6', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: 'b5e88cd83782a5d09fe2caf298aaaf67d226f699',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '78b954a1c50a0325eb51db04314e86701c66d840', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '21887227c272f5eba1b3d164be3572bd710d415c', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: 'a40472a9065c04ad12fb7b2b2a05e5021f077ad5',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '90340f02007b74da70ace1d5035d7b49573fad2b', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: 'a4973f66587546031d1cc0197e1ba7c2521a3fbc', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: 'c7db14c97e2a80b0b9680635ea9d4361e8f4b77e' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), index$3.h("slot", { key: 'ee5e007e3a4e592d98f1b5a5d31ad55e6faa3bdb' }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {

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

@@ -1263,6 +1263,8 @@ const Popover = class {
      * Developers can pass a mouse, touch, or pointer event
      * to position the popover relative to where that event
      * was dispatched.
+     *
+     * @param event The event to position the popover relative to.
      */
     async present(event) {
         const unlock = await this.lockController.lock();
@@ -1326,15 +1328,14 @@ const Popover = class {
     }
     /**
      * Dismiss the popover overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
+     * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
      * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
      * a parent popover if this popover is nested. Defaults to `true`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role, dismissParentPopover = true) {
         const unlock = await this.lockController.lock();
@@ -1386,9 +1387,9 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = index.isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (index.h(index.Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, index.h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, index.h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -92,7 +92,6 @@ const ReorderGroup = class {
     }
     /**
      * Completes the reorder operation. Must be called by the `ionItemReorder` event.
-     *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
      *
@@ -279,7 +278,7 @@ const ReorderGroup = class {
     }
     render() {
         const mode = index.getIonMode(this);
-        return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (index.h(index.Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

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

@@ -676,6 +676,7 @@ const Router = class {
      *
      * @param path The path to navigate to.
      * @param direction The direction of the animation. Defaults to `"forward"`.
+     * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
         var _a;

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

@@ -257,10 +257,8 @@ const Searchbar = class {
     /**
      * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
      * `input.focus()`.
-     *
      * Developers who wish to focus an input when a page enters
      * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
-     *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
      *
@@ -439,8 +437,8 @@ const Searchbar = class {
         const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '5835c36fcb0b52aec956538202a783f6c194d853', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (index.h(index.Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (index.h(index.Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -450,14 +448,14 @@ const Searchbar = class {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, index.h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, index.h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -674,16 +674,15 @@ const Toast = class {
     }
     /**
      * Dismiss the toast overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the toast.
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the toast.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         var _a, _b;
@@ -851,9 +850,9 @@ const Toast = class {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             index$1.printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (index$1.h(index$1.Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (index$1.h(index$1.Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, index$1.h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, index$1.h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {