@ionic/core 8.6.5-nightly.20250714 → 8.6.5-nightly.20250716

package/components/item.js

@@ -23,6 +23,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -44,6 +45,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -91,13 +97,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
     componentDidLoad() {
         raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -106,6 +110,17 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -113,6 +128,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -214,7 +234,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -226,7 +246,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), h("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, h("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, h("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), h("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (h("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -251,7 +271,8 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         "target": [1],
         "type": [1],
         "multipleInputs": [32],
-        "focusable": [32]
+        "focusable": [32],
+        "isInteractive": [32]
     }, [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]], {
         "button": ["buttonChanged"]
     }]);

package/components/modal.js

@@ -793,20 +793,20 @@ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
         // need to care about layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
             .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
         const shadowAnimation = createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -851,17 +851,8 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
         presentingAnimation
             .addElement(presentingEl)
-            .beforeStyles({
-            transform: 'translateY(0px) scale(1)',
-            'transform-origin': 'top center',
-            overflow: 'hidden',
-        })
             .afterStyles({
             transform: toTransform,
-            'border-radius': '10px 10px 0 0',
-            filter: 'contrast(0.85)',
-            overflow: 'hidden',
-            'transform-origin': 'top center',
         })
             .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
             .keyframes([
@@ -876,20 +867,19 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         // to handle layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
-            .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('transform', fromTransform, toTransform);
         const shadowAnimation = createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -1710,6 +1700,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     disconnectedCallback() {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -1717,6 +1708,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -1922,6 +1917,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         }
         // Initialize view transition listener for iOS card modals
         this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -2082,6 +2079,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                 this.gesture.destroy();
             }
             this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2245,7 +2243,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             wrapperEl.style.transform = 'translateY(0vh)';
             wrapperEl.style.opacity = '1';
         }
-        if (presentingElement) {
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
             const isPortrait = window.innerWidth < 768;
             if (isPortrait) {
                 const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
@@ -2265,6 +2263,53 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             await modal.dismiss(undefined, 'parent-dismissed');
         });
     }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -2272,20 +2317,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '4cb27cda1c331191ccc623e15a999e524d053397', "no-router": true,
+        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '5de598f6aaad693da61a8cdfd8ea73e3d9cc762e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '2e74d2ed93c7884cbb1e3561d7296bba46e10426', class: "modal-shadow" }), h("div", Object.assign({ key: '314a7f8f669639b2d3f3a61a86e3b9de31a3ec78',
+            }, 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: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               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: 'fc16ab670165f5ecc6b27b026637094da16d7af4', 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: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'e3634c590f877dc34d39d651c059fa3f701cfb4d', onSlotchange: this.onSlotChange }))));
+            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: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -20,6 +20,7 @@ const Item = class {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -41,6 +42,11 @@ const Item = class {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -88,13 +94,11 @@ const Item = class {
     componentDidLoad() {
         helpers.raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -103,6 +107,17 @@ const Item = class {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -110,6 +125,11 @@ const Item = class {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -211,7 +231,7 @@ const Item = class {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (index.h(index.Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -223,7 +243,7 @@ const Item = class {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), index.h("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, index.h("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, index.h("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), index.h("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (index.h("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === index$1.chevronForward }))), canActivate && mode === 'md' && index.h("ion-ripple-effect", { key: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), index.h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), index.h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, index.h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, index.h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), index.h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (index.h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === index$1.chevronForward }))), canActivate && mode === 'md' && index.h("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -795,20 +795,20 @@ const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
         // need to care about layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
             .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
         const shadowAnimation = animation.createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -853,17 +853,8 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
         presentingAnimation
             .addElement(presentingEl)
-            .beforeStyles({
-            transform: 'translateY(0px) scale(1)',
-            'transform-origin': 'top center',
-            overflow: 'hidden',
-        })
             .afterStyles({
             transform: toTransform,
-            'border-radius': '10px 10px 0 0',
-            filter: 'contrast(0.85)',
-            overflow: 'hidden',
-            'transform-origin': 'top center',
         })
             .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
             .keyframes([
@@ -878,20 +869,19 @@ const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
         // to handle layering and modal-specific styles.
         const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
         const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-        const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
         presentingAnimation
-            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
+            .addElement(presentingEl)
             .afterStyles({
             transform: toTransform,
         })
-            .fromTo('transform', fromTransform, toTransform)
-            .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+            .fromTo('transform', fromTransform, toTransform);
         const shadowAnimation = animation.createAnimation()
             .addElement(presentingElRoot.querySelector('.modal-shadow'))
             .afterStyles({
             transform: toTransform,
+            opacity: '0',
         })
-            .fromTo('opacity', '0', '0') // Shadow stays hidden
             .fromTo('transform', fromTransform, toTransform);
         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
     }
@@ -1710,6 +1700,7 @@ const Modal = class {
     disconnectedCallback() {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -1717,6 +1708,10 @@ const Modal = class {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = helpers.inheritAttributes(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -1922,6 +1917,8 @@ const Modal = class {
         }
         // Initialize view transition listener for iOS card modals
         this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -2082,6 +2079,7 @@ const Modal = class {
                 this.gesture.destroy();
             }
             this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2245,7 +2243,7 @@ const Modal = class {
             wrapperEl.style.transform = 'translateY(0vh)';
             wrapperEl.style.opacity = '1';
         }
-        if (presentingElement) {
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
             const isPortrait = window.innerWidth < 768;
             if (isPortrait) {
                 const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
@@ -2265,6 +2263,53 @@ const Modal = class {
             await modal.dismiss(undefined, 'parent-dismissed');
         });
     }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -2272,20 +2317,20 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (index$3.h(index$3.Host, Object.assign({ key: '4cb27cda1c331191ccc623e15a999e524d053397', "no-router": true,
+        return (index$3.h(index$3.Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             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, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '5de598f6aaad693da61a8cdfd8ea73e3d9cc762e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '2e74d2ed93c7884cbb1e3561d7296bba46e10426', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '314a7f8f669639b2d3f3a61a86e3b9de31a3ec78',
+            }, 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: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               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: 'fc16ab670165f5ecc6b27b026637094da16d7af4', 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: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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", ref: (el) => (this.dragHandleEl = el) })), index$3.h("slot", { key: 'e3634c590f877dc34d39d651c059fa3f701cfb4d', onSlotchange: this.onSlotChange }))));
+            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: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {