@ionic/core 8.8.19 → 8.8.20-dev.11788449221.155f9f1e

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

@@ -1,21 +1,20 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, e as config, f as printIonWarning, h, d as Host, g as getElement, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-tcQvqkiX.js';
-import { shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-DkCLSLI9.js';
+import { r as registerInstance, h, e as config, d as Host, g as getElement, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, f as printIonWarning, j as printIonError } from './index-C0EQceqV.js';
+import { focusElements } from './focus-visible-vXpMhGrs.js';
+import { c as getIonTheme, a as isPlatform, b as getIonMode } from './ionic-global-BJDU78B6.js';
+import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-ChPZH7zh.js';
 import { i as isRTL } from './dir-o8OKV5aD.js';
-import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-B_8X7INq.js';
-import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js';
+import { h as hostContext, c as createColorClasses } from './theme-DaJxRxSQ.js';
+import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-niemeDYi.js';
+import { c as createScrollHideController, a as createKeyboardController } from './scroll-hide-controller-B3MRYNXh.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-B9yvYzqV.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-P5K_3uYw.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { t as transition } from './index-Dsz7OTeL.js';
-import './index-ZjP4CjeZ.js';
-import './keyboard-CUw4ekVy.js';
-import './capacitor-CFERIeaU.js';
+import { t as transition } from './index-CXSPjEca.js';
+import './keyboard-x-uHYVoq.js';
+import './capacitor-BnXrCBvt.js';
 
 const appCss = () => `html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}`;
 
@@ -23,51 +22,6 @@ const App = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    componentDidLoad() {
-        {
-            this.rIC(async () => {
-                const isHybrid = isPlatform(window, 'hybrid');
-                if (!config.getBoolean('_testing')) {
-                    import('./index-DwNKJodj.js').then((module) => module.startTapClick(config));
-                }
-                if (config.getBoolean('statusTap', isHybrid)) {
-                    import('./status-tap-HhO5eQI9.js').then((module) => module.startStatusTap());
-                }
-                if (config.getBoolean('inputShims', needInputShims())) {
-                    /**
-                     * needInputShims() ensures that only iOS and Android
-                     * platforms proceed into this block.
-                     */
-                    const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims-d-hDv86G.js').then((module) => module.startInputShims(config, platform));
-                }
-                const hardwareBackButtonModule = await import('./hardware-back-button-B93Gru0Y.js');
-                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
-                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
-                    hardwareBackButtonModule.startHardwareBackButton();
-                }
-                else {
-                    /**
-                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-                     * then the close watcher will not be used.
-                     */
-                    if (shouldUseCloseWatcher()) {
-                        printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
-                    }
-                    hardwareBackButtonModule.blockHardwareBackButton();
-                }
-                if (typeof window !== 'undefined') {
-                    import('./keyboard-ywgs5efA.js').then((module) => module.startKeyboardAssist(window));
-                }
-                import('./focus-visible-BmVRXR1y.js').then((module) => (this.focusVisible = module.startFocusVisible()));
-            });
-        }
-    }
-    disconnectedCallback() {
-        if (this.loadTimeout) {
-            clearTimeout(this.loadTimeout);
-        }
-    }
     /**
      * Used to set focus on an element that uses `ion-focusable`.
      * Do not use this if focusing the element as a result of a keyboard
@@ -80,52 +34,29 @@ const App = class {
      * @param elements An array of HTML elements to set focus on.
      */
     async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    rIC(callback) {
-        if ('requestIdleCallback' in window) {
-            window.requestIdleCallback(callback);
-        }
-        else {
-            this.loadTimeout = setTimeout(callback, 32);
-        }
+        /**
+         * The focus-visible utility is used to set focus on an
+         * element that uses `ion-focusable`.
+         */
+        focusElements(elements);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
     }
     get el() { return getElement(this); }
 };
-const needInputShims = () => {
-    /**
-     * iOS always needs input shims
-     */
-    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
-    if (needsShimsIOS) {
-        return true;
-    }
-    /**
-     * Android only needs input shims when running
-     * in the browser and only if the browser is using the
-     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
-     */
-    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
-    if (isAndroidMobileWeb) {
-        return true;
-    }
-    return false;
-};
 App.style = appCss();
 
-const buttonsIosCss = () => `.sc-ion-buttons-ios-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-ios-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast);--background-activated:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.65em;line-height:0.67}`;
+const buttonsIonicCss = () => `.sc-ion-buttons-ionic-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0)}.sc-ion-buttons-ionic-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ionic-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ionic-s .button-clear{--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--background:transparent;--background-activated:transparent;--background-focused:transparent;--background-hover:transparent}.sc-ion-buttons-ionic-s .button-has-icon-only{width:var(--token-scale-1000, 40px);height:var(--token-scale-1000, 40px)}.sc-ion-buttons-ionic-s ion-icon[slot=icon-only]{font-size:var(--token-font-size-500, 1.25rem)}`;
+
+const buttonsIosCss = () => `.sc-ion-buttons-ios-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0)}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-h{z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-ios-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:0.12;--background-activated:#000;--background-activated-opacity:0.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast);--background-activated:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:0.12;--background-activated:#000;--background-activated-opacity:0.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.65em;line-height:0.67}`;
 
-const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:8px;--padding-end:8px;--box-shadow:none;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-md-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}`;
+const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0)}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-h{z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:8px;--padding-end:8px;--box-shadow:none;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-md-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}`;
 
 const Buttons = class {
     constructor(hostRef) {
@@ -137,7 +68,7 @@ const Buttons = class {
          * first toolbar, the buttons will be hidden and will
          * only be shown once all toolbars have fully collapsed.
          *
-         * Only applies in `ios` mode with `collapse` set to
+         * Only applies in the `ios` theme with `collapse` set to
          * `true` on `ion-header`.
          *
          * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
@@ -145,19 +76,20 @@ const Buttons = class {
         this.collapse = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '95c107ba7871c801a5ef14c636dc8e2fe69debf3', class: {
+                [theme]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: '0c8f95b9840c8fa0c4e50be84c5159620a3eb5c8' })));
+            } }, h("slot", { key: '58669abfce458e1344b84286d4200e305017b958' })));
     }
 };
 Buttons.style = {
+    ionic: buttonsIonicCss(),
     ios: buttonsIosCss(),
     md: buttonsMdCss()
 };
 
-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{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right: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)}`;
+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-fullscreen)) .inner-scroll{-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-fullscreen).content-header-hide-scroll-hidden) .inner-scroll{height:calc(100% + var(--internal-header-hide-height, 0px));-webkit-transform:translateY(calc(-1 * var(--internal-header-hide-height, 0px)));transform:translateY(calc(-1 * var(--internal-header-hide-height, 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-fullscreen)) .inner-scroll{-webkit-transition:height 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:height 200ms cubic-bezier(0.16, 1, 0.3, 1)}:host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll{height:calc(100% + var(--internal-footer-hide-height, 0px));-webkit-transition:height 350ms cubic-bezier(0.4, 0, 1, 1);transition:height 350ms cubic-bezier(0.4, 0, 1, 1)}:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll{-webkit-transition:height 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:height 200ms cubic-bezier(0.16, 1, 0.3, 1)}:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll{height:calc(100% + var(--internal-tab-bar-hide-height, 0px));-webkit-transition:height 350ms cubic-bezier(0.4, 0, 1, 1);transition:height 350ms cubic-bezier(0.4, 0, 1, 1)}@media (prefers-reduced-motion: reduce){:host(.content-header-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,:host(.content-header-hide-scroll-partner:not(.content-fullscreen).content-header-hide-scroll-hidden) .inner-scroll,:host(.content-footer-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,:host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll,:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll{-webkit-transition:none;transition:none}}`;
 
 const Content = class {
     constructor(hostRef) {
@@ -365,9 +297,8 @@ const Content = class {
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll() {
+    shouldForceOverscroll(mode) {
         const { forceOverscroll } = this;
-        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     resize() {
@@ -563,12 +494,13 @@ const Content = class {
     render() {
         const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const mode = getIonMode(this);
-        const forceOverscroll = this.shouldForceOverscroll();
-        const transitionShadow = mode === 'ios';
+        const theme = getIonTheme(this);
+        const mode = getIonMode(this, theme);
+        const forceOverscroll = this.shouldForceOverscroll(mode);
+        const transitionShadow = theme === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, Object.assign({ key: '8c7f646f58e7c38fb6d8661b1629b847a16753fb', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [theme]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -576,12 +508,12 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
+            } }, inheritedAttributes), h("div", { key: '2b0505c3fdf5c92938b8419c0f57f8d999aec6b3', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '6b769596e491dea1d3618551497fde9364afdeda', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'ba36c8468681d028352415039d2cb2a750f2638f' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -612,7 +544,8 @@ const getPageElement = (el) => {
      * between the popover and the edges of the screen. But if the popover contains
      * its own page element, we should use that instead.
      */
-    const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
     if (page) {
         return page;
     }
@@ -676,45 +609,90 @@ const handleFooterFade = (scrollEl, baseEl) => {
     });
 };
 
-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{left:0;right: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:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
+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-collapse-fade ion-toolbar{--opacity-scale:inherit}ion-footer.footer-scroll-effect-hide{-webkit-transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1)}ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1)}@media (prefers-reduced-motion: reduce){ion-footer.footer-scroll-effect-hide,ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transition:none;transition:none}}.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.footer-collapse-fade{-webkit-box-shadow:none;box-shadow:none}.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}`;
+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-collapse-fade ion-toolbar{--opacity-scale:inherit}ion-footer.footer-scroll-effect-hide{-webkit-transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1)}ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1)}@media (prefers-reduced-motion: reduce){ion-footer.footer-scroll-effect-hide,ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transition:none;transition:none}}.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}`;
+
+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-collapse-fade ion-toolbar{--opacity-scale:inherit}ion-footer.footer-scroll-effect-hide{-webkit-transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:-webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 200ms cubic-bezier(0.16, 1, 0.3, 1)}ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:-webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1);transition:transform 350ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 350ms cubic-bezier(0.4, 0, 1, 1)}@media (prefers-reduced-motion: reduce){ion-footer.footer-scroll-effect-hide,ion-footer.footer-scroll-effect-hide.footer-scroll-hidden{-webkit-transition:none;transition:none}}.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.footer-collapse-fade{-webkit-box-shadow:none;box-shadow:none}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 const Footer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
+        this.scrollHideCtrlPromise = null;
+        this.hasWarnedCollapse = false;
+        this.fadeSetupId = 0;
         this.keyboardVisible = false;
         /**
          * If `true`, the footer will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the footer, the `fullscreen`
          * attribute needs to be set on the content.
          */
         this.translucent = false;
-        this.checkCollapsibleFooter = () => {
-            const mode = getIonMode(this);
-            if (mode !== 'ios') {
+        this.checkCollapsibleFooter = async () => {
+            const { scrollEffect, collapse } = this;
+            if (collapse !== undefined && scrollEffect === undefined && !this.hasWarnedCollapse) {
+                this.hasWarnedCollapse = true;
+                printIonWarning(`[ion-footer] - The \`collapse\` property is deprecated. Use \`scrollEffect\` instead.\nExample: <ion-footer scroll-effect="${collapse}">`, this.el);
+            }
+            const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+            // Skip teardown/rebuild if the effect hasn't changed.
+            // This prevents keyboard toggles (which trigger re-renders via
+            // @State keyboardVisible) from destroying the scroll controller
+            // and resetting isHidden.
+            if (effect === this.activeEffect) {
                 return;
             }
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
+            const hasHide = effect === 'hide';
+            const hasFade = effect === 'fade';
             this.destroyCollapsibleFooter();
-            if (hasFade) {
-                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-                const contentEl = pageEl ? findIonContent(pageEl) : null;
+            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 (hasHide && contentEl) {
+                this.activeEffect = effect;
+                await this.setupScrollEffectHide(contentEl);
+                return;
+            }
+            // fade via the deprecated `collapse` prop is iOS-only.
+            // fade via the new `scrollEffect` prop works in all themes.
+            const isModeRestricted = scrollEffect === undefined && getIonTheme(this) !== 'ios';
+            if (hasFade && !isModeRestricted) {
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
                     return;
                 }
                 this.setupFadeFooter(contentEl);
+                this.activeEffect = effect;
+            }
+        };
+        this.setupScrollEffectHide = async (contentEl) => {
+            const setupPromise = createScrollHideController(contentEl, {
+                el: this.el,
+                cssVar: '--internal-footer-hide-height',
+                hiddenClass: 'footer-scroll-hidden',
+                contentPartnerClass: 'content-footer-hide-scroll-partner',
+                contentHiddenClass: 'content-footer-hide-scroll-hidden',
+            });
+            this.scrollHideCtrlPromise = setupPromise;
+            const controller = await setupPromise;
+            if (this.scrollHideCtrlPromise === setupPromise) {
+                this.scrollHideCtrlPromise = null;
+                controller.init();
+                this.scrollHideCtrl = controller;
             }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            const setupId = ++this.fadeSetupId;
+            const scrollEl = await getScrollElement(contentEl);
+            if (this.fadeSetupId !== setupId) {
+                return;
+            }
+            this.scrollEl = scrollEl;
             /**
              * Handle fading of toolbars on scroll
              */
@@ -759,6 +737,7 @@ const Footer = class {
         }
     }
     disconnectedCallback() {
+        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -769,29 +748,43 @@ const Footer = class {
         }
     }
     destroyCollapsibleFooter() {
+        this.activeEffect = undefined;
+        this.fadeSetupId++;
+        this.scrollHideCtrlPromise = null;
+        if (this.scrollHideCtrl) {
+            this.scrollHideCtrl.destroy();
+            this.scrollHideCtrl = undefined;
+        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
     }
     render() {
-        const { translucent, collapse } = this;
-        const mode = getIonMode(this);
+        const { translucent, scrollEffect, collapse } = this;
+        const theme = getIonTheme(this);
+        const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+        // fade via the deprecated `collapse` prop is iOS-only.
+        const isModeRestricted = scrollEffect === undefined && theme !== 'ios';
+        const hasHide = effect === 'hide';
+        const hasFade = effect === 'fade' && !isModeRestricted;
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
-                [mode]: true,
+        return (h(Host, { key: 'a0777b4a639d22e15374879f018efcf589e756f8', role: "contentinfo", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`footer-${mode}`]: true,
+                [`footer-${theme}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${mode}`]: translucent,
+                [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
-                [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { key: '2fa14f61661c47c661cecd696176728d6eafa74f', class: "footer-background" }), h("slot", { key: '8e63696e7c528d5c38201e546bf08135290d0945' })));
+                'footer-collapse-fade': hasFade,
+                'footer-scroll-effect-hide': hasHide,
+            } }, theme === 'ios' && translucent && h("div", { key: 'd78b46870cbf11c95b066d649c04ec398b66e614', class: "footer-background" }), h("slot", { key: '9dc34787cd29597fe1b1198db317602014ac1483' })));
     }
     get el() { return getElement(this); }
 };
 Footer.style = {
+    ionic: ionicFooterMdCss(),
     ios: footerIosCss(),
     md: footerMdCss()
 };
@@ -843,13 +836,14 @@ const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
     });
 };
 const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+    var _a;
     /**
      * Fading in the backdrop opacity
      * should happen after the large title
      * has collapsed, so it is handled
      * by handleHeaderFade()
      */
-    if (headerEl.collapse === 'fade') {
+    if (((_a = headerEl.scrollEffect) !== null && _a !== void 0 ? _a : headerEl.collapse) === 'fade') {
         return;
     }
     if (opacity === undefined) {
@@ -1007,46 +1001,69 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
- * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
+ * @returns 'none' if inside ion-menu, otherwise 'banner'.
+ * Condensed headers start as 'banner' and have their role
+ * toggled dynamically by setHeaderActive() on scroll.
  */
-const getRoleType = (isInsideMenu, isCondensed, mode) => {
+const getRoleType = (isInsideMenu) => {
     // If the header is inside a menu, it should not have the banner role.
     if (isInsideMenu) {
         return ROLE_NONE;
     }
-    /**
-     * Only apply role="none" to `md` mode condensed headers
-     * since the large header is never shown.
-     */
-    if (isCondensed && mode === 'md') {
-        return ROLE_NONE;
-    }
     // Default to banner role.
     return ROLE_BANNER;
 };
 
-const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.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{left:0;right: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:.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 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)}.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:not(.header-collapse-main):has(~ion-content ion-header.header-collapse-condense){opacity:0}.header-collapse-condense-hidden{display:none}ion-header.header-scroll-effect-hide{-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)}ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%);-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}@media (prefers-reduced-motion: reduce){ion-header.header-scroll-effect-hide,ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transition:none;transition:none}}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 headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.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 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)}.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:not(.header-collapse-main):has(~ion-content ion-header.header-collapse-condense){opacity:0}.header-collapse-condense-hidden{display:none}ion-header.header-scroll-effect-hide{-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)}ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%);-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}@media (prefers-reduced-motion: reduce){ion-header.header-scroll-effect-hide,ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transition:none;transition:none}}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-condense ion-toolbar:last-of-type{--border-width:0px}`;
+
+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)}.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:not(.header-collapse-main):has(~ion-content ion-header.header-collapse-condense){opacity:0}.header-collapse-condense-hidden{display:none}ion-header.header-scroll-effect-hide{-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)}ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transform:translateY(-100%);transform:translateY(-100%);-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}@media (prefers-reduced-motion: reduce){ion-header.header-scroll-effect-hide,ion-header.header-scroll-effect-hide.header-scroll-hidden{-webkit-transition:none;transition:none}}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{-webkit-box-shadow:none;box-shadow:none}.header-md.header-collapse-condense-inactive:not(.header-collapse-condense){-webkit-box-shadow:none;box-shadow:none}.header-md.header-collapse-fade{-webkit-box-shadow:none;box-shadow:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
 
 const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.inheritedAttributes = {};
+        this.scrollHideCtrlPromise = null;
+        this.hasWarnedCollapse = false;
+        this.fadeCondenseSetupId = 0;
+        /**
+         * If `true`, the header will have a line at the bottom.
+         * TODO(ROU-10855): add support for this prop on ios/md themes
+         */
+        this.divider = false;
         /**
          * If `true`, the header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the header, the `fullscreen`
          * attribute needs to be set on the content.
          */
         this.translucent = false;
+        this.setupScrollEffectHide = async (contentEl) => {
+            const setupPromise = createScrollHideController(contentEl, {
+                el: this.el,
+                cssVar: '--internal-header-hide-height',
+                hiddenClass: 'header-scroll-hidden',
+                contentPartnerClass: 'content-header-hide-scroll-partner',
+                contentHiddenClass: 'content-header-hide-scroll-hidden',
+            });
+            this.scrollHideCtrlPromise = setupPromise;
+            const controller = await setupPromise;
+            if (this.scrollHideCtrlPromise === setupPromise) {
+                this.scrollHideCtrlPromise = null;
+                controller.init();
+                this.scrollHideCtrl = controller;
+            }
+        };
         this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            const setupId = ++this.fadeCondenseSetupId;
+            const scrollEl = await getScrollElement(contentEl);
+            if (this.fadeCondenseSetupId !== setupId) {
+                return;
+            }
+            this.scrollEl = scrollEl;
             /**
              * Handle fading of toolbars on scroll
              */
@@ -1070,37 +1087,63 @@ const Header = class {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
+        const { scrollEffect, collapse } = this;
+        if (collapse !== undefined && scrollEffect === undefined && !this.hasWarnedCollapse) {
+            this.hasWarnedCollapse = true;
+            printIonWarning(`[ion-header] - The \`collapse\` property is deprecated. Use \`scrollEffect\` instead.\nExample: <ion-header scroll-effect="${collapse}">`, this.el);
+        }
+        const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+        // Skip teardown/rebuild if the effect hasn't changed.
+        // This prevents re-renders from destroying the scroll controller
+        // and resetting isHidden.
+        if (effect === this.activeEffect) {
             return;
         }
-        const { collapse } = this;
-        const hasCondense = collapse === 'condense';
-        const hasFade = collapse === 'fade';
+        const hasHide = effect === 'hide';
+        const hasCondense = effect === 'condense';
+        const hasFade = effect === 'fade';
         this.destroyCollapsibleHeader();
-        if (hasCondense) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
+        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 (hasHide && contentEl) {
+            this.activeEffect = effect;
+            await this.setupScrollEffectHide(contentEl);
+            return;
+        }
+        // condense/fade via the deprecated `collapse` prop are iOS-only.
+        // condense/fade via the new `scrollEffect` prop work in all themes.
+        const isModeRestricted = scrollEffect === undefined && getIonTheme(this) !== 'ios';
+        if (hasCondense && !isModeRestricted) {
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
                 const title = cloneElement('ion-title');
                 title.size = 'large';
                 cloneElement('ion-back-button');
             });
-            await this.setupCondenseHeader(contentEl, pageEl);
+            const didSetup = await this.setupCondenseHeader(contentEl, pageEl);
+            if (didSetup) {
+                this.activeEffect = effect;
+            }
         }
-        else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
+        else if (hasFade && !isModeRestricted) {
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
                 return;
             }
-            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
+            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"],ion-header[scroll-effect="condense"]');
+            this.activeEffect = effect;
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
     destroyCollapsibleHeader() {
+        this.activeEffect = undefined;
+        this.fadeCondenseSetupId++;
+        this.scrollHideCtrlPromise = null;
+        if (this.scrollHideCtrl) {
+            this.scrollHideCtrl.destroy();
+            this.scrollHideCtrl = undefined;
+        }
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
             this.intersectionObserver = undefined;
@@ -1117,21 +1160,40 @@ const Header = class {
     async setupCondenseHeader(contentEl, pageEl) {
         if (!contentEl || !pageEl) {
             printIonContentErrorMsg(this.el);
-            return;
+            return false;
         }
         if (typeof IntersectionObserver === 'undefined') {
-            return;
+            return false;
+        }
+        const setupId = ++this.fadeCondenseSetupId;
+        const scrollEl = await getScrollElement(contentEl);
+        if (this.fadeCondenseSetupId !== setupId) {
+            return false;
+        }
+        this.scrollEl = scrollEl;
+        /**
+         * The condense effect requires an ion-title with size="large"
+         * in the condense header. Without it, there is nothing to
+         * collapse into the main header toolbar.
+         */
+        const hasLargeTitle = this.el.querySelector('ion-title[size="large"]') !== null;
+        if (!hasLargeTitle) {
+            printIonWarning('[ion-header] - The condense scroll effect requires an <ion-title size="large"> in the condense header.', this.el);
+            return false;
         }
-        this.scrollEl = await getScrollElement(contentEl);
         const headers = pageEl.querySelectorAll('ion-header');
-        this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+        this.collapsibleMainHeader = Array.from(headers).find((header) => {
+            var _a;
+            const effect = (_a = header.scrollEffect) !== null && _a !== void 0 ? _a : header.collapse;
+            return effect !== 'condense';
+        });
         if (!this.collapsibleMainHeader) {
-            return;
+            return false;
         }
         const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
         const scrollHeaderIndex = createHeaderIndex(this.el);
         if (!mainHeaderIndex || !scrollHeaderIndex) {
-            return;
+            return false;
         }
         setHeaderActive(mainHeaderIndex, false);
         setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
@@ -1163,31 +1225,45 @@ const Header = class {
                 this.collapsibleMainHeader.classList.add('header-collapse-main');
             }
         });
+        return true;
     }
     render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(this);
-        const collapse = this.collapse || 'none';
-        const isCondensed = collapse === 'condense';
+        const { translucent, inheritedAttributes, divider, scrollEffect, collapse } = this;
+        const theme = getIonTheme(this);
+        const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+        // condense/fade via the deprecated `collapse` prop are iOS-only.
+        const isModeRestricted = scrollEffect === undefined && theme !== 'ios';
+        const hasHide = effect === 'hide';
+        const hasCondense = effect === 'condense' && !isModeRestricted && this.el.querySelector('ion-title[size="large"]') !== null;
+        const hasFade = effect === 'fade' && !isModeRestricted;
+        // The condense header should be hidden when
+        // - deprecated collapse prop is used on non-iOS (mode restricted), or
+        // - scrollEffect="condense" is set but no ion-title[size="large"] is present
+        const isHiddenCondense = effect === 'condense' && !hasCondense;
         // banner role must be at top level, so remove role if inside a menu
-        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
-                [mode]: true,
+        const roleType = isHiddenCondense ? 'none' : getRoleType(hostContext('ion-menu', this.el));
+        return (h(Host, Object.assign({ key: '09f60ca014bb7b3a85d3c0a94e7989d5dbc43f46', role: roleType, class: {
+                [theme]: true,
                 // Used internally for styling
-                [`header-${mode}`]: true,
+                [`header-${theme}`]: true,
                 [`header-translucent`]: this.translucent,
-                [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+                ['header-collapse-condense']: hasCondense,
+                ['header-collapse-condense-hidden']: isHiddenCondense,
+                ['header-collapse-fade']: hasFade,
+                [`header-translucent-${theme}`]: this.translucent,
+                ['header-divider']: divider,
+                'header-scroll-effect-hide': hasHide,
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd5ff245ae0166e5e1d50936cacc98c90625db48', class: "header-background" }), h("slot", { key: '1baa31af87b9eb6406a21073ec65afa191dfbb3d' })));
     }
     get el() { return getElement(this); }
 };
 Header.style = {
+    ionic: headerIonicCss(),
     ios: headerIosCss(),
     md: headerMdCss()
 };
 
-const routerOutletCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
+const routerOutletCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
 
 const RouterOutlet = class {
     constructor(hostRef) {
@@ -1198,7 +1274,7 @@ const RouterOutlet = class {
         this.lockController = createLockController();
         this.gestureOrAnimationInProgress = false;
         /**
-         * The mode determines which platform styles to use.
+         * The mode determines the platform behaviors of the component.
          */
         this.mode = getIonMode(this);
         /**
@@ -1218,7 +1294,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await import('./swipe-back-DK6afpuO.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+        this.gesture = (await import('./swipe-back-DFICtpMC.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;
@@ -1364,7 +1440,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
+        return h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1375,9 +1451,11 @@ const RouterOutlet = class {
 };
 RouterOutlet.style = routerOutletCss();
 
-const titleIosCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host{inset-inline-start:0}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}`;
+const titleIonicCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.title-large){font-size:var(--token-font-size-700, 1.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-900, var(--token-scale-900, 36px));text-decoration:none;text-transform:none}`;
+
+const titleIosCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host(.ion-color){color:var(--ion-color-base)}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host{inset-inline-start:0}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}`;
 
-const titleMdCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}`;
+const titleMdCss = () => `:host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host(.ion-color){color:var(--ion-color-base)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}:host(.title-large){width:100%;height:100%;font-size:1.75rem;font-weight:400}`;
 
 const ToolbarTitle = class {
     constructor(hostRef) {
@@ -1400,13 +1478,13 @@ const ToolbarTitle = class {
         return this.size !== undefined ? this.size : 'default';
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
+                [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
+            }) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1416,18 +1494,29 @@ const ToolbarTitle = class {
     }; }
 };
 ToolbarTitle.style = {
+    ionic: titleIonicCss(),
     ios: titleIosCss(),
     md: titleMdCss()
 };
 
-const toolbarIosCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}`;
+const toolbarIonicCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-color:currentColor;--padding-top:var(--token-space-200, var(--token-scale-200, 8px));--padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--min-height:var(--token-scale-1400, 56px)}.toolbar-container{gap:var(--token-space-400, var(--token-scale-400, 16px));z-index:10}.toolbar-background{z-index:-1}.toolbar-content{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-buttons){gap:var(--token-space-200, var(--token-scale-200, 8px))}::slotted(ion-title){-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}:host(.has-end-content) slot[name=end],:host(.show-end) slot[name=end]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-start-content) slot[name=start],:host(.show-start) slot[name=start]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0)}:host(.has-primary-content) slot[name=primary],:host(.show-primary) slot[name=primary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-secondary-content) slot[name=secondary],:host(.show-secondary) slot[name=secondary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0)}:host(.toolbar-title-placement-start) ::slotted(ion-title){text-align:start}:host(.toolbar-title-placement-center) ::slotted(ion-title){text-align:center}:host(.toolbar-title-placement-end) ::slotted(ion-title){text-align:end}`;
 
-const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;z-index:10;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;z-index:10;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));z-index:-1;pointer-events:none}::slotted(ion-progress-bar){left:0;right:0;bottom:0;position:absolute}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}`;
+const toolbarIosCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}`;
+
+const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}`;
 
 const Toolbar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.childrenStyles = new Map();
+        this.slotClasses = [
+            'has-start-content',
+            'has-end-content',
+            'has-primary-content',
+            'has-secondary-content',
+        ];
+        this.showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
+        this.slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -1444,6 +1533,173 @@ const Toolbar = class {
         if (lastButtons) {
             lastButtons.classList.add('buttons-last-slot');
         }
+        this.updateSlotClasses();
+    }
+    componentDidLoad() {
+        this.updateSlotClasses();
+        this.updateSlotWidths();
+    }
+    titlePlacementChanged() {
+        this.updateSlotClasses();
+    }
+    /**
+     * Gets the title placement.
+     * Returns the title placement if it is set, otherwise returns `"center"`
+     * for `ionic` and `ios`, and `"start"` for `md`.
+     */
+    getTitlePlacement() {
+        if (this.titlePlacement !== undefined) {
+            return this.titlePlacement;
+        }
+        return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
+    }
+    /**
+     * Updates the CSS custom properties for slot widths
+     * This ensures that slots shown by their met conditions
+     * have a minimum width matching their required slot
+     */
+    updateSlotWidths(tries = 0) {
+        // Set timeout to try to execute after everything is rendered
+        setTimeout(() => {
+            // Attempt to measure and update
+            const success = this.measureAndUpdateSlots();
+            // If not all measurements were successful, try again in 100 ms
+            // cap recursion at 5 tries for safety
+            if (!success && tries < 5) {
+                setTimeout(() => {
+                    this.updateSlotWidths(tries + 1);
+                }, 100);
+            }
+        });
+    }
+    /**
+     * Measure the widths of the slots and update the CSS custom properties
+     * for the minimum width of each pair of slots based on the largest width in each pair.
+     * Returns whether we successfully measured all of the slots we expect to have content.
+     * If not, the content probably hasn't rendered yet and we need to try again.
+     */
+    measureAndUpdateSlots() {
+        // Define the relationship between slots based on the conditions array
+        // Group slots that should have the same width
+        const slotPairs = [
+            { name: 'start-end', slots: ['start', 'end'] },
+            { name: 'primary-secondary', slots: ['primary', 'secondary'] },
+        ];
+        // First, measure all slot widths
+        const slotWidths = new Map();
+        let allMeasurementsSuccessful = true;
+        // Measure all slots with content
+        const slots = ['start', 'end', 'primary', 'secondary'];
+        slots.forEach((slot) => {
+            var _a;
+            if (this.el.classList.contains(`has-${slot}-content`)) {
+                const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
+                if (slotElement) {
+                    // Check if the slot contains an img or ion-img
+                    const assignedElements = slotElement.assignedElements({ flatten: true });
+                    const hasImg = assignedElements.some((el) => {
+                        if (el.tagName === 'IMG' || el.tagName === 'ION-IMG') {
+                            return true;
+                        }
+                        // Check for nested images
+                        return el.querySelector('img, ion-img');
+                    });
+                    // Temporarily allow slot to size to content by setting flex-basis
+                    // to 'auto'. This ensures that slotted images can render at their
+                    // intrinsic width for measurement.
+                    if (hasImg) {
+                        const { name } = slotPairs.find((pair) => pair.slots.includes(slot));
+                        this.el.style.setProperty(`--${name}-size`, 'auto');
+                    }
+                    const width = slotElement.offsetWidth;
+                    if (width > 0) {
+                        slotWidths.set(slot, width);
+                    }
+                    else {
+                        allMeasurementsSuccessful = false;
+                    }
+                }
+            }
+        });
+        // Then set the CSS custom properties based on the largest width in each pair
+        slotPairs.forEach(({ name, slots }) => {
+            // Find the maximum width among the slots in this pair
+            let maxWidth = 0;
+            let hasAnyContent = false;
+            slots.forEach((slot) => {
+                var _a;
+                if (slotWidths.has(slot)) {
+                    hasAnyContent = true;
+                    maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
+                }
+            });
+            // If at least one slot in the pair has content, set the min-width for the pair
+            if (hasAnyContent && maxWidth > 0) {
+                // Set a single CSS variable for the pair
+                this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
+            }
+        });
+        return allMeasurementsSuccessful;
+    }
+    /**
+     * Removes all slot visibility classes and slot width CSS variables.
+     */
+    removeSlotClasses() {
+        this.el.classList.remove(...this.slotClasses, ...this.showClasses);
+        this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
+    }
+    updateSlotClasses() {
+        const titlePlacement = this.getTitlePlacement();
+        if (titlePlacement !== 'center') {
+            this.removeSlotClasses();
+            return;
+        }
+        // Check if slots have content
+        const slots = ['start', 'end', 'primary', 'secondary'];
+        const classesToAdd = [];
+        const classesToRemove = [];
+        slots.forEach((slot) => {
+            const slotHasContent = this.hasSlotContent(slot);
+            const slotClass = `has-${slot}-content`;
+            if (slotHasContent) {
+                classesToAdd.push(slotClass);
+            }
+            else {
+                classesToRemove.push(slotClass);
+            }
+        });
+        // Force visibilities in certain conditions. This works by adding a class to the toolbar
+        // named `show-{slot}`. This class will be added if the toolbar has the required slots
+        // and does not have any of the excluded slots, otherwise it will be removed.
+        // This is useful to enforce centering of the toolbar content when there are different amounts
+        // of slots on either side of the toolbar.
+        const conditions = [
+            { name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
+            { name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
+            { name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
+            { name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
+        ];
+        conditions.forEach((condition) => {
+            const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
+            const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
+            const className = `show-${condition.name}`;
+            if (hasRequiredSlots && !hasExcludedSlots) {
+                classesToAdd.push(className);
+            }
+            else {
+                classesToRemove.push(className);
+            }
+        });
+        // Add classes to the toolbar element
+        this.el.classList.add(...classesToAdd);
+        this.el.classList.remove(...classesToRemove);
+        // Update slot widths after classes have been updated
+        this.updateSlotWidths();
+    }
+    hasSlotContent(slotName) {
+        var _a;
+        const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
+        return !!slotNode && slotNode.assignedNodes().length > 0;
     }
     childrenStyle(ev) {
         ev.stopPropagation();
@@ -1468,19 +1724,27 @@ const Toolbar = class {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const childStyles = {};
-        this.childrenStyles.forEach((value) => {
-            Object.assign(childStyles, value);
+        this.childrenStyles.forEach((style) => {
+            Object.assign(childStyles, style);
         });
-        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
+        const titlePlacement = this.getTitlePlacement();
+        return (h(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
+                [`toolbar-title-placement-${titlePlacement}`]: true,
+            })), childStyles) }, h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "titlePlacement": [{
+                "titlePlacementChanged": 0
+            }]
+    }; }
 };
 Toolbar.style = {
+    ionic: toolbarIonicCss(),
     ios: toolbarIosCss(),
     md: toolbarMdCss()
 };