@ionic/core 8.7.18-dev.11769790854.11895f8f → 8.7.18-dev.11770238549.14c2a85f

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

@@ -31,10 +31,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: 'cd567114769a30bd3871ed5d15bf42aed39956e1', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '55135952f3a42cb5d21916dfb7b169d894b381e3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '773d4cff95ca75f23578b1e1dca53c9933f28a33' })));
+            } }, h("slot", { key: 'e8ecb59a6ec075b07e2a1b8fcdf7df3dd9975a03' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
-export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onGestureMove) => {
+export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -338,8 +338,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        // Notify modal of position change for safe-area updates
-        onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
     };
     const onEnd = (detail) => {
         /**

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -12,7 +12,7 @@ import { calculateSpringStep, handleCanDismiss } from "./utils";
 export const SwipeToCloseDefaults = {
     MIN_PRESENTING_SCALE: 0.915,
 };
-export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onGestureMove) => {
+export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
     /**
      * The step value at which a card modal
      * is eligible for dismissing via gesture.
@@ -169,8 +169,6 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step;
         const clampedStep = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(clampedStep);
-        // Notify modal of position change for safe-area updates
-        onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
         /**
          * When swiping down half way, the status bar style
          * should be reset to its default value.

package/dist/collection/components/modal/modal.ios.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) {

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

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, writeTask } from "@stencil/core";
-import { win } from "../../utils/browser/index";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../utils/helpers";
@@ -43,10 +42,6 @@ export class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        // Whether to skip coordinate-based safe-area detection (for fullscreen phone modals)
-        this.skipSafeAreaCoordinateDetection = false;
-        // Track previous safe-area state to avoid redundant DOM writes
-        this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -237,10 +232,7 @@ export class Modal {
         }
     }
     onWindowResize() {
-        // Invalidate safe-area cache on resize (device rotation may change values)
-        this.cachedSafeAreas = undefined;
-        this.updateSafeAreaOverrides();
-        // Only handle view transition for iOS card modals when no custom animations are provided
+        // Only handle resize for iOS card modals when no custom animations are provided
         if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
             return;
         }
@@ -263,8 +255,6 @@ export class Modal {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
         this.cleanupParentRemovalObserver();
-        // Reset safe-area state to handle removal without dismiss (e.g., framework unmount)
-        this.resetSafeAreaState();
     }
     componentWillLoad() {
         var _a;
@@ -424,8 +414,6 @@ export class Modal {
         else if (!this.keepContentsMounted) {
             await waitForMount();
         }
-        // Predict safe-area needs based on modal configuration to avoid visual snap
-        this.setInitialSafeAreaOverrides(presentingElement);
         writeTask(() => this.el.classList.add('show-modal'));
         const hasCardModal = presentingElement !== undefined;
         /**
@@ -487,8 +475,6 @@ export class Modal {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
-        // Now that animation is complete, update safe-area based on actual position
-        this.updateSafeAreaOverrides();
         // Initialize view transition listener for iOS card modals
         this.initViewTransitionListener();
         // Initialize parent removal observer
@@ -540,7 +526,7 @@ export class Modal {
                 await this.dismiss(undefined, GESTURE);
                 this.gestureAnimationDismissing = false;
             });
-        }, () => this.updateSafeAreaOverrides());
+        });
         this.gesture.enable(true);
     }
     initSheetGesture() {
@@ -561,8 +547,7 @@ export class Modal {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
             }
-            this.updateSafeAreaOverrides();
-        }, () => this.updateSafeAreaOverrides());
+        });
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
@@ -640,197 +625,6 @@ export class Modal {
         // Clear the cached reference
         this.cachedPageParent = undefined;
     }
-    /**
-     * Sets initial safe-area overrides based on modal configuration before
-     * the modal becomes visible. This predicts whether the modal will touch
-     * screen edges to avoid a visual snap after animation completes.
-     */
-    setInitialSafeAreaOverrides(presentingElement) {
-        const style = this.el.style;
-        const mode = getIonMode(this);
-        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        // Card modals only exist in iOS mode - in MD mode, presentingElement is ignored
-        const isCardModal = presentingElement !== undefined && mode === 'ios';
-        const isTablet = window.innerWidth >= 768;
-        // Sheet modals always touch bottom edge, never top/left/right
-        if (isSheetModal) {
-            style.setProperty('--ion-safe-area-top', '0px');
-            style.setProperty('--ion-safe-area-left', '0px');
-            style.setProperty('--ion-safe-area-right', '0px');
-            return;
-        }
-        // Card modals have rounded top corners
-        if (isCardModal) {
-            style.setProperty('--ion-safe-area-top', '0px');
-            if (isTablet) {
-                // On tablets, card modals are inset from all edges
-                this.zeroAllSafeAreas();
-            }
-            else {
-                // On phones, card modals still extend to the bottom edge
-                style.setProperty('--ion-safe-area-left', '0px');
-                style.setProperty('--ion-safe-area-right', '0px');
-                this.applyFullscreenSafeArea();
-            }
-            return;
-        }
-        // Check if modal is fullscreen via CSS custom properties
-        // This applies to both phone and tablet sizes - custom modals may have
-        // non-fullscreen dimensions even on phones (e.g., --height: 70%)
-        const computedStyle = getComputedStyle(this.el);
-        const width = computedStyle.getPropertyValue('--width').trim();
-        const height = computedStyle.getPropertyValue('--height').trim();
-        const isFullscreen = width === '100%' && height === '100%';
-        if (isFullscreen) {
-            this.applyFullscreenSafeArea();
-        }
-        else if (isTablet) {
-            // Centered dialog on tablet doesn't touch edges
-            this.zeroAllSafeAreas();
-        }
-        else {
-            // Non-fullscreen modal on phone - use coordinate-based detection
-            // to determine which edges it touches (e.g., bottom-aligned custom modals)
-        }
-    }
-    /**
-     * Applies safe-area handling for fullscreen modals.
-     * Adds wrapper padding when no footer is present to prevent
-     * content from overlapping system navigation areas.
-     */
-    applyFullscreenSafeArea() {
-        this.skipSafeAreaCoordinateDetection = true;
-        this.updateFooterPadding();
-        // Watch for dynamic footer additions/removals (e.g., async data loading)
-        // Use subtree:true to support wrapped footers in framework components
-        // (e.g., <my-footer><ion-footer>...</ion-footer></my-footer>)
-        if (!this.footerObserver && win !== undefined && 'MutationObserver' in win) {
-            this.footerObserver = new MutationObserver(() => this.updateFooterPadding());
-            this.footerObserver.observe(this.el, { childList: true, subtree: true });
-        }
-    }
-    /**
-     * Updates wrapper and shadow padding based on footer presence.
-     * Called initially and when footer is dynamically added/removed.
-     * Both elements must be styled identically to prevent visual mismatches.
-     */
-    updateFooterPadding() {
-        if (!this.wrapperEl)
-            return;
-        const hasFooter = this.el.querySelector('ion-footer') !== null;
-        // Apply to both wrapper and shadow to keep them in sync
-        const elements = [this.wrapperEl, this.shadowEl].filter(Boolean);
-        if (hasFooter) {
-            elements.forEach((el) => {
-                el.style.removeProperty('padding-bottom');
-                el.style.removeProperty('box-sizing');
-            });
-        }
-        else {
-            elements.forEach((el) => {
-                el.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
-                el.style.setProperty('box-sizing', 'border-box');
-            });
-        }
-    }
-    /**
-     * Sets all safe-area CSS variables to 0px for modals that
-     * don't touch screen edges.
-     */
-    zeroAllSafeAreas() {
-        const style = this.el.style;
-        style.setProperty('--ion-safe-area-top', '0px');
-        style.setProperty('--ion-safe-area-bottom', '0px');
-        style.setProperty('--ion-safe-area-left', '0px');
-        style.setProperty('--ion-safe-area-right', '0px');
-    }
-    /**
-     * Resets all safe-area related state and styles.
-     * Called during dismiss and disconnectedCallback to ensure clean state
-     * for re-presentation of inline modals.
-     */
-    resetSafeAreaState() {
-        var _a;
-        this.skipSafeAreaCoordinateDetection = false;
-        this.cachedSafeAreas = undefined;
-        this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
-        (_a = this.footerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.footerObserver = undefined;
-        // Clear wrapper and shadow styles that may have been set for safe-area handling
-        [this.wrapperEl, this.shadowEl].forEach((el) => {
-            if (el) {
-                el.style.removeProperty('padding-bottom');
-                el.style.removeProperty('box-sizing');
-            }
-        });
-        // Clear safe-area CSS variable overrides
-        const style = this.el.style;
-        style.removeProperty('--ion-safe-area-top');
-        style.removeProperty('--ion-safe-area-bottom');
-        style.removeProperty('--ion-safe-area-left');
-        style.removeProperty('--ion-safe-area-right');
-    }
-    /**
-     * Gets the root safe-area values from the document element.
-     * Uses cached values during gestures to avoid getComputedStyle calls.
-     */
-    getSafeAreaValues() {
-        if (!this.cachedSafeAreas) {
-            const rootStyle = getComputedStyle(document.documentElement);
-            this.cachedSafeAreas = {
-                top: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-top')) || 0,
-                bottom: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-bottom')) || 0,
-                left: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-left')) || 0,
-                right: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-right')) || 0,
-            };
-        }
-        return this.cachedSafeAreas;
-    }
-    /**
-     * Updates safe-area CSS variable overrides based on whether the modal
-     * extends into each safe-area region. Called after animation
-     * and during gestures to handle dynamic position changes.
-     *
-     * Optimized to avoid redundant DOM writes by tracking previous state.
-     */
-    updateSafeAreaOverrides() {
-        if (this.skipSafeAreaCoordinateDetection) {
-            return;
-        }
-        const wrapper = this.wrapperEl;
-        if (!wrapper) {
-            return;
-        }
-        const rect = wrapper.getBoundingClientRect();
-        const safeAreas = this.getSafeAreaValues();
-        const extendsIntoTop = rect.top < safeAreas.top;
-        const extendsIntoBottom = rect.bottom > window.innerHeight - safeAreas.bottom;
-        const extendsIntoLeft = rect.left < safeAreas.left;
-        const extendsIntoRight = rect.right > window.innerWidth - safeAreas.right;
-        // Only update DOM when state actually changes
-        const prev = this.prevSafeAreaState;
-        const style = this.el.style;
-        if (extendsIntoTop !== prev.top) {
-            extendsIntoTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
-            prev.top = extendsIntoTop;
-        }
-        if (extendsIntoBottom !== prev.bottom) {
-            extendsIntoBottom
-                ? style.removeProperty('--ion-safe-area-bottom')
-                : style.setProperty('--ion-safe-area-bottom', '0px');
-            prev.bottom = extendsIntoBottom;
-        }
-        if (extendsIntoLeft !== prev.left) {
-            extendsIntoLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
-            prev.left = extendsIntoLeft;
-        }
-        if (extendsIntoRight !== prev.right) {
-            extendsIntoRight
-                ? style.removeProperty('--ion-safe-area-right')
-                : style.setProperty('--ion-safe-area-right', '0px');
-            prev.right = extendsIntoRight;
-        }
-    }
     sheetOnDismiss() {
         /**
          * While the gesture animation is finishing
@@ -923,8 +717,6 @@ export class Modal {
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
-        // Reset safe-area state for potential re-presentation
-        this.resetSafeAreaState();
         unlock();
         return dismissed;
     }
@@ -1182,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: '8f42c71ec9c9270b4218ca7eec57ca998871ac07', "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: '2f7b08b019c66cbfceacafa9a68b91f8da1f4084', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '6b0d1ae90e8483332f74371be5dcbd0a7b2661ba', class: "modal-shadow", ref: (el) => (this.shadowEl = el) }), h("div", Object.assign({ key: 'c96f671fb25e5de45231ea65ac52500547b2e262',
+            }, 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: 'e07419b01a588c0ba62ed9607c843cac7bd26337', 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: '65f35079df8eb8b6cd262e3a08297866715ce7ea', 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) {

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

@@ -31,7 +31,7 @@ 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 margin = size === 'cover' ? 0 : 25;
-    const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom, 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 { 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();
@@ -61,35 +61,19 @@ export const iosEnterAnimation = (baseEl, opts) => {
         if (addPopoverBottomClass) {
             baseEl.classList.add('popover-bottom');
         }
-        /**
-         * Safe area CSS variable adjustments.
-         * When the popover is positioned near an edge, we add the corresponding
-         * safe-area inset to ensure the popover doesn't overlap with system UI
-         * (status bars, home indicators, navigation bars on Android API 36+, etc.)
-         */
-        const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
-        const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
+        if (bottom !== undefined) {
+            contentEl.style.setProperty('bottom', `${bottom}px`);
+        }
         const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
         const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
-        let topValue = `${top}px`;
-        let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
         let leftValue = `${left}px`;
-        if (checkSafeAreaTop) {
-            topValue = `${top}px${safeAreaTop}`;
-        }
-        if (checkSafeAreaBottom && bottomValue !== undefined) {
-            bottomValue = `${bottom}px${safeAreaBottom}`;
-        }
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
         }
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        if (bottomValue !== undefined) {
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
-        }
-        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) {

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

@@ -28,32 +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;
-    const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom, checkSafeAreaLeft, checkSafeAreaRight, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
-    /**
-     * Safe area CSS variable adjustments.
-     * When the popover is positioned near an edge, we add the corresponding
-     * safe-area inset to ensure the popover doesn't overlap with system UI
-     * (status bars, home indicators, navigation bars on Android API 36+, etc.)
-     */
-    const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
-    const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
-    const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
-    const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
-    let topValue = `${top}px`;
-    let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
-    let leftValue = `${left}px`;
-    if (checkSafeAreaTop) {
-        topValue = `${top}px${safeAreaTop}`;
-    }
-    if (checkSafeAreaBottom && bottomValue !== undefined) {
-        bottomValue = `${bottom}px${safeAreaBottom}`;
-    }
-    if (checkSafeAreaLeft) {
-        leftValue = `${left}px${safeAreaLeft}`;
-    }
-    if (checkSafeAreaRight) {
-        leftValue = `${left}px${safeAreaRight}`;
-    }
+    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();
@@ -70,13 +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 (bottomValue !== undefined) {
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+        if (bottom !== undefined) {
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');

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"; }