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

package/dist/collection/components/header/header.md.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.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";
 const TRANSITION = 'all 0.2s ease-in-out';
 const ROLE_NONE = 'none';
 const ROLE_BANNER = 'banner';
@@ -179,6 +180,14 @@ export const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) =
         titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
     });
 };
+export 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',
+});
 export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;

package/dist/collection/utils/css-value-validation.js

@@ -9,9 +9,6 @@
 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>%`).
@@ -26,14 +23,3 @@ export 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.
- */
-export function isCssVariable(value) {
-    return VAR_FUNCTION_PATTERN.test(value.trim());
-}

package/dist/collection/utils/on-scroll/collapse-hide.utils.js

@@ -0,0 +1,168 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { readTask, writeTask } from "@stencil/core";
+/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
+export 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.
+ */
+export 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.
+ */
+export 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);
+    };
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-03T13:27:38",
+  "timestamp": "2026-06-03T13:41:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -14112,22 +14112,26 @@
       "props": [
         {
           "name": "collapse",
-          "type": "\"fade\" | undefined",
+          "type": "\"fade\" | \"hide\" | undefined",
           "complexType": {
-            "original": "'fade'",
-            "resolved": "\"fade\" | undefined",
+            "original": "'fade' | 'hide'",
+            "resolved": "\"fade\" | \"hide\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`.",
+          "docs": "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\"]`).",
           "docsTags": [],
           "values": [
             {
               "value": "fade",
               "type": "string"
             },
+            {
+              "value": "hide",
+              "type": "string"
+            },
             {
               "type": "undefined"
             }
@@ -14308,7 +14312,7 @@
           "mutable": false,
           "attr": "gap",
           "reflectToAttr": false,
-          "docs": "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.",
+          "docs": "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.",
           "docsTags": [
             {
               "name": "default",
@@ -14653,16 +14657,16 @@
       "props": [
         {
           "name": "collapse",
-          "type": "\"condense\" | \"fade\" | undefined",
+          "type": "\"condense\" | \"fade\" | \"hide\" | undefined",
           "complexType": {
-            "original": "'condense' | 'fade'",
-            "resolved": "\"condense\" | \"fade\" | undefined",
+            "original": "'condense' | 'fade' | 'hide'",
+            "resolved": "\"condense\" | \"fade\" | \"hide\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "collapse",
           "reflectToAttr": false,
-          "docs": "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)",
+          "docs": "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.",
           "docsTags": [],
           "values": [
             {
@@ -14673,6 +14677,10 @@
               "value": "fade",
               "type": "string"
             },
+            {
+              "value": "hide",
+              "type": "string"
+            },
             {
               "type": "undefined"
             }