@ionic/core 8.7.17-dev.11767984108.1f9159e1 → 8.7.17-dev.11768239180.18ee1069

package/components/content.js

@@ -1,14 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, readTask, h, Host } from '@stencil/core/internal/client';
-import { w as win } from './index9.js';
+import { proxyCustomElement, HTMLElement, createEvent, Build, readTask, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, k as hasLazyBuild, c as componentOnReady } from './helpers.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 
-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)}:host(.safe-area-left) #background-content,:host(.safe-area-left) .inner-scroll{left:var(--ion-safe-area-left, 0px)}:host(.safe-area-right) #background-content,:host(.safe-area-right) .inner-scroll{right:var(--ion-safe-area-right, 0px)}::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)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLElement {
     constructor(registerHost) {
@@ -29,12 +28,6 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         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.
@@ -89,13 +82,7 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     connectedCallback() {
-        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();
+        this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
         /**
          * The fullscreen content offsets need to be
          * computed after the tab bar has loaded. Since
@@ -126,101 +113,13 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
                  * bubbles, we can catch any instances of child tab bars loading by listening
                  * on IonTabs.
                  */
-                this.tabsLoadCallback = () => {
-                    this.resize();
-                    // Re-detect footer when tab bar loads (it may not exist during initial detection)
-                    this.updateSiblingDetection();
-                    forceUpdate(this);
-                };
+                this.tabsLoadCallback = () => this.resize();
                 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
@@ -467,30 +366,26 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         }
     }
     render() {
-        const { fixedSlotPlacement, hasFooter, hasHeader, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, 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: 'bc3b1ed3c6128b3b3474c052f2b75f3f8ea7a8cb', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', 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,
-                'safe-area-left': isMainContent,
-                'safe-area-right': isMainContent,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '251af16d9d5c5bf50f5b9cf14f5002a35ada7409', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '218f567f5fec257562e5ac1167cdaac9e95bc04d', class: {
+            } }, 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: {
                 '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: '8acb832123f95730d45996bd54ed8f52b366cf74' })), 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: '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));
     }
     get el() { return this; }
     static get style() { return contentCss; }

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

@@ -6,16 +6,16 @@
 var index = require('./index-D6Wc6v08.js');
 var hardwareBackButton = require('./hardware-back-button-VCK4V3mG.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
-var index$1 = require('./index-DkNv4J_i.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
-var index$2 = require('./index-CO6eryBo.js');
+var index$1 = require('./index-CO6eryBo.js');
 var keyboardController = require('./keyboard-controller-GXBiBRKS.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
 var frameworkDelegate = require('./framework-delegate-DMJRBuDi.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var index$3 = require('./index-094mMFB-.js');
+var index$2 = require('./index-094mMFB-.js');
+require('./index-DkNv4J_i.js');
 require('./keyboard-UuAS4D_9.js');
 require('./capacitor-DmA66EwP.js');
 
@@ -154,7 +154,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)}: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)}:host(.safe-area-left) #background-content,:host(.safe-area-left) .inner-scroll{left:var(--ion-safe-area-left, 0px)}:host(.safe-area-right) #background-content,:host(.safe-area-right) .inner-scroll{right:var(--ion-safe-area-right, 0px)}::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)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 const Content = class {
     constructor(hostRef) {
@@ -171,12 +171,6 @@ 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.
@@ -231,13 +225,7 @@ const Content = class {
         this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
     }
     connectedCallback() {
-        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();
+        this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
         /**
          * The fullscreen content offsets need to be
          * computed after the tab bar has loaded. Since
@@ -268,101 +256,13 @@ const Content = class {
                  * bubbles, we can catch any instances of child tab bars loading by listening
                  * on IonTabs.
                  */
-                this.tabsLoadCallback = () => {
-                    this.resize();
-                    // Re-detect footer when tab bar loads (it may not exist during initial detection)
-                    this.updateSiblingDetection();
-                    index.forceUpdate(this);
-                };
+                this.tabsLoadCallback = () => this.resize();
                 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 && index$1.win !== undefined && 'MutationObserver' in index$1.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) {
-                    index.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 && index$1.win !== undefined && 'MutationObserver' in index$1.win) {
-            this.tabsMutationObserver = new MutationObserver(() => {
-                const prevHasFooter = this.hasFooter;
-                this.updateSiblingDetection();
-                // Only trigger re-render if footer detection actually changed
-                if (prevHasFooter !== this.hasFooter) {
-                    index.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 (helpers.hasLazyBuild(this.el)) {
             /**
              * The event listener and tabs caches need to
@@ -609,30 +509,26 @@ const Content = class {
         }
     }
     render() {
-        const { fixedSlotPlacement, hasFooter, hasHeader, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = dir.isRTL(el) ? 'rtl' : 'ltr';
         const mode = ionicGlobal.getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (index.h(index.Host, Object.assign({ key: 'bc3b1ed3c6128b3b3474c052f2b75f3f8ea7a8cb', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': theme.hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
-                'safe-area-top': isMainContent && !hasHeader,
-                'safe-area-bottom': isMainContent && !hasFooter,
-                'safe-area-left': isMainContent,
-                'safe-area-right': isMainContent,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), index.h("div", { key: '251af16d9d5c5bf50f5b9cf14f5002a35ada7409', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("div", { key: '218f567f5fec257562e5ac1167cdaac9e95bc04d', class: {
+            } }, inheritedAttributes), index.h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', 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" }, index.h("slot", { key: '8acb832123f95730d45996bd54ed8f52b366cf74' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, index.h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
     }
     get el() { return index.getElement(this); }
 };
@@ -750,16 +646,16 @@ const Footer = class {
             this.destroyCollapsibleFooter();
             if (hasFade) {
                 const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-                const contentEl = pageEl ? index$2.findIonContent(pageEl) : null;
+                const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
                 if (!contentEl) {
-                    index$2.printIonContentErrorMsg(this.el);
+                    index$1.printIonContentErrorMsg(this.el);
                     return;
                 }
                 this.setupFadeFooter(contentEl);
             }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await index$2.getScrollElement(contentEl));
+            const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -1072,7 +968,7 @@ const Header = class {
          */
         this.translucent = false;
         this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await index$2.getScrollElement(contentEl));
+            const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -1106,7 +1002,7 @@ const Header = class {
         this.destroyCollapsibleHeader();
         if (hasCondense) {
             const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? index$2.findIonContent(pageEl) : null;
+            const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             index.writeTask(() => {
                 const title = cloneElement('ion-title');
@@ -1117,9 +1013,9 @@ const Header = class {
         }
         else if (hasFade) {
             const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? index$2.findIonContent(pageEl) : null;
+            const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
             if (!contentEl) {
-                index$2.printIonContentErrorMsg(this.el);
+                index$1.printIonContentErrorMsg(this.el);
                 return;
             }
             const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
@@ -1142,13 +1038,13 @@ const Header = class {
     }
     async setupCondenseHeader(contentEl, pageEl) {
         if (!contentEl || !pageEl) {
-            index$2.printIonContentErrorMsg(this.el);
+            index$1.printIonContentErrorMsg(this.el);
             return;
         }
         if (typeof IntersectionObserver === 'undefined') {
             return;
         }
-        this.scrollEl = await index$2.getScrollElement(contentEl);
+        this.scrollEl = await index$1.getScrollElement(contentEl);
         const headers = pageEl.querySelectorAll('ion-header');
         this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
         if (!this.collapsibleMainHeader) {
@@ -1346,7 +1242,7 @@ const RouterOutlet = class {
         const { el, mode } = this;
         const animated = this.animated && index.config.getBoolean('animated', true);
         const animationBuilder = opts.animationBuilder || this.animation || index.config.get('navAnimation');
-        await index$3.transition(Object.assign(Object.assign({ mode,
+        await index$2.transition(Object.assign(Object.assign({ mode,
             animated,
             enteringEl,
             leavingEl, baseEl: el,

package/dist/collection/components/content/content.css

@@ -263,26 +263,6 @@
   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);
-}
-
-:host(.safe-area-left) #background-content,
-:host(.safe-area-left) .inner-scroll {
-  left: var(--ion-safe-area-left, 0px);
-}
-
-:host(.safe-area-right) #background-content,
-:host(.safe-area-right) .inner-scroll {
-  right: var(--ion-safe-area-right, 0px);
-}
-
 ::slotted([slot=fixed]) {
   position: absolute;
   /**