@ionic/core 8.7.17-dev.11768239180.18ee1069 → 8.7.17-dev.11769628168.11eca7cd

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,187 +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;
-        }
-        // Phone-sized fullscreen modals inherit safe areas and use wrapper padding
-        if (!isTablet) {
-            this.applyFullscreenSafeArea();
-            return;
-        }
-        // Check if tablet modal is fullscreen via CSS custom properties
-        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 {
-            // Centered dialog doesn't touch edges
-            this.zeroAllSafeAreas();
-        }
-    }
-    /**
-     * 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 padding based on footer presence.
-     * Called initially and when footer is dynamically added/removed.
-     */
-    updateFooterPadding() {
-        if (!this.wrapperEl)
-            return;
-        const hasFooter = this.el.querySelector('ion-footer') !== null;
-        if (hasFooter) {
-            this.wrapperEl.style.removeProperty('padding-bottom');
-            this.wrapperEl.style.removeProperty('box-sizing');
-        }
-        else {
-            this.wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
-            this.wrapperEl.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 styles that may have been set for safe-area handling
-        if (this.wrapperEl) {
-            this.wrapperEl.style.removeProperty('padding-bottom');
-            this.wrapperEl.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
@@ -913,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;
     }
@@ -1172,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: '44022099fcaf047b97d1c2cb45b9b51c930e707c', "no-router": true,
+        return (h(Host, Object.assign({ key: '87328006ea6c75ebc518ace300438492a567223e', "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: 'ddd7e4f6eef51ac1f62ac70e0af10fb01e707f07', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '58620980e3e4ec273c6787bde026e1c010b904b7', class: "modal-shadow" }), h("div", Object.assign({ key: '3fb7f6218644ba898fc504467775593eb89426a0',
+            }, 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: 'ee94ff8e09b691dd4ad4e4db1720f06bc3c5a469', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'bffd69b4635c22d9f249725bd952c1e93d5615c7', class: "modal-shadow" }), h("div", Object.assign({ key: '1d394d3c68916e464ff1fbf5242419f4a3d3cca1',
             /*
               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: '9745cd590fdaa9d023a14b487ec2c87ddbafd7f7', 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: '2dcf58792018e557e0c323baad2d672bc99c0bb1', 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: 'b9a8b5d2d3d3c9b06f99179f496c9f08907d0bad', 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: '44164b1e8710c3895400ad9f44ecd99873874ad5', 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/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/utils.js

@@ -648,8 +648,6 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
     let bottom;
     let originX = contentOriginX;
     let originY = contentOriginY;
-    let checkSafeAreaTop = false;
-    let checkSafeAreaBottom = false;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
     const triggerTop = triggerCoordinates
@@ -694,18 +692,10 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
              * 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.
              */
-            top = Math.max(bodyPadding, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
-            /**
-             * If the popover is positioned near the top edge, account for safe area.
-             * This ensures the popover doesn't overlap with status bars or notches.
-             */
-            if (top <= bodyPadding + safeAreaMargin) {
-                checkSafeAreaTop = true;
-                top = bodyPadding;
-            }
             /**
              * If not enough room for popover to appear
              * above trigger, then cut it off.
@@ -713,35 +703,14 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         }
         else {
             bottom = bodyPadding;
-            /**
-             * When the popover is pinned to the bottom, account for safe area.
-             * This ensures the popover doesn't overlap with home indicators
-             * or navigation bars (e.g., Android API 36+ edge-to-edge).
-             */
-            checkSafeAreaBottom = true;
         }
     }
-    /**
-     * Final check: If the popover extends into any safe-area region,
-     * ensure the corresponding flag is set regardless of side.
-     * This handles cases where a side-positioned popover (left/right)
-     * still needs bottom safe-area padding because it extends into that region.
-     */
-    const popoverBottom = bottom !== undefined ? bodyHeight - bottom : top + contentHeight;
-    if (popoverBottom + safeAreaMargin > bodyHeight) {
-        checkSafeAreaBottom = true;
-    }
-    if (top < safeAreaMargin) {
-        checkSafeAreaTop = true;
-    }
     return {
         top,
         left,
         bottom,
         originX,
         originY,
-        checkSafeAreaTop,
-        checkSafeAreaBottom,
         checkSafeAreaLeft,
         checkSafeAreaRight,
         arrowTop,

package/dist/collection/components/range/range.js

@@ -665,7 +665,7 @@ export class Range {
             })));
     }
     render() {
-        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, dualKnobs, min, max } = this;
         const inItem = hostContext('ion-item', el);
         /**
          * If there is no start content then the knob at
@@ -680,8 +680,14 @@ export class Range {
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
+        /**
+         * Determine if any knob is at the min or max value to
+         * apply Host classes for styling.
+         */
+        const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
+        const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -690,10 +696,12 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
+                'range-value-min': valueAtMin,
+                'range-value-max': valueAtMax,
+            }) }, h("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, h("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '5341da8d19eb29091df680978a0e20cc8f2eec65', class: "native-wrapper" }, h("slot", { key: '09f1437078032676695442d8c827a16faa7dffe2', name: "start" }), this.renderRangeSlider(), h("slot", { key: '02b7781970ea4d44f10b5f4627a2ca36eca45f85', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-12T17:35:00",
+  "timestamp": "2026-01-28T19:24:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/ion-app_8.entry.js

@@ -513,20 +513,21 @@ const Content = class {
         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: '212b1438f044061887984e02e1c8943ee1d33c20', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
+                'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), 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: 'ea46641492eef8cc7b08fc398d0285115b5a7100', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'dc9096f0b97ab6145fb46cf065cd244f4af1cab5', 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: '4b13fd5b7e124353d43b47a30e975400ae2a0341' })), 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 getElement(this); }
 };