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

package/dist/collection/components/modal/animations/ios.transition.js

@@ -0,0 +1,124 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+import { SwipeToCloseDefaults } from "../gestures/swipe-to-close";
+/**
+ * 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
+ */
+export const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('portrait-to-landscape-transition');
+    }
+    const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('portrait-to-landscape-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = 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 = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
+        const backdropAnimation = 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 = 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
+ */
+export const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('landscape-to-portrait-transition');
+    }
+    const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('landscape-to-portrait-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = createAnimation();
+    if (!hasCardModal) {
+        // Non-card modal: transition from landscape state to portrait state
+        const root = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible
+        const backdropAnimation = 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 = createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .fromTo('opacity', '0', '0') // Shadow stays hidden
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};

package/dist/collection/components/modal/modal.js

@@ -16,6 +16,7 @@ import { getIonMode } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
+import { portraitToLandscapeTransition, landscapeToPortraitTransition } from "./animations/ios.transition";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
@@ -184,6 +185,17 @@ export class Modal {
                 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) {
@@ -211,6 +223,7 @@ export class Modal {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        this.cleanupViewTransitionListener();
     }
     componentWillLoad() {
         var _a;
@@ -421,6 +434,8 @@ export class Modal {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
+        // Initialize view transition listener for iOS card modals
+        this.initViewTransitionListener();
         unlock();
     }
     initSwipeToClose() {
@@ -515,13 +530,13 @@ export class Modal {
     }
     /**
      * 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;
@@ -574,6 +589,7 @@ export class Modal {
             if (this.gesture) {
                 this.gesture.destroy();
             }
+            this.cleanupViewTransitionListener();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -593,8 +609,10 @@ export class Modal {
         return 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) {
@@ -647,26 +665,96 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    initViewTransitionListener() {
+        // Only enable for iOS card modals when no custom animations are provided
+        if (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,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        else {
+            // Landscape to portrait transition
+            transitionAnimation = landscapeToPortraitTransition(this.el, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        // 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 = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '04c094d52dcd7095fc08d74ab7f3e37b498ec480', "no-router": true,
+        const isSheetModalWithHandle = isSheetModal && showHandle;
+        return (h(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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '20e56317fbf12a75fbcfd4abb394146de1764b9b', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'cb87817485a204ee7bc117aaa9472de8acaebfd6', class: "modal-shadow" }), 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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '78b954a1c50a0325eb51db04314e86701c66d840', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '21887227c272f5eba1b3d164be3572bd710d415c', class: "modal-shadow" }), 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 && (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 && (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" })), 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) })), h("slot", { key: 'ee5e007e3a4e592d98f1b5a5d31ad55e6faa3bdb' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1454,7 +1542,7 @@ export class Modal {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }],
                     "references": {
                         "Promise": {
@@ -1469,13 +1557,13 @@ export class Modal {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the modal overlay after it has been presented.",
+                    "text": "Dismiss the modal overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }]
                 }
             },
@@ -1537,7 +1625,7 @@ export class Modal {
                     "parameters": [{
                             "name": "breakpoint",
                             "type": "number",
-                            "docs": ""
+                            "docs": "The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
                         }],
                     "references": {
                         "Promise": {
@@ -1548,8 +1636,11 @@ export class Modal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
-                    "tags": []
+                    "text": "Move a sheet style modal to a specific breakpoint.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "breakpoint The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
+                        }]
                 }
             },
             "getCurrentBreakpoint": {

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

@@ -309,6 +309,8 @@ export class Popover {
      * 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();
@@ -372,15 +374,14 @@ export class Popover {
     }
     /**
      * 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();
@@ -432,9 +433,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -1259,7 +1260,7 @@ export class Popover {
                     "parameters": [{
                             "name": "event",
                             "type": "MouseEvent | PointerEvent | TouchEvent | CustomEvent<any> | undefined",
-                            "docs": ""
+                            "docs": "The event to position the popover relative to."
                         }],
                     "references": {
                         "Promise": {
@@ -1291,7 +1292,10 @@ export class Popover {
                 },
                 "docs": {
                     "text": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "event The event to position the popover relative to."
+                        }]
                 }
             },
             "dismiss": {
@@ -1304,11 +1308,11 @@ export class Popover {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+                            "docs": "The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`."
                         }, {
                             "name": "dismissParentPopover",
                             "type": "boolean",
-                            "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
                         }],
                     "references": {
                         "Promise": {
@@ -1323,16 +1327,16 @@ export class Popover {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the popover overlay after it has been presented.",
+                    "text": "Dismiss the popover overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+                            "text": "role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`."
                         }, {
                             "name": "param",
-                            "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
                         }]
                 }
             },

package/dist/collection/components/reorder-group/reorder-group.js

@@ -54,7 +54,6 @@ export class ReorderGroup {
     }
     /**
      * 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.
      *
@@ -241,7 +240,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (h(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -330,7 +329,7 @@ export class ReorderGroup {
                     "return": "Promise<any>"
                 },
                 "docs": {
-                    "text": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
+                    "text": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
                     "tags": [{
                             "name": "param",
                             "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."

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

@@ -90,6 +90,7 @@ export class Router {
      *
      * @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;
@@ -411,7 +412,7 @@ export class Router {
                         }, {
                             "name": "animation",
                             "type": "AnimationBuilder | undefined",
-                            "docs": ""
+                            "docs": "A custom animation to use for the transition."
                         }],
                     "references": {
                         "Promise": {
@@ -439,6 +440,9 @@ export class Router {
                         }, {
                             "name": "param",
                             "text": "direction The direction of the animation. Defaults to `\"forward\"`."
+                        }, {
+                            "name": "param",
+                            "text": "animation A custom animation to use for the transition."
                         }]
                 }
             },

package/dist/collection/components/searchbar/searchbar.js

@@ -247,10 +247,8 @@ export class Searchbar {
     /**
      * 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.
      *
@@ -429,8 +427,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (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" }, h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (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" }, h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -440,14 +438,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, 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, h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, 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, h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), 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) }, 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) }, h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -1061,7 +1059,7 @@ export class Searchbar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
+                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
                     "tags": []
                 }
             },

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

@@ -239,16 +239,15 @@ export class Toast {
     }
     /**
      * 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;
@@ -416,9 +415,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             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 (h(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), 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: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), 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')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -1113,7 +1112,7 @@ export class Toast {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: `\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -1129,13 +1128,13 @@ export class Toast {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the toast overlay after it has been presented.",
+                    "text": "Dismiss the toast overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: `\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },