@ionic/core 8.8.9-dev.11780493937.17fe092d → 8.8.9-dev.11780683233.1c5e9d9b

package/dist/types/components/gallery/gallery.d.ts

@@ -4,7 +4,8 @@ import type { GalleryColumns, GalleryGap } from './gallery-interface';
  * @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.
  *
- * @slot - Content is placed in a responsive gallery layout.
+ * @slot - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
  */
 export declare class Gallery implements ComponentInterface {
     el: HTMLIonGalleryElement;
@@ -14,6 +15,7 @@ export declare class Gallery implements ComponentInterface {
     private hasWarnedInvalidColumns;
     private hasWarnedInvalidGap;
     private hasWarnedUnusedOrder;
+    private hasWarnedInvalidItems;
     /**
      * The visual layout of the gallery. When `uniform`, rows take up the height
      * of the tallest item and are spaced evenly across the gallery. Additionally,
@@ -38,7 +40,8 @@ export declare class Gallery implements ComponentInterface {
     /**
      * 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
+     * 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.
      */
@@ -47,6 +50,14 @@ export declare class Gallery implements ComponentInterface {
     protected onLayoutOrOrderChanged(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Observe the host and each item for size changes. Items are observed in
+     * addition to the host so masonry placement is recomputed when an item's
+     * rendered height changes — most importantly when a dynamically added
+     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
+     * `load` event and does not change the host's measured size while collapsed.
+     */
+    private observeResizes;
     /**
      * Listen for the load event on child elements.
      * When the layout is `masonry`, this listener is used to schedule a resize
@@ -78,9 +89,10 @@ export declare class Gallery implements ComponentInterface {
      */
     private sanitizeColumns;
     /**
-     * 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.
+     * 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.
      */
     private sanitizeGap;
     /**
@@ -140,10 +152,18 @@ export declare class Gallery implements ComponentInterface {
      */
     private updateResponsiveStyles;
     /**
-     * Return all directly slotted children of the gallery that can be grid items
-     * with inline placement styles (HTML elements and SVG elements).
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell. A direct child that is not an `ion-gallery-item` is
+     * treated as a pass-through wrapper (e.g. a layout `<div>`): its box is
+     * collapsed with `display: contents` so the nested items participate in the
+     * gallery grid. Children that contain no `ion-gallery-item` are ignored.
      */
     private getItems;
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component.
+     */
+    private warnInvalidItems;
     /**
      * Clear the item styles for the given item element.
      * This is used to switch between uniform and masonry layouts.
@@ -153,9 +173,14 @@ export declare class Gallery implements ComponentInterface {
      * Clear placement styles for all items when leaving masonry mode.
      */
     private clearMasonryStyles;
+    /**
+     * Whether the item contains any images that have not finished loading.
+     * Used to defer masonry placement until the rendered height is final.
+     */
+    private hasUnloadedImages;
     /**
      * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined for images that are not fully loaded yet.
+     * Returns undefined when the item has images that are not fully loaded yet.
      */
     private calculateRowSpan;
     /**

package/dist/types/components/gallery/test/utils.d.ts

@@ -1,2 +1,2 @@
-export declare const sharedStyles = "\n  ion-gallery {\n    width: 343px;\n  }\n\n  div {\n    color: #fff;\n    height: 150px;\n  }\n\n  div:nth-child(1) {\n    background: #ff6b6b;\n  }\n\n  div:nth-child(2) {\n    background: #4ecdc4;\n  }\n\n  div:nth-child(3) {\n    background: #ffe66d;\n    color: #333;\n  }\n\n  div:nth-child(4) {\n    background: #5f27cd;\n  }\n\n  div:nth-child(5) {\n    background: #7f8c8d;\n  }\n\n  div:nth-child(6) {\n    background: #ff9f43;\n  }\n\n  div:nth-child(7) {\n    background: #ff3f34;\n  }\n\n  div:nth-child(8) {\n    background: #2ecc71;\n  }\n\n  div:nth-child(9) {\n    background: #34495e;\n  }\n\n  div:nth-child(10) {\n    background: #1abc9c;\n  }\n\n  div:nth-child(11) {\n    background: #e67e22;\n  }\n\n  div:nth-child(12) {\n    background: #9b59b6;\n  }\n";
+export declare const sharedStyles = "\n  ion-gallery {\n    width: 343px;\n  }\n\n  ion-gallery-item div {\n    color: #fff;\n    height: 150px;\n  }\n\n  ion-gallery-item:nth-child(1) div {\n    background: #ff6b6b;\n  }\n\n  ion-gallery-item:nth-child(2) div {\n    background: #4ecdc4;\n  }\n\n  ion-gallery-item:nth-child(3) div {\n    background: #ffe66d;\n    color: #333;\n  }\n\n  ion-gallery-item:nth-child(4) div {\n    background: #5f27cd;\n  }\n\n  ion-gallery-item:nth-child(5) div {\n    background: #7f8c8d;\n  }\n\n  ion-gallery-item:nth-child(6) div {\n    background: #ff9f43;\n  }\n\n  ion-gallery-item:nth-child(7) div {\n    background: #ff3f34;\n  }\n\n  ion-gallery-item:nth-child(8) div {\n    background: #2ecc71;\n  }\n\n  ion-gallery-item:nth-child(9) div {\n    background: #34495e;\n  }\n\n  ion-gallery-item:nth-child(10) div {\n    background: #1abc9c;\n  }\n\n  ion-gallery-item:nth-child(11) div {\n    background: #e67e22;\n  }\n\n  ion-gallery-item:nth-child(12) div {\n    background: #9b59b6;\n  }\n";
 export declare const numberToWords: (value: number) => string;

package/dist/types/components/gallery-item/gallery-item.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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.
+ *
+ * @slot - The content placed inside of the gallery item. This is typically an
+ * `img`, but can be any element (e.g. a `figure` wrapping an image and caption).
+ */
+export declare class GalleryItem implements ComponentInterface {
+    private hasWarnedInvalidParent;
+    private galleryEl?;
+    private galleryClassObserver?;
+    el: HTMLIonGalleryItemElement;
+    /**
+     * The layout of the parent `ion-gallery`, mirrored as a class so the item
+     * can apply layout-specific styles (e.g. a square aspect ratio in the
+     * `uniform` layout, a bottom margin in the `masonry` layout).
+     */
+    galleryLayout?: 'uniform' | 'masonry';
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private onSlotChange;
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    private warnInvalidParent;
+    /**
+     * Watch the parent gallery's class list so the item can react to layout
+     * changes (the gallery reflects its layout as a `gallery-layout-*` class).
+     */
+    private watchGalleryLayoutClasses;
+    private syncLayoutClasses;
+    render(): any;
+}

package/dist/types/components/header/header.d.ts

@@ -6,22 +6,17 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Header implements ComponentInterface {
     private scrollEl?;
     private contentScrollCallback?;
-    private headerHideCleanup?;
     private intersectionObserver?;
     private collapsibleMainHeader?;
     private inheritedAttributes;
-    private didLoad;
     el: HTMLElement;
     /**
      * Describes the scroll effect that will be applied to the header.
+     * Only applies when the theme is `"ios"`.
      *
-     * - `"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.
+     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
      */
-    collapse?: 'condense' | 'fade' | 'hide';
+    collapse?: 'condense' | 'fade';
     /**
      * If `true`, the header will have a line at the bottom.
      * TODO(ROU-10855): add support for this prop on ios/md themes
@@ -39,10 +34,8 @@ export declare class Header implements ComponentInterface {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     private checkCollapsibleHeader;
-    private setupHideHeader;
     private setupFadeHeader;
     private destroyCollapsibleHeader;
     private setupCondenseHeader;

package/dist/types/components/header/header.utils.d.ts

@@ -22,7 +22,6 @@ export declare const handleToolbarIntersection: (ev: any, // TODO(FW-2832): type
 mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => void;
 export declare const setHeaderActive: (headerIndex: HeaderIndex, active?: boolean) => void;
 export declare const scaleLargeTitles: (toolbars?: ToolbarIndex[], scale?: number, transition?: boolean) => void;
-export declare const createHeaderHideInteraction: (headerEl: HTMLElement, scrollEl: HTMLElement) => (() => void);
 export declare const handleHeaderFade: (scrollEl: HTMLElement, baseEl: HTMLElement, condenseHeader: HTMLElement | null) => void;
 /**
  * Get the role type for the ion-header.

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.  - `"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"]`).
+          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
          */
-        "collapse"?: 'fade' | 'hide';
+        "collapse"?: 'fade';
         /**
           * 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%)`, 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%)`, 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.
           * @default DEFAULT_GAP
          */
         "gap": GalleryGap;
@@ -1500,6 +1500,16 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonGalleryItem {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -1517,9 +1527,9 @@ export namespace Components {
     }
     interface IonHeader {
         /**
-          * 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.
+          * 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)
          */
-        "collapse"?: 'condense' | 'fade' | 'hide';
+        "collapse"?: 'condense' | 'fade';
         /**
           * 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
@@ -5046,6 +5056,12 @@ declare global {
         prototype: HTMLIonGalleryElement;
         new (): HTMLIonGalleryElement;
     };
+    interface HTMLIonGalleryItemElement extends Components.IonGalleryItem, HTMLStencilElement {
+    }
+    var HTMLIonGalleryItemElement: {
+        prototype: HTMLIonGalleryItemElement;
+        new (): HTMLIonGalleryItemElement;
+    };
     interface HTMLIonGridElement extends Components.IonGrid, HTMLStencilElement {
     }
     var HTMLIonGridElement: {
@@ -6004,6 +6020,7 @@ declare global {
         "ion-fab-list": HTMLIonFabListElement;
         "ion-footer": HTMLIonFooterElement;
         "ion-gallery": HTMLIonGalleryElement;
+        "ion-gallery-item": HTMLIonGalleryItemElement;
         "ion-grid": HTMLIonGridElement;
         "ion-header": HTMLIonHeaderElement;
         "ion-img": HTMLIonImgElement;
@@ -7464,9 +7481,9 @@ declare namespace LocalJSX {
     }
     interface IonFooter {
         /**
-          * 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"]`).
+          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
          */
-        "collapse"?: 'fade' | 'hide';
+        "collapse"?: 'fade';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -7488,7 +7505,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%)`, 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%)`, 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.
           * @default DEFAULT_GAP
          */
         "gap"?: GalleryGap;
@@ -7510,6 +7527,16 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonGalleryItem {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -7527,9 +7554,9 @@ declare namespace LocalJSX {
     }
     interface IonHeader {
         /**
-          * 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.
+          * 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)
          */
-        "collapse"?: 'condense' | 'fade' | 'hide';
+        "collapse"?: 'condense' | 'fade';
         /**
           * 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 +10805,7 @@ declare namespace LocalJSX {
         "side": 'start' | 'end' | 'top' | 'bottom';
     }
     interface IonFooterAttributes {
-        "collapse": 'fade' | 'hide';
+        "collapse": 'fade';
         "translucent": boolean;
     }
     interface IonGalleryAttributes {
@@ -10791,7 +10818,7 @@ declare namespace LocalJSX {
         "fixed": boolean;
     }
     interface IonHeaderAttributes {
-        "collapse": 'condense' | 'fade' | 'hide';
+        "collapse": 'condense' | 'fade';
         "divider": boolean;
         "translucent": boolean;
     }
@@ -11336,6 +11363,7 @@ declare namespace LocalJSX {
         "ion-fab-list": Omit<IonFabList, keyof IonFabListAttributes> & { [K in keyof IonFabList & keyof IonFabListAttributes]?: IonFabList[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `attr:${K}`]?: IonFabListAttributes[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `prop:${K}`]?: IonFabList[K] };
         "ion-footer": Omit<IonFooter, keyof IonFooterAttributes> & { [K in keyof IonFooter & keyof IonFooterAttributes]?: IonFooter[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `attr:${K}`]?: IonFooterAttributes[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `prop:${K}`]?: IonFooter[K] };
         "ion-gallery": Omit<IonGallery, keyof IonGalleryAttributes> & { [K in keyof IonGallery & keyof IonGalleryAttributes]?: IonGallery[K] } & { [K in keyof IonGallery & keyof IonGalleryAttributes as `attr:${K}`]?: IonGalleryAttributes[K] } & { [K in keyof IonGallery & keyof IonGalleryAttributes as `prop:${K}`]?: IonGallery[K] };
+        "ion-gallery-item": IonGalleryItem;
         "ion-grid": Omit<IonGrid, keyof IonGridAttributes> & { [K in keyof IonGrid & keyof IonGridAttributes]?: IonGrid[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `attr:${K}`]?: IonGridAttributes[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `prop:${K}`]?: IonGrid[K] };
         "ion-header": Omit<IonHeader, keyof IonHeaderAttributes> & { [K in keyof IonHeader & keyof IonHeaderAttributes]?: IonHeader[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `attr:${K}`]?: IonHeaderAttributes[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `prop:${K}`]?: IonHeader[K] };
         "ion-img": Omit<IonImg, keyof IonImgAttributes> & { [K in keyof IonImg & keyof IonImgAttributes]?: IonImg[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `attr:${K}`]?: IonImgAttributes[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `prop:${K}`]?: IonImg[K] };
@@ -11441,6 +11469,7 @@ declare module "@stencil/core" {
             "ion-fab-list": LocalJSX.IntrinsicElements["ion-fab-list"] & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
             "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
             "ion-gallery": LocalJSX.IntrinsicElements["ion-gallery"] & JSXBase.HTMLAttributes<HTMLIonGalleryElement>;
+            "ion-gallery-item": LocalJSX.IntrinsicElements["ion-gallery-item"] & JSXBase.HTMLAttributes<HTMLIonGalleryItemElement>;
             "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
             "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
             "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;

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

@@ -10,3 +10,12 @@
  * @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;