@ionic/core 8.8.18-dev.11786399582.1d58c37d → 8.8.18-dev.11786663039.1d61e2fe

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

@@ -1,20 +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-HEqiOzXb.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-Dw-wN0Ja.js';
-import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js';
+import { r as registerInstance, g as getElement, e as config, f as printIonWarning, h, d as Host, c as createEvent, a as readTask, i as forceUpdate, w as writeTask, j as printIonError } from './index-D1CQtpUN.js';
+import { shouldUseCloseWatcher } from './hardware-back-button-DcHMMB9j.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-5bZ91kOL.js';
+import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-BPcITY5s.js';
+import { i as isRTL } from './dir-B-FxiyeI.js';
+import { c as createColorClasses, h as hostContext } from './theme-byZM6qHV.js';
+import { a as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-DcUt1pPn.js';
+import { c as createKeyboardController } from './keyboard-controller-DEwoa1ev.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-FnPGymXL.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-BfAlKlW5.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { t as transition } from './index-B_dQk_WE.js';
+import { t as transition } from './index-DqVqy_Cy.js';
 import './index-ZjP4CjeZ.js';
-import './keyboard-CUw4ekVy.js';
+import './keyboard-DAF8GNJ9.js';
 import './capacitor-CFERIeaU.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,15 +23,18 @@ const App = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    focusVisible;
+    loadTimeout;
+    get el() { return getElement(this); }
     componentDidLoad() {
         {
             this.rIC(async () => {
                 const isHybrid = isPlatform(window, 'hybrid');
                 if (!config.getBoolean('_testing')) {
-                    import('./index-BRHzoo00.js').then((module) => module.startTapClick(config));
+                    import('./index-B9GsUd2c.js').then((module) => module.startTapClick(config));
                 }
                 if (config.getBoolean('statusTap', isHybrid)) {
-                    import('./status-tap-vO-6s4Yp.js').then((module) => module.startStatusTap());
+                    import('./status-tap-C-wNhea0.js').then((module) => module.startStatusTap());
                 }
                 if (config.getBoolean('inputShims', needInputShims())) {
                     /**
@@ -39,9 +42,9 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims-LXhI7LEx.js').then((module) => module.startInputShims(config, platform));
+                    import('./input-shims-C1dCKVMO.js').then((module) => module.startInputShims(config, platform));
                 }
-                const hardwareBackButtonModule = await import('./hardware-back-button-B93Gru0Y.js');
+                const hardwareBackButtonModule = await import('./hardware-back-button-DcHMMB9j.js');
                 const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
                 if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
@@ -57,7 +60,7 @@ const App = class {
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
-                    import('./keyboard-ywgs5efA.js').then((module) => module.startKeyboardAssist(window));
+                    import('./keyboard-Cj8mLJeq.js').then((module) => module.startKeyboardAssist(window));
                 }
                 import('./focus-visible-BmVRXR1y.js').then((module) => (this.focusVisible = module.startFocusVisible()));
             });
@@ -100,7 +103,6 @@ const App = class {
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
     }
-    get el() { return getElement(this); }
 };
 const needInputShims = () => {
     /**
@@ -130,20 +132,20 @@ const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:-ms-flexbox;display:fle
 const Buttons = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If true, buttons will disappear when its
-         * parent toolbar has fully collapsed if the toolbar
-         * is not the first toolbar. If the toolbar is the
-         * 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
-         * `true` on `ion-header`.
-         *
-         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-         */
-        this.collapse = false;
     }
+    /**
+     * If true, buttons will disappear when its
+     * parent toolbar has fully collapsed if the toolbar
+     * is not the first toolbar. If the toolbar is the
+     * 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
+     * `true` on `ion-header`.
+     *
+     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+     */
+    collapse = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
@@ -165,68 +167,96 @@ const Content = class {
         this.ionScrollStart = createEvent(this, "ionScrollStart", 7);
         this.ionScroll = createEvent(this, "ionScroll", 7);
         this.ionScrollEnd = createEvent(this, "ionScrollEnd", 7);
-        this.watchDog = null;
-        this.isScrolling = false;
-        this.lastScroll = 0;
-        this.queued = false;
-        this.cTop = -1;
-        this.cBottom = -1;
-        this.isMainContent = true;
-        this.resizeTimeout = null;
-        this.inheritedAttributes = {};
-        this.tabsElement = null;
-        // Detail is used in a hot loop in the scroll event, by allocating it here
-        // V8 will be able to inline any read/write to it since it's a monomorphic class.
-        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-        this.detail = {
-            scrollTop: 0,
-            scrollLeft: 0,
-            type: 'scroll',
-            event: undefined,
-            startX: 0,
-            startY: 0,
-            startTime: 0,
-            currentX: 0,
-            currentY: 0,
-            velocityX: 0,
-            velocityY: 0,
-            deltaX: 0,
-            deltaY: 0,
-            currentTime: 0,
-            data: undefined,
-            isScrolling: true,
-        };
-        /**
-         * If `true`, the content will scroll behind the headers
-         * and footers. This effect can easily be seen by setting the toolbar
-         * to transparent.
-         */
-        this.fullscreen = false;
-        /**
-         * Controls where the fixed content is placed relative to the main content
-         * in the DOM. This can be used to control the order in which fixed elements
-         * receive keyboard focus.
-         * For example, if a FAB in the fixed slot should receive keyboard focus before
-         * the main page content, set this property to `'before'`.
-         */
-        this.fixedSlotPlacement = 'after';
-        /**
-         * If you want to enable the content scrolling in the X axis, set this property to `true`.
-         */
-        this.scrollX = false;
-        /**
-         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-         */
-        this.scrollY = true;
-        /**
-         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-         * and start listening from (ionScroll), set this property to `true`.
-         */
-        this.scrollEvents = false;
-    }
-    fullscreenChanged() {
-        this.setupFullscreenResizeObserver();
     }
+    watchDog = null;
+    isScrolling = false;
+    lastScroll = 0;
+    queued = false;
+    cTop = -1;
+    cBottom = -1;
+    scrollEl;
+    backgroundContentEl;
+    isMainContent = true;
+    resizeTimeout = null;
+    inheritedAttributes = {};
+    tabsElement = null;
+    tabsLoadCallback;
+    // Detail is used in a hot loop in the scroll event, by allocating it here
+    // V8 will be able to inline any read/write to it since it's a monomorphic class.
+    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+    detail = {
+        scrollTop: 0,
+        scrollLeft: 0,
+        type: 'scroll',
+        event: undefined,
+        startX: 0,
+        startY: 0,
+        startTime: 0,
+        currentX: 0,
+        currentY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        deltaX: 0,
+        deltaY: 0,
+        currentTime: 0,
+        data: undefined,
+        isScrolling: true,
+    };
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the content will scroll behind the headers
+     * and footers. This effect can easily be seen by setting the toolbar
+     * to transparent.
+     */
+    fullscreen = false;
+    /**
+     * Controls where the fixed content is placed relative to the main content
+     * in the DOM. This can be used to control the order in which fixed elements
+     * receive keyboard focus.
+     * For example, if a FAB in the fixed slot should receive keyboard focus before
+     * the main page content, set this property to `'before'`.
+     */
+    fixedSlotPlacement = 'after';
+    /**
+     * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
+     * If the content exceeds the bounds of ionContent, nothing will change.
+     * Note, this does not disable the system bounce on iOS. That is an OS level setting.
+     */
+    forceOverscroll;
+    /**
+     * If you want to enable the content scrolling in the X axis, set this property to `true`.
+     */
+    scrollX = false;
+    /**
+     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+     */
+    scrollY = true;
+    /**
+     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+     * and start listening from (ionScroll), set this property to `true`.
+     */
+    scrollEvents = false;
+    /**
+     * Emitted when the scroll has started. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScrollStart;
+    /**
+     * Emitted while scrolling. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScroll;
+    /**
+     * Emitted when the scroll has ended. This event is disabled by default.
+     * Set `scrollEvents` to `true` to enable.
+     */
+    ionScrollEnd;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -266,12 +296,6 @@ const Content = class {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
-        // Re-observe on reattach, since componentDidLoad only fires once.
-        this.setupFullscreenResizeObserver();
-    }
-    componentDidLoad() {
-        // The custom elements build assigns fullscreen after connectedCallback.
-        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -293,42 +317,6 @@ const Content = class {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
-        this.destroyFullscreenResizeObserver();
-    }
-    /**
-     * Header and footer sizes can change after load without a window resize
-     * firing, so the `resize` listener alone misses those changes.
-     *
-     * Popover content is excluded because `contain: none` lets its offsets drive
-     * the host's own height, which would feed back into the observer.
-     */
-    setupFullscreenResizeObserver() {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
-            this.destroyFullscreenResizeObserver();
-            return;
-        }
-        if (this.fullscreenResizeObserver !== undefined) {
-            return;
-        }
-        this.fullscreenResizeObserver = new ResizeObserver(() => {
-            // A hidden page reports a 0x0 box, which would zero the offsets. Same
-            // reasoning as the guard in onResize, minus its debounce so the
-            // correction lands in the next frame instead of 100ms later.
-            if (this.el.offsetParent === null) {
-                return;
-            }
-            this.resize();
-        });
-        this.fullscreenResizeObserver.observe(this.el);
-    }
-    destroyFullscreenResizeObserver() {
-        if (this.fullscreenResizeObserver !== undefined) {
-            this.fullscreenResizeObserver.disconnect();
-            this.fullscreenResizeObserver = undefined;
-        }
     }
     /**
      * Rotating certain devices can update
@@ -567,7 +555,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -576,27 +564,20 @@ 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: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', 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: '00c8fe7b9e73533c702273c9457d274195d54e98' })), 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 {
-        "fullscreen": [{
-                "fullscreenChanged": 0
-            }]
-    }; }
 };
 const getParentElement = (el) => {
-    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
+    if (el.parentNode?.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }
@@ -683,48 +664,27 @@ const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-o
 const Footer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.keyboardCtrl = null;
-        this.keyboardCtrlPromise = null;
-        this.keyboardVisible = false;
-        /**
-         * If `true`, the footer will be translucent.
-         * Only applies when the mode 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') {
-                return;
-            }
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
-            this.destroyCollapsibleFooter();
-            if (hasFade) {
-                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-                const contentEl = pageEl ? findIonContent(pageEl) : null;
-                if (!contentEl) {
-                    printIonContentErrorMsg(this.el);
-                    return;
-                }
-                this.setupFadeFooter(contentEl);
-            }
-        };
-        this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-            /**
-             * Handle fading of toolbars on scroll
-             */
-            this.contentScrollCallback = () => {
-                handleFooterFade(scrollEl, this.el);
-            };
-            scrollEl.addEventListener('scroll', this.contentScrollCallback);
-            handleFooterFade(scrollEl, this.el);
-        };
     }
+    scrollEl;
+    contentScrollCallback;
+    keyboardCtrl = null;
+    keyboardCtrlPromise = null;
+    keyboardVisible = false;
+    get el() { return getElement(this); }
+    /**
+     * Describes the scroll effect that will be applied to the footer.
+     * Only applies in iOS mode.
+     */
+    collapse;
+    /**
+     * If `true`, the footer will be translucent.
+     * Only applies when the mode 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.
+     */
+    translucent = false;
     componentDidLoad() {
         this.checkCollapsibleFooter();
     }
@@ -768,6 +728,35 @@ const Footer = class {
             this.keyboardCtrl = null;
         }
     }
+    checkCollapsibleFooter = () => {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
+            return;
+        }
+        const { collapse } = this;
+        const hasFade = collapse === 'fade';
+        this.destroyCollapsibleFooter();
+        if (hasFade) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (!contentEl) {
+                printIonContentErrorMsg(this.el);
+                return;
+            }
+            this.setupFadeFooter(contentEl);
+        }
+    };
+    setupFadeFooter = async (contentEl) => {
+        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+        /**
+         * Handle fading of toolbars on scroll
+         */
+        this.contentScrollCallback = () => {
+            handleFooterFade(scrollEl, this.el);
+        };
+        scrollEl.addEventListener('scroll', this.contentScrollCallback);
+        handleFooterFade(scrollEl, this.el);
+    };
     destroyCollapsibleFooter() {
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
@@ -778,7 +767,7 @@ const Footer = class {
         const { translucent, collapse } = this;
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+        const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
         return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
@@ -789,7 +778,6 @@ const Footer = class {
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
             } }, mode === 'ios' && translucent && h("div", { key: '2fa14f61661c47c661cecd696176728d6eafa74f', class: "footer-background" }), h("slot", { key: '8e63696e7c528d5c38201e546bf08135290d0945' })));
     }
-    get el() { return getElement(this); }
 };
 Footer.style = {
     ios: footerIosCss(),
@@ -1035,28 +1023,29 @@ const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-o
 const Header = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the header will be translucent.
-         * Only applies when the mode 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 header, the `fullscreen`
-         * attribute needs to be set on the content.
-         */
-        this.translucent = false;
-        this.setupFadeHeader = async (contentEl, condenseHeader) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-            /**
-             * Handle fading of toolbars on scroll
-             */
-            this.contentScrollCallback = () => {
-                handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-            };
-            scrollEl.addEventListener('scroll', this.contentScrollCallback);
-            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-        };
     }
+    scrollEl;
+    contentScrollCallback;
+    intersectionObserver;
+    collapsibleMainHeader;
+    inheritedAttributes = {};
+    get el() { return getElement(this); }
+    /**
+     * Describes the scroll effect that will be applied to the header.
+     * Only applies in iOS mode.
+     *
+     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+     */
+    collapse;
+    /**
+     * If `true`, the header will be translucent.
+     * Only applies when the mode 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 header, the `fullscreen`
+     * attribute needs to be set on the content.
+     */
+    translucent = false;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -1100,6 +1089,17 @@ const Header = class {
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
+    setupFadeHeader = async (contentEl, condenseHeader) => {
+        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+        /**
+         * Handle fading of toolbars on scroll
+         */
+        this.contentScrollCallback = () => {
+            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+        };
+        scrollEl.addEventListener('scroll', this.contentScrollCallback);
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+    };
     destroyCollapsibleHeader() {
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();
@@ -1171,16 +1171,15 @@ const Header = class {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+        return (h(Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: 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' })));
+            }, ...inheritedAttributes }, mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
-    get el() { return getElement(this); }
 };
 Header.style = {
     ios: headerIosCss(),
@@ -1195,22 +1194,47 @@ const RouterOutlet = class {
         this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
         this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
         this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
-        this.lockController = createLockController();
-        this.gestureOrAnimationInProgress = false;
-        /**
-         * The mode determines which platform styles to use.
-         */
-        this.mode = getIonMode(this);
-        /**
-         * If `true`, the router-outlet should animate the transition of components.
-         */
-        this.animated = true;
     }
+    lockController = createLockController();
+    activeEl;
+    // TODO(FW-2832): types
+    activeComponent;
+    activeParams;
+    gesture;
+    ani;
+    gestureOrAnimationInProgress = false;
+    get el() { return getElement(this); }
+    /**
+     * The mode determines which platform styles to use.
+     */
+    mode = getIonMode(this);
+    /** @internal */
+    delegate;
+    /**
+     * If `true`, the router-outlet should animate the transition of components.
+     */
+    animated = true;
+    /** This property allows to create custom transition using AnimationBuilder functions. */
+    animation;
+    /**
+     * If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.
+     * Defaults to `true` for `"ios"` mode and `false` for `"md"` mode.
+     */
+    swipeGesture;
+    swipeGestureChanged() {
+        this.updateGestureEnabled();
+    }
+    /** @internal */
+    swipeHandler;
     swipeHandlerChanged() {
-        if (this.gesture) {
-            this.gesture.enable(this.swipeHandler !== undefined);
-        }
+        this.updateGestureEnabled();
     }
+    /** @internal */
+    ionNavWillLoad;
+    /** @internal */
+    ionNavWillChange;
+    /** @internal */
+    ionNavDidChange;
     async connectedCallback() {
         const onStart = () => {
             this.gestureOrAnimationInProgress = true;
@@ -1218,7 +1242,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await import('./swipe-back-DQ1q5MgD.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-D6YSgAn7.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => this.ani?.progressStep(step), (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;
@@ -1249,11 +1273,21 @@ const RouterOutlet = class {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        this.swipeHandlerChanged();
+        if (this.swipeGesture === undefined) {
+            this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
+        }
+        else {
+            this.updateGestureEnabled();
+        }
     }
     componentWillLoad() {
         this.ionNavWillLoad.emit();
     }
+    updateGestureEnabled() {
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
+        }
+    }
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -1320,16 +1354,19 @@ const RouterOutlet = class {
         const { el, mode } = this;
         const animated = this.animated && config.getBoolean('animated', true);
         const animationBuilder = opts.animationBuilder || this.animation || config.get('navAnimation');
-        await transition(Object.assign(Object.assign({ mode,
+        await transition({
+            mode,
             animated,
             enteringEl,
-            leavingEl, baseEl: el,
+            leavingEl,
+            baseEl: el,
             /**
              * We need to wait for all Stencil components
              * to be ready only when using the lazy
              * loaded bundle.
              */
-            deepWait: hasLazyBuild(el), progressCallback: opts.progressAnimation
+            deepWait: hasLazyBuild(el),
+            progressCallback: opts.progressAnimation
                 ? (ani) => {
                     /**
                      * Because this progress callback is called asynchronously
@@ -1358,16 +1395,21 @@ const RouterOutlet = class {
                         this.ani = ani;
                     }
                 }
-                : undefined }, opts), { animationBuilder }));
+                : undefined,
+            ...opts,
+            animationBuilder,
+        });
         // emit nav changed event
         this.ionNavDidChange.emit();
         return true;
     }
     render() {
-        return h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
+        return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
+        "swipeGesture": [{
+                "swipeGestureChanged": 0
+            }],
         "swipeHandler": [{
                 "swipeHandlerChanged": 0
             }]
@@ -1384,6 +1426,22 @@ const ToolbarTitle = class {
         registerInstance(this, hostRef);
         this.ionStyle = createEvent(this, "ionStyle", 7);
     }
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The size of the toolbar title.
+     */
+    size;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
     sizeChanged() {
         this.emitStyle();
     }
@@ -1402,13 +1460,12 @@ const ToolbarTitle = class {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
+            }) }, h("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, h("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "size": [{
                 "sizeChanged": 0
@@ -1427,8 +1484,15 @@ const toolbarMdCss = () => `:host{--border-width:0;--border-style:solid;--opacit
 const Toolbar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.childrenStyles = new Map();
     }
+    childrenStyles = new Map();
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
         const firstButtons = buttons.find((button) => {
@@ -1473,12 +1537,14 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: 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" }))));
+        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: {
+                ...childStyles,
+                ...createColorClasses(this.color, {
+                    [mode]: true,
+                    'in-toolbar': hostContext('ion-toolbar', this.el),
+                }),
+            } }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
     }
-    get el() { return getElement(this); }
 };
 Toolbar.style = {
     ios: toolbarIosCss(),