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

package/hydrate/index.js

@@ -13337,7 +13337,7 @@ const isRTL$1 = (hostEl) => {
     return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
 };
 
-const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}:host(.content-header-hide-scroll-partner:not(.content-footer-hide-scroll-partner)) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1)}:host(.content-header-hide-scroll-partner:not(.content-footer-hide-scroll-partner).content-header-hide-scroll-hidden) .inner-scroll{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-partner)) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1)}:host(.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-partner).content-footer-hide-scroll-hidden) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-hidden):not(.content-footer-hide-scroll-hidden)) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;-webkit-transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1)}:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner.content-header-hide-scroll-hidden:not(.content-footer-hide-scroll-hidden)) .inner-scroll{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner:not(.content-header-hide-scroll-hidden).content-footer-hide-scroll-hidden) .inner-scroll{-webkit-transform:translateY(0);transform:translateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-header-hide-scroll-partner.content-footer-hide-scroll-partner.content-header-hide-scroll-hidden.content-footer-hide-scroll-hidden) .inner-scroll{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));-webkit-backface-visibility:hidden;backface-visibility:hidden;height:calc(100% + var(--header-hide-slide-y, 0px) + var(--footer-hide-slide-y, 0px));-webkit-transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1)}`;
+const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}`;
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -18587,171 +18587,6 @@ const createKeyboardController = async (keyboardChangeCallback) => {
     return { init, destroy, isKeyboardVisible };
 };
 
-/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
-const COLLAPSE_HIDE_THRESHOLD_PX = 24;
-/**
- * Cumulative upward delta before showing again after hide. Small bias
- * (instead of "any upward delta") guards against inertial-scroll
- * oscillation flicking the region back open during a downward gesture.
- */
-const COLLAPSE_SHOW_THRESHOLD_PX = 5;
-const WHEEL_SCROLL_SUPPRESS_MS = 80;
-const getContentHostFromScrollEl = (scrollEl) => {
-    const root = scrollEl.getRootNode();
-    if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
-        return root.host;
-    }
-    // Light-DOM fallback: the scroll element may live inside a non-shadow
-    // ion-content (e.g. custom scroll host). Walk up to the nearest ion-content.
-    return scrollEl.closest('ion-content');
-};
-const applySlideDistance = (regionEl, contentHost, slideCssVar, heightPx) => {
-    const value = `${Math.max(0, Math.ceil(heightPx))}px`;
-    regionEl.style.setProperty(slideCssVar, value);
-    contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.setProperty(slideCssVar, value);
-};
-const clearSlideDistance = (regionEl, contentHost, slideCssVar) => {
-    regionEl.style.removeProperty(slideCssVar);
-    contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.removeProperty(slideCssVar);
-};
-/**
- * Scroll/wheel-driven hide/show for `collapse="hide"` on `ion-header` or `ion-footer`.
- * Hide after {@link COLLAPSE_HIDE_THRESHOLD_PX}px cumulative downward delta; show after
- * {@link COLLAPSE_SHOW_THRESHOLD_PX}px cumulative upward delta. Each direction drains
- * (not resets) the opposing accumulator so inertial-scroll jitter doesn't stall either
- * transition. Motion is defined in component SCSS and `content.scss`; this toggles
- * classes and syncs the slide distance CSS var.
- */
-const createCollapseHideInteraction = ({ regionEl, scrollEl, slideCssVar, contentPartnerClass, contentHiddenClass, regionHiddenClass, }) => {
-    const contentHost = getContentHostFromScrollEl(scrollEl);
-    if (contentHost !== null) {
-        contentHost.classList.add(contentPartnerClass);
-    }
-    let resizeObserver;
-    let destroyed = false;
-    const syncSlideDistance = () => {
-        readTask(() => {
-            if (destroyed) {
-                return;
-            }
-            const heightPx = regionEl.offsetHeight;
-            writeTask(() => {
-                if (destroyed) {
-                    return;
-                }
-                applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
-            });
-        });
-    };
-    if (typeof ResizeObserver !== 'undefined') {
-        resizeObserver = new ResizeObserver(() => {
-            syncSlideDistance();
-        });
-        resizeObserver.observe(regionEl);
-    }
-    syncSlideDistance();
-    requestAnimationFrame(() => {
-        if (!destroyed) {
-            syncSlideDistance();
-        }
-    });
-    let hidden = false;
-    let accDown = 0;
-    let accUp = 0;
-    let lastScrollTop = scrollEl.scrollTop;
-    let lastWheelTime = 0;
-    const setHidden = (next) => {
-        if (hidden === next || destroyed) {
-            return;
-        }
-        hidden = next;
-        // When transitioning to hidden, re-measure synchronously in case the
-        // initial layout reported offsetHeight === 0 (e.g. mid page transition).
-        // Without this the slide animates by 0px and only opacity fades.
-        if (hidden) {
-            const heightPx = regionEl.offsetHeight;
-            if (heightPx > 0) {
-                applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
-            }
-        }
-        writeTask(() => {
-            if (destroyed) {
-                return;
-            }
-            regionEl.classList.toggle(regionHiddenClass, hidden);
-            contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.toggle(contentHiddenClass, hidden);
-            if (hidden) {
-                // `inert` removes the subtree from the tab order and AT, AND moves
-                // focus out automatically in supporting browsers. `aria-hidden` is
-                // kept as a fallback for older engines without `inert` support.
-                regionEl.setAttribute('inert', '');
-                regionEl.setAttribute('aria-hidden', 'true');
-            }
-            else {
-                regionEl.removeAttribute('inert');
-                regionEl.removeAttribute('aria-hidden');
-            }
-        });
-    };
-    // Accumulate cumulative movement in each direction. The OPPOSITE accumulator
-    // is drained (not reset) by each event, so brief inertial jitter does not
-    // wipe a sustained gesture's accumulation. Crossing a threshold resets both.
-    const processDelta = (delta) => {
-        if (delta > 0) {
-            accUp = Math.max(0, accUp - delta);
-            accDown += delta;
-            if (accDown >= COLLAPSE_HIDE_THRESHOLD_PX) {
-                setHidden(true);
-                accDown = 0;
-                accUp = 0;
-            }
-        }
-        else if (delta < 0) {
-            const mag = -delta;
-            accDown = Math.max(0, accDown - mag);
-            accUp += mag;
-            if (accUp >= COLLAPSE_SHOW_THRESHOLD_PX) {
-                setHidden(false);
-                accUp = 0;
-                accDown = 0;
-            }
-        }
-    };
-    const onWheel = (ev) => {
-        if (destroyed) {
-            return;
-        }
-        lastWheelTime = performance.now();
-        processDelta(ev.deltaY);
-    };
-    const onScroll = () => {
-        if (destroyed) {
-            return;
-        }
-        const st = scrollEl.scrollTop;
-        if (performance.now() - lastWheelTime < WHEEL_SCROLL_SUPPRESS_MS) {
-            lastScrollTop = st;
-            return;
-        }
-        const delta = st - lastScrollTop;
-        lastScrollTop = st;
-        processDelta(delta);
-    };
-    scrollEl.addEventListener('wheel', onWheel, { passive: true });
-    scrollEl.addEventListener('scroll', onScroll, { passive: true });
-    return () => {
-        destroyed = true;
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        scrollEl.removeEventListener('wheel', onWheel);
-        scrollEl.removeEventListener('scroll', onScroll);
-        regionEl.classList.remove(regionHiddenClass);
-        regionEl.removeAttribute('inert');
-        regionEl.removeAttribute('aria-hidden');
-        contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.remove(contentPartnerClass, contentHiddenClass);
-        clearSlideDistance(regionEl, contentHost, slideCssVar);
-    };
-};
-
 const handleFooterFade = (scrollEl, baseEl) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -18780,20 +18615,12 @@ const handleFooterFade = (scrollEl, baseEl) => {
         });
     });
 };
-const createFooterHideInteraction = (footerEl, scrollEl) => createCollapseHideInteraction({
-    regionEl: footerEl,
-    scrollEl,
-    slideCssVar: '--footer-hide-slide-y',
-    contentPartnerClass: 'content-footer-hide-scroll-partner',
-    contentHiddenClass: 'content-footer-hide-scroll-hidden',
-    regionHiddenClass: 'footer-collapse-hide-hidden',
-});
 
-const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
-const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
+const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
 
-const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}ion-footer.footer-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1}ion-footer.footer-collapse-hide.footer-collapse-hide-hidden{-webkit-transform:translateY(var(--footer-hide-slide-y, 0px));transform:translateY(var(--footer-hide-slide-y, 0px));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -18802,8 +18629,6 @@ const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-o
 class Footer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.didLoad = false;
-        this.setupToken = 0;
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.keyboardVisible = false;
@@ -18818,45 +18643,25 @@ class Footer {
         this.translucent = false;
         this.checkCollapsibleFooter = () => {
             const theme = getIonTheme(this);
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
-            const hasHide = collapse === 'hide';
-            const runIosFade = theme === 'ios' && hasFade;
-            if (!runIosFade && !hasHide) {
-                this.destroyCollapsibleFooter();
-                return;
-            }
-            // Skip teardown/rebuild when the collapse mode and theme have not changed
-            // since the last setup — avoids thrashing listeners and resetting scroll
-            // accumulators on unrelated re-renders (e.g. keyboardVisible state flips).
-            const activeMode = hasHide ? 'hide' : 'fade';
-            if (this.appliedCollapse === activeMode && this.appliedTheme === theme) {
+            if (theme !== 'ios') {
                 return;
             }
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
-            const appRootSelector = config.get('appRootSelector', 'ion-app');
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            this.appliedCollapse = activeMode;
-            this.appliedTheme = theme;
-            if (runIosFade) {
+            if (hasFade) {
+                const appRootSelector = config.get('appRootSelector', 'ion-app');
+                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+                const contentEl = pageEl ? findIonContent(pageEl) : null;
+                if (!contentEl) {
+                    printIonContentErrorMsg(this.el);
+                    return;
+                }
                 this.setupFadeFooter(contentEl);
             }
-            else if (hasHide) {
-                void this.setupHideFooter(contentEl);
-            }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const token = ++this.setupToken;
-            const scrollEl = await getScrollElement(contentEl);
-            if (token !== this.setupToken) {
-                return;
-            }
-            this.scrollEl = scrollEl;
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -18868,18 +18673,12 @@ class Footer {
         };
     }
     componentDidLoad() {
-        this.didLoad = true;
         this.checkCollapsibleFooter();
     }
     componentDidUpdate() {
         this.checkCollapsibleFooter();
     }
     async connectedCallback() {
-        // On re-attach (didLoad already true but disconnectedCallback ran since),
-        // componentDidLoad will not fire again — re-run setup here.
-        if (this.didLoad) {
-            this.checkCollapsibleFooter();
-        }
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
             /**
              * If the keyboard is hiding, then we need to wait
@@ -18907,7 +18706,6 @@ class Footer {
         }
     }
     disconnectedCallback() {
-        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -18917,36 +18715,18 @@ class Footer {
             this.keyboardCtrl = null;
         }
     }
-    async setupHideFooter(contentEl) {
-        const token = ++this.setupToken;
-        const scrollEl = await getScrollElement(contentEl);
-        // A newer checkCollapsibleFooter ran while we were awaiting — abandon.
-        if (token !== this.setupToken) {
-            return;
-        }
-        this.scrollEl = scrollEl;
-        this.footerHideCleanup = createFooterHideInteraction(this.el, scrollEl);
-    }
     destroyCollapsibleFooter() {
-        // Invalidate any in-flight setupHideFooter/setupFadeFooter awaits.
-        this.setupToken++;
-        if (this.footerHideCleanup) {
-            this.footerHideCleanup();
-            this.footerHideCleanup = undefined;
-        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
-        this.appliedCollapse = undefined;
-        this.appliedTheme = undefined;
     }
     render() {
         const { translucent, collapse } = this;
         const theme = getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (hAsync(Host, { key: '5df79a31f36febfad49c5858727e93c7ba5734f8', role: "contentinfo", class: {
+        return (hAsync(Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -18954,7 +18734,7 @@ class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && hAsync("div", { key: '9175ae4f6576d82dff2a00a36e91f4b633d8c9ad', class: "footer-background" }), hAsync("slot", { key: 'd6d618cdae4726822d8e82edb782c5c86fc7b77b' })));
+            } }, theme === 'ios' && translucent && hAsync("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), hAsync("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18984,6 +18764,9 @@ class Footer {
 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;
+// Matches a `var(--name)` reference with an optional fallback, e.g.
+// `var(--my-gap)` or `var(--my-gap, 16px)`.
+const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\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>%`).
@@ -18998,6 +18781,17 @@ function isValidLengthPercentage(value) {
     }
     return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
 }
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+function isCssVariable(value) {
+    return VAR_FUNCTION_PATTERN.test(value.trim());
+}
 
 const DEFAULT_COLUMNS = {
     xs: 2,
@@ -19009,7 +18803,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:1px}`;
 
 // TODO(FW-7285): Replace with global breakpoints
 const BREAKPOINTS = {
@@ -19021,11 +18815,16 @@ const BREAKPOINTS = {
     xxl: 1400,
 };
 const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * The tag of the component used to wrap each gallery item.
+ */
+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.
  *
- * @slot - Content is placed in a responsive gallery layout.
+ * @slot - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
  */
 class Gallery {
     constructor(hostRef) {
@@ -19035,6 +18834,7 @@ 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,
@@ -19051,7 +18851,8 @@ class Gallery {
         /**
          * 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
+         * CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel
+         * values). Can also be set as a breakpoint map
          * (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept
          * space-separated values or CSS keyword values like `inherit`, `auto`, etc.
          */
@@ -19063,6 +18864,9 @@ class Gallery {
          * are added or removed from the gallery.
          */
         this.onSlotChange = () => {
+            // Re-observe so newly added items are watched for size changes (e.g. a
+            // freshly appended item finishing hydration), then recompute placement.
+            this.observeResizes();
             this.scheduleMasonryResize();
         };
         /**
@@ -19106,7 +18910,7 @@ class Gallery {
             this.updateResponsiveStyles();
             this.scheduleMasonryResize();
         });
-        this.resizeObserver.observe(this.el);
+        this.observeResizes();
         this.scheduleMasonryResize();
         this.warnUnusedOrder();
     }
@@ -19119,6 +18923,22 @@ class Gallery {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = undefined;
     }
+    /**
+     * Observe the host and each item for size changes. Items are observed in
+     * addition to the host so masonry placement is recomputed when an item's
+     * rendered height changes — most importantly when a dynamically added
+     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
+     * `load` event and does not change the host's measured size while collapsed.
+     */
+    observeResizes() {
+        const observer = this.resizeObserver;
+        if (observer === undefined) {
+            return;
+        }
+        observer.disconnect();
+        observer.observe(this.el);
+        this.getItems().forEach((item) => observer.observe(item));
+    }
     /**
      * Listen for the load event on child elements.
      * When the layout is `masonry`, this listener is used to schedule a resize
@@ -19172,9 +18992,10 @@ class Gallery {
         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.
+     * Normalize a single gap value (`gap` as a number, a string such as a CSS
+     * length-percentage or `var()` reference, or one entry from a `gap`
+     * breakpoint map) to a CSS length string. Returns `undefined` when the
+     * input cannot be interpreted as a valid CSS length or `var()` reference.
      */
     sanitizeGap(gap) {
         if (gap === undefined) {
@@ -19191,6 +19012,9 @@ class Gallery {
         if (typeof normalizedGap !== 'string') {
             return undefined;
         }
+        if (isCssVariable(normalizedGap)) {
+            return normalizedGap;
+        }
         const isValidCssLength = isValidLengthPercentage(normalizedGap);
         return isValidCssLength ? normalizedGap : undefined;
     }
@@ -19271,7 +19095,7 @@ class Gallery {
         if (this.hasWarnedInvalidGap) {
             return;
         }
-        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);
+        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, CSS variable (e.g. var(--app-gap)), or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
         this.hasWarnedInvalidGap = true;
     }
     /**
@@ -19343,11 +19167,43 @@ class Gallery {
         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).
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell. A direct child that is not an `ion-gallery-item` is
+     * treated as a pass-through wrapper (e.g. a layout `<div>`): its box is
+     * collapsed with `display: contents` so the nested items participate in the
+     * gallery grid. Children that contain no `ion-gallery-item` 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 items = [];
+        Array.from(this.el.children).forEach((child) => {
+            // Standard path: <ion-gallery-item> is a direct child of <ion-gallery>.
+            if (child.matches(GALLERY_ITEM_SELECTOR)) {
+                items.push(child);
+                return;
+            }
+            // Compatibility path: a wrapper element may contain <ion-gallery-item>
+            // components. Collapse the wrapper's box so the items participate in the
+            // gallery grid.
+            const nestedItems = Array.from(child.querySelectorAll(GALLERY_ITEM_SELECTOR));
+            if (nestedItems.length === 0) {
+                this.warnInvalidItems();
+                return;
+            }
+            child.style.display = 'contents';
+            items.push(...nestedItems);
+        });
+        return items;
+    }
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component.
+     */
+    warnInvalidItems() {
+        if (this.hasWarnedInvalidItems) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - Gallery items must be wrapped in "ion-gallery-item" components. Direct children that are not "ion-gallery-item" (and do not contain one) are ignored.`, this.el);
+        this.hasWarnedInvalidItems = true;
     }
     /**
      * Clear the item styles for the given item element.
@@ -19365,12 +19221,19 @@ class Gallery {
     clearMasonryStyles() {
         this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
     }
+    /**
+     * Whether the item contains any images that have not finished loading.
+     * Used to defer masonry placement until the rendered height is final.
+     */
+    hasUnloadedImages(itemEl) {
+        return Array.from(itemEl.querySelectorAll('img')).some((img) => !img.complete || img.naturalHeight === 0);
+    }
     /**
      * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined for images that are not fully loaded yet.
+     * Returns undefined when the item has images that are not fully loaded yet.
      */
     calculateRowSpan(itemEl, rowHeight, rowGap) {
-        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+        if (this.hasUnloadedImages(itemEl)) {
             return undefined;
         }
         const height = itemEl.getBoundingClientRect().height;
@@ -19457,11 +19320,11 @@ class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+        return (hAsync(Host, { key: '2063823917f4ab8430aee0e17ae0f3a2b53341d1', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, hAsync("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
+            } }, hAsync("slot", { key: '1378f489afb6b05181d2513f664c4efe24ad3598', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19494,6 +19357,93 @@ class Gallery {
     }; }
 }
 
+const galleryItemCss = () => `:host{display:block}::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}: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)}`;
+
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
+ * @slot - The content placed inside of the gallery item. This is typically an
+ * `img`, but can be any element (e.g. a `figure` wrapping an image and caption).
+ */
+class GalleryItem {
+    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;
+    }
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    warnInvalidParent() {
+        if (this.hasWarnedInvalidParent || this.galleryEl !== undefined) {
+            return;
+        }
+        printIonWarning('[ion-gallery-item] - This component should be used as a child of an "ion-gallery" component.', this.el);
+        this.hasWarnedInvalidParent = true;
+    }
+    /**
+     * Watch the parent gallery's class list so the item can react to layout
+     * changes (the gallery reflects its layout as a `gallery-layout-*` class).
+     */
+    watchGalleryLayoutClasses() {
+        var _a;
+        const galleryEl = this.galleryEl;
+        if (galleryEl === undefined) {
+            return;
+        }
+        (_a = this.galleryClassObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.galleryClassObserver = new MutationObserver(() => this.syncLayoutClasses());
+        this.galleryClassObserver.observe(galleryEl, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    syncLayoutClasses() {
+        var _a;
+        const layout = (_a = this.galleryEl) === null || _a === void 0 ? void 0 : _a.layout;
+        this.galleryLayout = layout === 'masonry' || layout === 'uniform' ? layout : undefined;
+    }
+    render() {
+        const { galleryLayout } = this;
+        const theme = getIonTheme(this);
+        return (hAsync(Host, { key: 'b3de6bf2df4af01ed274188a96d9e8cd82c9f5cd', class: {
+                [theme]: true,
+                'in-gallery-layout-uniform': galleryLayout === 'uniform',
+                'in-gallery-layout-masonry': galleryLayout === 'masonry',
+            } }, hAsync("slot", { key: '5bef4549c5101178fec9b590cb6b553ddc5376c4', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return galleryItemCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ion-gallery-item",
+        "$members$": {
+            "galleryLayout": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const gridCss = () => `:host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}`;
 
 /**
@@ -19510,10 +19460,10 @@ class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
+        return (hAsync(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
+            } }, hAsync("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
     }
     static get style() { return gridCss(); }
     static get cmpMeta() { return {
@@ -19704,14 +19654,6 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
         titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
     });
 };
-const createHeaderHideInteraction = (headerEl, scrollEl) => createCollapseHideInteraction({
-    regionEl: headerEl,
-    scrollEl,
-    slideCssVar: '--header-hide-slide-y',
-    contentPartnerClass: 'content-header-hide-scroll-partner',
-    contentHiddenClass: 'content-header-hide-scroll-hidden',
-    regionHiddenClass: 'header-collapse-hide-hidden',
-});
 const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -19768,11 +19710,11 @@ const getRoleType = (isInsideMenu, isCondensed, theme) => {
     return ROLE_BANNER;
 };
 
-const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}`;
+const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}`;
 
-const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}`;
+const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}`;
 
-const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header.header-collapse-hide{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);transition:transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0, 0, 0.2, 1);opacity:1;z-index:10}ion-header.header-collapse-hide.header-collapse-hide-hidden{-webkit-transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));transform:translateY(calc(-1 * var(--header-hide-slide-y, 0px)));pointer-events:none;-webkit-transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);transition:transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 200ms cubic-bezier(0.4, 0, 1, 1);opacity:0}ion-header{z-index:10}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
+const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -19782,7 +19724,6 @@ class Header {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.inheritedAttributes = {};
-        this.didLoad = false;
         /**
          * If `true`, the header will have a line at the bottom.
          * TODO(ROU-10855): add support for this prop on ios/md themes
@@ -19813,37 +19754,25 @@ class Header {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     componentDidLoad() {
-        this.didLoad = true;
         this.checkCollapsibleHeader();
     }
     componentDidUpdate() {
         this.checkCollapsibleHeader();
     }
-    connectedCallback() {
-        // On re-attach (didLoad already true but disconnectedCallback ran since),
-        // componentDidLoad will not fire again — re-run setup here.
-        if (this.didLoad) {
-            this.checkCollapsibleHeader();
-        }
-    }
     disconnectedCallback() {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
         const theme = getIonTheme(this);
+        if (theme !== 'ios') {
+            return;
+        }
         const { collapse } = this;
         const hasCondense = collapse === 'condense';
         const hasFade = collapse === 'fade';
-        const hasHide = collapse === 'hide';
-        const runIosCollapse = theme === 'ios' && (hasCondense || hasFade);
-        const runHide = hasHide;
-        if (!runIosCollapse && !runHide) {
-            this.destroyCollapsibleHeader();
-            return;
-        }
         this.destroyCollapsibleHeader();
         const appRootSelector = config.get('appRootSelector', 'ion-app');
-        if (runIosCollapse && hasCondense) {
+        if (hasCondense) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
@@ -19854,7 +19783,7 @@ class Header {
             });
             await this.setupCondenseHeader(contentEl, pageEl);
         }
-        else if (runIosCollapse && hasFade) {
+        else if (hasFade) {
             const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
@@ -19864,29 +19793,12 @@ class Header {
             const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
-        if (runHide) {
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            await this.setupHideHeader(contentEl);
-        }
-    }
-    async setupHideHeader(contentEl) {
-        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-        this.headerHideCleanup = createHeaderHideInteraction(this.el, scrollEl);
     }
     destroyCollapsibleHeader() {
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = undefined;
         }
-        if (this.headerHideCleanup) {
-            this.headerHideCleanup();
-            this.headerHideCleanup = undefined;
-        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
@@ -19953,7 +19865,7 @@ 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 (hAsync(Host, Object.assign({ key: '5cae1ff0bbc5f2035325c128a9394caf7f1459a0', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -19961,7 +19873,7 @@ class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && hAsync("div", { key: '705f120951a3dd429286b66cd0b511fa267b3702', class: "header-background" }), hAsync("slot", { key: '1c7a9d474083cf92abfe88c02d363f8d420716ca' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && hAsync("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), hAsync("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -20312,9 +20224,9 @@ class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+        return (hAsync(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
                 [theme]: true,
-            } }, hAsync("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, hAsync("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 {
@@ -20619,7 +20531,7 @@ class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
+        return (hAsync(Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -20682,11 +20594,11 @@ class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
+        return (hAsync(Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, hAsync("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ionic: ionicInfiniteScrollContentMdCss(),
@@ -21434,7 +21346,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '3da29d837b5abe22de740ac96c8142422fce537a', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -21447,7 +21359,7 @@ class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, hAsync("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, hAsync("label", { key: '142a8230382a05938887e9c0790832218ac37697', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("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
@@ -21457,14 +21369,14 @@ class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && hAsync("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), hAsync("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), hAsync("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 && (hAsync("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && hAsync("div", { key: 'fd09b37c6a798900c5074e7cbe2e790ea050c29d', class: "input-outline" }), hAsync("slot", { key: '3eef4c4748104d8722f3254a04ff88e2b70c560e', name: "start" }), hAsync("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 && (hAsync("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 }, hAsync("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), hAsync("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: 'a259afa47a9914b2e0656364bed40644fa2c87c4', "aria-hidden": "true", icon: inputClearIcon }))), hAsync("slot", { key: 'beec86eb500f6b335149c8734afc7c3945a10219', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '77a25d118934f369e09edbc2ffa6f90e3e760338', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22229,7 +22141,7 @@ 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 (hAsync(Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f39e98cd24cbf50f7db4e891dda9499f6def7986', class: createColorClasses$1(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -22237,10 +22149,10 @@ class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, hAsync("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) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper", part: "container" }, hAsync("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) && hAsync("div", { class: "input-otp-separator", part: "separator" }))))), hAsync("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
+            }) }, hAsync("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) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper", part: "container" }, hAsync("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) && hAsync("div", { class: "input-otp-separator", part: "separator" }))))), hAsync("div", { key: 'c518d83ab0236a3ebbe631582ce6f1c2edfbcd29', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, hAsync("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
+            }, part: "description" }, hAsync("slot", { key: '15c7c8549c1788748e1ae31bd227a7f918cb5eca' }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -22388,16 +22300,16 @@ class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode$1(this);
         const isPasswordVisible = type === 'text';
-        return (hAsync(Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f11e3bf4d3255e003aec504e6dd3ee1e0caaf767', class: createColorClasses$1(color, {
                 [mode]: true,
-            }) }, hAsync("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) => {
+            }) }, hAsync("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 }, hAsync("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: 'c0eb0e4e2f3e9553bfd519ff655064c9f62af406', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22772,11 +22684,11 @@ class ItemDivider {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'ede65c17ec8e42e4096f8753116923d6b8d2cc14', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'dc73f348b5376faa40ba4bc6bba3d5c9e5ec5ab2', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '4e16384a4481326490dab1ad31218c19eb9108db', name: "start" }), hAsync("div", { key: '0bddbea071781e3372b5c7147c2fdd3ba0e29ffe', class: "item-divider-inner", part: "inner" }, hAsync("div", { key: 'dfa603352f7cc58aaa717a32507b1dbbd7b79757', class: "item-divider-wrapper", part: "container" }, hAsync("slot", { key: '4b1b67cfe72266645943f88ede9f8c61a344967d' })), hAsync("slot", { key: '6ddd72a410c449e281f5344d02324e7461ba29e8', name: "end" }))));
+            }) }, hAsync("slot", { key: '0f535b2cf91f2ec042aa59a89498cfa0e4d541a0', name: "start" }), hAsync("div", { key: '867c8c1a1bd273a5f5018f77785f11d58152e8b9', class: "item-divider-inner", part: "inner" }, hAsync("div", { key: 'c32b2a5658d27cf5d8cd8ffbfa476c02755e1afd', class: "item-divider-wrapper", part: "container" }, hAsync("slot", { key: 'f8b0fea29a910cd2e36301586532be3a8348c31e' })), hAsync("slot", { key: '418750f630c851cf04b6a278c1666c6cf33c113c', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -22813,7 +22725,7 @@ class ItemGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '66ad8ce335cd97703e884538bdf6ea1927a30889', role: "group", class: {
+        return (hAsync(Host, { key: '017c8f7cd0258e1864423337ddd1b1cb522f64ed', role: "group", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-group-${theme}`]: true,
@@ -22909,14 +22821,14 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: 'bfade0042108ff525077dfbdfd45169ccfd6b920', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8f1bad23fd3ccbb9d54d57765e6731cd2ee07306', onClick: this.onClick, class: createColorClasses$1(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,
-            }) }, hAsync(TagType, Object.assign({ key: '38466b511f4a20a3728f37dbf6779b852eba531a' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'bb8f1b332afa2f575bcc69b340bd8f1faa5ca925', class: "button-inner", part: "inner" }, hAsync("slot", { key: '41d627511e1615283956712e1b9519bae92460f6', name: "top" }), hAsync("div", { key: 'bb949a43a586a8996933ee7528e5491beb647aa5', class: "horizontal-wrapper", part: "container" }, hAsync("slot", { key: 'c0d6a73ef49082bfbdf0f542f7465d044ccb6521', name: "start" }), hAsync("slot", { key: '79c6103e680983b2c1a17f1f11dbc41224cd4016', name: "icon-only" }), hAsync("slot", { key: '6c7f17723544d3f6e8b9689b84ddf6196f1897a5' }), hAsync("slot", { key: 'e15d0e02fde71bad8ff7bab0eded7d49508a926e', name: "end" })), hAsync("slot", { key: 'c509d54d44ce33f5a34597b9d0ec29960bbcff62', name: "bottom" })), theme === 'md' && hAsync("ion-ripple-effect", { key: '412d4dc645c941d0b4356cf982be3d5bc2686f13' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '2baf904e356a87ed463ee5f517e0e95f90b2ef30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '49b627f72dffd1b150ccd808b1b1f63bbe78e2de', class: "button-inner", part: "inner" }, hAsync("slot", { key: 'cdb52f76f1d7e5df411215f17eb76ad25e36241a', name: "top" }), hAsync("div", { key: '864204667c6e3ba6f989b24e96c131b67e55d408', class: "horizontal-wrapper", part: "container" }, hAsync("slot", { key: '474f4aab708842bb7ef74cb6f1fbe601ceff82cf', name: "start" }), hAsync("slot", { key: '2bd726c5ba3ee079a623f1f6229d1ac2afd3e291', name: "icon-only" }), hAsync("slot", { key: '2d1a673c447ebf82c92f944ec9e83a5b38698307' }), hAsync("slot", { key: '8d0f9337cd84c725190cffd25d74044075e85ab0', name: "end" })), hAsync("slot", { key: 'a674039b26d9cbb886e88ea721bbc210484aba9f', name: "bottom" })), theme === 'md' && hAsync("ion-ripple-effect", { key: '3e45bf18b7992943c47ece47e9358f4da0b8e865' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -22974,7 +22886,7 @@ class ItemOptions {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
+        return (hAsync(Host, { key: 'ed05ceebf2cda943ac9efea2f91b71f7e8fc55e8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,
@@ -23826,7 +23738,7 @@ class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'e6890a1b14faaf9121a07912b1c2f46e06148202', class: {
+        return (hAsync(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,
@@ -23945,13 +23857,13 @@ class Label {
     render() {
         const position = this.position;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b1f261db441bcb0a325a5b3e21da17764a56f17c', class: createColorClasses$1(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',
-            }) }, hAsync("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
+            }) }, hAsync("slot", { key: '490444c8c0d4cf72eae3f8abfb7ed7ecc30bb213' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24031,7 +23943,7 @@ class List {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const { lines, inset } = this;
-        return (hAsync(Host, { key: 'f17f7af20c567ea0098b362ea04d051b44aa151a', role: "list", class: {
+        return (hAsync(Host, { key: '9be30ff6e75e020c0db7054800cb874efef26bd8', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,
@@ -24081,10 +23993,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '90c594b0290949b159f35bd36c86c3231a1b8e44', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7a1632a069317285210f4aeae50a6f2ef6955c56', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '9d1bde129787263edb79bc921cdf0168a2935a27', class: "list-header-inner", part: "inner" }, hAsync("slot", { key: 'fe157b5ff88355adfb09209ee92fd03c82e067ff' }))));
+            }) }, hAsync("div", { key: 'a9a9463f209023da222f38a78126d5aaeb2f03b9', class: "list-header-inner", part: "inner" }, hAsync("slot", { key: 'e3c6ec1b588392d347844d59d338abc339e80634' }))));
     }
     static get style() { return {
         ionic: listHeaderIonicCss(),
@@ -24373,9 +24285,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: 'b1e84a0d078fac04c0736a19d067d8d49e339323', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(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 }) }), hAsync("ion-backdrop", { key: '19884fd6f8bf6f704bff388ecfa245d1cd98156c', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'ecd47d503a9805a5c18f1b0d48989e54b4cb8f78', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '231821576b812ffaa90ed9ced4437e456908ad53', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'e18d21751a73f408bd058aa4270f245285cd57fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '478761b8a000191951e9902138483b389e1b76c4', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("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 }) }), hAsync("ion-backdrop", { key: 'a6d8cac2c34a0905ec67a2c64be7ec12cc84f168', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'cd011d86f20869096a8546f098fb5edad44033a1', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '70298be2139d6004e0f8fc5a85c5d05f1efdc347', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '32aef90695d91e0a82696abbce96ba29cb1a2608', class: "loading-spinner" }, hAsync("ion-spinner", { key: '7ae69c27be273cf3e83230dae043168df27ac27e', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'f13a01b31516c3fe85dd3a623962290c03e7412f', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25436,14 +25348,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'd42a7b48a1464a4d71188e3a31f719c5dc296d77', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '76e15d710fbbbd2e64795224decc3673fd160db0', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [theme]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '3ffcedd178c412771657599f3d5de2cd2a717c00', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '2d8dfdb569c4b433cbacbe2aee8a12954e157a51' })), hAsync("ion-backdrop", { key: 'e1fcbdcf6bd3aa0fa10dcf05a2b012bef196a243', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: 'cc0a0773caff97aefa98015bf3e36631173d2b4f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '0b90d1248bdf3bedafda7913189635c8d010abb6' })), hAsync("ion-backdrop", { key: '4fb7013bc61161e6e336541ed25605219410f749', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25577,7 +25489,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: 'd150818e749a1cbe72dc05011247023f6d442eb8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '341ca3bfac81ce4432eef5d2fd738becd1dfb07e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -25586,7 +25498,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: '88bef93aa6c1a0d5795c4a9ba3edffd99413a758' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '12b2f8bc542239a35adee62d76acccff571a84d7', class: "button-inner" }, hAsync("slot", { key: '5bba549d8e92745aa34372c105cfe80e0ecbc9f5' }, hAsync("ion-icon", { key: '864ff8bf1722b7fe1f17f2a40dfc5b91cb3403f9', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && hAsync("ion-ripple-effect", { key: '59e24ecb22970e43b51739324b11457c6e4bc117', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '6e6229df2fc1f2d18294a5fbf7fe71e7dd47666a' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '0216acbf67d7aa5edc52328f7ded4cb98bc8a237', class: "button-inner" }, hAsync("slot", { key: '5c2cdae42add9a25d3e6323048fcbc6b5fc9b32e' }, hAsync("ion-icon", { key: '5b38c283957cd2f1ad659427dec612fc84fc054f', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && hAsync("ion-ripple-effect", { key: 'adabe4ffa1d66fe36d55294d774db9c4bba1ad76', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -25643,10 +25555,10 @@ class MenuToggle {
     render() {
         const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '973372d778e7902eac28b2a6a5e74165b51d60d6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '9ef631d9ae370a8740e691d281863203bfdddc38', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '760b8ffe93ae490b62f7ad6fc94ecbc8521ead64' })));
+            } }, hAsync("slot", { key: 'f8d9dfc562ed625ae47ec771ef6b2ea04bc463f4' })));
     }
     static get style() { return menuToggleCss(); }
     static get cmpMeta() { return {
@@ -29149,20 +29061,20 @@ class Modal {
         const isHandleCycle = handleBehavior === 'cycle';
         const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '2b38d465b74b03d87fb66d8ac87e1724ab10d0ee', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '6bd3c3a93a771d6b0c22626ea50f5a1c6d16f175', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'de541846da3c39f46db77484fb0d8a2ba95652c6', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: '5fc3e168a74fea2e7e11cc2ce360efbe3f6bbff3', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '7fb63d69b2e0171a20f32545e52ace7a8866e810',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '4a95da95bb355d68fa290275a3199e5bf0968941', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: 'e015746ae59a89fb228e1d5b046f291dc66c117e', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '1b2be6c696e729f750b07958be3f42e1cfd5ad8a',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2e8d755adbe4634ceec666af7dcb5e266d101691', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '6b67921744aa4eb8776247cde85b083d0d02604a', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '431747de1627ad5f626e1963d57a229601cd9c1d', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '3e9d7f8e778bdf4cfd294f1e68af9d0dd2a9ee76', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30122,7 +30034,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '87188d8fb4232d448ef2ad8e3db29c3730b1ff9e' });
+        return hAsync("slot", { key: '3dfe9c2a5f3ea75cb6d82b76b240733105cddfad' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30203,7 +30115,7 @@ class NavLink {
         };
     }
     render() {
-        return hAsync(Host, { key: '38f3d2e7a3ae4e57ac1479436c143e6820d25cd2', onClick: this.onClick });
+        return hAsync(Host, { key: '476bfb5bb6fba4f422ec40315fc3ef466d01f757', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -30237,9 +30149,9 @@ class Note {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '34a74796fc2e41549100c6611a5900d60c8d688d', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '376ae1c66c19d1bdd74a2371c0639ed9e49648b5', class: createColorClasses$1(this.color, {
                 [theme]: true,
-            }) }, hAsync("slot", { key: 'ea4c2e3b5666d10ca312e175db200134d8a30382' })));
+            }) }, hAsync("slot", { key: 'f8168cd88bb21c5e5a2b03c29539729fb38a19fd' })));
     }
     static get style() { return {
         ionic: ionicNoteMdCss(),
@@ -31005,11 +30917,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(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 }), hAsync("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, hAsync("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), hAsync("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, hAsync("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), hAsync("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31987,9 +31899,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (hAsync(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 (hAsync(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 && (hAsync("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '105286ef7ba6eac0796f5af7d6f1daef7107444a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32114,10 +32026,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '54c254f01017aa47aac76c0833f9ef04bf20bdc9', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'fe9553e3157d35f5c28a3f2457715bd598ec1e00', class: createColorClasses$1(color, {
                 [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("div", { key: '36b21f1b7d9a5b05f0211ce8be90f66578641224', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: '154bf9ca37ca1c6e5d34d42c16b04203e83210be' }))));
+            }) }, hAsync("div", { key: '9bc334f020012537144972b5a8a1aed7c35ccec5', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: 'bd076e43c98ad920486230684c7f63e7e0b187f8' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33686,9 +33598,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '43128f8b7e57f08a451af1a237534d0517d86eda', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '3319e6ea7524a30478985c014634403aceedab6f', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'c087932225f8fc872af7451fd847ab2667ae6ffb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '25fb1c8320099d1170f3a61766760c694d84bf0b', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '552f4b70758470fac0d2e2bd114eaf5d9b81a3ac', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: 'f19c1d60b0f4ff86bf308c5837637cd4bbd6814e', class: "popover-content", part: "content" }, hAsync("slot", { key: '00870a41134268d84e239d305bf2daed7b049c34' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '45265b1f8e5e6e822b3c8d4992039975c472b10b', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '8707fb5c5b9523fd786c4e4d02d41dfb386be187', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '17bd682e56939ba10ab4b2ab3c9e916087a7e19a', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '02f1bd119d2ffecd2f2541969111fc6e156db9d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'dec29181eee87f28f731d6a0ba1ef3c81867d527' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33816,7 +33728,7 @@ class ProgressBar {
         const shape = this.getShape();
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: '0f6202e25d884fb85d18578769f6cfa5c704e9d9', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '1cf02806b28a0d7b070e6f3616ea8f4c8ae4990a', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -34009,7 +33921,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const theme = getIonTheme(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '82127b11eac97fa45886179d248c8509ca07655a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'e9591254a3823435617732dcf415ea4bb5fa4d62', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [theme]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -34020,10 +33932,10 @@ class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '352c25ebdeeba01b85dc02b2108de988e9eb14a6', class: "radio-wrapper" }, hAsync("div", { key: '8eca395a22199d24b376c57dd52eeaa91ba51c34', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '798691948e77bdba972f45eb668bb6d38c1920b3', class: "radio-wrapper" }, hAsync("div", { key: '054d373156983bb22b3216b2a0f8d5a6ecd0aa08', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '9c26b977843398be61f1b753251d8fe40d65702a' })), hAsync("div", { key: '336b2d6aeb5e86dc1d994ac1eac52634f5da5b9c', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: 'a77d60be10ece9c80bab6e5c2a24533eede95362' })), hAsync("div", { key: 'e687dc6686b0748a1a3337cd87a01c01315c0f22', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34293,10 +34205,10 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (hAsync(Host, { key: 'c8077cb16bcc6719fa2aba1a5a9cb139e0b81a9e', class: {
+        return (hAsync(Host, { key: '8a57b258087569c2fb13ddaa6e83e06822c05a4d', class: {
                 [theme]: true,
                 'in-list': hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), hAsync("slot", { key: 'ddeca1867cb8e74121add7616f6be9e1a202c142' })));
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), hAsync("slot", { key: '83d8e8febe7f368dfb6caa40eeafda8bf7d5ecef' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35146,7 +35058,7 @@ class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '6c11f7ad176a00ca5368be9ba46c29f6a9aa02bb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '0f39669a81cfb08a3aca6998b95bda68f5076306', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -35160,10 +35072,10 @@ class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: '4ac202cf5fd17a9f69e288508e89cfe266a2c8f2', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '1261d51ce247e066e5005f4aaa7b474ae0ddd421', class: {
+            }) }, hAsync("label", { key: 'c1615da8ac01fccb650a8d1eb6b6b69562634e2f', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'ba530e76d0253f457b04bbd8403d9a02ac859cfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '4c09b153ab02c2c80b6197c2beb73c8cd1dc9348', class: "native-wrapper" }, hAsync("slot", { key: 'a81e2e9a5442603f128fec3d1f15090615164abf', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'ccc0a89eb6ce714e5b67893fb6845670a7857914', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '253bfb6e4add9852054f08194f07d32430832f1f', class: "native-wrapper" }, hAsync("slot", { key: '160ee66c73ab6e982c6efddb0107fbbcd42de962', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '486102e34a85d900aa6a6d909b27a98da947bbe2', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36238,7 +36150,7 @@ class Refresher {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'd2671f7850b565e7a6fc5b3ff15b2410bcf7cb32', slot: "fixed", class: {
+        return (hAsync(Host, { key: '5761384ab0eb88600ad036b6fdbebf8e5150e6b8', slot: "fixed", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`refresher-${theme}`]: true,
@@ -36477,9 +36389,9 @@ class RefresherContent {
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
         const arrowIcon = theme === 'ionic' ? caretLeftFillSvg : caretBackSharp;
-        return (hAsync(Host, { key: '684bf1189acba94c502e2bb421f0b65313c3e9f9', class: {
+        return (hAsync(Host, { key: '3d2d138e485b3b2beae47b9ea4e140f0b9647434', class: {
                 [theme]: true,
-            } }, hAsync("div", { key: '29bfcc52d581913654f7639b0f669d149bf91026', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'c5ddc5a3c22ec365906e8716cdbdb8cf793bb978', class: "refresher-pulling-icon" }, hAsync("div", { key: '4314fff1f89758c81de7d908be2eaae81e8d9fb8', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'cea2bc74fd42c35ec6d6349f033830e745c9e99b', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (hAsync("div", { key: 'bfd43614c33fa6e83f67ac95022db5343af160d6', class: "arrow-container" }, hAsync("ion-icon", { key: '64f48d15dc2c17cbeb177f28272477ee8535136b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '6f540e79e981a923050f57167aff8da92bfe8990', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '97b0755e0f240ec199b408a9cfef9fc48b481a68', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '1cd2a284b786fa94272f88659942ff15a7344f66', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '722aea4deaef0b014f49ce61a4a81ef219d0b101', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '8152f4fe27037c4f34918e515ac460c1f03240d5', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, hAsync("div", { key: 'd0c950b65a37a75b795503574a980cdb61f674e1', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: '8c6e27b2fb134c21fb7e8864433802a95ba0f328', class: "refresher-pulling-icon" }, hAsync("div", { key: '0a947b7779502780f2c835f8686f3a06e21a9194', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '59c129077809add46b7fe6dcf5fc0edbb1cc94d5', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (hAsync("div", { key: 'a28750ed07d9337febbceb5550683eb1c302858c', class: "arrow-container" }, hAsync("ion-icon", { key: 'e14e3b9f9ad51ce3a138a191a848078bd423fa9b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '22c4c80ef1e340a8ec9ca718849b412a09507967', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '6506d0dd30bf639a23cda57c6d1c2a9c29e42ed6', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a54967c5f539ed182106b1c5fa7b499de84c049a', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '2e425f66d780e90474b8ebf7473b9f7c98f30c81', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '286b9b9cce1cb4450ffa5577f0b76044877722ce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36548,9 +36460,9 @@ class Reorder {
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '2a30643d0c5dbebab97a7aca68c165ee79ceed33', class: {
+        return (hAsync(Host, { key: 'bc0b4cd34db6dfe794ab66a785d406bfc02236c5', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: '9ac45a0cc21aea6ed0ec03aa12334886219b1051' }, hAsync("ion-icon", { key: '6d6789a718db4f252c6b3b4484148be2a65c80b8', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, hAsync("slot", { key: '28672768be8598b7cb47b7b2837b77afbc2c2e14' }, hAsync("ion-icon", { key: '03b6620768da18a6f8cb0c55e94b85a53cbab66a', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36826,7 +36738,7 @@ class ReorderGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'f618089290a47bae34bcaaed968c3f8f4daa827f', class: {
+        return (hAsync(Host, { key: 'c095e5428be9f446f245d37a12653978bb2bc2b6', class: {
                 [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -36952,7 +36864,7 @@ class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'f4db39623cfd1bdc773e222b2dd9ed52a26cc685', role: "presentation", class: {
+        return (hAsync(Host, { key: '51fe7517d41c643bd4e746f366f513c42dac17dc', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));
@@ -37937,10 +37849,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '989574921f3bf06e4e5ad4e98ea3cce2e5c7165e', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '84efbafddc586ee3f616d4e1a13118c04d9b2753', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'ee72dba91cc13ca4f251ba6bb5a8b7bf54b6f88d' }, attrs), hAsync("slot", { key: '8e8b5afd795bb213b8765f731463e0588799b001' }))));
+            }) }, hAsync("a", Object.assign({ key: 'e8c7cda4c00ec45548ea52b632bc4adb07f9460c' }, attrs), hAsync("slot", { key: '133bf1203a3e218e3868b4cfda00bb753ecea946' }))));
     }
     static get style() { return routerLinkCss(); }
     static get cmpMeta() { return {
@@ -38140,7 +38052,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
+        return hAsync("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38180,9 +38092,9 @@ class Row {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
+        return (hAsync(Host, { key: '3a3c40062d2d0487c61dedbb172215b87bb425b1', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
+            } }, hAsync("slot", { key: '164f457f6f7853ed8f7279d20bc6ede6cf9d3e5c' })));
     }
     static get style() { return rowCss(); }
     static get cmpMeta() { return {
@@ -38741,8 +38653,8 @@ class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '9b71660f86c93ab8e1c4bca45a778584b1473a48', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '27c4121c6b49906b2a9c225bd7ba9ab2a41e4292', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (hAsync("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: 'd5fc37533478d088fd40697b21cffc8f9c673add', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '21affee126970b3de80d4af9c7659875dd9a07aa', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '62f81458b16cd51dd8cc5c309c42eeceda52e6fc', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (hAsync("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '287a9c6ec7e54f621759224922003b5ce6c0fb25', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -38756,14 +38668,14 @@ class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, hAsync("div", { key: 'b7e0dbfa02f9ea4db7eb01cb293d81d4a54e23d2', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '3b790197d1f8bad980086ebd898cb2487d56ea24', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (hAsync("ion-icon", { key: 'fce3e3510516d768d8b51a6334cf9d9ac934345e', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (hAsync("button", { key: 'b47cb7c79fd07e44f2273e55782a784f6d567155', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'a2e1d71d90435b78fe7f9adb70740f4dda599a8a', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'd3b5506f488229f6e3a348b39c52b49e8c86b43d', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (hAsync("ion-icon", { key: '2b52b78ad65b26e9d4f890b4dc8e8ec494b8ccb8', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (hAsync("button", { key: 'cd59304ab31763bd0d06393d6cf65459a5cd857b', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '6d4f026bd1fde68d43c4e49531ca7b1689590e80', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '6a9be85be51de19f84a852c43f93c46fb92c8d1a', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39378,14 +39290,14 @@ class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '2c0631392507f2e903670070232029928470bf11', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '65c576c0bb9ff0602793f75321d676a34b306b3b', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, hAsync("slot", { key: 'ed99c28b8976c4d51ad12089680cb8fb51d835a7', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: '210750a65ccada549bccf026871477ee2b7bdc69', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39537,7 +39449,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: 'bbb2ae95aa27852c31dcc0ba3ee5acce24349752', class: {
+        return (hAsync(Host, { key: 'da5c8352e5e0f3a01211edbc39c5043cadc5b06f', class: {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -39553,7 +39465,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '0335787c4606314d2715062b536b544cf0fb1f27', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '47d06436538ed9fc97789af76b6681674a2bd0a7', class: "button-inner" }, hAsync("slot", { key: 'de1164da25cb74e6fa3066e43744483fc5b821fa' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '82d3f9d812f851a6bbbf3603e5845e6e6e925442' })), hAsync("div", { key: '77bbfb251707d274635f21e4cd7153791d9fdb49', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '2d7b64dbdb084bd3a851e215b9d049a9aff6f03f', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: 'cfd963a166ebfeba590d6538069b26a107306583', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '845b729e96ba5b594d441ca41c73e2c33a4f5817', class: "button-inner" }, hAsync("slot", { key: 'f38369982dd602c32dbbc6aca2fae6dbb53faa8a' })), theme === 'md' && hAsync("ion-ripple-effect", { key: 'b1b15b731688dd02806409c9c3eda5519a958239' })), hAsync("div", { key: 'fff597d493a85be8005ef3b9eb4f2a93c2a7a4d0', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'f06b53d0ef9d08354f562ac6d3469998257dd688', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39591,7 +39503,7 @@ class SegmentContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '66e6783365c0842eb785d50191206d82321b35e7' }, hAsync("slot", { key: '21528369e7efdb93599179720b26c3f3c3e574ed' })));
+        return (hAsync(Host, { key: '2f43cadcbcb1a9423b30e7abc169ff923a8c431f' }, hAsync("slot", { key: 'c3a6d3e9c336f5124cdec9f37ef516324558073c' })));
     }
     static get style() { return segmentContentCss(); }
     static get cmpMeta() { return {
@@ -39719,11 +39631,11 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (hAsync(Host, { key: '48ce45ca6c45d4bbc804390c31a43729a60abb8a', class: {
+        return (hAsync(Host, { key: '8d1aa594c5674bca376ee3e9b18b60b0925dd875', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, hAsync("slot", { key: 'e248ce5b24b355bd6b51cbfd25741addf4ffd4fb' })));
+            } }, hAsync("slot", { key: '6375fa794ae615b74a70968718aadefa0a9fc1d6' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -40659,7 +40571,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '03fa41ce215865ceeaeddec12d9ac66b5ab18e3f', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c8fc8ffc5e66fa0deef9556f365d8d95ff652b5d', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -40678,7 +40590,7 @@ class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, hAsync("label", { key: '66808fb8c26f7a5db356b22d43751463cbb4bcaa', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '3e80160009e0e5b47952d666ca621166067adbea', class: "select-wrapper-inner", part: "inner" }, 
+            }) }, hAsync("label", { key: 'dd1b83a6bfadcce8e8a9559e529c86d86a5c142d', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: 'c7ae6112920eb9260be01ef4a723549a71e6e275', class: "select-wrapper-inner", part: "inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -40688,7 +40600,7 @@ class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '8ea2530c4dc535661bf97d16724bdca3b9e23560', class: "select-outline" }), hAsync("slot", { key: '2526c811e6f0f250421f6de9834d96d21df528b7', name: "start" }), hAsync("div", { key: '95d0b2432c9e656166bf35ddd457a74052c91a27', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0864febe104e3ac77aa10ce397e7c7569855636e', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c83f3992d7a0ee55ca635b391421626a9131c8eb', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'da07a6cea39e13cc62de7104ef4c06ac8b3c8fe1', class: "select-outline" }), hAsync("slot", { key: '35c4261e4eb3f5d91e8fe61e02cfe3d93a2c6763', name: "start" }), hAsync("div", { key: 'e70c2896f0c7ad908811f5eb19abde9a432d086e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'ddb79446bfc9dc97714c0395570d67ce6a5aa1bf', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '297abbcf88af9911c6ecbbb27e2f37846f213bdb', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -41080,7 +40992,7 @@ class SelectModal {
         });
     }
     render() {
-        return (hAsync(Host, { key: '43db0bab8915e4e422acbd73d27a880935c13a38', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: '58f462db240eb759d7be9f090ab9fba48abdea0c' }, hAsync("ion-toolbar", { key: 'dbd4722ad8c2fc21a066b89451fdc5c0a3776808' }, this.header !== undefined && hAsync("ion-title", { key: 'cefe16f3dff1a90d10875506a94fe1d737c67b44' }, this.header), hAsync("ion-buttons", { key: '750ba8ac17447906cbe020d654b943a88adf8185', slot: "end" }, hAsync("ion-button", { key: '8c075ec9d7becf25dd1307bf083bec229a0889ae', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (hAsync("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), hAsync("ion-content", { key: '65dff8eab0158cdff103ade997246cea2b3c4b9e' }, hAsync("ion-list", { key: 'e3556e81c97146ffda80260265294a4f8d6ebdf2' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '6f1c1c0ad2dad8d4c1defc41a37e9cb4219facef', class: Object.assign({ [getIonMode$1(this)]: true }, this.getModalContextClasses()) }, hAsync("ion-header", { key: 'e917416fdfb8785511abac755f9cd23e24bc2c70' }, hAsync("ion-toolbar", { key: '7ce8116cdd882958f1c6d0abd9f6ddad60d4232b' }, this.header !== undefined && hAsync("ion-title", { key: 'aa2be148b57b756ca1abdc4b29c26861494e9341' }, this.header), hAsync("ion-buttons", { key: '7a9671f9426a5b9eb0fef1d4b446d2db98332f89', slot: "end" }, hAsync("ion-button", { key: 'c5c1511bed6e3361aa740de9bcab4c7445887518', "aria-label": this.cancelIcon ? this.cancelText : undefined, onClick: () => this.closeModal() }, this.cancelIcon ? (hAsync("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), hAsync("ion-content", { key: 'ddabe1b04a9f65e741935e387c06ee8f749b38e1' }, hAsync("ion-list", { key: 'cb801aecd27444fb7bb9e3bf06e5934dfd1a9606' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -41125,7 +41037,7 @@ class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'f4d425097bd16997f0ea48c8896dc92408e55bb9', class: {
+        return (hAsync(Host, { key: 'd7baa96e166b66c8f14c97e56674db4dfec2152c', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }
@@ -41294,9 +41206,9 @@ class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'de63245b6690ffb6201a8faac850b7e73eed8022', class: {
+        return (hAsync(Host, { key: '47062077a192fb05f662f30c68e9c12323a69e47', class: {
                 [theme]: true,
-            } }, hAsync("ion-list", { key: 'a96857c064aaf9a645b9e1ee22932116b1c25d62' }, header !== undefined && hAsync("ion-list-header", { key: '86b8c398f12cdd3e7d2a7d4c4af69029e4decdbc' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '3bcd9c0a544e1e98243163600413d82a304081db' }, hAsync("ion-label", { key: 'd20b933ba82913b623486c982ab094819f850565', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'c869868d89d024b5b02e6a3b626ca91e6f312036' }, subHeader), message !== undefined && hAsync("p", { key: 'd8a26d162ba8d3b092abef38ef3c1795787e7f75' }, message)))), this.renderOptions(options))));
+            } }, hAsync("ion-list", { key: '50caf4e5f70d1d7b57256f115c589d90d9cea627' }, header !== undefined && hAsync("ion-list-header", { key: '3401a27174b687632836f086f1a367214021358c' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '7271f08cd8bae5383bb502d9411d60a5458e18f6' }, hAsync("ion-label", { key: 'e22c6c54f725e3fc630eed38a71afd4bb474b357', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'c0ca32ef8100d6aaa3aa2279ed1216bdb6a60b89' }, subHeader), message !== undefined && hAsync("p", { key: '8e2e0b248a05f5483e62db8d608310078040767c' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -41351,11 +41263,11 @@ class SkeletonText {
         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 (hAsync(Host, { key: 'aa94213767105077047a369d4e4861027af96060', class: {
+        return (hAsync(Host, { key: '370451ee8963b776079f5df365f7bbd70a53b270', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: 'c5dab0fb89d524827936aef5345cc0c7eda9e274' }, "\u00A0")));
+            } }, hAsync("span", { key: '2b861b4ec86cbd61927ab7b81b13517c99dc94c7' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return skeletonTextCss(); }
@@ -41428,7 +41340,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: 'fb9e66e61191ada25b8cb1f82038e8d6eaeaebe0', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'b6559d1626b56a1c63580862263a15798f7d3f71', class: createColorClasses$1(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -41540,12 +41452,12 @@ class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: 'f9f96d71771ced17604357d27ae7b4b7ed29ec9c', class: {
+        return (hAsync(Host, { key: 'b933156f8f9d8ce418ff0d39526967f9653d6639', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '4c95f5197bde73de689c3e4425c14c55412539c6' })));
+            } }, hAsync("slot", { key: '3ec0a11e5506386747dc972ccb094359ca975bae' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -41622,10 +41534,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '5761999a97a78dda973bd39bf44f10d9637fc00c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: '8b978f848d43898feafa7daa3e3d9819be833038', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'd2cc63bbd20ba5f58ef8d6b23eb50ffa7d80478a' })));
+            } }, hAsync("slot", { key: '96a92d86cecc8c9ef4f11d310f7f87bb99ce4e50' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -41832,7 +41744,7 @@ class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: 'dd255e7c4d99f239f43c03eaef94c26ae6db4fc6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '16cd11a815d777a7517150b49b57a204c83c3c37', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
@@ -41840,7 +41752,7 @@ class TabBar {
                 'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, hAsync("slot", { key: 'f112cf52bce37b8a93f9ca6f9632e85889d2791e' })));
+            }) }, hAsync("slot", { key: 'dfdff308f24b3addaf18528a8d869b3fc64306d1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -41968,7 +41880,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '124248b961d34d24a3cbeeb669c672caa10f6d07', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: 'e4d3aaefcdc42677f7818c51ec1ec0a9cbcf8bcf', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -41981,7 +41893,7 @@ class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: 'fde7dc112f62c5e1a08017f1e8665bf68658eadf' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '0912736f1e69a8da9a49c94bca1c613061bcaad1', class: "button-inner" }, hAsync("slot", { key: '9b919361a07b62304dddc751658fca0540a3747a' })), theme === 'md' && hAsync("ion-ripple-effect", { key: '472967f7b2b8f63d669fae542bb2eb1900955975', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '1412d080294dd2602696c5657c71553ef35036d3' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '5daebf815b9b4f8016ce5b4b9d05148c1957a46c', class: "button-inner" }, hAsync("slot", { key: 'e1cbabb911936d21d5b1a4f87d236b962beacbab' })), theme === 'md' && hAsync("ion-ripple-effect", { key: 'd4544a7fb87b8559aaf9d2f0aa4d440201ebdb71', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -42177,7 +42089,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: 'd94b2760650125d00a9bd620f367022119aba911', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'dfa95a272dce19af4575e4d6488962cf6c521754', name: "top" }), hAsync("div", { key: 'd537e5212745833107c751cc6f79d12f48f5472a', class: "tabs-inner" }, hAsync("slot", { key: '6db89721daa7ffd390586345137f1fdfcefa7910' })), hAsync("slot", { key: '7b24f140b89e8e316f24170b29390e00c31d9a0c', name: "bottom" })));
+        return (hAsync(Host, { key: 'b8c5c75469cb1f1829a217a02555a7da8556454a', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '50b74e3df8ea0e991e096c7438a65fee0ca0f6b5', name: "top" }), hAsync("div", { key: 'ca8d4329381c4b40882bbd31b4f15264cfa2c220', class: "tabs-inner" }, hAsync("slot", { key: '816ffd6d997530e3b100480c9a8e4a51fa51e59c' })), hAsync("slot", { key: '280bdf5ec61789823c7772287d60a26229fe78fa', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return tabsCss(); }
@@ -42218,9 +42130,9 @@ class Text {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '4a8be0173621ab64b2849bd02b569e479890c5c4', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8fc5565ce579f8e2a9eddbaa7c93264291080bce', class: createColorClasses$1(this.color, {
                 [theme]: true,
-            }) }, hAsync("slot", { key: 'af7771d2fd855b5de843f32d58cd33a89051fa8b' })));
+            }) }, hAsync("slot", { key: '5be1d661ee3a6f1f9d9428b59e830672faf475b1' })));
     }
     static get style() { return textCss(); }
     static get cmpMeta() { return {
@@ -42784,7 +42696,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd4a95fcd3fe11311d779c10777421c36da20b7a6', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'a67ef5f3107776dcd8490bdd2af4a373ae422899', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -42796,7 +42708,7 @@ class Textarea {
                 'in-item': inItem,
                 'textarea-disabled': disabled,
                 'textarea-readonly': readonly,
-            }) }, hAsync("label", { key: '3d21eab560550527de015d36b1c71761792aa516', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '5fe9ec91ac5560d2ebbb93751dd770fe17e5f839', class: "textarea-wrapper-inner" }, 
+            }) }, hAsync("label", { key: '7a8605454eb66d87a4b49ffd28e609a633eae09c', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '8b24d96089d11f659dbd5adfcbf317ec34742333', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -42806,7 +42718,7 @@ class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: 'aac1db3f8a9a9d541bd0d76f17c7936daca419d7', class: "textarea-outline" }), hAsync("div", { key: '49779a6b346b5bf2e8f98787c9159f41fd767d26', class: "start-slot-wrapper" }, hAsync("slot", { key: '2a86311a2ee002e286d8cb1e27480364cb3eb5b1', name: "start" })), hAsync("div", { key: '922069ecd0aa72e4294d78e02a4f216706af0d99', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, hAsync("textarea", Object.assign({ key: 'c1cae5f0695b4d978fbbd6d0af8d3da681d2c671', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: '6e76190d9644dd880200f28bbfdb6291362ce639', class: "end-slot-wrapper" }, hAsync("slot", { key: 'fe9466237a1d88bf8cd534e83cca148ce6178abe', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'e8a158231e0dcacb4df5b94575fe54d7aff5c23f', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && hAsync("div", { key: '91a7ea7b6f6fccc473b9e058281e5437c00a9b5d', class: "textarea-outline" }), hAsync("div", { key: 'ba641e63d5aaf2ddb291c875f57181d1c93a2b26', class: "start-slot-wrapper" }, hAsync("slot", { key: '351684d41a2b080541a29e0d9e90dd50747b52dc', name: "start" })), hAsync("div", { key: '5c0793742ff6cc327582c3d78d85c28fa8238a40', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, hAsync("textarea", Object.assign({ key: '9cf5c908e3fcd54af07c351dcf0bb91c853f1349', class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: 'e47ffe0bf8e460a7cb205ed35a1107b44687116d', class: "end-slot-wrapper" }, hAsync("slot", { key: '57d035b5f1db373b8488b129c8d3552eb8e630ac', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '1259ad761b68aea69a1ae8b61a6bbdee6c071b7b', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -42890,9 +42802,9 @@ class Thumbnail {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
+        return (hAsync(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
                 [theme]: true,
-            } }, hAsync("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
+            } }, hAsync("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
     }
     static get style() { return thumbnailCss(); }
     static get cmpMeta() { return {
@@ -43776,9 +43688,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: 'f8a4c4537d421e924a58f9addbb38a4a043b9f53', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f0d62f099dd68f8f541110a60695c2a083c6a4d5', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4f0b39c8e0d7aecfe81da23c3ca1591374a8afa5', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: 'a2cf3ea830d27b51ffe1158fb3f3bf87486401b5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'bee5f21ee8df2278e20bf0565495da30c2e61963', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '40a95848e952dd587d1972487affd4b8e088209f', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '054ba519f93892a000832990097b265887272da4', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: '45fa83c1711ab98e81b8b00e0af3af436eaa5264', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'eb4143899be5259e3d933461bc4ca593c8b9dd9b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'bae8a899abb9bcd4895df45def79bfe3d704e6e4', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -44154,7 +44066,7 @@ class Toggle {
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '48744f35038be7be61fea432996440628d4f2ce9', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '9e042d48d2416028c4f76fbb38fa2b26ee7512ef', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -44166,10 +44078,10 @@ class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, hAsync("label", { key: '43d05b9140a9ccabc3981a28b01bf2cb844050f6', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '716f13f4202712d4ce22fe738879a8259102c329', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '0466a7f662ec5804ecc2e22971248a86f20141c7', class: {
+            }) }, hAsync("label", { key: 'f13b94af8f0b862b8390172107e75ef670fff34f', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'e6c82e4fc9fcc77ed52408a04188d5696521de0c', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '5f32f194da4f83792cccaa536a211b558c5eac1c', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '86b8fbbd03ee3179e84cf906ea4e6881137d798a' }), this.renderHintText()), hAsync("div", { key: '6ccf0131e4ff14c3b1f59d218081b8da5f6b1864', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: 'c86e28aca1011a3d5a453b92ddc8b6d1ab049f0b' }), this.renderHintText()), hAsync("div", { key: '80390009e2a3d1ad699e1b698df725449c8fab53', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -44461,11 +44373,11 @@ class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (hAsync(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, hAsync("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), hAsync("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), hAsync("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, hAsync("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, hAsync("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), hAsync("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -44524,11 +44436,11 @@ class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses$1(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, hAsync("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
+            }) }, hAsync("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, hAsync("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -44585,6 +44497,7 @@ registerComponents([
   FabList,
   Footer,
   Gallery,
+  GalleryItem,
   Grid,
   Header,
   Icon,