@ionic/core 8.7.17-dev.11767895575.16ea7cef → 8.7.17-dev.11767980394.1d9266a9

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

@@ -648,6 +648,8 @@ 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
@@ -692,10 +694,18 @@ 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(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+            top = Math.max(bodyPadding, 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.
@@ -703,14 +713,35 @@ 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/tab-bar/tab-bar.js

@@ -11,7 +11,6 @@ import { getIonMode } from "../../global/ionic-global";
 export class TabBar {
     constructor() {
         this.keyboardCtrl = null;
-        this.keyboardCtrlPromise = null;
         this.didLoad = false;
         this.keyboardVisible = false;
         /**
@@ -47,7 +46,7 @@ export class TabBar {
         }
     }
     async connectedCallback() {
-        const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
+        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
             /**
              * If the keyboard is hiding, then we need to wait
              * for the webview to resize. Otherwise, the tab bar
@@ -58,40 +57,21 @@ export class TabBar {
             }
             this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
         });
-        this.keyboardCtrlPromise = promise;
-        const keyboardCtrl = await promise;
-        /**
-         * Only assign if this is still the current promise.
-         * Otherwise, a new connectedCallback has started or
-         * disconnectedCallback was called, so destroy this instance.
-         */
-        if (this.keyboardCtrlPromise === promise) {
-            this.keyboardCtrl = keyboardCtrl;
-            this.keyboardCtrlPromise = null;
-        }
-        else {
-            keyboardCtrl.destroy();
-        }
     }
     disconnectedCallback() {
-        if (this.keyboardCtrlPromise) {
-            this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
-            this.keyboardCtrlPromise = null;
-        }
         if (this.keyboardCtrl) {
             this.keyboardCtrl.destroy();
-            this.keyboardCtrl = null;
         }
     }
     render() {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '9daf4e2acaff6e3ce3878cf9dd5109fb1afbbebe', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '388ec37ce308035bab78d6c9a016bb616e9517a9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '1d15aa2da8501e8e7eff11ad4a491478be845c43' })));
+            }) }, h("slot", { key: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-08T18:08:20",
+  "timestamp": "2026-01-09T17:41:47",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

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

@@ -1,9 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, e as config, d as Host, g as getElement, f as printIonWarning, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-C8IsBmNU.js';
+import { r as registerInstance, h, e as config, d as Host, g as getElement, f as printIonWarning, c as createEvent, i as forceUpdate, a as readTask, w as writeTask, j as printIonError } from './index-C8IsBmNU.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-CPLxO-Ev.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global-CDrldh-5.js';
+import { w as win } from './index-ZjP4CjeZ.js';
 import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-DEn3pfjm.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
@@ -13,7 +14,6 @@ import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 import { a as attachComponent, d as detachComponent } from './framework-delegate-BYawdMXj.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
 import { t as transition } from './index-r2D9DEro.js';
-import './index-ZjP4CjeZ.js';
 import './keyboard-CUw4ekVy.js';
 import './capacitor-CFERIeaU.js';
 
@@ -152,7 +152,7 @@ Buttons.style = {
     md: buttonsMdCss
 };
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.safe-area-top) #background-content,:host(.safe-area-top) .inner-scroll{top:var(--ion-safe-area-top, 0px)}:host(.safe-area-bottom) #background-content,:host(.safe-area-bottom) .inner-scroll{bottom:var(--ion-safe-area-bottom, 0px)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 const Content = class {
     constructor(hostRef) {
@@ -169,6 +169,12 @@ const Content = class {
         this.isMainContent = true;
         this.resizeTimeout = null;
         this.inheritedAttributes = {};
+        /**
+         * Track whether this content has sibling header/footer elements.
+         * When absent, we need to apply safe-area padding directly.
+         */
+        this.hasHeader = false;
+        this.hasFooter = false;
         this.tabsElement = null;
         // Detail is used in a hot loop in the scroll event, by allocating it here
         // V8 will be able to inline any read/write to it since it's a monomorphic class.
@@ -223,7 +229,13 @@ const Content = class {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     connectedCallback() {
-        this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+        var _a;
+        // Content is "main" if not inside menu/popover/modal and not nested in another ion-content
+        this.isMainContent =
+            this.el.closest('ion-menu, ion-popover, ion-modal') === null &&
+                ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest('ion-content')) === null;
+        // Detect sibling header/footer for safe-area handling
+        this.detectSiblingElements();
         /**
          * The fullscreen content offsets need to be
          * computed after the tab bar has loaded. Since
@@ -254,13 +266,101 @@ const Content = class {
                  * bubbles, we can catch any instances of child tab bars loading by listening
                  * on IonTabs.
                  */
-                this.tabsLoadCallback = () => this.resize();
+                this.tabsLoadCallback = () => {
+                    this.resize();
+                    // Re-detect footer when tab bar loads (it may not exist during initial detection)
+                    this.updateSiblingDetection();
+                    forceUpdate(this);
+                };
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
     }
+    /**
+     * Detects sibling ion-header and ion-footer elements and sets up
+     * a mutation observer to handle dynamic changes (e.g., conditional rendering).
+     */
+    detectSiblingElements() {
+        this.updateSiblingDetection();
+        // Watch for dynamic header/footer changes (common in React conditional rendering)
+        const parent = this.el.parentElement;
+        if (parent && !this.parentMutationObserver && win !== undefined && 'MutationObserver' in win) {
+            this.parentMutationObserver = new MutationObserver(() => {
+                const prevHasHeader = this.hasHeader;
+                const prevHasFooter = this.hasFooter;
+                this.updateSiblingDetection();
+                // Only trigger re-render if header/footer detection actually changed
+                if (prevHasHeader !== this.hasHeader || prevHasFooter !== this.hasFooter) {
+                    forceUpdate(this);
+                }
+            });
+            this.parentMutationObserver.observe(parent, { childList: true });
+        }
+        // Watch for dynamic tab bar changes in ion-tabs (common in Angular conditional rendering)
+        const tabs = this.el.closest('ion-tabs');
+        if (tabs && !this.tabsMutationObserver && win !== undefined && 'MutationObserver' in win) {
+            this.tabsMutationObserver = new MutationObserver(() => {
+                const prevHasFooter = this.hasFooter;
+                this.updateSiblingDetection();
+                // Only trigger re-render if footer detection actually changed
+                if (prevHasFooter !== this.hasFooter) {
+                    forceUpdate(this);
+                }
+            });
+            this.tabsMutationObserver.observe(tabs, { childList: true });
+        }
+    }
+    /**
+     * Updates hasHeader/hasFooter based on current DOM state.
+     * Checks both direct siblings and elements wrapped in custom components
+     * (e.g., <my-header><ion-header>...</ion-header></my-header>).
+     */
+    updateSiblingDetection() {
+        const parent = this.el.parentElement;
+        if (parent) {
+            // First check for direct ion-header/ion-footer siblings
+            this.hasHeader = parent.querySelector(':scope > ion-header') !== null;
+            this.hasFooter = parent.querySelector(':scope > ion-footer') !== null;
+            // If not found, check if any sibling contains them (wrapped components)
+            if (!this.hasHeader) {
+                this.hasHeader = this.siblingContainsElement(parent, 'ion-header');
+            }
+            if (!this.hasFooter) {
+                this.hasFooter = this.siblingContainsElement(parent, 'ion-footer');
+            }
+        }
+        // If no footer found, check if we're inside ion-tabs which has ion-tab-bar
+        if (!this.hasFooter) {
+            const tabs = this.el.closest('ion-tabs');
+            if (tabs) {
+                this.hasFooter = tabs.querySelector(':scope > ion-tab-bar') !== null;
+            }
+        }
+    }
+    /**
+     * Checks if any sibling element of ion-content contains the specified element.
+     * Only searches one level deep to avoid finding elements in nested pages.
+     */
+    siblingContainsElement(parent, tagName) {
+        for (const sibling of parent.children) {
+            // Skip ion-content itself
+            if (sibling === this.el)
+                continue;
+            // Check if this sibling contains the target element as an immediate child
+            if (sibling.querySelector(`:scope > ${tagName}`) !== null) {
+                return true;
+            }
+        }
+        return false;
+    }
     disconnectedCallback() {
+        var _a, _b;
         this.onScrollEnd();
+        // Clean up mutation observers to prevent memory leaks
+        (_a = this.parentMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentMutationObserver = undefined;
+        (_b = this.tabsMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.tabsMutationObserver = undefined;
         if (hasLazyBuild(this.el)) {
             /**
              * The event listener and tabs caches need to
@@ -507,26 +607,28 @@ const Content = class {
         }
     }
     render() {
-        const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, hasFooter, hasHeader, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const mode = getIonMode(this);
         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: '8b40855d7b3257fac16b0c945dc54b75a8a36b1f', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
+                'safe-area-top': isMainContent && !hasHeader,
+                'safe-area-bottom': isMainContent && !hasFooter,
             }), 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: '1ec3de99f33ed7a252a637c14887043c96046536', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'dae33d14c489a55fcb6eceabbec3cb3b04726f34', 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: 'e99873d5fcc573e5d6ccad0f7c79192e99f4b749' })), 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); }
 };