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

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

@@ -2,6 +2,58 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { getElementRoot, raf } from "../../utils/helpers";
+/**
+ * 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.
+ */
+export 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
@@ -639,8 +691,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.
  */
-export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+export 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;
@@ -650,16 +704,19 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
     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';
@@ -668,41 +725,58 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
          * 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 {
@@ -713,9 +787,12 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
+        checkSafeAreaTop,
+        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
+        hideArrow,
     };
 };
 export const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {

package/dist/collection/components/refresher/refresher.js

@@ -68,8 +68,8 @@ export class Refresher {
          * 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.
          *
@@ -119,9 +119,6 @@ export class Refresher {
         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;
@@ -154,7 +151,6 @@ export class Refresher {
                     if (!this.didStart) {
                         this.didStart = true;
                         this.ionStart.emit();
-                        this.ionPullStart.emit();
                     }
                     // emit "pulling" on every move
                     if (this.pointerDown) {
@@ -230,7 +226,6 @@ export class Refresher {
                 this.lastVelocityY = ev.velocityY;
             },
             onEnd: () => {
-                const hadStarted = this.didStart;
                 this.pointerDown = false;
                 this.didStart = false;
                 if (this.needsCompletion) {
@@ -240,13 +235,6 @@ export class Refresher {
                 else if (this.didRefresh) {
                     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();
@@ -293,7 +281,6 @@ export class Refresher {
                     ev.data.animation = animation;
                     animation.progressStart(false, 0);
                     this.ionStart.emit();
-                    this.ionPullStart.emit();
                     this.animations.push(animation);
                     return;
                 }
@@ -316,7 +303,6 @@ export class Refresher {
                         this.animations = [];
                         this.gesture.enable(true);
                         this.state = 1 /* RefresherState.Inactive */;
-                        this.ionPullEnd.emit({ reason: 'cancel' });
                     });
                     return;
                 }
@@ -561,7 +547,6 @@ export class Refresher {
         if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
-            this.ionPullStart.emit();
         }
         // emit "pulling" on every move
         this.ionPull.emit();
@@ -605,15 +590,6 @@ export class Refresher {
              * 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() {
@@ -660,9 +636,6 @@ export class Refresher {
             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
@@ -716,7 +689,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'bed0c2f44c32ecac24b7d8326ac7c7ef1d12c44f', slot: "fixed", class: {
+        return (h(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -836,7 +809,7 @@ export class Refresher {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example, If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
+                    "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
                 "getter": false,
                 "setter": false,
@@ -915,24 +888,6 @@ export class Refresher {
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `ionPullStart` instead."
-                        }],
-                    "text": "Emitted when the user begins to start pulling down.\nTODO(FW-7044): Remove this in a major release"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "ionPullStart",
-                "name": "ionPullStart",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when the user begins to start pulling down."
@@ -942,27 +897,6 @@ export class Refresher {
                     "resolved": "void",
                     "references": {}
                 }
-            }, {
-                "method": "ionPullEnd",
-                "name": "ionPullEnd",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the refresher has returned to the inactive state\nafter a pull gesture. This fires whether the refresh completed\nsuccessfully or was canceled."
-                },
-                "complexType": {
-                    "original": "RefresherPullEndEventDetail",
-                    "resolved": "RefresherPullEndEventDetail",
-                    "references": {
-                        "RefresherPullEndEventDetail": {
-                            "location": "import",
-                            "path": "./refresher-interface",
-                            "id": "src/components/refresher/refresher-interface.ts::RefresherPullEndEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-05T19:12:51",
+  "timestamp": "2026-02-12T17:17:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",
@@ -26514,7 +26514,7 @@
           "mutable": false,
           "attr": "pull-factor",
           "reflectToAttr": false,
-          "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example, If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
+          "docs": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher.",
           "docsTags": [
             {
               "name": "default",
@@ -26703,40 +26703,6 @@
           "docs": "Emitted while the user is pulling down the content and exposing the refresher.",
           "docsTags": []
         },
-        {
-          "event": "ionPullEnd",
-          "detail": "RefresherPullEndEventDetail",
-          "bubbles": true,
-          "complexType": {
-            "original": "RefresherPullEndEventDetail",
-            "resolved": "RefresherPullEndEventDetail",
-            "references": {
-              "RefresherPullEndEventDetail": {
-                "location": "import",
-                "path": "./refresher-interface",
-                "id": "src/components/refresher/refresher-interface.ts::RefresherPullEndEventDetail"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the refresher has returned to the inactive state\nafter a pull gesture. This fires whether the refresh completed\nsuccessfully or was canceled.",
-          "docsTags": []
-        },
-        {
-          "event": "ionPullStart",
-          "detail": "void",
-          "bubbles": true,
-          "complexType": {
-            "original": "void",
-            "resolved": "void",
-            "references": {}
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Emitted when the user begins to start pulling down.",
-          "docsTags": []
-        },
         {
           "event": "ionRefresh",
           "detail": "RefresherEventDetail",
@@ -26768,14 +26734,8 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user begins to start pulling down.\nTODO(FW-7044): Remove this in a major release",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use `ionPullStart` instead."
-            }
-          ],
-          "deprecation": "Use `ionPullStart` instead."
+          "docs": "Emitted when the user begins to start pulling down.",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -37591,11 +37551,6 @@
       "docstring": "",
       "path": "src/components/refresher/refresher-interface.ts"
     },
-    "src/components/refresher/refresher-interface.ts::RefresherPullEndEventDetail": {
-      "declaration": "export interface RefresherPullEndEventDetail {\n  reason: 'complete' | 'cancel';\n}",
-      "docstring": "",
-      "path": "src/components/refresher/refresher-interface.ts"
-    },
     "src/components/reorder-group/reorder-group-interface.ts::ItemReorderEventDetail": {
       "declaration": "export interface ItemReorderEventDetail {\n  from: number;\n  to: number;\n  complete: (data?: boolean | any[]) => any;\n}",
       "docstring": "",