@ionic/core 9.0.10 → 9.0.11-dev.11793666452.109ac2a5

package/dist/types/components/datetime/utils/state.d.ts

@@ -1,4 +1,4 @@
-import type { DatetimeHighlight, DatetimeHighlightCallback, DatetimeHighlightStyle, DatetimeParts } from '../datetime-interface';
+import type { DatetimeHighlight, DatetimeHighlightCallback, DatetimeHighlightStyle, DatetimeParts, DatetimeRangeParts } from '../datetime-interface';
 export declare const isYearDisabled: (refYear: number, minParts?: DatetimeParts, maxParts?: DatetimeParts) => boolean;
 /**
  * Returns true if a given day should
@@ -10,10 +10,13 @@ export declare const isDayDisabled: (refParts: DatetimeParts, minParts?: Datetim
  * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
-export declare const getCalendarDayState: (locale: string, refParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[], todayParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, dayValues?: number[]) => {
+export declare const getCalendarDayState: (locale: string, refParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[], todayParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, dayValues?: number[], rangeParts?: DatetimeRangeParts) => {
     disabled: boolean;
     isActive: boolean;
     isToday: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
     ariaSelected: string | null;
     ariaLabel: string | null;
     text: string | null;

package/dist/types/components/datetime-button/datetime-button.d.ts

@@ -2,7 +2,8 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.

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

@@ -0,0 +1,20 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Divider implements ComponentInterface {
+    /**
+     * Set to `"xxsmall"` for the smallest spacing.
+     * Set to "xsmall" for very small spacing.
+     * Set to `"small"` for small spacing.
+     * Set to "medium" for medium spacing.
+     * Set to "large" for large spacing.
+     * Set to `"xlarge"` for the largest spacing.
+     *
+     * Defaults to `"medium"`.
+     */
+    spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    /**
+     * If `true`, the divider will have horizontal margins
+     * By default, it's `false`
+     */
+    inset: boolean;
+    render(): any;
+}

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

@@ -1,4 +1,8 @@
 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.
+ */
 export declare class Fab implements ComponentInterface {
     el: HTMLElement;
     /**

package/dist/types/components/fab-button/fab-button.d.ts

@@ -3,7 +3,8 @@ import type { AnchorInterface, ButtonInterface } from "../../utils/element-inter
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
  * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
@@ -68,7 +69,7 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
     show: boolean;
     /**
      * If `true`, the fab button will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      */
     translucent: boolean;
@@ -89,7 +90,7 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
      * is pressed. Only applies if it is the main button inside of a fab containing a
      * fab list.
      */
-    closeIcon: string;
+    closeIcon?: string;
     /**
      * Emitted when the button has focus.
      */
@@ -111,5 +112,12 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
     private findForm;
     private submitForm;
     componentWillLoad(): void;
+    /**
+     * Get the icon to use for the close icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get fabButtonCloseIcon(): string;
     render(): any;
 }

package/dist/types/components/fab-list/fab-list.d.ts

@@ -1,4 +1,8 @@
 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.
+ */
 export declare class FabList implements ComponentInterface {
     el: HTMLIonFabElement;
     private activateTimeouts;

package/dist/types/components/footer/footer-interface.d.ts

@@ -0,0 +1 @@
+export type FooterScrollEffect = 'hide' | 'fade';

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

@@ -1,22 +1,38 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { FooterScrollEffect } from './footer-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export declare class Footer implements ComponentInterface {
     private scrollEl?;
     private contentScrollCallback?;
     private keyboardCtrl;
     private keyboardCtrlPromise;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedCollapse;
+    private activeEffect?;
+    private fadeSetupId;
     private keyboardVisible;
     el: HTMLIonFooterElement;
     /**
      * Describes the scroll effect that will be applied to the footer.
-     * Only applies in iOS mode.
+     * `"hide"` slides the footer out of view when scrolling down and back in
+     * when scrolling up.
+     * `"fade"` fades the toolbar background on scroll.
+     */
+    scrollEffect?: FooterScrollEffect;
+    /**
+     * Describes the scroll effect that will be applied to the footer.
+     * Only applies when the theme is `"ios"`.
+     *
+     * @deprecated Use `scrollEffect` instead.
      */
     collapse?: 'fade';
     /**
      * If `true`, the footer will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      *
      * Note: In order to scroll content behind the footer, the `fullscreen`
@@ -28,6 +44,7 @@ export declare class Footer implements ComponentInterface {
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private checkCollapsibleFooter;
+    private setupScrollEffectHide;
     private setupFadeFooter;
     private destroyCollapsibleFooter;
     render(): any;

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

@@ -0,0 +1,9 @@
+export declare const DEFAULT_COLUMNS: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+export declare const DEFAULT_GAP = "16px";

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

@@ -0,0 +1,10 @@
+export interface GalleryBreakpoints<T = string | number> {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    xxl?: T;
+}
+export type GalleryColumns = GalleryBreakpoints | string | number;
+export type GalleryGap = GalleryBreakpoints | string | number;

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

@@ -0,0 +1,218 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+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 - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
+ */
+export declare class Gallery implements ComponentInterface {
+    el: HTMLIonGalleryElement;
+    private masonryRaf?;
+    private resizeObserver?;
+    private lastWidth?;
+    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,
+     * items will have an aspect ratio of 1/1, forcing them to be square unless a
+     * height is explicitly set. When `masonry`, items will be positioned under each
+     * other with only the specified gap between them.
+     */
+    layout: 'uniform' | 'masonry';
+    /**
+     * The order in which items are positioned. Only applies when layout is
+     * `masonry`. When `sequential`, items are positioned in the order they are
+     * placed in the DOM. When `best-fit`, items are positioned under the column
+     * with the most available space. Defaults to `sequential` when layout is
+     * `masonry` and `order` is not explicitly set.
+     */
+    order?: 'sequential' | 'best-fit';
+    /**
+     * The number of columns to display. Can be set as a number or an object of
+     * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
+     */
+    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.
+     */
+    gap: GalleryGap;
+    protected onColumnsOrGapChanged(): void;
+    protected onLayoutOrOrderChanged(): void;
+    /**
+     * Sync the current layout with each item when the gallery's `layout`
+     * changes.
+     */
+    private syncItemLayout;
+    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
+     * of the masonry grid when the child elements load. This is useful for when
+     * images take time to load.
+     */
+    protected onChildLoad(ev: Event): void;
+    /**
+     * Listen for the slotchange event on the slot. When the gallery's items are
+     * added or removed, re-collapse wrappers, re-observe items for size changes,
+     * and recompute the masonry grid.
+     */
+    private onSlotChange;
+    /**
+     * Recompute the gallery column and gap variables and masonry placement when
+     * columns, gap, layout, or order change.
+     */
+    private syncResponsiveLayout;
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    private scheduleMasonryResize;
+    /**
+     * Normalize a single column value (`columns` as a number, string, or one entry from
+     * a `columns` breakpoint map) to a positive integer. Returns `undefined` when
+     * the input cannot be interpreted as a finite number.
+     */
+    private sanitizeColumns;
+    /**
+     * 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;
+    /**
+     * Check if the value is a breakpoint map object.
+     */
+    private isBreakpointMap;
+    /**
+     * Check if the breakpoint map has any invalid values for the provided
+     * sanitizer. A breakpoint map is invalid when there are no valid breakpoint
+     * keys set (e.g. `{}` or `{ colums: 3 }`), or when a value under a
+     * breakpoint key fails the sanitizer (e.g. `{ xs: -3 }`, `{ sm: 'foo' }`).
+     */
+    private hasInvalidBreakpointMap;
+    /**
+     * Resolve a responsive value from a breakpoint map.
+     * Uses a breakpoint-specific default when custom values are missing/invalid.
+     */
+    private resolveFromBreakpoints;
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    private getColumnsFromBreakpointMap;
+    /**
+     * Get the gap from a responsive breakpoint map.
+     * Returns the gap for the last matching breakpoint.
+     */
+    private getGapFromBreakpointMap;
+    /**
+     * Warn about an invalid columns value when it is set to a negative number,
+     * an empty breakpoint map, a map with no supported breakpoint keys,
+     * or a map with invalid breakpoint values.
+     */
+    private warnInvalidColumns;
+    /**
+     * Warn about an invalid gap value when it is set to a negative number,
+     * an empty breakpoint map, a map with no supported breakpoint keys,
+     * or a map with invalid breakpoint values.
+     */
+    private warnInvalidGap;
+    /**
+     * Warn when `order` is explicitly set while layout is `uniform`.
+     */
+    private warnUnusedOrder;
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    private getColumnsForWidth;
+    /**
+     * Resolve the active gap value for the current width.
+     */
+    private getGapForWidth;
+    /**
+     * Update the responsive styles for the gallery. This is used to update
+     * the columns and gap when the component width changes.
+     */
+    private updateResponsiveStyles;
+    /**
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell, whether a direct child or nested inside a pass-through
+     * wrapper (e.g. a layout `<div>`). Items belonging to a nested `ion-gallery`
+     * are excluded.
+     */
+    private getItems;
+    /**
+     * Collapse each pass-through wrapper's box with `display: contents` so its
+     * items participate in the gallery grid. Restore the box of a wrapper that
+     * no longer contains items, and warn about children that contain none.
+     */
+    private collapseWrappers;
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component. Items belonging to a nested
+     * gallery are considered invalid content for the parent gallery.
+     */
+    private warnInvalidItems;
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    private clearItemStyles;
+    /**
+     * 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 when the item has images that are not fully loaded yet.
+     */
+    private calculateRowSpan;
+    /**
+     * Get the index of the column to position the item in.
+     * When the order is `best-fit`, the column with the shortest height is
+     * returned. Otherwise, items are placed in the column that matches their
+     * natural DOM order.
+     */
+    private getColumnIndex;
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    private layoutMasonry;
+    /**
+     * Measure the host and children, then compute masonry placement.
+     */
+    private resizeMasonryGrid;
+    /**
+     * Resolved order for layout and CSS. Order should be `undefined` for
+     * the uniform layout. When order is not set, it should be `"sequential"`
+     * for the masonry layout.
+     */
+    private getOrder;
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare const sharedGalleryStyles = "\n  ion-gallery {\n    width: 343px;\n  }\n";
+export declare const sharedGalleryItemStyles = "\n  ion-gallery-item {\n    color: #fff;\n  }\n\n  ion-gallery-item:nth-child(1) {\n    background: #ff6b6b;\n  }\n\n  ion-gallery-item:nth-child(2) {\n    background: #4ecdc4;\n  }\n\n  ion-gallery-item:nth-child(3) {\n    background: #ffe66d;\n    color: #333;\n  }\n\n  ion-gallery-item:nth-child(4) {\n    background: #5f27cd;\n  }\n\n  ion-gallery-item:nth-child(5) {\n    background: #7f8c8d;\n  }\n\n  ion-gallery-item:nth-child(6) {\n    background: #ff9f43;\n  }\n\n  ion-gallery-item:nth-child(7) {\n    background: #ff3f34;\n  }\n\n  ion-gallery-item:nth-child(8) {\n    background: #2ecc71;\n  }\n\n  ion-gallery-item:nth-child(9) {\n    background: #34495e;\n  }\n\n  ion-gallery-item:nth-child(10) {\n    background: #1abc9c;\n  }\n\n  ion-gallery-item:nth-child(11) {\n    background: #e67e22;\n  }\n\n  ion-gallery-item:nth-child(12) {\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,33 @@
+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;
+    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;
+    connectedCallback(): void;
+    /**
+     * Resolve the layout from the parent `ion-gallery`. Called internally on
+     * load and connect, and by the gallery when its layout changes.
+     * @internal
+     */
+    syncGalleryLayout(): Promise<void>;
+    private onSlotChange;
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    private warnInvalidParent;
+    render(): any;
+}

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

@@ -1,4 +1,8 @@
 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.
+ */
 export declare class Grid implements ComponentInterface {
     /**
      * If `true`, the grid will have a fixed width based on the screen size.

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

@@ -0,0 +1 @@
+export type HeaderScrollEffect = 'hide' | 'condense' | 'fade';

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

@@ -1,6 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { HeaderScrollEffect } from './header-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export declare class Header implements ComponentInterface {
     private scrollEl?;
@@ -8,17 +10,37 @@ export declare class Header implements ComponentInterface {
     private intersectionObserver?;
     private collapsibleMainHeader?;
     private inheritedAttributes;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedCollapse;
+    private activeEffect?;
+    private fadeCondenseSetupId;
     el: HTMLElement;
     /**
      * Describes the scroll effect that will be applied to the header.
-     * Only applies in iOS mode.
+     * `"hide"` slides the header out of view when scrolling down and back in
+     * when scrolling up.
+     * `"condense"` collapses the large title into the main toolbar on scroll.
+     * `"fade"` fades the toolbar background on scroll.
+     */
+    scrollEffect?: HeaderScrollEffect;
+    /**
+     * 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)
+     *
+     * @deprecated Use `scrollEffect` instead.
      */
     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
+     */
+    divider: boolean;
     /**
      * If `true`, the header will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      *
      * Note: In order to scroll content behind the header, the `fullscreen`
@@ -30,6 +52,7 @@ export declare class Header implements ComponentInterface {
     componentDidUpdate(): void;
     disconnectedCallback(): void;
     private checkCollapsibleHeader;
+    private setupScrollEffectHide;
     private setupFadeHeader;
     private destroyCollapsibleHeader;
     private setupCondenseHeader;

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

@@ -27,10 +27,9 @@ export declare const handleHeaderFade: (scrollEl: HTMLElement, baseEl: HTMLEleme
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
- * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
+ * @returns 'none' if inside ion-menu, otherwise 'banner'.
+ * Condensed headers start as 'banner' and have their role
+ * toggled dynamically by setHeaderActive() on scroll.
  */
-export declare const getRoleType: (isInsideMenu: boolean, isCondensed: boolean, mode: "ios" | "md") => "none" | "banner";
+export declare const getRoleType: (isInsideMenu: boolean) => "none" | "banner";
 export {};

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

@@ -1,5 +1,7 @@
 import type { ComponentInterface, EventEmitter } 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.
  * @deprecated
  *
  * @part image - The inner `img` element.

package/dist/types/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,8 +1,13 @@
 import type { ComponentInterface, EventEmitter } 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.
+ */
 export declare class InfiniteScroll implements ComponentInterface {
     private thrPx;
     private thrPc;
     private scrollEl?;
+    private minHeightLocked;
     /**
      * didFire exists so that ionInfinite
      * does not fire multiple times if
@@ -41,6 +46,12 @@ export declare class InfiniteScroll implements ComponentInterface {
      * The value can be either `top` or `bottom`.
      */
     position: 'top' | 'bottom';
+    /**
+     * If `true`, the infinite scroll will preserve the scroll position
+     * when the content is re-rendered. This is useful when the content is
+     * re-rendered with new keys, and the scroll position should be preserved.
+     */
+    preserveRerenderScrollPosition: boolean;
     /**
      * Emitted when the scroll reaches
      * the threshold distance. From within your infinite handler,
@@ -51,6 +62,16 @@ export declare class InfiniteScroll implements ComponentInterface {
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private onScroll;
+    /**
+     * Loop through our sibling elements and lock or unlock their min height.
+     * This keeps our siblings, for example `ion-list`, the same height as their
+     * content currently is, so when it loads new data and the DOM removes the old
+     * data, the height of the container doesn't change and we don't lose our scroll position.
+     *
+     * We preserve existing min-height values, if they're set, so we don't erase what
+     * has been previously set by the user when we restore after complete is called.
+     */
+    private lockSiblingMinHeight;
     /**
      * Call `complete()` within the `ionInfinite` output event handler when
      * your async operation has completed. For example, the `loading`

package/dist/types/components/infinite-scroll-content/infinite-scroll-content.d.ts

@@ -1,6 +1,10 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export declare class InfiniteScrollContent implements ComponentInterface {
     private customHTMLEnabled;
     /**