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

package/dist/types/components.d.ts

@@ -1454,9 +1454,9 @@ export namespace Components {
     }
     interface IonFooter {
         /**
-          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
+          * Describes the scroll effect that will be applied to the footer.  - `"fade"` only applies when the theme is `"ios"`. - `"hide"` applies to all themes (`"ios"`, `"md"`, and `"ionic"`): the footer   slides down and fades out after cumulative downward scrolling on the page content,   and returns on any upward scroll (same behavior as `ion-header[collapse="hide"]`).
          */
-        "collapse"?: 'fade';
+        "collapse"?: 'fade' | 'hide';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -1478,7 +1478,7 @@ export namespace Components {
          */
         "columns": GalleryColumns;
         /**
-          * 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 (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.
+          * 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%)`, 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.
           * @default DEFAULT_GAP
          */
         "gap": GalleryGap;
@@ -1517,9 +1517,9 @@ export namespace Components {
     }
     interface IonHeader {
         /**
-          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * Describes the scroll effect that will be applied to the header.  - `"condense"` and `"fade"` only apply when the theme is `"ios"`.   Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles). - `"hide"` applies to all themes (`"ios"`, `"md"`, and `"ionic"`): the header   slides up and fades out after cumulative downward scrolling on the page content,   and returns on any upward scroll.
          */
-        "collapse"?: 'condense' | 'fade';
+        "collapse"?: 'condense' | 'fade' | 'hide';
         /**
           * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
           * @default false
@@ -7464,9 +7464,9 @@ declare namespace LocalJSX {
     }
     interface IonFooter {
         /**
-          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
+          * Describes the scroll effect that will be applied to the footer.  - `"fade"` only applies when the theme is `"ios"`. - `"hide"` applies to all themes (`"ios"`, `"md"`, and `"ionic"`): the footer   slides down and fades out after cumulative downward scrolling on the page content,   and returns on any upward scroll (same behavior as `ion-header[collapse="hide"]`).
          */
-        "collapse"?: 'fade';
+        "collapse"?: 'fade' | 'hide';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -7488,7 +7488,7 @@ declare namespace LocalJSX {
          */
         "columns"?: GalleryColumns;
         /**
-          * 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 (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept space-separated values or CSS keyword values like `inherit`, `auto`, etc.
+          * 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%)`, 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.
           * @default DEFAULT_GAP
          */
         "gap"?: GalleryGap;
@@ -7527,9 +7527,9 @@ declare namespace LocalJSX {
     }
     interface IonHeader {
         /**
-          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * Describes the scroll effect that will be applied to the header.  - `"condense"` and `"fade"` only apply when the theme is `"ios"`.   Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles). - `"hide"` applies to all themes (`"ios"`, `"md"`, and `"ionic"`): the header   slides up and fades out after cumulative downward scrolling on the page content,   and returns on any upward scroll.
          */
-        "collapse"?: 'condense' | 'fade';
+        "collapse"?: 'condense' | 'fade' | 'hide';
         /**
           * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
           * @default false
@@ -10778,7 +10778,7 @@ declare namespace LocalJSX {
         "side": 'start' | 'end' | 'top' | 'bottom';
     }
     interface IonFooterAttributes {
-        "collapse": 'fade';
+        "collapse": 'fade' | 'hide';
         "translucent": boolean;
     }
     interface IonGalleryAttributes {
@@ -10791,7 +10791,7 @@ declare namespace LocalJSX {
         "fixed": boolean;
     }
     interface IonHeaderAttributes {
-        "collapse": 'condense' | 'fade';
+        "collapse": 'condense' | 'fade' | 'hide';
         "divider": boolean;
         "translucent": boolean;
     }

package/dist/types/utils/css-value-validation.d.ts

@@ -10,12 +10,3 @@
  * @param value String value to validate.
  */
 export declare function isValidLengthPercentage(value: string): boolean;
-/**
- * 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 declare function isCssVariable(value: string): boolean;

package/dist/types/utils/on-scroll/collapse-hide.utils.d.ts

@@ -0,0 +1,26 @@
+/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
+export declare 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 declare const COLLAPSE_SHOW_THRESHOLD_PX = 5;
+export interface CollapseHideInteractionConfig {
+    regionEl: HTMLElement;
+    scrollEl: HTMLElement;
+    /** Custom property set on the region and on `ion-content` (e.g. `--header-hide-slide-y`). */
+    slideCssVar: string;
+    contentPartnerClass: string;
+    contentHiddenClass: string;
+    regionHiddenClass: string;
+}
+/**
+ * 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 declare const createCollapseHideInteraction: ({ regionEl, scrollEl, slideCssVar, contentPartnerClass, contentHiddenClass, regionHiddenClass, }: CollapseHideInteractionConfig) => (() => void);