@ionic/core 8.8.16-dev.11784914346.10d0804c → 8.8.16-dev.11785274070.1b3387c9

package/dist/collection/components/footer/footer.js

@@ -4,92 +4,45 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
-import { printIonWarning } from "../../utils/logging/index";
-import { createScrollHideController } from "../../utils/scroll-hide-controller";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Footer {
     constructor() {
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
-        this.scrollHideCtrlPromise = null;
-        this.hasWarnedCollapse = false;
-        this.fadeSetupId = 0;
         this.keyboardVisible = false;
         /**
          * If `true`, the footer will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
+         * Only applies when the mode is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the footer, the `fullscreen`
          * attribute needs to be set on the content.
          */
         this.translucent = false;
-        this.checkCollapsibleFooter = async () => {
-            const { scrollEffect, collapse } = this;
-            if (collapse !== undefined && scrollEffect === undefined && !this.hasWarnedCollapse) {
-                this.hasWarnedCollapse = true;
-                printIonWarning(`[ion-footer] - The \`collapse\` property is deprecated. Use \`scrollEffect\` instead.\nExample: <ion-footer scroll-effect="${collapse}">`, this.el);
-            }
-            const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
-            // Skip teardown/rebuild if the effect hasn't changed.
-            // This prevents keyboard toggles (which trigger re-renders via
-            // @State keyboardVisible) from destroying the scroll controller
-            // and resetting isHidden.
-            if (effect === this.activeEffect) {
+        this.checkCollapsibleFooter = () => {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
                 return;
             }
-            const hasHide = effect === 'hide';
-            const hasFade = effect === 'fade';
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
-            const appRootSelector = config.get('appRootSelector', 'ion-app');
-            const pageEl = this.el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner`);
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (hasHide && contentEl) {
-                this.activeEffect = effect;
-                await this.setupScrollEffectHide(contentEl);
-                return;
-            }
-            // fade via the deprecated `collapse` prop is iOS-only.
-            // fade via the new `scrollEffect` prop works in all themes.
-            const isModeRestricted = scrollEffect === undefined && getIonTheme(this) !== 'ios';
-            if (hasFade && !isModeRestricted) {
+            if (hasFade) {
+                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+                const contentEl = pageEl ? findIonContent(pageEl) : null;
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
                     return;
                 }
                 this.setupFadeFooter(contentEl);
-                this.activeEffect = effect;
-            }
-        };
-        this.setupScrollEffectHide = async (contentEl) => {
-            const setupPromise = createScrollHideController(contentEl, {
-                el: this.el,
-                cssVar: '--internal-footer-hide-height',
-                hiddenClass: 'footer-scroll-hidden',
-                contentPartnerClass: 'content-footer-hide-scroll-partner',
-                contentHiddenClass: 'content-footer-hide-scroll-hidden',
-            });
-            this.scrollHideCtrlPromise = setupPromise;
-            const controller = await setupPromise;
-            if (this.scrollHideCtrlPromise === setupPromise) {
-                this.scrollHideCtrlPromise = null;
-                controller.init();
-                this.scrollHideCtrl = controller;
             }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const setupId = ++this.fadeSetupId;
-            const scrollEl = await getScrollElement(contentEl);
-            if (this.fadeSetupId !== setupId) {
-                return;
-            }
-            this.scrollEl = scrollEl;
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -134,7 +87,6 @@ export class Footer {
         }
     }
     disconnectedCallback() {
-        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -145,82 +97,41 @@ export class Footer {
         }
     }
     destroyCollapsibleFooter() {
-        this.activeEffect = undefined;
-        this.fadeSetupId++;
-        this.scrollHideCtrlPromise = null;
-        if (this.scrollHideCtrl) {
-            this.scrollHideCtrl.destroy();
-            this.scrollHideCtrl = undefined;
-        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
     }
     render() {
-        const { translucent, scrollEffect, collapse } = this;
-        const theme = getIonTheme(this);
-        const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
-        // fade via the deprecated `collapse` prop is iOS-only.
-        const isModeRestricted = scrollEffect === undefined && theme !== 'ios';
-        const hasHide = effect === 'hide';
-        const hasFade = effect === 'fade' && !isModeRestricted;
+        const { translucent, collapse } = this;
+        const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'a0777b4a639d22e15374879f018efcf589e756f8', role: "contentinfo", class: {
-                [theme]: true,
+        return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`footer-${theme}`]: true,
+                [`footer-${mode}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${theme}`]: translucent,
+                [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
-                'footer-collapse-fade': hasFade,
-                'footer-scroll-effect-hide': hasHide,
-            } }, theme === 'ios' && translucent && h("div", { key: 'd78b46870cbf11c95b066d649c04ec398b66e614', class: "footer-background" }), h("slot", { key: '9dc34787cd29597fe1b1198db317602014ac1483' })));
+                [`footer-collapse-${collapse}`]: collapse !== undefined,
+            } }, mode === 'ios' && translucent && h("div", { key: '2fa14f61661c47c661cecd696176728d6eafa74f', class: "footer-background" }), h("slot", { key: '8e63696e7c528d5c38201e546bf08135290d0945' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
         return {
             "ios": ["footer.ios.scss"],
-            "md": ["footer.md.scss"],
-            "ionic": ["footer.md.scss"]
+            "md": ["footer.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["footer.ios.css"],
-            "md": ["footer.md.css"],
-            "ionic": ["footer.md.css"]
+            "md": ["footer.md.css"]
         };
     }
     static get properties() {
         return {
-            "scrollEffect": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "FooterScrollEffect",
-                    "resolved": "\"fade\" | \"hide\" | undefined",
-                    "references": {
-                        "FooterScrollEffect": {
-                            "location": "import",
-                            "path": "./footer-interface",
-                            "id": "src/components/footer/footer-interface.ts::FooterScrollEffect",
-                            "referenceLocation": "FooterScrollEffect"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\n`\"hide\"` slides the footer out of view when scrolling down and back in\nwhen scrolling up.\n`\"fade\"` fades the toolbar background on scroll."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "scroll-effect"
-            },
             "collapse": {
                 "type": "string",
                 "mutable": false,
@@ -232,11 +143,8 @@ export class Footer {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `scrollEffect` instead."
-                        }],
-                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
+                    "tags": [],
+                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -255,7 +163,7 @@ export class Footer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the footer will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/footer/footer.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -71,31 +65,6 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
-.footer-collapse-fade ion-toolbar {
-  --opacity-scale: inherit;
-}
-
-ion-footer.footer-scroll-effect-hide {
-  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
-  transform: translateY(100%);
-  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ion-footer.footer-scroll-effect-hide,
-  ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
-    transition: none;
-  }
-}
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -155,15 +124,6 @@ ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-/**
- * The fade effect fades the toolbar background via --opacity-scale,
- * but box-shadow is not affected by that variable. Remove it so
- * the shadow doesn't persist when the background is faded out.
- */
-.footer-md.footer-collapse-fade {
-  box-shadow: none;
-}
-
 .footer-md.ion-no-border {
   box-shadow: none;
 }

package/dist/collection/components/grid/grid.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/grid/grid.js

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class Grid {
     constructor() {
         /**
@@ -15,11 +11,11 @@ export class Grid {
         this.fixed = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
+                [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
+            } }, h("slot", { key: 'c781fff853b093d8f44bdb7943bbc4f17c903803' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,173 +1,3 @@
-ion-header {
-  display: block;
-  position: relative;
-  order: -1;
-  width: 100%;
-}
-
-ion-header ion-toolbar:first-of-type {
-  padding-top: var(--ion-safe-area-top, 0);
-}
-
-.header-collapse-fade ion-toolbar {
-  --opacity-scale: inherit;
-}
-
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-fade.header-transitioning ion-toolbar {
-  --background: transparent;
-  --border-style: none;
-}
-
-.header-collapse-condense {
-  z-index: 9;
-}
-
-.header-collapse-condense ion-toolbar {
-  position: sticky;
-  top: 0;
-}
-
-.header-collapse-condense ion-toolbar:first-of-type {
-  /**
-   * The toolbar that contains the collapsible
-   * large title should not have safe area padding applied.
-   */
-  padding-top: 0px;
-  z-index: 1;
-}
-
-/**
- * Large title toolbar should just use the content background
- * since it needs to blend in with the header above it.
- */
-.header-collapse-condense ion-toolbar {
-  z-index: 0;
-}
-
-.header-collapse-condense ion-toolbar:last-of-type {
-  --border-width: 0px;
-}
-
-.header-collapse-condense ion-toolbar ion-searchbar {
-  padding-top: 0px;
-  padding-bottom: 13px;
-}
-
-.header-collapse-main {
-  --opacity-scale: 1;
-}
-
-.header-collapse-main ion-toolbar {
-  --opacity-scale: inherit;
-}
-
-.header-collapse-main ion-toolbar.in-toolbar ion-title,
-.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
-  transition: all 0.2s ease-in-out;
-}
-
-/**
- * Large title toolbar should just use the content background
- * since it needs to blend in with the header above it.
- */
-.header-collapse-condense ion-toolbar,
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --background: var(--ion-background-color, #fff);
-}
-
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --border-style: none;
-  --opacity-scale: 1;
-}
-
-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/**
- * There is a bug in Safari where changing
- * the opacity of an element in a scrollable container
- * while rubber-banding causes the scroll position
- * to jump to the top
- */
-.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-  visibility: hidden;
-}
-
-/**
- * The main header is only hidden once the collapsible large
- * title is configured. As a result, if the main header loads
- * before the collapsible large title is configured then the
- * main header will be visible briefly before being hidden
- * by the collapsible large title.
- *
- * The following selector ensures that any main header
- * on a page with a collapsible large title is hidden
- * before the collapsible large title is configured.
- * Once the collapsible large title is configured the main
- * header will have the ".header-collapse-main" class, and
- * this selector will no longer apply.
- *
- * The :has(...) part of the selector ensures a couple things:
- * 1. This will only apply within a page view since the content
- * must be a subsequent-sibling of the header (~ ion-content).
- * 2. This will only apply when that content has an active condense
- *    header (the .header-collapse-condense class).
- *
- * We use opacity: 0 to avoid a layout shift.
- * We use the class (not the attribute) because the class is only
- * added when the condense effect is valid (large title present).
- * The attribute alone is not sufficient since it would match even
- * when the effect is guarded (e.g. no large title).
- */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header.header-collapse-condense) {
-  opacity: 0;
-}
-
-/**
- * The deprecated collapse="condense" prop is iOS-only.
- * On non-iOS themes, the condense header should be hidden since
- * the JS won't activate it. Uses a class instead of an attribute
- * selector because collapse is not a reflected prop, and framework
- * proxies (Angular/Vue) bind it as a property.
- */
-.header-collapse-condense-hidden {
-  display: none;
-}
-
-ion-header.header-scroll-effect-hide {
-  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-ion-header.header-scroll-effect-hide.header-scroll-hidden {
-  transform: translateY(-100%);
-  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ion-header.header-scroll-effect-hide,
-  ion-header.header-scroll-effect-hide.header-scroll-hidden {
-    transition: none;
-  }
-}
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -224,15 +54,17 @@ ion-header.header-scroll-effect-hide.header-scroll-hidden {
  * }
  */
 ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
   z-index: 10;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -294,15 +126,15 @@ ion-header {
 
 @supports (backdrop-filter: blur(0)) {
   .header-background {
-    right: 0;
     left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .header-translucent-ios ion-toolbar {
-    --opacity: 0.8;
+    --opacity: .8;
   }
   /**
    * Disable the saturation otherwise it distorts the content
@@ -316,6 +148,129 @@ ion-header {
   --border-width: 0;
 }
 
+.header-collapse-fade ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-fade.header-transitioning ion-toolbar {
+  --background: transparent;
+  --border-style: none;
+}
+
+.header-collapse-condense {
+  z-index: 9;
+}
+
+.header-collapse-condense ion-toolbar {
+  position: sticky;
+  top: 0;
+}
+
+.header-collapse-condense ion-toolbar:first-of-type {
+  /**
+   * The toolbar that contains the collapsible
+   * large title should not have safe area padding applied.
+   */
+  padding-top: 0px;
+  z-index: 1;
+}
+
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar {
+  z-index: 0;
+}
+
 .header-collapse-condense ion-toolbar:last-of-type {
   --border-width: 0px;
+}
+
+.header-collapse-condense ion-toolbar ion-searchbar {
+  padding-top: 0px;
+  padding-bottom: 13px;
+}
+
+.header-collapse-main {
+  --opacity-scale: 1;
+}
+
+.header-collapse-main ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+.header-collapse-main ion-toolbar.in-toolbar ion-title,
+.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+  transition: all 0.2s ease-in-out;
+}
+
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar,
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --border-style: none;
+  --opacity-scale: 1;
+}
+
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/**
+ * There is a bug in Safari where changing
+ * the opacity of an element in a scrollable container
+ * while rubber-banding causes the scroll position
+ * to jump to the top
+ */
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  visibility: hidden;
+}
+
+/**
+ * The main header is only hidden once the collapsible large
+ * title is configured. As a result, if the main header loads
+ * before the collapsible large title is configured then the
+ * main header will be visible briefly before being hidden
+ * by the collapsible large title.
+ *
+ * The following selector ensures that any main header
+ * on a page with a collapsible large title is hidden
+ * before the collapsible large title is configured.
+ * Once the collapsible large title is configured the main
+ * header will have the ".header-collapse-main" class, and
+ * this selector will no longer apply.
+ *
+ * The :has(...) part of the selector ensures a couple things:
+ * 1. This will only apply within a page view since the content
+ * must be a subsequent-sibling of the header (~ ion-content).
+ * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ * We target both the attribute and the class in the event that the attribute
+ * is not reflected on the host in some frameworks.
+ *
+ * Both headers should be scoped to iOS mode otherwise an MD app that uses an
+ * iOS header may cause other MD headers to be unexpectedly hidden.
+ */
+ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse=condense],
+~ ion-content ion-header.header-ios.header-collapse-condense) {
+  opacity: 0;
 }