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

package/dist/collection/components/gallery-item/gallery-item.js

@@ -0,0 +1,95 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+import { printIonWarning } from "../../utils/logging/index";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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 class GalleryItem {
+    constructor() {
+        this.hasWarnedInvalidParent = false;
+        this.onSlotChange = () => {
+            this.warnInvalidParent();
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        this.galleryEl = (_a = this.el.closest('ion-gallery')) !== null && _a !== void 0 ? _a : undefined;
+        this.syncLayoutClasses();
+    }
+    componentDidLoad() {
+        this.watchGalleryLayoutClasses();
+        this.warnInvalidParent();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.galleryClassObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.galleryClassObserver = undefined;
+        this.galleryEl = undefined;
+    }
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    warnInvalidParent() {
+        if (this.hasWarnedInvalidParent || this.galleryEl !== undefined) {
+            return;
+        }
+        printIonWarning('[ion-gallery-item] - This component should be used as a child of an "ion-gallery" component.', this.el);
+        this.hasWarnedInvalidParent = true;
+    }
+    /**
+     * 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).
+     */
+    watchGalleryLayoutClasses() {
+        var _a;
+        const galleryEl = this.galleryEl;
+        if (galleryEl === undefined) {
+            return;
+        }
+        (_a = this.galleryClassObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.galleryClassObserver = new MutationObserver(() => this.syncLayoutClasses());
+        this.galleryClassObserver.observe(galleryEl, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    syncLayoutClasses() {
+        var _a;
+        const layout = (_a = this.galleryEl) === null || _a === void 0 ? void 0 : _a.layout;
+        this.galleryLayout = layout === 'masonry' || layout === 'uniform' ? layout : undefined;
+    }
+    render() {
+        const { galleryLayout } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b3de6bf2df4af01ed274188a96d9e8cd82c9f5cd', class: {
+                [theme]: true,
+                'in-gallery-layout-uniform': galleryLayout === 'uniform',
+                'in-gallery-layout-masonry': galleryLayout === 'masonry',
+            } }, h("slot", { key: '5bef4549c5101178fec9b590cb6b553ddc5376c4', onSlotchange: this.onSlotChange })));
+    }
+    static get is() { return "ion-gallery-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gallery-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gallery-item.css"]
+        };
+    }
+    static get states() {
+        return {
+            "galleryLayout": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/grid/grid.js

@@ -16,10 +16,10 @@ export class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
+        return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
+            } }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.ionic.css

@@ -1,64 +1,3 @@
-/**
- * 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;
@@ -70,20 +9,6 @@ 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;
-}
-
 /**
  * A heuristic that applies CSS to tablet
  * viewports.

package/dist/collection/components/header/header.ios.css

@@ -1,64 +1,3 @@
-/**
- * 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;
@@ -70,20 +9,6 @@ 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.js

@@ -7,7 +7,7 @@ import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
-import { cloneElement, createHeaderHideInteraction, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
+import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
 /**
  * @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.
@@ -15,7 +15,6 @@ import { cloneElement, createHeaderHideInteraction, createHeaderIndex, handleCon
 export class Header {
     constructor() {
         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
@@ -46,37 +45,25 @@ export class Header {
         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 (runIosCollapse && hasCondense) {
+        if (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
@@ -87,7 +74,7 @@ export class Header {
             });
             await this.setupCondenseHeader(contentEl, pageEl);
         }
-        else if (runIosCollapse && hasFade) {
+        else if (hasFade) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
@@ -97,29 +84,12 @@ export class Header {
             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;
@@ -186,7 +156,7 @@ export class Header {
         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: '5cae1ff0bbc5f2035325c128a9394caf7f1459a0', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -194,7 +164,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '705f120951a3dd429286b66cd0b511fa267b3702', class: "header-background" }), h("slot", { key: '1c7a9d474083cf92abfe88c02d363f8d420716ca' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
@@ -217,15 +187,15 @@ export class Header {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'condense' | 'fade' | 'hide'",
-                    "resolved": "\"condense\" | \"fade\" | \"hide\" | undefined",
+                    "original": "'condense' | 'fade'",
+                    "resolved": "\"condense\" | \"fade\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "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."
+                    "text": "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)"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/header/header.md.css

@@ -1,64 +1,3 @@
-/**
- * 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;
@@ -70,20 +9,6 @@ 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,7 +3,6 @@
  */
 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';
@@ -180,14 +179,6 @@ 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/components/img/img.js

@@ -80,9 +80,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+        return (h(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
                 [theme]: true,
-            } }, h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -264,7 +264,7 @@ export class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
+        return (h(Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -29,11 +29,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
+        return (h(Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, h("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/input/input.js

@@ -617,7 +617,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3da29d837b5abe22de740ac96c8142422fce537a', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -630,7 +630,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: '142a8230382a05938887e9c0790832218ac37697', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '953f247ea2f40545e01e0346549d9b7aa344b720', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -640,14 +640,14 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), h("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), h("input", Object.assign({ key: '33a06efb4ce0b6e67c12e77f131effb113fba73f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && h("div", { key: 'fd09b37c6a798900c5074e7cbe2e790ea050c29d', class: "input-outline" }), h("slot", { key: '3eef4c4748104d8722f3254a04ff88e2b70c560e', name: "start" }), h("input", Object.assign({ key: '012a3fa52e19422d7fbc227845e9771c7d8fbe4a', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'b115494d9611aea57a976d3102026f3d9b430bfb', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && h("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'a259afa47a9914b2e0656364bed40644fa2c87c4', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'beec86eb500f6b335149c8734afc7c3945a10219', name: "end" })), shouldRenderHighlight && h("div", { key: '77a25d118934f369e09edbc2ffa6f90e3e760338', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input-otp/input-otp.js

@@ -680,7 +680,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: createColorClasses(color, {
+        return (h(Host, { key: 'f39e98cd24cbf50f7db4e891dda9499f6def7986', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -688,10 +688,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'a4427602ea1894d53e4d0f502dbb972c93a86bff', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
+            }) }, h("div", Object.assign({ key: '624adcd552947708162003353b331cd92df062ef', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: 'c518d83ab0236a3ebbe631582ce6f1c2edfbcd29', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
+            }, part: "description" }, h("slot", { key: '15c7c8549c1788748e1ae31bd227a7f918cb5eca' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -94,16 +94,16 @@ export class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: createColorClasses(color, {
+        return (h(Host, { key: 'f11e3bf4d3255e003aec504e6dd3ee1e0caaf767', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'dee2bdeb169d1fa4943c9a8b0164b8fbb4cdfe06', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '5bba43f7755857fd9347612bb906c389b60386b4', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'c0eb0e4e2f3e9553bfd519ff655064c9f62af406', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }