@ionic/core 8.7.18-dev.11770318664.15f47a5e → 8.7.18-dev.11770916502.174efd7f

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

@@ -16,6 +16,58 @@ require('./index-DkNv4J_i.js');
 require('./hardware-back-button-VCK4V3mG.js');
 require('./gesture-controller-dtqlP_q4.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;
+        helpers.raf(() => {
+            cachedInsets = null;
+            cacheInvalidationScheduled = false;
+        });
+    }
+    return insets;
+};
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -651,8 +703,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;
@@ -662,16 +716,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';
@@ -680,41 +737,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 {
@@ -725,9 +799,12 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
+        checkSafeAreaTop,
+        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
+        hideArrow,
     };
 };
 const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
@@ -757,6 +834,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
  */
@@ -782,8 +868,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 = animation.createAnimation();
     const backdropAnimation = animation.createAnimation();
     const contentAnimation = animation.createAnimation();
@@ -814,10 +908,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}`;
@@ -825,7 +923,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) {
@@ -901,7 +1003,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 = animation.createAnimation();
     const backdropAnimation = animation.createAnimation();
     const wrapperAnimation = animation.createAnimation();
@@ -918,13 +1036,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)');
@@ -936,7 +1058,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/dist/cjs/ion-refresher_2.cjs.entry.js

@@ -214,8 +214,6 @@ const Refresher = class {
         this.ionRefresh = index.createEvent(this, "ionRefresh", 7);
         this.ionPull = index.createEvent(this, "ionPull", 7);
         this.ionStart = index.createEvent(this, "ionStart", 7);
-        this.ionPullStart = index.createEvent(this, "ionPullStart", 7);
-        this.ionPullEnd = index.createEvent(this, "ionPullEnd", 7);
         this.appliedStyles = false;
         this.didStart = false;
         this.progress = 0;
@@ -270,8 +268,8 @@ const Refresher = class {
          * than `1`. The default value is `1` which is equal to the speed of the cursor.
          * If a negative value is passed in, the factor will be `1` instead.
          *
-         * For example, If the value passed is `1.2` and the content is dragged by
-         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * For example: If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
          * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
          * will be `8` pixels, less than the amount the cursor has moved.
          *
@@ -321,9 +319,6 @@ const Refresher = class {
         this.animations = [];
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
-        this.ionPullEnd.emit({
-            reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-        });
     }
     async setupiOSNativeRefresher(pullingSpinner, refreshingSpinner) {
         this.elementToTransform = this.scrollEl;
@@ -356,7 +351,6 @@ const Refresher = class {
                     if (!this.didStart) {
                         this.didStart = true;
                         this.ionStart.emit();
-                        this.ionPullStart.emit();
                     }
                     // emit "pulling" on every move
                     if (this.pointerDown) {
@@ -432,7 +426,6 @@ const Refresher = class {
                 this.lastVelocityY = ev.velocityY;
             },
             onEnd: () => {
-                const hadStarted = this.didStart;
                 this.pointerDown = false;
                 this.didStart = false;
                 if (this.needsCompletion) {
@@ -442,13 +435,6 @@ const Refresher = class {
                 else if (this.didRefresh) {
                     index.readTask(() => translateElement(this.elementToTransform, `${this.el.clientHeight}px`));
                 }
-                else if (hadStarted) {
-                    /**
-                     * User started pulling but released before reaching the refresh threshold.
-                     * Emit ionPullEnd to complete the event pair.
-                     */
-                    this.ionPullEnd.emit({ reason: 'cancel' });
-                }
             },
         });
         this.disabledChanged();
@@ -495,7 +481,6 @@ const Refresher = class {
                     ev.data.animation = animation;
                     animation.progressStart(false, 0);
                     this.ionStart.emit();
-                    this.ionPullStart.emit();
                     this.animations.push(animation);
                     return;
                 }
@@ -518,7 +503,6 @@ const Refresher = class {
                         this.animations = [];
                         this.gesture.enable(true);
                         this.state = 1 /* RefresherState.Inactive */;
-                        this.ionPullEnd.emit({ reason: 'cancel' });
                     });
                     return;
                 }
@@ -763,7 +747,6 @@ const Refresher = class {
         if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
-            this.ionPullStart.emit();
         }
         // emit "pulling" on every move
         this.ionPull.emit();
@@ -807,15 +790,6 @@ const Refresher = class {
              * available right away.
              */
             this.restoreOverflowStyle();
-            /**
-             * If ionPullStart was emitted, we need to emit ionPullEnd
-             * even though the gesture was aborted before reaching the
-             * pulling threshold.
-             */
-            if (this.didStart) {
-                this.didStart = false;
-                this.ionPullEnd.emit({ reason: 'cancel' });
-            }
         }
     }
     beginRefresh() {
@@ -862,9 +836,6 @@ const Refresher = class {
             if (this.contentFullscreen && this.backgroundContentEl) {
                 (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
             }
-            this.ionPullEnd.emit({
-                reason: state === 32 /* RefresherState.Completing */ ? 'complete' : 'cancel',
-            });
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -918,7 +889,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'bed0c2f44c32ecac24b7d8326ac7c7ef1d12c44f', slot: "fixed", class: {
+        return (index.h(index.Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -135,10 +135,6 @@ 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) {
@@ -190,9 +186,14 @@ 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-safe-area-top) + 10px));
+  --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
 }
 
 :host(.modal-sheet) .modal-wrapper,