@ionic/core 8.8.9-dev.11780493108.1d8e1a89 → 8.8.9-dev.11780493937.17fe092d

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

@@ -281,4 +281,60 @@
    * still allow the fixed content to appear under the scroll content if specified.
    */
   transform: translateZ(0);
+}
+
+:host(.content-header-hide-scroll-partner:not(.content-footer-hide-scroll-partner)) .inner-scroll {
+  transform: translateY(0);
+  backface-visibility: hidden;
+  height: 100%;
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host(.content-header-hide-scroll-partner:not(.content-footer-hide-scroll-partner).content-header-hide-scroll-hidden) .inner-scroll {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  backface-visibility: hidden;
+  height: calc(100% + var(--header-hide-slide-y, 0px));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-partner)) .inner-scroll {
+  transform: translateY(0);
+  backface-visibility: hidden;
+  height: 100%;
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host(.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-partner).content-footer-hide-scroll-hidden) .inner-scroll {
+  transform: translateY(0);
+  backface-visibility: hidden;
+  height: calc(100% + var(--footer-hide-slide-y, 0px));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-hidden):not(.content-footer-hide-scroll-hidden)) .inner-scroll {
+  transform: translateY(0);
+  backface-visibility: hidden;
+  height: 100%;
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner.content-header-hide-scroll-hidden:not(.content-footer-hide-scroll-hidden)) .inner-scroll {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  backface-visibility: hidden;
+  height: calc(100% + var(--header-hide-slide-y, 0px));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-hidden).content-footer-hide-scroll-hidden) .inner-scroll {
+  transform: translateY(0);
+  backface-visibility: hidden;
+  height: calc(100% + var(--footer-hide-slide-y, 0px));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner.content-header-hide-scroll-hidden.content-footer-hide-scroll-hidden) .inner-scroll {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  backface-visibility: hidden;
+  height: calc(100% + var(--header-hide-slide-y, 0px) + var(--footer-hide-slide-y, 0px));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
 }

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

@@ -71,6 +71,19 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+ion-footer.footer-collapse-hide {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+}
+
+ion-footer.footer-collapse-hide.footer-collapse-hide-hidden {
+  transform: translateY(var(--footer-hide-slide-y, 0px));
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -6,13 +6,15 @@ import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../..
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
-import { handleFooterFade } from "./footer.utils";
+import { handleFooterFade, createFooterHideInteraction } 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.
  */
 export class Footer {
     constructor() {
+        this.didLoad = false;
+        this.setupToken = 0;
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.keyboardVisible = false;
@@ -27,25 +29,45 @@ export class Footer {
         this.translucent = false;
         this.checkCollapsibleFooter = () => {
             const theme = getIonTheme(this);
-            if (theme !== 'ios') {
-                return;
-            }
             const { collapse } = this;
             const hasFade = collapse === 'fade';
+            const hasHide = collapse === 'hide';
+            const runIosFade = theme === 'ios' && hasFade;
+            if (!runIosFade && !hasHide) {
+                this.destroyCollapsibleFooter();
+                return;
+            }
+            // Skip teardown/rebuild when the collapse mode and theme have not changed
+            // since the last setup — avoids thrashing listeners and resetting scroll
+            // accumulators on unrelated re-renders (e.g. keyboardVisible state flips).
+            const activeMode = hasHide ? 'hide' : 'fade';
+            if (this.appliedCollapse === activeMode && this.appliedTheme === theme) {
+                return;
+            }
             this.destroyCollapsibleFooter();
-            if (hasFade) {
-                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 (!contentEl) {
-                    printIonContentErrorMsg(this.el);
-                    return;
-                }
+            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 (!contentEl) {
+                printIonContentErrorMsg(this.el);
+                return;
+            }
+            this.appliedCollapse = activeMode;
+            this.appliedTheme = theme;
+            if (runIosFade) {
                 this.setupFadeFooter(contentEl);
             }
+            else if (hasHide) {
+                void this.setupHideFooter(contentEl);
+            }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            const token = ++this.setupToken;
+            const scrollEl = await getScrollElement(contentEl);
+            if (token !== this.setupToken) {
+                return;
+            }
+            this.scrollEl = scrollEl;
             /**
              * Handle fading of toolbars on scroll
              */
@@ -57,12 +79,18 @@ export class Footer {
         };
     }
     componentDidLoad() {
+        this.didLoad = true;
         this.checkCollapsibleFooter();
     }
     componentDidUpdate() {
         this.checkCollapsibleFooter();
     }
     async connectedCallback() {
+        // On re-attach (didLoad already true but disconnectedCallback ran since),
+        // componentDidLoad will not fire again — re-run setup here.
+        if (this.didLoad) {
+            this.checkCollapsibleFooter();
+        }
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
             /**
              * If the keyboard is hiding, then we need to wait
@@ -90,6 +118,7 @@ export class Footer {
         }
     }
     disconnectedCallback() {
+        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -99,18 +128,36 @@ export class Footer {
             this.keyboardCtrl = null;
         }
     }
+    async setupHideFooter(contentEl) {
+        const token = ++this.setupToken;
+        const scrollEl = await getScrollElement(contentEl);
+        // A newer checkCollapsibleFooter ran while we were awaiting — abandon.
+        if (token !== this.setupToken) {
+            return;
+        }
+        this.scrollEl = scrollEl;
+        this.footerHideCleanup = createFooterHideInteraction(this.el, scrollEl);
+    }
     destroyCollapsibleFooter() {
+        // Invalidate any in-flight setupHideFooter/setupFadeFooter awaits.
+        this.setupToken++;
+        if (this.footerHideCleanup) {
+            this.footerHideCleanup();
+            this.footerHideCleanup = undefined;
+        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
+        this.appliedCollapse = undefined;
+        this.appliedTheme = undefined;
     }
     render() {
         const { translucent, collapse } = this;
         const theme = getIonTheme(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: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
+        return (h(Host, { key: '5df79a31f36febfad49c5858727e93c7ba5734f8', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -118,7 +165,7 @@ export class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
+            } }, theme === 'ios' && translucent && h("div", { key: '9175ae4f6576d82dff2a00a36e91f4b633d8c9ad', class: "footer-background" }), h("slot", { key: 'd6d618cdae4726822d8e82edb782c5c86fc7b77b' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
@@ -141,15 +188,15 @@ export class Footer {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'fade'",
-                    "resolved": "\"fade\" | undefined",
+                    "original": "'fade' | 'hide'",
+                    "resolved": "\"fade\" | \"hide\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
+                    "text": "Describes the scroll effect that will be applied to the footer.\n\n- `\"fade\"` only applies when the theme is `\"ios\"`.\n- `\"hide\"` applies to all themes (`\"ios\"`, `\"md\"`, and `\"ionic\"`): the footer\n  slides down and fades out after cumulative downward scrolling on the page content,\n  and returns on any upward scroll (same behavior as `ion-header[collapse=\"hide\"]`)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -71,6 +71,19 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+ion-footer.footer-collapse-hide {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+}
+
+ion-footer.footer-collapse-hide.footer-collapse-hide-hidden {
+  transform: translateY(var(--footer-hide-slide-y, 0px));
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -3,6 +3,7 @@
  */
 import { readTask, writeTask } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
+import { createCollapseHideInteraction } from "../../utils/on-scroll/collapse-hide.utils";
 export const handleFooterFade = (scrollEl, baseEl) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -31,3 +32,11 @@ export const handleFooterFade = (scrollEl, baseEl) => {
         });
     });
 };
+export const createFooterHideInteraction = (footerEl, scrollEl) => createCollapseHideInteraction({
+    regionEl: footerEl,
+    scrollEl,
+    slideCssVar: '--footer-hide-slide-y',
+    contentPartnerClass: 'content-footer-hide-scroll-partner',
+    contentHiddenClass: 'content-footer-hide-scroll-hidden',
+    regionHiddenClass: 'footer-collapse-hide-hidden',
+});

package/dist/collection/components/gallery/gallery.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { isCssVariable, isValidLengthPercentage } from "../../utils/css-value-validation";
+import { isValidLengthPercentage } from "../../utils/css-value-validation";
 import { raf } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { getIonTheme } from "../../global/ionic-global";
@@ -46,8 +46,7 @@ export class Gallery {
         /**
          * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
          * values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,
-         * CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel
-         * values). Can also be set as a breakpoint map
+         * or numbers (treated as pixel values). Can also be set as a breakpoint map
          * (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept
          * space-separated values or CSS keyword values like `inherit`, `auto`, etc.
          */
@@ -168,10 +167,9 @@ export class Gallery {
         return numericColumns;
     }
     /**
-     * Normalize a single gap value (`gap` as a number, a string such as a CSS
-     * length-percentage or `var()` reference, or one entry from a `gap`
-     * breakpoint map) to a CSS length string. Returns `undefined` when the
-     * input cannot be interpreted as a valid CSS length or `var()` reference.
+     * Normalize a single gap value (`gap` as a number, string, or one entry from
+     * a `gap` breakpoint map) to a CSS length string. Returns `undefined` when
+     * the input cannot be interpreted as a valid CSS length.
      */
     sanitizeGap(gap) {
         if (gap === undefined) {
@@ -188,9 +186,6 @@ export class Gallery {
         if (typeof normalizedGap !== 'string') {
             return undefined;
         }
-        if (isCssVariable(normalizedGap)) {
-            return normalizedGap;
-        }
         const isValidCssLength = isValidLengthPercentage(normalizedGap);
         return isValidCssLength ? normalizedGap : undefined;
     }
@@ -271,7 +266,7 @@ export class Gallery {
         if (this.hasWarnedInvalidGap) {
             return;
         }
-        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, CSS variable (e.g. var(--app-gap)), or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
+        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
         this.hasWarnedInvalidGap = true;
     }
     /**
@@ -457,11 +452,11 @@ export class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '4f578bea373b422f5dd41395ca04ade699a2f398', class: {
+        return (h(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: '0daa3ba1ea894c8c10ab077a6b83476ad5cf514d', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery"; }
     static get encapsulation() { return "shadow"; }
@@ -562,7 +557,7 @@ export class Gallery {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nCSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel\nvalues). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc."
+                    "text": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nor numbers (treated as pixel values). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,64 @@
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 ion-header {
   display: block;
   position: relative;
@@ -9,6 +70,20 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
+ion-header.header-collapse-hide {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+  z-index: 10;
+}
+
+ion-header.header-collapse-hide.header-collapse-hide-hidden {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
 /**
  * A heuristic that applies CSS to tablet
  * viewports.

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

@@ -1,3 +1,64 @@
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 ion-header {
   display: block;
   position: relative;
@@ -9,6 +70,20 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
+ion-header.header-collapse-hide {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+  z-index: 10;
+}
+
+ion-header.header-collapse-hide.header-collapse-hide-hidden {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/header/header.js

@@ -7,7 +7,7 @@ import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
-import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
+import { cloneElement, createHeaderHideInteraction, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.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.
@@ -15,6 +15,7 @@ import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade,
 export class Header {
     constructor() {
         this.inheritedAttributes = {};
+        this.didLoad = false;
         /**
          * If `true`, the header will have a line at the bottom.
          * TODO(ROU-10855): add support for this prop on ios/md themes
@@ -45,25 +46,37 @@ export class Header {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     componentDidLoad() {
+        this.didLoad = true;
         this.checkCollapsibleHeader();
     }
     componentDidUpdate() {
         this.checkCollapsibleHeader();
     }
+    connectedCallback() {
+        // On re-attach (didLoad already true but disconnectedCallback ran since),
+        // componentDidLoad will not fire again — re-run setup here.
+        if (this.didLoad) {
+            this.checkCollapsibleHeader();
+        }
+    }
     disconnectedCallback() {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
         const theme = getIonTheme(this);
-        if (theme !== 'ios') {
-            return;
-        }
         const { collapse } = this;
         const hasCondense = collapse === 'condense';
         const hasFade = collapse === 'fade';
+        const hasHide = collapse === 'hide';
+        const runIosCollapse = theme === 'ios' && (hasCondense || hasFade);
+        const runHide = hasHide;
+        if (!runIosCollapse && !runHide) {
+            this.destroyCollapsibleHeader();
+            return;
+        }
         this.destroyCollapsibleHeader();
         const appRootSelector = config.get('appRootSelector', 'ion-app');
-        if (hasCondense) {
+        if (runIosCollapse && hasCondense) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
@@ -74,7 +87,7 @@ export class Header {
             });
             await this.setupCondenseHeader(contentEl, pageEl);
         }
-        else if (hasFade) {
+        else if (runIosCollapse && hasFade) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
@@ -84,12 +97,29 @@ export class Header {
             const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
+        if (runHide) {
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (!contentEl) {
+                printIonContentErrorMsg(this.el);
+                return;
+            }
+            await this.setupHideHeader(contentEl);
+        }
+    }
+    async setupHideHeader(contentEl) {
+        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+        this.headerHideCleanup = createHeaderHideInteraction(this.el, scrollEl);
     }
     destroyCollapsibleHeader() {
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = undefined;
         }
+        if (this.headerHideCleanup) {
+            this.headerHideCleanup();
+            this.headerHideCleanup = undefined;
+        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
@@ -156,7 +186,7 @@ export class Header {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (h(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '5cae1ff0bbc5f2035325c128a9394caf7f1459a0', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -164,7 +194,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '705f120951a3dd429286b66cd0b511fa267b3702', class: "header-background" }), h("slot", { key: '1c7a9d474083cf92abfe88c02d363f8d420716ca' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
@@ -187,15 +217,15 @@ export class Header {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'condense' | 'fade'",
-                    "resolved": "\"condense\" | \"fade\" | undefined",
+                    "original": "'condense' | 'fade' | 'hide'",
+                    "resolved": "\"condense\" | \"fade\" | \"hide\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies when the theme is `\"ios\"`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "Describes the scroll effect that will be applied to the header.\n\n- `\"condense\"` and `\"fade\"` only apply when the theme is `\"ios\"`.\n  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles).\n- `\"hide\"` applies to all themes (`\"ios\"`, `\"md\"`, and `\"ionic\"`): the header\n  slides up and fades out after cumulative downward scrolling on the page content,\n  and returns on any upward scroll."
                 },
                 "getter": false,
                 "setter": false,