@ionic/core 8.7.18-dev.11771365900.125bf49c → 8.7.18-dev.11772037614.10c71570

package/components/{p-DRHwNkVo.js → p-C6dkQWq2.js}

@@ -12,6 +12,58 @@ import { e as deepReady, w as waitForMount } from './p-DTWZF6wg.js';
 import { c as createAnimation } from './p-CL12ApCQ.js';
 import { d as defineCustomElement$1 } from './p-Bhnhnzjz.js';
 
+/**
+ * Shared per-frame cache for safe-area insets. Avoids creating a temporary
+ * DOM element and forcing a synchronous reflow on every call within the same
+ * frame (e.g., multiple popovers presenting simultaneously). Invalidated
+ * after the next animation frame so values stay fresh across orientation
+ * changes and viewport resizes.
+ */
+let cachedInsets = null;
+let cacheInvalidationScheduled = false;
+/**
+ * Resolves the current --ion-safe-area-* CSS custom property values
+ * to actual pixel numbers. A temporary element is needed because
+ * getComputedStyle on :root returns the declared value of custom
+ * properties (e.g. "env(safe-area-inset-top)") rather than a
+ * resolved number. By assigning them to standard padding properties,
+ * the browser resolves the value.
+ *
+ * Results are cached for the current frame to avoid repeated reflows.
+ */
+const getSafeAreaInsets = (doc) => {
+    if (cachedInsets !== null) {
+        return cachedInsets;
+    }
+    if (doc.body === null) {
+        return { top: 0, bottom: 0, left: 0, right: 0 };
+    }
+    const el = doc.createElement('div');
+    el.style.cssText =
+        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' +
+            'padding-top:var(--ion-safe-area-top,0px);' +
+            'padding-bottom:var(--ion-safe-area-bottom,0px);' +
+            'padding-left:var(--ion-safe-area-left,0px);' +
+            'padding-right:var(--ion-safe-area-right,0px);';
+    doc.body.appendChild(el);
+    const style = getComputedStyle(el);
+    const insets = {
+        top: parseFloat(style.paddingTop) || 0,
+        bottom: parseFloat(style.paddingBottom) || 0,
+        left: parseFloat(style.paddingLeft) || 0,
+        right: parseFloat(style.paddingRight) || 0,
+    };
+    el.remove();
+    cachedInsets = insets;
+    if (!cacheInvalidationScheduled) {
+        cacheInvalidationScheduled = true;
+        raf(() => {
+            cachedInsets = null;
+            cacheInvalidationScheduled = false;
+        });
+    }
+    return insets;
+};
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -647,8 +699,10 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
  * Adjusts popover positioning coordinates
  * such that popover does not appear offscreen
  * or overlapping safe area bounds.
+ *
+ * @internal - This is not part of the public API.
  */
-const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
     let arrowTop = coordArrowTop;
     const arrowLeft = coordArrowLeft;
     let left = coordLeft;
@@ -658,16 +712,19 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
     let originY = contentOriginY;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
+    let checkSafeAreaTop = false;
+    let checkSafeAreaBottom = false;
     const triggerTop = triggerCoordinates
         ? triggerCoordinates.top + triggerCoordinates.height
         : bodyHeight / 2 - contentHeight / 2;
     const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
     let addPopoverBottomClass = false;
+    const hideArrow = false;
     /**
      * Adjust popover so it does not
      * go off the left of the screen.
      */
-    if (left < bodyPadding + safeAreaMargin) {
+    if (left < bodyPadding + safeArea.left) {
         left = bodyPadding;
         checkSafeAreaLeft = true;
         originX = 'left';
@@ -676,41 +733,58 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
          * go off the right of the screen.
          */
     }
-    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
+    else if (contentWidth + bodyPadding + left + safeArea.right > bodyWidth) {
         checkSafeAreaRight = true;
         left = bodyWidth - contentWidth - bodyPadding;
         originX = 'right';
     }
     /**
      * Adjust popover so it does not
-     * go off the top of the screen.
+     * go off the bottom of the screen
+     * or overlap the bottom safe area.
      * If popover is on the left or the right of
      * the trigger, then we should not adjust top
      * margins.
      */
-    if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
-        if (triggerTop - contentHeight > 0) {
+    if (triggerTop + triggerHeight + contentHeight > bodyHeight - safeArea.bottom &&
+        (side === 'top' || side === 'bottom')) {
+        /**
+         * Calculate where the popover top would be if flipped
+         * above the trigger. Check whether that position clears
+         * the top safe area with room for bodyPadding.
+         */
+        const idealFlipTop = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
+        if (idealFlipTop >= safeArea.top + bodyPadding) {
             /**
-             * While we strive to align the popover with the trigger
-             * on smaller screens this is not always possible. As a result,
-             * we adjust the popover up so that it does not hang
-             * off the bottom of the screen. However, we do not want to move
-             * the popover up so much that it goes off the top of the screen.
-             *
-             * We chose 12 here so that the popover position looks a bit nicer as
-             * it is not right up against the edge of the screen.
+             * Popover fits above the trigger without overlapping
+             * the top safe area. Use the ideal position directly —
+             * no safe-area CSS vars needed since it clears both edges.
              */
-            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+            top = idealFlipTop;
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
-            /**
-             * If not enough room for popover to appear
-             * above trigger, then cut it off.
-             */
         }
         else {
+            /**
+             * Can't flip above the trigger. Constrain the bottom
+             * edge while keeping the top near the trigger. This
+             * creates a scrollable area anchored to the trigger.
+             */
             bottom = bodyPadding;
+            checkSafeAreaBottom = true;
+            /**
+             * When the trigger is near the bottom of the screen,
+             * the calculated top may be at or past the bottom
+             * constraint, leaving zero visible height. In that
+             * case, pull top up to the top safe area so the
+             * popover fills the available space between safe areas.
+             */
+            const bottomEdge = bodyHeight - safeArea.bottom - bodyPadding;
+            if (top >= bottomEdge) {
+                top = safeArea.top + bodyPadding;
+                checkSafeAreaTop = true;
+            }
         }
     }
     return {
@@ -721,9 +795,12 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
+        checkSafeAreaTop,
+        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
+        hideArrow,
     };
 };
 const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
@@ -753,6 +830,15 @@ const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
 };
 
 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
  */
@@ -778,8 +864,16 @@ 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, 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 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} = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
@@ -810,10 +904,14 @@ const iosEnterAnimation = (baseEl, opts) => {
             baseEl.classList.add('popover-bottom');
         }
         if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
+            let bottomValue = `${bottom}px`;
+            if (checkSafeAreaBottom) {
+                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
+            }
+            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
         }
-        const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
-        const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+        const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
+        const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
         let leftValue = `${left}px`;
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
@@ -821,7 +919,11 @@ const iosEnterAnimation = (baseEl, opts) => {
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+        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('left', `calc(${leftValue} + var(--offset-x, 0))`);
         contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
         if (arrowEl !== null) {
@@ -897,7 +999,23 @@ 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 } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
+    // 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 baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -914,13 +1032,17 @@ const mdEnterAnimation = (baseEl, opts) => {
     contentAnimation
         .addElement(contentEl)
         .beforeStyles({
-        top: `calc(${top}px + var(--offset-y, 0px))`,
-        left: `calc(${left}px + var(--offset-x, 0px))`,
+        top: `calc(${topValue} + var(--offset-y, 0px))`,
+        left: `calc(${leftValue} + var(--offset-x, 0px))`,
         'transform-origin': `${originY} ${originX}`,
     })
         .beforeAddWrite(() => {
         if (bottom !== undefined) {
-            contentEl.style.setProperty('bottom', `${bottom}px`);
+            let bottomValue = `${bottom}px`;
+            if (checkSafeAreaBottom) {
+                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
+            }
+            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -932,7 +1054,7 @@ const mdEnterAnimation = (baseEl, opts) => {
         if (size === 'cover') {
             baseEl.style.setProperty('--width', `${contentWidth}px`);
         }
-        if (originY === 'bottom') {
+        if (addPopoverBottomClass) {
             baseEl.classList.add('popover-bottom');
         }
     })

package/components/{p-CJrGvZ1Z.js → p-CFZWrvIQ.js}

@@ -8,13 +8,13 @@ import { g as getClassMap } from './p-DiVJyqlX.js';
 import { d as defineCustomElement$d } from './p-DK2Bn1Mc.js';
 import { d as defineCustomElement$c } from './p-BBFQmhcD.js';
 import { d as defineCustomElement$b } from './p-DyFBFrV7.js';
-import { d as defineCustomElement$a } from './p-DPm73mCi.js';
+import { d as defineCustomElement$a } from './p-DGOrLIyS.js';
 import { d as defineCustomElement$9 } from './p-DX0w75a9.js';
 import { d as defineCustomElement$8 } from './p-Wro9IPHE.js';
 import { d as defineCustomElement$7 } from './p-aIWC4ZEV.js';
 import { d as defineCustomElement$6 } from './p-B25GjpND.js';
 import { d as defineCustomElement$5 } from './p-Bt_moUyl.js';
-import { d as defineCustomElement$4 } from './p-BnpDIASH.js';
+import { d as defineCustomElement$4 } from './p-BANeLH_G.js';
 import { d as defineCustomElement$3 } from './p-LgLeKTkH.js';
 import { d as defineCustomElement$2 } from './p-BTlwXR9e.js';
 import { d as defineCustomElement$1 } from './p-Dt8zaCLQ.js';

package/components/{p-CUfY9DTD.js → p-Cdm3dKWf.js}

@@ -28,11 +28,16 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
     }
     componentDidLoad() {
         if (this.noAnimate) {
-            setTimeout(() => {
+            this.loadTimeout = setTimeout(() => {
                 this.noAnimate = false;
             }, 1000);
         }
     }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
     colorChanged() {
         this.emitColor();
     }
@@ -61,13 +66,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '684ddfa719e34d743489ff05a0df067829257c73', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '4aace3e2b36250e832c44f63bea21116d77220fb' })));
+            }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/{p-D3KEyQ8e.js → p-CslsoGzv.js}

@@ -8,11 +8,11 @@ import { b as getIonMode } from './p-Bxl5etF4.js';
 import { d as defineCustomElement$9 } from './p-DyFBFrV7.js';
 import { d as defineCustomElement$8 } from './p-Wro9IPHE.js';
 import { d as defineCustomElement$7 } from './p-aIWC4ZEV.js';
-import { d as defineCustomElement$6 } from './p-CUfY9DTD.js';
+import { d as defineCustomElement$6 } from './p-Cdm3dKWf.js';
 import { d as defineCustomElement$5 } from './p-B25GjpND.js';
 import { d as defineCustomElement$4 } from './p-NhiRFRn9.js';
 import { d as defineCustomElement$3 } from './p-Bt_moUyl.js';
-import { d as defineCustomElement$2 } from './p-BnpDIASH.js';
+import { d as defineCustomElement$2 } from './p-BANeLH_G.js';
 import { d as defineCustomElement$1 } from './p-LgLeKTkH.js';
 
 const selectPopoverIosCss = ".sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}";

package/components/{p-DPm73mCi.js → p-DGOrLIyS.js}

@@ -134,6 +134,10 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends H {
             this.tabsElement = null;
             this.tabsLoadCallback = undefined;
         }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -372,7 +376,7 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends H {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '287f5bb78888b0f66394a35ba2a3ad636d8f3412', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -380,12 +384,12 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends H {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
+            } }, inheritedAttributes), h("div", { key: '2e70e5e0ab4209478ea711a630058fa0e83af7f8', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '018a83406173ec7f7725f09b4bd1c0d964874ee4', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '6f028eeb7c9dc7e1b82a8e549e1dd8aaf1d15fca' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return this; }
     static get style() { return contentCss; }