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

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

@@ -89,7 +89,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{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left: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) + var(--internal-content-safe-area-padding-bottom, 0px));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}`;
+const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left: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) + var(--internal-content-safe-area-padding-bottom, 0px));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)}:host(.content-header-hide-scroll-partner:not(.content-footer-hide-scroll-partner)) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 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{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-partner)) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 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{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 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{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 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{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 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{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 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{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px) + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}`;
 
 const Content = class {
     constructor(hostRef) {
@@ -530,6 +530,171 @@ const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
 };
 Content.style = contentCss();
 
+/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
+const COLLAPSE_HIDE_THRESHOLD_PX = 24;
+/**
+ * Cumulative upward delta before showing again after hide. Small bias
+ * (instead of "any upward delta") guards against inertial-scroll
+ * oscillation flicking the region back open during a downward gesture.
+ */
+const COLLAPSE_SHOW_THRESHOLD_PX = 5;
+const WHEEL_SCROLL_SUPPRESS_MS = 80;
+const getContentHostFromScrollEl = (scrollEl) => {
+    const root = scrollEl.getRootNode();
+    if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+        return root.host;
+    }
+    // Light-DOM fallback: the scroll element may live inside a non-shadow
+    // ion-content (e.g. custom scroll host). Walk up to the nearest ion-content.
+    return scrollEl.closest('ion-content');
+};
+const applySlideDistance = (regionEl, contentHost, slideCssVar, heightPx) => {
+    const value = `${Math.max(0, Math.ceil(heightPx))}px`;
+    regionEl.style.setProperty(slideCssVar, value);
+    contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.setProperty(slideCssVar, value);
+};
+const clearSlideDistance = (regionEl, contentHost, slideCssVar) => {
+    regionEl.style.removeProperty(slideCssVar);
+    contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.removeProperty(slideCssVar);
+};
+/**
+ * Scroll/wheel-driven hide/show for `collapse="hide"` on `ion-header` or `ion-footer`.
+ * Hide after {@link COLLAPSE_HIDE_THRESHOLD_PX}px cumulative downward delta; show after
+ * {@link COLLAPSE_SHOW_THRESHOLD_PX}px cumulative upward delta. Each direction drains
+ * (not resets) the opposing accumulator so inertial-scroll jitter doesn't stall either
+ * transition. Motion is defined in component SCSS and `content.scss`; this toggles
+ * classes and syncs the slide distance CSS var.
+ */
+const createCollapseHideInteraction = ({ regionEl, scrollEl, slideCssVar, contentPartnerClass, contentHiddenClass, regionHiddenClass, }) => {
+    const contentHost = getContentHostFromScrollEl(scrollEl);
+    if (contentHost !== null) {
+        contentHost.classList.add(contentPartnerClass);
+    }
+    let resizeObserver;
+    let destroyed = false;
+    const syncSlideDistance = () => {
+        readTask(() => {
+            if (destroyed) {
+                return;
+            }
+            const heightPx = regionEl.offsetHeight;
+            writeTask(() => {
+                if (destroyed) {
+                    return;
+                }
+                applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
+            });
+        });
+    };
+    if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => {
+            syncSlideDistance();
+        });
+        resizeObserver.observe(regionEl);
+    }
+    syncSlideDistance();
+    requestAnimationFrame(() => {
+        if (!destroyed) {
+            syncSlideDistance();
+        }
+    });
+    let hidden = false;
+    let accDown = 0;
+    let accUp = 0;
+    let lastScrollTop = scrollEl.scrollTop;
+    let lastWheelTime = 0;
+    const setHidden = (next) => {
+        if (hidden === next || destroyed) {
+            return;
+        }
+        hidden = next;
+        // When transitioning to hidden, re-measure synchronously in case the
+        // initial layout reported offsetHeight === 0 (e.g. mid page transition).
+        // Without this the slide animates by 0px and only opacity fades.
+        if (hidden) {
+            const heightPx = regionEl.offsetHeight;
+            if (heightPx > 0) {
+                applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
+            }
+        }
+        writeTask(() => {
+            if (destroyed) {
+                return;
+            }
+            regionEl.classList.toggle(regionHiddenClass, hidden);
+            contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.toggle(contentHiddenClass, hidden);
+            if (hidden) {
+                // `inert` removes the subtree from the tab order and AT, AND moves
+                // focus out automatically in supporting browsers. `aria-hidden` is
+                // kept as a fallback for older engines without `inert` support.
+                regionEl.setAttribute('inert', '');
+                regionEl.setAttribute('aria-hidden', 'true');
+            }
+            else {
+                regionEl.removeAttribute('inert');
+                regionEl.removeAttribute('aria-hidden');
+            }
+        });
+    };
+    // Accumulate cumulative movement in each direction. The OPPOSITE accumulator
+    // is drained (not reset) by each event, so brief inertial jitter does not
+    // wipe a sustained gesture's accumulation. Crossing a threshold resets both.
+    const processDelta = (delta) => {
+        if (delta > 0) {
+            accUp = Math.max(0, accUp - delta);
+            accDown += delta;
+            if (accDown >= COLLAPSE_HIDE_THRESHOLD_PX) {
+                setHidden(true);
+                accDown = 0;
+                accUp = 0;
+            }
+        }
+        else if (delta < 0) {
+            const mag = -delta;
+            accDown = Math.max(0, accDown - mag);
+            accUp += mag;
+            if (accUp >= COLLAPSE_SHOW_THRESHOLD_PX) {
+                setHidden(false);
+                accUp = 0;
+                accDown = 0;
+            }
+        }
+    };
+    const onWheel = (ev) => {
+        if (destroyed) {
+            return;
+        }
+        lastWheelTime = performance.now();
+        processDelta(ev.deltaY);
+    };
+    const onScroll = () => {
+        if (destroyed) {
+            return;
+        }
+        const st = scrollEl.scrollTop;
+        if (performance.now() - lastWheelTime < WHEEL_SCROLL_SUPPRESS_MS) {
+            lastScrollTop = st;
+            return;
+        }
+        const delta = st - lastScrollTop;
+        lastScrollTop = st;
+        processDelta(delta);
+    };
+    scrollEl.addEventListener('wheel', onWheel, { passive: true });
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+        destroyed = true;
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        scrollEl.removeEventListener('wheel', onWheel);
+        scrollEl.removeEventListener('scroll', onScroll);
+        regionEl.classList.remove(regionHiddenClass);
+        regionEl.removeAttribute('inert');
+        regionEl.removeAttribute('aria-hidden');
+        contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.remove(contentPartnerClass, contentHiddenClass);
+        clearSlideDistance(regionEl, contentHost, slideCssVar);
+    };
+};
+
 const handleFooterFade = (scrollEl, baseEl) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -558,16 +723,26 @@ const handleFooterFade = (scrollEl, baseEl) => {
         });
     });
 };
+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',
+});
 
-const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-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);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)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-md{-webkit-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);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)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
-const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
+const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
 
-const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-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);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)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-md{-webkit-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);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)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 const Footer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.didLoad = false;
+        this.setupToken = 0;
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.keyboardVisible = false;
@@ -582,25 +757,45 @@ const Footer = class {
         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
              */
@@ -612,12 +807,18 @@ const Footer = class {
         };
     }
     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
@@ -645,6 +846,7 @@ const Footer = class {
         }
     }
     disconnectedCallback() {
+        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -654,18 +856,36 @@ const Footer = class {
             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,
@@ -673,7 +893,7 @@ const Footer = class {
                 [`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' })));
     }
     get el() { return getElement(this); }
 };
@@ -859,6 +1079,14 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
         titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
     });
 };
+const createHeaderHideInteraction = (headerEl, scrollEl) => createCollapseHideInteraction({
+    regionEl: headerEl,
+    scrollEl,
+    slideCssVar: '--header-hide-slide-y',
+    contentPartnerClass: 'content-header-hide-scroll-partner',
+    contentHiddenClass: 'content-header-hide-scroll-hidden',
+    regionHiddenClass: 'header-collapse-hide-hidden',
+});
 const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -915,16 +1143,17 @@ const getRoleType = (isInsideMenu, isCondensed, theme) => {
     return ROLE_BANNER;
 };
 
-const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}`;
+const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}`;
 
-const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.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{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.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}.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}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}`;
+const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.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{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.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}.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}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}`;
 
-const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-md{-webkit-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);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)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}.header-md{-webkit-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);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)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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
@@ -955,25 +1184,37 @@ const Header = class {
         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
@@ -984,7 +1225,7 @@ const Header = class {
             });
             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) {
@@ -994,12 +1235,29 @@ const Header = class {
             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;
@@ -1066,7 +1324,7 @@ const Header = class {
         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,
@@ -1074,7 +1332,7 @@ const Header = class {
                 [`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' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -14,9 +14,6 @@ import './focus-visible-vXpMhGrs.js';
 const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
 // Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
 const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
-// Matches a `var(--name)` reference with an optional fallback, e.g.
-// `var(--my-gap)` or `var(--my-gap, 16px)`.
-const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
 /**
  * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
  * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
@@ -31,17 +28,6 @@ function isValidLengthPercentage(value) {
     }
     return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
 }
-/**
- * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
- * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
- * custom property is resolved by the browser, so the resolved value is not
- * validated here.
- *
- * @param value String value to validate.
- */
-function isCssVariable(value) {
-    return VAR_FUNCTION_PATTERN.test(value.trim());
-}
 
 const DEFAULT_COLUMNS = {
     xs: 2,
@@ -89,8 +75,7 @@ const Gallery = class {
         /**
          * 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.
          */
@@ -211,10 +196,9 @@ const Gallery = class {
         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) {
@@ -231,9 +215,6 @@ const Gallery = class {
         if (typeof normalizedGap !== 'string') {
             return undefined;
         }
-        if (isCssVariable(normalizedGap)) {
-            return normalizedGap;
-        }
         const isValidCssLength = isValidLengthPercentage(normalizedGap);
         return isValidCssLength ? normalizedGap : undefined;
     }
@@ -314,7 +295,7 @@ const Gallery = class {
         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;
     }
     /**
@@ -500,11 +481,11 @@ const Gallery = class {
         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 })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {