@ionic/core 8.8.7-dev.11778599050.191a48e3 → 8.8.7-dev.11778702595.1d38f927

package/dist/cjs/ion-gallery.cjs.entry.js

@@ -0,0 +1,510 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-CzcLEdQ5.js');
+var helpers = require('./helpers-DJYxKN5U.js');
+var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
+require('./focus-visible-BIj-I3-C.js');
+
+/**
+ * Helpers for validating user-supplied CSS values using regular expressions, without
+ * relying on browser CSS APIs.
+ */
+// Matches `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
+// Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
+const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+/**
+ * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+ * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+ * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
+ *
+ * @param value String value to validate.
+ */
+function isValidLengthPercentage(value) {
+    const v = value.trim();
+    if (!v) {
+        return false;
+    }
+    return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
+}
+
+const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+const DEFAULT_GAP = '16px';
+
+const galleryCss = () => `:host{display:grid;grid-template-columns:repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr))}:host(.gallery-layout-uniform){gap:var(--internal-gallery-gap, 16px)}:host(.gallery-layout-uniform) ::slotted(*){aspect-ratio:1/1}:host(.gallery-layout-masonry){-ms-flex-align:start;align-items:start;-webkit-column-gap:var(--internal-gallery-gap, 16px);-moz-column-gap:var(--internal-gallery-gap, 16px);column-gap:var(--internal-gallery-gap, 16px);row-gap:0;grid-auto-rows:2px}:host(.gallery-layout-masonry) ::slotted(*){display:block;min-height:unset;margin-bottom:var(--internal-gallery-gap, 16px)}::slotted(*){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%}::slotted(img){display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}`;
+
+// TODO(FW-7285): Replace with global breakpoints
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+};
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const Gallery = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // Keep track of whether we've warned about invalid columns, invalid gap,
+        // and unused order properties to avoid duplicate warnings on screen resize.
+        this.hasWarnedInvalidColumns = false;
+        this.hasWarnedInvalidGap = false;
+        this.hasWarnedUnusedOrder = false;
+        /**
+         * 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.
+         */
+        this.layout = 'uniform';
+        /**
+         * 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 }`).
+         */
+        this.columns = DEFAULT_COLUMNS;
+        /**
+         * 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.
+         */
+        this.gap = DEFAULT_GAP;
+        /**
+         * Listen for the slotchange event on the slot.
+         * When the layout is `masonry`, this listener is used to schedule a resize
+         * of the masonry grid when the slot changes. This is useful for when items
+         * are added or removed from the gallery.
+         */
+        this.onSlotChange = () => {
+            this.scheduleMasonryResize();
+        };
+        /**
+         * Measure the host and children, then compute masonry placement.
+         */
+        this.resizeMasonryGrid = () => {
+            this.masonryRaf = undefined;
+            if (this.layout !== 'masonry') {
+                this.clearMasonryStyles();
+                return;
+            }
+            const width = this.el.getBoundingClientRect().width;
+            const columns = this.getColumnsForWidth(width);
+            // Skip masonry placement when width/columns does not resolve
+            // to a valid breakpoint column count.
+            if (columns === undefined) {
+                return;
+            }
+            const styles = getComputedStyle(this.el);
+            const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
+            const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
+            const items = this.getItems();
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
+        };
+    }
+    onColumnsOrGapChanged() {
+        this.syncResponsiveLayout();
+    }
+    onLayoutOrOrderChanged() {
+        this.syncResponsiveLayout();
+        // Wait until the next animation frame to warn about unused order
+        // to avoid erroneous warnings when the layout and order are updated
+        // in the same frame.
+        helpers.raf(() => {
+            this.warnUnusedOrder();
+        });
+    }
+    componentDidLoad() {
+        this.updateResponsiveStyles(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveStyles();
+            this.scheduleMasonryResize();
+        });
+        this.resizeObserver.observe(this.el);
+        this.scheduleMasonryResize();
+        this.warnUnusedOrder();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+            this.masonryRaf = undefined;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    /**
+     * 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.
+     */
+    onChildLoad(ev) {
+        if (this.layout !== 'masonry') {
+            return;
+        }
+        const target = ev.target;
+        if (target instanceof Node && this.el.contains(target)) {
+            this.scheduleMasonryResize();
+        }
+    }
+    /**
+     * Recompute the gallery column and gap variables and masonry placement when
+     * columns, gap, layout, or order change.
+     */
+    syncResponsiveLayout() {
+        this.updateResponsiveStyles(true);
+        this.scheduleMasonryResize();
+    }
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    scheduleMasonryResize() {
+        if (this.layout !== 'masonry') {
+            this.clearMasonryStyles();
+            return;
+        }
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+        }
+        this.masonryRaf = requestAnimationFrame(this.resizeMasonryGrid);
+    }
+    /**
+     * 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.
+     */
+    sanitizeColumns(columns) {
+        if (columns === undefined) {
+            return undefined;
+        }
+        const numericColumns = typeof columns === 'number' ? columns : Number(columns);
+        if (!Number.isFinite(numericColumns) || !Number.isInteger(numericColumns) || numericColumns <= 0) {
+            return undefined;
+        }
+        return numericColumns;
+    }
+    /**
+     * 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.
+     */
+    sanitizeGap(gap) {
+        if (gap === undefined) {
+            return undefined;
+        }
+        const normalizedGap = typeof gap === 'string' ? gap.trim() : gap;
+        if (normalizedGap === '' || typeof normalizedGap === 'object') {
+            return undefined;
+        }
+        const numericGap = Number(normalizedGap);
+        if (Number.isFinite(numericGap)) {
+            return numericGap < 0 ? undefined : `${numericGap}px`;
+        }
+        if (typeof normalizedGap !== 'string') {
+            return undefined;
+        }
+        const isValidCssLength = isValidLengthPercentage(normalizedGap);
+        return isValidCssLength ? normalizedGap : undefined;
+    }
+    /**
+     * Check if the value is a breakpoint map object.
+     */
+    isBreakpointMap(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * 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' }`).
+     */
+    hasInvalidBreakpointMap(breakpointMap, sanitizeValue) {
+        let hasBreakpointEntry = false;
+        for (const breakpoint of BREAKPOINT_ORDER) {
+            const value = breakpointMap[breakpoint];
+            if (value !== undefined) {
+                hasBreakpointEntry = true;
+                if (sanitizeValue(value) === undefined) {
+                    return true;
+                }
+            }
+        }
+        return !hasBreakpointEntry;
+    }
+    /**
+     * Resolve a responsive value from a breakpoint map.
+     * Uses a breakpoint-specific default when custom values are missing/invalid.
+     */
+    resolveFromBreakpoints(width, breakpointMap, sanitizeProvided, getSanitizedDefault) {
+        let resolvedValue;
+        for (const bp of BREAKPOINT_ORDER) {
+            const providedValue = breakpointMap[bp];
+            const sanitizedProvided = sanitizeProvided(providedValue);
+            const sanitizedDefault = getSanitizedDefault(bp);
+            const resolved = providedValue === undefined || sanitizedProvided === undefined ? sanitizedDefault : sanitizedProvided;
+            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
+                resolvedValue = resolved;
+            }
+        }
+        return resolvedValue;
+    }
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    getColumnsFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeColumns(value), (bp) => this.sanitizeColumns(DEFAULT_COLUMNS[bp]));
+    }
+    /**
+     * Get the gap from a responsive breakpoint map.
+     * Returns the gap for the last matching breakpoint.
+     */
+    getGapFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeGap(value), () => this.sanitizeGap(DEFAULT_GAP));
+    }
+    /**
+     * 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.
+     */
+    warnInvalidColumns(columns) {
+        if (this.hasWarnedInvalidColumns) {
+            return;
+        }
+        index.printIonWarning(`[ion-gallery] - Invalid "columns" value (${JSON.stringify(columns)}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, this.el);
+        this.hasWarnedInvalidColumns = true;
+    }
+    /**
+     * 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.
+     */
+    warnInvalidGap(gap) {
+        if (this.hasWarnedInvalidGap) {
+            return;
+        }
+        index.printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
+        this.hasWarnedInvalidGap = true;
+    }
+    /**
+     * Warn when `order` is explicitly set while layout is `uniform`.
+     */
+    warnUnusedOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (this.hasWarnedUnusedOrder || layout !== 'uniform' || order === undefined) {
+            return;
+        }
+        index.printIonWarning(`[ion-gallery] - "order" has no effect when "layout" is "uniform". Set "layout" to "masonry" for "order" to apply.`, this.el);
+        this.hasWarnedUnusedOrder = true;
+    }
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    getColumnsForWidth(width) {
+        const { columns } = this;
+        const isBreakpointColumns = this.isBreakpointMap(columns);
+        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointMap(columns, (value) => this.sanitizeColumns(value));
+        const sanitizedColumns = isBreakpointColumns
+            ? this.getColumnsFromBreakpointMap(width, columns)
+            : this.sanitizeColumns(columns);
+        if (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined)) {
+            this.warnInvalidColumns(columns);
+        }
+        if (sanitizedColumns !== undefined) {
+            return sanitizedColumns;
+        }
+        return this.getColumnsFromBreakpointMap(width, DEFAULT_COLUMNS);
+    }
+    /**
+     * Resolve the active gap value for the current width.
+     */
+    getGapForWidth(width) {
+        const { gap } = this;
+        const providedGap = gap !== null && gap !== void 0 ? gap : DEFAULT_GAP;
+        const isBreakpointGap = this.isBreakpointMap(providedGap);
+        const hasInvalidBreakpointGap = isBreakpointGap && this.hasInvalidBreakpointMap(providedGap, (value) => this.sanitizeGap(value));
+        const sanitizedGap = isBreakpointGap
+            ? this.getGapFromBreakpointMap(width, providedGap)
+            : this.sanitizeGap(providedGap);
+        if (hasInvalidBreakpointGap || (!isBreakpointGap && sanitizedGap === undefined)) {
+            this.warnInvalidGap(providedGap);
+        }
+        if (sanitizedGap !== undefined) {
+            return sanitizedGap;
+        }
+        return this.sanitizeGap(DEFAULT_GAP);
+    }
+    /**
+     * Update the responsive styles for the gallery. This is used to update
+     * the columns and gap when the component width changes.
+     */
+    updateResponsiveStyles(force = false) {
+        const width = this.el.getBoundingClientRect().width;
+        // Only update the columns if the component width has changed by more than
+        // 1px or if the force flag is true. This prevents unnecessary re-renders
+        // when the component width has not changed.
+        if (!width || (!force && this.lastWidth !== undefined && Math.abs(this.lastWidth - width) < 1)) {
+            return;
+        }
+        this.lastWidth = width;
+        const columns = this.getColumnsForWidth(width);
+        this.el.style.setProperty('--internal-gallery-columns', `${columns}`);
+        const gap = this.getGapForWidth(width);
+        this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
+    }
+    /**
+     * Return all directly slotted children of the gallery that can be grid items
+     * with inline placement styles (HTML elements and SVG elements).
+     */
+    getItems() {
+        return Array.from(this.el.children).filter((child) => { var _a; return typeof ((_a = child.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function'; });
+    }
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    clearItemStyles(itemEl) {
+        itemEl.style.gridRowStart = '';
+        itemEl.style.gridRowEnd = '';
+        itemEl.style.gridColumn = '';
+        itemEl.style.marginBottom = '';
+    }
+    /**
+     * Clear placement styles for all items when leaving masonry mode.
+     */
+    clearMasonryStyles() {
+        this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
+    }
+    /**
+     * Convert a rendered item height to the number of grid rows it should span.
+     * Returns undefined for images that are not fully loaded yet.
+     */
+    calculateRowSpan(itemEl, rowHeight, rowGap) {
+        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+            return undefined;
+        }
+        const height = itemEl.getBoundingClientRect().height;
+        const itemStyles = getComputedStyle(itemEl);
+        const marginBottom = parseFloat(itemStyles.getPropertyValue('margin-bottom')) || 0;
+        const denominator = rowHeight + rowGap;
+        if (!denominator || !Number.isFinite(denominator)) {
+            return 1;
+        }
+        return Math.ceil((height + marginBottom + rowGap) / denominator) || 1;
+    }
+    /**
+     * 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.
+     */
+    getColumnIndex(index, columnHeights, columns) {
+        const order = this.getOrder();
+        if (order === 'best-fit') {
+            let columnIndex = 0;
+            for (let i = 1; i < columns; i++) {
+                if (columnHeights[i] < columnHeights[columnIndex]) {
+                    columnIndex = i;
+                }
+            }
+            return columnIndex;
+        }
+        return index % columns;
+    }
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    layoutMasonry(items, rowHeight, rowGap, columns) {
+        const columnHeights = new Array(columns).fill(0);
+        const lastItemsByColumn = new Array(columns).fill(undefined);
+        items.forEach((itemEl, i) => {
+            itemEl.style.marginBottom = '';
+            const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (span === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            const columnIndex = this.getColumnIndex(i, columnHeights, columns);
+            const start = columnHeights[columnIndex] + 1;
+            itemEl.style.gridColumn = `${columnIndex + 1}`;
+            itemEl.style.gridRowStart = `${start}`;
+            itemEl.style.gridRowEnd = `span ${span}`;
+            columnHeights[columnIndex] = start + span - 1;
+            lastItemsByColumn[columnIndex] = itemEl;
+        });
+        // Remove trailing space from the final item in each column while preserving
+        // spacing between all non-final items.
+        lastItemsByColumn.forEach((itemEl) => {
+            if (itemEl === undefined) {
+                return;
+            }
+            itemEl.style.marginBottom = '0px';
+            const spanWithoutTrailingGap = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (spanWithoutTrailingGap === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            itemEl.style.gridRowEnd = `span ${spanWithoutTrailingGap}`;
+        });
+    }
+    /**
+     * 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.
+     */
+    getOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (layout === 'uniform') {
+            return undefined;
+        }
+        if (layout === 'masonry' && order === undefined) {
+            return 'sequential';
+        }
+        return order;
+    }
+    render() {
+        const { layout } = this;
+        const order = this.getOrder();
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
+            } }, index.h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "columns": [{
+                "onColumnsOrGapChanged": 0
+            }],
+        "gap": [{
+                "onColumnsOrGapChanged": 0
+            }],
+        "layout": [{
+                "onLayoutOrOrderChanged": 0
+            }],
+        "order": [{
+                "onLayoutOrOrderChanged": 0
+            }]
+    }; }
+};
+Gallery.style = galleryCss();
+
+exports.ion_gallery = Gallery;

package/dist/cjs/ion-img.cjs.entry.js

@@ -84,9 +84,9 @@ const Img = class {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '840d5b29d81222b061ac72168ef6551b5a061e3a', class: {
+        return (index.h(index.Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
                 [theme]: true,
-            } }, index.h("img", { key: 'e22e66ee4bb3a648b21c6080674e68eebf4a3feb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, index.h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js

@@ -271,7 +271,7 @@ const InfiniteScroll = class {
     render() {
         const theme = ionicGlobal.getIonTheme(this);
         const disabled = this.disabled;
-        return (index.h(index.Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', class: {
+        return (index.h(index.Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -315,11 +315,11 @@ const InfiniteScrollContent = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: 'e94d19f17ef9d4d77786716152e3206366feb546', class: {
+        return (index.h(index.Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, index.h("div", { key: '35fcc0572ad27a683aa55a704bd11b19fcdfd29c', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: 'fec3c13dbb2fa98699401147ce442b73e97e8bd8', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: '6cd6083255dacc891b4d201477e6bffccb1084bc', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, index.h("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
 };
 InfiniteScrollContent.style = {

package/dist/cjs/ion-input-otp.cjs.entry.js

@@ -692,7 +692,7 @@ const InputOTP = class {
         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 (index.h(index.Host, { key: 'aee59cdba3f3c3783519cf114c668ae92f74fcef', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: theme.createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -700,10 +700,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, index.h("div", Object.assign({ key: 'a0b26b833a20807019114a78e4512a639b82a61f', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper", part: "container" }, index.h("input", { class: "native-input", part: "native", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator", part: "separator" }))))), index.h("div", { key: 'e525d1841bab5378b165ec1cca9fc45274c2c0ec', class: {
+            }) }, index.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$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper", part: "container" }, index.h("input", { class: "native-input", part: "native", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && index.h("div", { class: "input-otp-separator", part: "separator" }))))), index.h("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, index.h("slot", { key: '9fd331ceff04ab93f8d4aec251565cc201f19294' }))));
+            }, part: "description" }, index.h("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ion-input-password-toggle.cjs.entry.js

@@ -101,16 +101,16 @@ const InputPasswordToggle = class {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = ionicGlobal.getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (index.h(index.Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: theme.createColorClasses(color, {
                 [mode]: true,
-            }) }, index.h("ion-button", { key: '0a83d58e059bc3b7ef604270e92351d7fa5d129c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, index.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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, index.h("ion-icon", { key: 'af9a7e202fe0b3f75f10b3e13bf1e5fb653194d1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, index.h("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-input.cjs.entry.js

@@ -622,7 +622,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'd62741432c3e1421d69fdf2ed2e8058a1ce3544f', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -635,7 +635,7 @@ const Input = class {
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, index.h("label", { key: '9707227d9eb977e0983c78757af20219eb1651c6', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '8bc5197ecb665e268668137844f122b74f69cc2d', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, index.h("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', 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
@@ -645,14 +645,14 @@ const Input = class {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme$1 === 'ionic' && index.h("div", { key: '65383eeb6a876dbf103dd5358f041f45856e6e9d', class: "input-outline" }), index.h("slot", { key: '7d333894f2be13a4033a515ce3c8a4489cc4bfc3', name: "start" }), index.h("input", Object.assign({ key: '8221d445e4ee9e1d2946205893cbb6de93604c86', 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 && (index.h("button", { key: '2fb77a78ecb32b46dc9641580c2c2f6125e9715d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme$1 === 'ionic' && index.h("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), index.h("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), index.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 && (index.h("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "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 }, index.h("ion-icon", { key: 'a349dfb263a011fc10f01350f917c4020809f512', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: '6e02025608bd54cf36e21ed3bef00353921a7fb9', name: "end" })), shouldRenderHighlight && index.h("div", { key: '8bf1e516962d232a96a2fa701e10c8c909318f62', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {