@ionic/core 8.8.7-dev.11779221548.1d38f927 → 8.8.7-dev.11779400352.127ba526

package/dist/esm/ion-app_8.entry.js

@@ -1066,7 +1066,7 @@ const Header = class {
         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: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -1074,7 +1074,7 @@ const Header = class {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
     }
     get el() { return getElement(this); }
 };
@@ -1261,7 +1261,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
+        return h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1301,11 +1301,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, h("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
+            }) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1551,11 +1551,11 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-avatar_3.entry.js

@@ -159,9 +159,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
+        return (h(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
+            } }, h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
     }
 };
 Thumbnail.style = thumbnailCss();

package/dist/esm/ion-col_3.entry.js

@@ -126,10 +126,10 @@ const Grid = class {
     }
     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' })));
     }
 };
 Grid.style = gridCss();
@@ -142,9 +142,9 @@ const Row = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
+        return (h(Host, { key: '3a3c40062d2d0487c61dedbb172215b87bb425b1', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
+            } }, h("slot", { key: '164f457f6f7853ed8f7279d20bc6ede6cf9d3e5c' })));
     }
 };
 Row.style = rowCss();

package/dist/esm/ion-datetime_3.entry.js

@@ -2309,11 +2309,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '681ad6d20efa16f1d6c6f9a7d03caec2b17ff36e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, h("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), h("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, h("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), h("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2671,9 +2671,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5751788e3b7ecd2fe269c096db883b0681646270', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: 'aed1c1a702e03765d704f6f563fe26df58e68bbf', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '105286ef7ba6eac0796f5af7d6f1daef7107444a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-gallery-item.entry.js

@@ -0,0 +1,70 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { r as registerInstance, f as printIonWarning, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
+import { c as getIonTheme } from './ionic-global-CAZb-5i-.js';
+
+const galleryItemCss = () => `:host{display:contents}:host(.in-gallery-layout-uniform) ::slotted(*){aspect-ratio:1/1}:host(.in-gallery-layout-masonry){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}`;
+
+const GalleryItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+    }
+    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;
+    }
+    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: 'dbd9b9e005aa151981296e6487532e221f3f24e3', class: {
+                [theme]: true,
+                'in-gallery-layout-uniform': galleryLayout === 'uniform',
+                'in-gallery-layout-masonry': galleryLayout === 'masonry',
+            } }, h("slot", { key: '98af83e345389763cf23d5e705f1c8773836418f', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return getElement(this); }
+};
+GalleryItem.style = galleryItemCss();
+
+export { GalleryItem as ion_gallery_item };

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

@@ -39,7 +39,7 @@ const DEFAULT_COLUMNS = {
 };
 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}`;
+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-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}`;
 
 // TODO(FW-7285): Replace with global breakpoints
 const BREAKPOINTS = {
@@ -51,6 +51,7 @@ const BREAKPOINTS = {
     xxl: 1400,
 };
 const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const GALLERY_ITEM_SELECTOR = 'ion-gallery-item';
 const Gallery = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -59,6 +60,7 @@ const Gallery = class {
         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,
@@ -108,8 +110,9 @@ const Gallery = class {
             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, columns);
+            this.layoutMasonry(items, rowHeight, rowGap, itemGap, columns);
         };
     }
     onColumnsOrGapChanged() {
@@ -310,6 +313,16 @@ const Gallery = class {
         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.
@@ -366,12 +379,45 @@ const Gallery = class {
         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 directly slotted children of the gallery that can be grid items
-     * with inline placement styles (HTML elements and SVG elements).
+     * 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.
      */
     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'; });
+        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;
     }
     /**
      * Clear the item styles for the given item element.
@@ -428,11 +474,14 @@ const Gallery = class {
     /**
      * Apply masonry placement by assigning each item a column and row span.
      */
-    layoutMasonry(items, rowHeight, rowGap, columns) {
+    layoutMasonry(items, rowHeight, rowGap, itemGap, 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);
@@ -481,11 +530,11 @@ const Gallery = class {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+        return (h(Host, { key: '0b6ef176032845b3df3b2335be90cb6ce5d791cc', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: '247df9bb58b6899da7db60cdd475ccff0872673e', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -82,9 +82,9 @@ const Img = class {
         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) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -269,7 +269,7 @@ const InfiniteScroll = class {
     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,
@@ -313,11 +313,11 @@ const InfiniteScrollContent = class {
     }
     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())));
     }
 };
 InfiniteScrollContent.style = {

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

@@ -690,7 +690,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 (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,
@@ -698,10 +698,10 @@ const InputOTP = class {
                 [`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 formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -99,16 +99,16 @@ const InputPasswordToggle = class {
         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 }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -620,7 +620,7 @@ const Input = class {
          * 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,
@@ -633,7 +633,7 @@ const Input = class {
                 '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
@@ -643,14 +643,14 @@ const Input = class {
          * <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()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-item-option_3.entry.js

@@ -68,14 +68,14 @@ const ItemOption = class {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'bfade0042108ff525077dfbdfd45169ccfd6b920', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8f1bad23fd3ccbb9d54d57765e6731cd2ee07306', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '38466b511f4a20a3728f37dbf6779b852eba531a' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'bb8f1b332afa2f575bcc69b340bd8f1faa5ca925', class: "button-inner", part: "inner" }, h("slot", { key: '41d627511e1615283956712e1b9519bae92460f6', name: "top" }), h("div", { key: 'bb949a43a586a8996933ee7528e5491beb647aa5', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c0d6a73ef49082bfbdf0f542f7465d044ccb6521', name: "start" }), h("slot", { key: '79c6103e680983b2c1a17f1f11dbc41224cd4016', name: "icon-only" }), h("slot", { key: '6c7f17723544d3f6e8b9689b84ddf6196f1897a5' }), h("slot", { key: 'e15d0e02fde71bad8ff7bab0eded7d49508a926e', name: "end" })), h("slot", { key: 'c509d54d44ce33f5a34597b9d0ec29960bbcff62', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '412d4dc645c941d0b4356cf982be3d5bc2686f13' }))));
+            }) }, h(TagType, Object.assign({ key: '2baf904e356a87ed463ee5f517e0e95f90b2ef30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '49b627f72dffd1b150ccd808b1b1f63bbe78e2de', class: "button-inner", part: "inner" }, h("slot", { key: 'cdb52f76f1d7e5df411215f17eb76ad25e36241a', name: "top" }), h("div", { key: '864204667c6e3ba6f989b24e96c131b67e55d408', class: "horizontal-wrapper", part: "container" }, h("slot", { key: '474f4aab708842bb7ef74cb6f1fbe601ceff82cf', name: "start" }), h("slot", { key: '2bd726c5ba3ee079a623f1f6229d1ac2afd3e291', name: "icon-only" }), h("slot", { key: '2d1a673c447ebf82c92f944ec9e83a5b38698307' }), h("slot", { key: '8d0f9337cd84c725190cffd25d74044075e85ab0', name: "end" })), h("slot", { key: 'a674039b26d9cbb886e88ea721bbc210484aba9f', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '3e45bf18b7992943c47ece47e9358f4da0b8e865' }))));
     }
     get el() { return getElement(this); }
 };
@@ -110,7 +110,7 @@ const ItemOptions = class {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
+        return (h(Host, { key: 'ed05ceebf2cda943ac9efea2f91b71f7e8fc55e8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,
@@ -904,7 +904,7 @@ const ItemSliding = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'e6890a1b14faaf9121a07912b1c2f46e06148202', class: {
+        return (h(Host, { key: '47de8c8a9721f9223b42d6722a9ad32f378818aa', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/esm/ion-item_8.entry.js

@@ -308,11 +308,11 @@ const ItemDivider = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'ede65c17ec8e42e4096f8753116923d6b8d2cc14', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'dc73f348b5376faa40ba4bc6bba3d5c9e5ec5ab2', class: createColorClasses(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '4e16384a4481326490dab1ad31218c19eb9108db', name: "start" }), h("div", { key: '0bddbea071781e3372b5c7147c2fdd3ba0e29ffe', class: "item-divider-inner", part: "inner" }, h("div", { key: 'dfa603352f7cc58aaa717a32507b1dbbd7b79757', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '4b1b67cfe72266645943f88ede9f8c61a344967d' })), h("slot", { key: '6ddd72a410c449e281f5344d02324e7461ba29e8', name: "end" }))));
+            }) }, h("slot", { key: '0f535b2cf91f2ec042aa59a89498cfa0e4d541a0', name: "start" }), h("div", { key: '867c8c1a1bd273a5f5018f77785f11d58152e8b9', class: "item-divider-inner", part: "inner" }, h("div", { key: 'c32b2a5658d27cf5d8cd8ffbfa476c02755e1afd', class: "item-divider-wrapper", part: "container" }, h("slot", { key: 'f8b0fea29a910cd2e36301586532be3a8348c31e' })), h("slot", { key: '418750f630c851cf04b6a278c1666c6cf33c113c', name: "end" }))));
     }
     get el() { return getElement(this); }
 };
@@ -334,7 +334,7 @@ const ItemGroup = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '66ad8ce335cd97703e884538bdf6ea1927a30889', role: "group", class: {
+        return (h(Host, { key: '017c8f7cd0258e1864423337ddd1b1cb522f64ed', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,
@@ -408,13 +408,13 @@ const Label = class {
     render() {
         const position = this.position;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b1f261db441bcb0a325a5b3e21da17764a56f17c', class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
+            }) }, h("slot", { key: '490444c8c0d4cf72eae3f8abfb7ed7ecc30bb213' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -478,7 +478,7 @@ const List = class {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: 'f17f7af20c567ea0098b362ea04d051b44aa151a', role: "list", class: {
+        return (h(Host, { key: '9be30ff6e75e020c0db7054800cb874efef26bd8', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,
@@ -509,10 +509,10 @@ const ListHeader = class {
     render() {
         const { lines } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '90c594b0290949b159f35bd36c86c3231a1b8e44', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7a1632a069317285210f4aeae50a6f2ef6955c56', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '9d1bde129787263edb79bc921cdf0168a2935a27', class: "list-header-inner", part: "inner" }, h("slot", { key: 'fe157b5ff88355adfb09209ee92fd03c82e067ff' }))));
+            }) }, h("div", { key: 'a9a9463f209023da222f38a78126d5aaeb2f03b9', class: "list-header-inner", part: "inner" }, h("slot", { key: 'e3c6ec1b588392d347844d59d338abc339e80634' }))));
     }
 };
 ListHeader.style = {
@@ -533,9 +533,9 @@ const Note = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '34a74796fc2e41549100c6611a5900d60c8d688d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '376ae1c66c19d1bdd74a2371c0639ed9e49648b5', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'ea4c2e3b5666d10ca312e175db200134d8a30382' })));
+            }) }, h("slot", { key: 'f8168cd88bb21c5e5a2b03c29539729fb38a19fd' })));
     }
 };
 Note.style = {
@@ -571,11 +571,11 @@ const SkeletonText = class {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'aa94213767105077047a369d4e4861027af96060', class: {
+        return (h(Host, { key: '370451ee8963b776079f5df365f7bbd70a53b270', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, h("span", { key: '2b861b4ec86cbd61927ab7b81b13517c99dc94c7' }, "\u00A0")));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-loading.entry.js

@@ -278,9 +278,9 @@ const Loading = class {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'b1e84a0d078fac04c0736a19d067d8d49e339323', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '2ffae36b20a7d7f3a752a062d90062583e31d053', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '19884fd6f8bf6f704bff388ecfa245d1cd98156c', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'ecd47d503a9805a5c18f1b0d48989e54b4cb8f78', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '231821576b812ffaa90ed9ced4437e456908ad53', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'e18d21751a73f408bd058aa4270f245285cd57fa', class: "loading-spinner" }, h("ion-spinner", { key: '478761b8a000191951e9902138483b389e1b76c4', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '968be6c72872ce5bc8706fa37f242dcdc38efb33', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'a6d8cac2c34a0905ec67a2c64be7ec12cc84f168', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cd011d86f20869096a8546f098fb5edad44033a1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '70298be2139d6004e0f8fc5a85c5d05f1efdc347', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '32aef90695d91e0a82696abbce96ba29cb1a2608', class: "loading-spinner" }, h("ion-spinner", { key: '7ae69c27be273cf3e83230dae043168df27ac27e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'f13a01b31516c3fe85dd3a623962290c03e7412f', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {