@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779467048.1641d05e

package/dist/cjs/{overlays-Hci_7vw_.js → overlays-C54DhaTC.js}

@@ -104,8 +104,101 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
+const ION_SELECT_MODAL_SELECTOR = 'ion-select-modal';
+const isSelectModalOptionControl = (el) => el.tagName === 'ION-RADIO' || el.tagName === 'ION-CHECKBOX';
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns the currently focused element for keyboard focus checks.
+ *
+ * Starts from `document.activeElement` (non-shadow / light DOM focus).
+ * If focus is inside one or more open shadow roots
+ * (e.g. native control inside `ion-radio`), walks through nested
+ * `shadowRoot.activeElement` values until the innermost focused node is reached.
+ */
+const getActiveElement = (ownerDoc) => {
+    var _a;
+    let active = ownerDoc.activeElement;
+    if (!active) {
+        return null;
+    }
+    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+/**
+ * Walks from a focused node (possibly deep inside shadow roots)
+ * up to the nearest `ion-radio` / `ion-checkbox` host.
+ */
+const getOptionControlHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isSelectModalOptionControl(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Sheet modals can have visual order that differs from DOM order.
+ * Without sorting, Tab can skip the handle after option traversal.
+ *
+ * Order: option controls (radio/checkbox) → sheet handle → end-slot
+ * header button. Any other focusables are appended after.
+ */
+const sortSheetModalFocusables = (overlay, elements) => {
+    const optionControls = elements.filter((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+    const cancelControl = elements.find((el) => overlay.contains(el) &&
+        el.tagName === 'ION-BUTTON' &&
+        el.closest('ion-header ion-buttons[slot="end"]') !== null);
+    const handleControl = elements.find((el) => el.classList.contains('modal-handle'));
+    const sortByGeometry = (els) => [...els].sort((a, b) => {
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const topDiff = ra.top - rb.top;
+        if (Math.abs(topDiff) > 1) {
+            return topDiff;
+        }
+        return ra.left - rb.left;
+    });
+    const ordered = [];
+    ordered.push(...sortByGeometry(optionControls));
+    if (handleControl) {
+        ordered.push(handleControl);
+    }
+    if (cancelControl) {
+        ordered.push(cancelControl);
+    }
+    const used = new Set(ordered);
+    for (const el of elements) {
+        if (!used.has(el)) {
+            ordered.push(el);
+        }
+    }
+    return ordered;
+};
+/**
+ * Option controls in groups use a tabindex pattern where only one
+ * option is tabbable (`tabIndex="0"`) while the others are `-1`.
+ * This returns the index of that current tabbable option.
+ */
+const getTabbableOptionControlIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+};
+/**
+ * Determines if the overlay's backdrop is always blocking
+ * (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
@@ -226,7 +319,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -409,6 +502,30 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which option control last received focus
+         * (arrows, click, or Tab). This pattern keeps `tabIndex=0` on the
+         * checked/first radio, so the Tab trap uses this when wrapping back
+         * into the list or focusing the option-group slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            if (!isSheetModal) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const optionHost = getOptionControlHost(target);
+            if (optionHost && lastOverlay.contains(optionHost)) {
+                lastOverlay.trapLastSheetOptionControl = optionHost;
+            }
+        }, true);
         // Listen for keydown events to intercept Tab navigation.
         // This is needed for Safari and Firefox which may skip focusable
         // elements or allow focus to escape the overlay.
@@ -418,10 +535,10 @@ const connectListeners = (doc) => {
             var _a, _b, _c;
             if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
                 return;
-            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
             if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
                 return;
-            const activeElement = doc.activeElement;
+            const activeElement = getActiveElement(doc);
             if (activeElement === lastOverlay) {
                 ev.preventDefault();
                 focusFirstDescendant(lastOverlay);
@@ -437,16 +554,32 @@ const connectListeners = (doc) => {
             if (!isInsideOverlay)
                 return;
             // Get all focusable elements from both light and shadow DOM
-            const allFocusable = [
+            let allFocusable = [
                 ...lastOverlay.querySelectorAll(focusableQueryString),
                 ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
             ];
+            const selectModalEl = lastOverlay.querySelector(ION_SELECT_MODAL_SELECTOR);
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            /**
+             * Some sheet modal content, including ion-select-modal,
+             * renders option containers as `ion-item.select-interface-option`.
+             * These can match focusable selectors in some builds but
+             * are not intended tab stops. Keep only true interactive
+             * controls so Tab can move from options to header
+             * controls/handle.
+             */
+            if (selectModalEl) {
+                allFocusable = allFocusable.filter((el) => !el.matches('ion-item.select-interface-option'));
+            }
+            if (isSheetModal) {
+                allFocusable = sortSheetModalFocusables(lastOverlay, allFocusable);
+            }
             if (allFocusable.length === 0) {
                 ev.preventDefault();
                 return;
             }
             // Find current element's index (accounting for shadow DOM)
-            const currentIndex = activeElement
+            let currentIndex = activeElement
                 ? allFocusable.findIndex((el) => {
                     var _a;
                     if (el === activeElement)
@@ -457,6 +590,31 @@ const connectListeners = (doc) => {
                     return rootNode instanceof ShadowRoot && rootNode.host === el;
                 })
                 : -1;
+            /**
+             * Radio/checkbox groups can move focus onto an option with
+             * `tabIndex=-1`, while another option still has `tabIndex=0`
+             * in the list. `findIndex` then yields -1 and Tab incorrectly
+             * wraps to `allFocusable[0]`.
+             * Treat focus on any option control inside the sheet modal
+             * as the same trap slot as the listed tabbable option
+             * (`tabIndex >= 0`) so Tab goes handle → Cancel, not back
+             * to the first radio.
+             */
+            if (currentIndex < 0 && isSheetModal && activeElement) {
+                const optionHost = getOptionControlHost(activeElement);
+                if (optionHost && lastOverlay.contains(optionHost)) {
+                    const directIndex = allFocusable.indexOf(optionHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableOptionIndex = getTabbableOptionControlIndex(allFocusable, lastOverlay);
+                        if (tabbableOptionIndex >= 0) {
+                            currentIndex = tabbableOptionIndex;
+                        }
+                    }
+                }
+            }
             ev.preventDefault();
             // Helper to focus an element, handling shadow DOM properly
             const focusElement = (element) => {
@@ -470,24 +628,43 @@ const connectListeners = (doc) => {
                 }
                 helpers.focusVisibleElement(element);
             };
+            let nextIndex;
             if (ev.shiftKey) {
                 // Shift+Tab: previous element, wrap to last if at first
                 if (currentIndex <= 0) {
-                    focusLastDescendant(lastOverlay);
+                    nextIndex = allFocusable.length - 1;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex - 1]);
+                    nextIndex = currentIndex - 1;
                 }
             }
             else {
                 // Tab: next element, wrap to first if at last
                 if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    focusFirstDescendant(lastOverlay);
+                    nextIndex = 0;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex + 1]);
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableOptionIndex = isSheetModal ? getTabbableOptionControlIndex(allFocusable, lastOverlay) : -1;
+            /**
+             * The trap list only includes one tabbable option host
+             * (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused option; use it
+             * whenever Tab would focus that slot (wrap from Cancel,
+             * Shift+Tab from handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (isSheetModal && tabbableOptionIndex >= 0 && nextIndex === tabbableOptionIndex) {
+                const saved = overlayTrap.trapLastSheetOptionControl;
+                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
+                    focusTarget = saved;
                 }
             }
+            focusElement(focusTarget);
         }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {

package/dist/collection/collection-manifest.json

@@ -33,7 +33,6 @@
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
     "components/gallery/gallery.js",
-    "components/gallery-item/gallery-item.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",

package/dist/collection/components/gallery/gallery.css

@@ -68,9 +68,33 @@
   gap: var(--internal-gallery-gap, 16px);
 }
 
+:host(.gallery-layout-uniform) ::slotted(*) {
+  aspect-ratio: 1/1;
+}
+
 :host(.gallery-layout-masonry) {
   align-items: start;
   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;
+  object-fit: cover;
+  object-position: center;
 }

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

@@ -17,7 +17,6 @@ const BREAKPOINTS = {
     xxl: 1400,
 };
 const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-const GALLERY_ITEM_SELECTOR = 'ion-gallery-item';
 /**
  * @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.
@@ -31,7 +30,6 @@ export class Gallery {
         this.hasWarnedInvalidColumns = false;
         this.hasWarnedInvalidGap = false;
         this.hasWarnedUnusedOrder = false;
-        this.hasWarnedInvalidItems = 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,
@@ -81,9 +79,8 @@ export class Gallery {
             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 itemGap = parseFloat(styles.getPropertyValue('column-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
             const items = this.getItems();
-            this.layoutMasonry(items, rowHeight, rowGap, itemGap, columns);
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
         };
     }
     onColumnsOrGapChanged() {
@@ -284,16 +281,6 @@ export class Gallery {
         printIonWarning(`[ion-gallery] - "order" has no effect when "layout" is "uniform". Set "layout" to "masonry" for "order" to apply.`, this.el);
         this.hasWarnedUnusedOrder = true;
     }
-    /**
-     * Warn when gallery content is missing required `ion-gallery-item` components.
-     */
-    warnInvalidItems() {
-        if (this.hasWarnedInvalidItems) {
-            return;
-        }
-        printIonWarning('[ion-gallery] - Gallery items must be wrapped in "ion-gallery-item" components. Non-item direct children are ignored unless they contain nested "ion-gallery-item" elements.', this.el);
-        this.hasWarnedInvalidItems = true;
-    }
     /**
      * Resolve the active columns value for the current width. Falls back to
      * the default responsive columns when the provided prop is invalid.
@@ -350,45 +337,12 @@ export class Gallery {
         const gap = this.getGapForWidth(width);
         this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
     }
-    isGalleryItemElement(element) {
-        var _a;
-        return typeof ((_a = element.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function';
-    }
     /**
-     * Return all gallery items that can be grid items with inline placement styles.
-     * Direct children that are not `ion-gallery-item` are treated as wrapper
-     * containers and flattened to nested `ion-gallery-item` children. Direct
-     * children without nested `ion-gallery-item` components are ignored.
+     * Return all directly slotted children of the gallery that can be grid items
+     * with inline placement styles (HTML elements and SVG elements).
      */
     getItems() {
-        const directChildren = Array.from(this.el.children).filter((child) => this.isGalleryItemElement(child));
-        const flattenedItems = [];
-        // Expand an <ion-gallery-item> component into the actual gallery items
-        // that should be used for grid placement.
-        const pushWrappedItems = (galleryItemEl) => {
-            const galleryItems = Array.from(galleryItemEl.children).filter((child) => this.isGalleryItemElement(child));
-            flattenedItems.push(...galleryItems);
-        };
-        directChildren.forEach((directChildEl) => {
-            // Standard path: <ion-gallery-item> is a direct child of <ion-gallery>.
-            if (directChildEl.matches(GALLERY_ITEM_SELECTOR)) {
-                pushWrappedItems(directChildEl);
-                return;
-            }
-            // Compatibility path: a non-gallery-item direct child (e.g. wrapper <div>)
-            // may contain nested <ion-gallery-item> components.
-            const nestedGalleryItems = Array.from(directChildEl.querySelectorAll(GALLERY_ITEM_SELECTOR)).filter((child) => this.isGalleryItemElement(child));
-            // Invalid children path: no <ion-gallery-item> components found.
-            if (nestedGalleryItems.length === 0) {
-                this.warnInvalidItems();
-                return;
-            }
-            // Flatten gallery-item containers so nested <ion-gallery-item> children can
-            // become the effective gallery items.
-            directChildEl.style.display = 'contents';
-            nestedGalleryItems.forEach((nestedGalleryItem) => pushWrappedItems(nestedGalleryItem));
-        });
-        return flattenedItems;
+        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.
@@ -445,14 +399,11 @@ export class Gallery {
     /**
      * Apply masonry placement by assigning each item a column and row span.
      */
-    layoutMasonry(items, rowHeight, rowGap, itemGap, columns) {
+    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 = '';
-            if (itemEl.parentElement !== this.el) {
-                itemEl.style.marginBottom = `${itemGap}px`;
-            }
             const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
             if (span === undefined) {
                 this.clearItemStyles(itemEl);
@@ -501,11 +452,11 @@ export class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '0b6ef176032845b3df3b2335be90cb6ce5d791cc', class: {
+        return (h(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: '247df9bb58b6899da7db60cdd475ccff0872673e', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gallery/test/utils.js

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

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

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

package/dist/collection/components/header/header.js

@@ -156,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: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -164,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: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
+        return (h(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
                 [theme]: true,
-            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', 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: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
+        return (h(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', 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: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
+        return (h(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, 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())));
+            } }, 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())));
     }
     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: '3da29d837b5abe22de740ac96c8142422fce537a', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', 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: '142a8230382a05938887e9c0790832218ac37697', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '953f247ea2f40545e01e0346549d9b7aa344b720', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), 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
@@ -640,14 +640,14 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        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) => {
+        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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, 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()));
+            }, 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()));
     }
     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: 'f39e98cd24cbf50f7db4e891dda9499f6def7986', class: createColorClasses(color, {
+        return (h(Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', 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: '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: {
+            }) }, 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: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: '15c7c8549c1788748e1ae31bd227a7f918cb5eca' }))));
+            }, part: "description" }, h("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "shadow"; }