@ionic/core 8.7.18-dev.11770916502.174efd7f → 8.7.18-dev.11771365900.125bf49c

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

@@ -21,7 +21,6 @@ import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
 import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
-import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, } from "./safe-area-utils";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
@@ -233,31 +232,13 @@ export class Modal {
         }
     }
     onWindowResize() {
-        if (!this.presented)
+        // Only handle resize for iOS card modals when no custom animations are provided
+        if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
             return;
+        }
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = setTimeout(() => {
-            const context = this.getSafeAreaContext();
-            // iOS card modals: handle portrait/landscape view transitions
-            if (context.isCardModal && !this.enterAnimation && !this.leaveAnimation) {
-                this.handleViewTransition();
-            }
-            // Sheet modals: re-compute the internal offset property since safe-area
-            // values may change on device rotation (e.g., portrait notch vs landscape).
-            if (context.isSheetModal) {
-                this.updateSheetOffsetTop();
-            }
-            // Regular (non-sheet, non-card) modals: update safe-area overrides
-            // since the viewport may have crossed the centered-dialog breakpoint.
-            if (!context.isSheetModal && !context.isCardModal) {
-                this.updateSafeAreaOverrides();
-                // Re-evaluate fullscreen safe-area padding: clear first, then re-apply
-                if (this.wrapperEl) {
-                    this.wrapperEl.style.removeProperty('height');
-                    this.wrapperEl.style.removeProperty('padding-bottom');
-                }
-                this.applyFullscreenSafeArea();
-            }
+            this.handleViewTransition();
         }, 50); // Debounce to avoid excessive calls during active resizing
     }
     breakpointsChanged(breakpoints) {
@@ -274,9 +255,6 @@ export class Modal {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
         this.cleanupParentRemovalObserver();
-        // Also called in dismiss() — intentional dual cleanup covers both
-        // dismiss-then-remove and direct DOM removal without dismiss.
-        this.cleanupSafeAreaOverrides();
     }
     componentWillLoad() {
         var _a;
@@ -437,11 +415,6 @@ export class Modal {
             await waitForMount();
         }
         writeTask(() => this.el.classList.add('show-modal'));
-        // Recalculate isSheetModal before safe-area setup because framework
-        // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
-        this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        // Set initial safe-area overrides before animation
-        this.setInitialSafeAreaOverrides();
         const hasCardModal = presentingElement !== undefined;
         /**
          * We need to change the status bar at the
@@ -459,10 +432,6 @@ export class Modal {
             backdropBreakpoint: this.backdropBreakpoint,
             expandToScroll: this.expandToScroll,
         });
-        // Update safe-area based on actual position after animation
-        this.updateSafeAreaOverrides();
-        // Apply fullscreen safe-area padding if needed
-        this.applyFullscreenSafeArea();
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
             /**
@@ -494,7 +463,13 @@ export class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        if (this.isSheetModal) {
+        /**
+         * Recalculate isSheetModal because framework bindings (e.g., Angular)
+         * may not have been applied when componentWillLoad ran.
+         */
+        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+        this.isSheetModal = isSheetModal;
+        if (isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -684,9 +659,6 @@ export class Modal {
         if (this.gestureAnimationDismissing && role !== GESTURE) {
             return false;
         }
-        // Cancel any pending resize timeout to prevent stale updates during dismiss
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = undefined;
         /**
          * Because the canDismiss check below is async,
          * we need to claim a lock before the check happens,
@@ -741,7 +713,6 @@ export class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
-            this.cleanupSafeAreaOverrides();
             this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
@@ -870,9 +841,6 @@ export class Modal {
         this.viewTransitionAnimation = transitionAnimation;
         transitionAnimation.play().then(() => {
             this.viewTransitionAnimation = undefined;
-            // Wait for a layout pass after the transition so getBoundingClientRect()
-            // in getPositionBasedSafeAreaConfig() reflects the new dimensions.
-            raf(() => this.updateSafeAreaOverrides());
             // After orientation transition, recreate the swipe-to-close gesture
             // with updated animation that reflects the new presenting element state
             this.reinitSwipeToClose();
@@ -999,123 +967,6 @@ export class Modal {
         (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.parentRemovalObserver = undefined;
     }
-    /**
-     * Creates the context object for safe-area utilities.
-     */
-    getSafeAreaContext() {
-        return {
-            isSheetModal: this.isSheetModal,
-            isCardModal: this.presentingElement !== undefined && getIonMode(this) === 'ios',
-            presentingElement: this.presentingElement,
-            breakpoints: this.breakpoints,
-            currentBreakpoint: this.currentBreakpoint,
-        };
-    }
-    /**
-     * Sets initial safe-area overrides before modal animation.
-     * Called in present() before animation starts.
-     *
-     * For sheet modals, the SCSS --height formula uses --ion-modal-offset-top
-     * (an internal property) instead of --ion-safe-area-top. We resolve the
-     * root safe-area-top to pixels and set --ion-modal-offset-top, decoupling
-     * the height calculation from --ion-safe-area-top (which is zeroed for
-     * sheets to prevent header content from getting double-offset padding).
-     */
-    setInitialSafeAreaOverrides() {
-        const context = this.getSafeAreaContext();
-        const safeAreaConfig = getInitialSafeAreaConfig(context);
-        applySafeAreaOverrides(this.el, safeAreaConfig);
-        // Set the internal offset property with the resolved root safe-area-top value
-        if (context.isSheetModal) {
-            this.updateSheetOffsetTop();
-        }
-    }
-    /**
-     * Resolves the current root --ion-safe-area-top value and sets the
-     * internal --ion-modal-offset-top property on the host element.
-     * Called on present and on resize (e.g., device rotation changes safe-area).
-     */
-    updateSheetOffsetTop() {
-        const safeAreaTop = getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
-    }
-    /**
-     * Updates safe-area overrides during dynamic state changes.
-     * Called after animations, during gestures, and on orientation changes.
-     */
-    updateSafeAreaOverrides() {
-        const { wrapperEl, el } = this;
-        const context = this.getSafeAreaContext();
-        // Sheet modals: safe-area is fully determined at presentation time
-        // (top is always 0px, height is frozen). Nothing to update.
-        if (context.isSheetModal)
-            return;
-        // Card modals have fixed safe-area requirements set by initial prediction.
-        if (context.isCardModal)
-            return;
-        // wrapperEl is required for position-based detection below
-        if (!wrapperEl)
-            return;
-        // Regular modals: use position-based detection to correctly handle both
-        // fullscreen modals and centered dialogs with custom dimensions.
-        const safeAreaConfig = getPositionBasedSafeAreaConfig(wrapperEl);
-        applySafeAreaOverrides(el, safeAreaConfig);
-    }
-    /**
-     * Applies padding-bottom to fullscreen modal wrapper to prevent
-     * content from overlapping system navigation bar.
-     */
-    applyFullscreenSafeArea() {
-        const { wrapperEl, el } = this;
-        if (!wrapperEl)
-            return;
-        const context = this.getSafeAreaContext();
-        if (context.isSheetModal || context.isCardModal)
-            return;
-        // Check for standard Ionic layout children (ion-content, ion-footer),
-        // searching one level deep for wrapped components (e.g.,
-        // <app-footer><ion-footer>...</ion-footer></app-footer>).
-        // Note: uses a manual loop instead of querySelector(':scope > ...') because
-        // Stencil's mock-doc (used in spec tests) does not support :scope.
-        let hasContent = false;
-        let hasFooter = false;
-        for (const child of Array.from(el.children)) {
-            if (child.tagName === 'ION-CONTENT')
-                hasContent = true;
-            if (child.tagName === 'ION-FOOTER')
-                hasFooter = true;
-            for (const grandchild of Array.from(child.children)) {
-                if (grandchild.tagName === 'ION-CONTENT')
-                    hasContent = true;
-                if (grandchild.tagName === 'ION-FOOTER')
-                    hasFooter = true;
-            }
-        }
-        // Only apply wrapper padding for standard Ionic layouts (has ion-content
-        // but no ion-footer). Custom modals with raw HTML are fully
-        // developer-controlled and should not be modified.
-        if (!hasContent || hasFooter)
-            return;
-        // Reduce wrapper height by safe-area and add equivalent padding so the
-        // total visual size stays the same but the flex content area shrinks.
-        // Using height + padding instead of box-sizing: border-box avoids
-        // breaking custom modals that set --border-width (border-box would
-        // include the border inside the height, changing the layout).
-        wrapperEl.style.setProperty('height', 'calc(var(--height) - var(--ion-safe-area-bottom, 0px))');
-        wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
-    }
-    /**
-     * Clears all safe-area overrides and padding from wrapper.
-     */
-    cleanupSafeAreaOverrides() {
-        clearSafeAreaOverrides(this.el);
-        // Remove internal sheet offset property
-        this.el.style.removeProperty('--ion-modal-offset-top');
-        if (this.wrapperEl) {
-            this.wrapperEl.style.removeProperty('height');
-            this.wrapperEl.style.removeProperty('padding-bottom');
-        }
-    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -1123,20 +974,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '038ae26c2cb040043c7d0c217a4de6a7ae909235', "no-router": true,
+        return (h(Host, Object.assign({ key: '978ba9cc81464b2d9b4caaf36285d5f7bf7e568d', "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: '6bab796467b370e79b24ce17c5a3d51adb07ee8c', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'b9a19e86a2c7f079c88ef7a914c7c890aa601887', class: "modal-shadow" }), h("div", Object.assign({ key: 'f4315c34aa78be4e3540361755964be2ddf43265',
+            }, 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: '9f95566d8e0c06bb9607f514484848c250f35f1f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '91ff26d4f3ab4367f3a2940f51c6a5a3d4c972c3', class: "modal-shadow" }), h("div", Object.assign({ key: '064b2dba13854505a4eb1f5e54296ac79cb7a2bd',
             /*
               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: '3f7792bd65e0f8634e62bf27f9edcb636a03030a', 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: 'b579b08b114022032d078a527111456ceefc7b35', 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: '001e5b01831e240bd98f75ff62446b90b64d8394', 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: 'dacea58475b72d9c0209934ff31f3be6b9ac8c85', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,6 +135,10 @@ ion-backdrop {
   :host {
     --width: 600px;
     --height: 500px;
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
   }
 }
 @media only screen and (min-width: 768px) and (min-height: 768px) {
@@ -186,14 +190,9 @@ ion-backdrop {
 /**
  * Ensure that the sheet modal does not
  * completely cover the content.
- *
- * --ion-modal-offset-top is an internal property set by modal.tsx
- * with the resolved root safe-area-top pixel value. This decouples
- * the height calculation from --ion-safe-area-top (which is zeroed
- * for sheet modals to prevent header double-padding).
  */
 :host(.modal-sheet) {
-  --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
+  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
 }
 
 :host(.modal-sheet) .modal-wrapper,

package/dist/collection/components/nav/nav.js

@@ -828,7 +828,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '8067c9835d255daec61f33dba200fd3a6ff839a0' });
+        return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-link/nav-link.js

@@ -14,7 +14,7 @@ export class NavLink {
         };
     }
     render() {
-        return h(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
+        return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.js

@@ -10,9 +10,9 @@ import { getIonMode } from "../../global/ionic-global";
 export class Note {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0ec2ef7367d867fd7588611953f696eecdf3221e', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b86a6acc9274df6528d224d4c11ab826a0f84dbc', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'a200b94ddffb29cf6dabe6e984220930ea7efdef' })));
+            }) }, h("slot", { key: '5de76567ed7713827cd277a42db102faf34190c8' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -91,10 +91,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
+        return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
+            }) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-legacy/picker.js

@@ -207,11 +207,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: 'b95440747eb80cba23ae676d399d5e5816722c58', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '169d1c83ef40e7fcb134219a585298b403a70b0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '98518e5f5cea2dfb8dfa63d9545e9ae3a5765023', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '151755ab8eb23f9adafbfe201349398f5a69dee7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '5dcf93b2f4fe8f4fce7c7aec8f85ef45a03ef470', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'fd5d66708edd38adc5a4d2fad7298969398a05e3', class: "picker-columns" }, h("div", { key: '1b5830fd6cef1016af7736792c514965d6cb38a8', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'c6edeca7afd69e13c9c66ba36f261974fd0f8f78', class: "picker-below-highlight" }))), h("div", { key: 'e2a4b24710e30579b14b82dbfd3761b2187797b5', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, h("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), h("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -335,9 +335,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ed32d108dd94f0302fb453c31a3497ebae65ec37', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '9f0634890e66fd4ae74f826d1eea3431de121393', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '337e996e5be91af16446085fe22436f213b771eb', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'd69a132599d78d9e5107f12228978cfce4e43098', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/popover/animations/ios.enter.js

@@ -3,17 +3,8 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
-import { calculateWindowAdjustment, getArrowDimensions, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets, shouldShowArrow, } from "../utils";
+import { calculateWindowAdjustment, getArrowDimensions, getPopoverDimensions, getPopoverPosition, shouldShowArrow, } from "../utils";
 const POPOVER_IOS_BODY_PADDING = 5;
-/**
- * Minimum edge margin for iOS popovers ensures visual spacing from screen
- * edges on devices without safe areas (e.g., older iPhones without notches).
- * Previously this was a hardcoded `safeAreaMargin = 25` that served dual
- * purpose: safe-area avoidance AND visual spacing. Now that actual safe-area
- * insets are read dynamically, this floor preserves the visual spacing when
- * safe-area values are 0.
- */
-const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 /**
  * iOS Popover Enter Animation
  */
@@ -39,16 +30,8 @@ export const iosEnterAnimation = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-    const rawSafeArea = getSafeAreaInsets(doc);
-    const safeArea = size === 'cover'
-        ? { top: 0, bottom: 0, left: 0, right: 0 }
-        : {
-            top: Math.max(rawSafeArea.top, POPOVER_IOS_MIN_EDGE_MARGIN),
-            bottom: Math.max(rawSafeArea.bottom, POPOVER_IOS_MIN_EDGE_MARGIN),
-            left: Math.max(rawSafeArea.left, POPOVER_IOS_MIN_EDGE_MARGIN),
-            right: Math.max(rawSafeArea.right, POPOVER_IOS_MIN_EDGE_MARGIN),
-        };
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, arrowTop, arrowLeft, addPopoverBottomClass, hideArrow, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
+    const margin = size === 'cover' ? 0 : 25;
+    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
@@ -79,14 +62,10 @@ export const iosEnterAnimation = (baseEl, opts) => {
             baseEl.classList.add('popover-bottom');
         }
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
-        const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
-        const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
+        const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+        const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
         let leftValue = `${left}px`;
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
@@ -94,16 +73,12 @@ export const iosEnterAnimation = (baseEl, opts) => {
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        let topValue = `${top}px`;
-        if (checkSafeAreaTop) {
-            topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-        }
-        contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
+        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
         contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
         contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
         if (arrowEl !== null) {
             const didAdjustBounds = results.top !== top || results.left !== left;
-            const showArrow = !hideArrow && shouldShowArrow(side, didAdjustBounds, ev, trigger);
+            const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
             if (showArrow) {
                 arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
                 arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);

package/dist/collection/components/popover/animations/md.enter.js

@@ -3,7 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
-import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets } from "../utils";
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from "../utils";
 const POPOVER_MD_BODY_PADDING = 12;
 /**
  * Md Popover Enter Animation
@@ -28,23 +28,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-    // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
-    // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
-    const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc);
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates);
-    const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
-    const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
-    let leftValue = `${left}px`;
-    if (checkSafeAreaLeft) {
-        leftValue = `${left}px${safeAreaLeftCalc}`;
-    }
-    if (checkSafeAreaRight) {
-        leftValue = `${left}px${safeAreaRightCalc}`;
-    }
-    let topValue = `${top}px`;
-    if (checkSafeAreaTop) {
-        topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-    }
+    const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -61,17 +45,13 @@ export const mdEnterAnimation = (baseEl, opts) => {
     contentAnimation
         .addElement(contentEl)
         .beforeStyles({
-        top: `calc(${topValue} + var(--offset-y, 0px))`,
-        left: `calc(${leftValue} + var(--offset-x, 0px))`,
+        top: `calc(${top}px + var(--offset-y, 0px))`,
+        left: `calc(${left}px + var(--offset-x, 0px))`,
         'transform-origin': `${originY} ${originX}`,
     })
         .beforeAddWrite(() => {
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -83,7 +63,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
         if (size === 'cover') {
             baseEl.style.setProperty('--width', `${contentWidth}px`);
         }
-        if (addPopoverBottomClass) {
+        if (originY === 'bottom') {
             baseEl.classList.add('popover-bottom');
         }
     })

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

@@ -467,9 +467,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: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "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: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
+            }, 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: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }