@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/hardware-back-button.js

@@ -1,4 +1,115 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{w as t}from"./index9.js";import{c as e,a as n}from"./index4.js";const o=()=>e.get("experimentalCloseWatcher",!1)&&void 0!==t&&"CloseWatcher"in t,i=()=>{document.addEventListener("backbutton",(()=>{}))},r=()=>{const e=document;let i=!1;const r=()=>{if(i)return;let t=0,o=[];const r=new CustomEvent("ionBackButton",{bubbles:!1,detail:{register(e,n){o.push({priority:e,handler:n,id:t++})}}});e.dispatchEvent(r);const a=()=>{if(o.length>0){let t={priority:Number.MIN_SAFE_INTEGER,handler:()=>{},id:-1};o.forEach((e=>{e.priority>=t.priority&&(t=e)})),i=!0,o=o.filter((e=>e.id!==t.id)),(async t=>{try{if(null==t?void 0:t.handler){const e=t.handler(a);null!=e&&await e}}catch(t){n("[ion-app] - Exception in startHardwareBackButton:",t)}})(t).then((()=>i=!1))}};a()};if(o()){let e;const n=()=>{null==e||e.destroy(),e=new t.CloseWatcher,e.onclose=()=>{r(),n()}};n()}else e.addEventListener("backbutton",r)},a=100,c=99;export{c as MENU_BACK_BUTTON_PRIORITY,a as OVERLAY_BACK_BUTTON_PRIORITY,i as blockHardwareBackButton,o as shouldUseCloseWatcher,r as startHardwareBackButton}
+import { w as win } from './index9.js';
+import { c as config, a as printIonError } from './index4.js';
+
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
+/**
+ * When hardwareBackButton: false in config,
+ * we need to make sure we also block the default
+ * webview behavior. If we don't then it will be
+ * possible for users to navigate backward while
+ * an overlay is still open. Additionally, it will
+ * give the appearance that the hardwareBackButton
+ * config is not working as the page transition
+ * will still happen.
+ */
+const blockHardwareBackButton = () => {
+    document.addEventListener('backbutton', () => { }); // eslint-disable-line
+};
+const startHardwareBackButton = () => {
+    const doc = document;
+    let busy = false;
+    const backButtonCallback = () => {
+        if (busy) {
+            return;
+        }
+        let index = 0;
+        let handlers = [];
+        const ev = new CustomEvent('ionBackButton', {
+            bubbles: false,
+            detail: {
+                register(priority, handler) {
+                    handlers.push({ priority, handler, id: index++ });
+                },
+            },
+        });
+        doc.dispatchEvent(ev);
+        const executeAction = async (handlerRegister) => {
+            try {
+                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
+                    const result = handlerRegister.handler(processHandlers);
+                    if (result != null) {
+                        await result;
+                    }
+                }
+            }
+            catch (e) {
+                printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+            }
+        };
+        const processHandlers = () => {
+            if (handlers.length > 0) {
+                let selectedHandler = {
+                    priority: Number.MIN_SAFE_INTEGER,
+                    handler: () => undefined,
+                    id: -1,
+                };
+                handlers.forEach((handler) => {
+                    if (handler.priority >= selectedHandler.priority) {
+                        selectedHandler = handler;
+                    }
+                });
+                busy = true;
+                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
+                executeAction(selectedHandler).then(() => (busy = false));
+            }
+        };
+        processHandlers();
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shouldUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new win.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
+};
+const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
+
+export { MENU_BACK_BUTTON_PRIORITY, OVERLAY_BACK_BUTTON_PRIORITY, blockHardwareBackButton, shouldUseCloseWatcher, startHardwareBackButton };

package/components/header.js

@@ -1,4 +1,420 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{readTask as e,writeTask as o,proxyCustomElement as n,HTMLElement as t,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import{g as r,f as l,p as d}from"./index8.js";import{f as c,i as h}from"./helpers.js";import{h as p}from"./theme.js";import{b}from"./ionic-global.js";const u="none",f="banner",m=e=>{const o=document.querySelector(`${e}.ion-cloned-element`);if(null!==o)return o;const n=document.createElement(e);return n.classList.add("ion-cloned-element"),n.style.setProperty("display","none"),document.body.appendChild(n),n},x=e=>{if(!e)return;const o=e.querySelectorAll("ion-toolbar");return{el:e,toolbars:Array.from(o).map((e=>{const o=e.querySelector("ion-title");return{el:e,background:e.shadowRoot.querySelector(".toolbar-background"),ionTitleEl:o,innerTitleEl:o?o.shadowRoot.querySelector(".toolbar-title"):null,ionButtonsEl:Array.from(e.querySelectorAll("ion-buttons"))}}))}},y=(e,o)=>{"fade"!==e.collapse&&(void 0===o?e.style.removeProperty("--opacity-scale"):e.style.setProperty("--opacity-scale",o.toString()))},g=(e,o=!0)=>{const n=e.el,t=e.toolbars.map((e=>e.ionTitleEl));o?(n.setAttribute("role",f),n.classList.remove("header-collapse-condense-inactive"),t.forEach((e=>{e&&e.removeAttribute("aria-hidden")}))):(n.setAttribute("role",u),n.classList.add("header-collapse-condense-inactive"),t.forEach((e=>{e&&e.setAttribute("aria-hidden","true")})))},k=(n,t,i)=>{e((()=>{const e=n.scrollTop,a=t.clientHeight,s=i?i.clientHeight:0;if(null!==i&&e<s)return t.style.setProperty("--opacity-scale","0"),void n.style.setProperty("clip-path",`inset(${a}px 0px 0px 0px)`);const r=c(0,(e-s)/10,1);o((()=>{n.style.removeProperty("clip-path"),t.style.setProperty("--opacity-scale",r.toString())}))}))},v=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.inheritedAttributes={},this.translucent=!1,this.setupFadeHeader=async(e,o)=>{const n=this.scrollEl=await r(e);this.contentScrollCallback=()=>{k(this.scrollEl,this.el,o)},n.addEventListener("scroll",this.contentScrollCallback),k(this.scrollEl,this.el,o)}}componentWillLoad(){this.inheritedAttributes=h(this.el)}componentDidLoad(){this.checkCollapsibleHeader()}componentDidUpdate(){this.checkCollapsibleHeader()}disconnectedCallback(){this.destroyCollapsibleHeader()}async checkCollapsibleHeader(){if("ios"!==b(this))return;const{collapse:e}=this,n="condense"===e,t="fade"===e;if(this.destroyCollapsibleHeader(),n){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),n=e?l(e):null;o((()=>{m("ion-title").size="large",m("ion-back-button")})),await this.setupCondenseHeader(n,e)}else if(t){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),o=e?l(e):null;if(!o)return void d(this.el);const n=o.querySelector('ion-header[collapse="condense"]');await this.setupFadeHeader(o,n)}}destroyCollapsibleHeader(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=void 0),this.scrollEl&&this.contentScrollCallback&&(this.scrollEl.removeEventListener("scroll",this.contentScrollCallback),this.contentScrollCallback=void 0),this.collapsibleMainHeader&&(this.collapsibleMainHeader.classList.remove("header-collapse-main"),this.collapsibleMainHeader=void 0)}async setupCondenseHeader(n,t){if(!n||!t)return void d(this.el);if("undefined"==typeof IntersectionObserver)return;this.scrollEl=await r(n);const i=t.querySelectorAll("ion-header");if(this.collapsibleMainHeader=Array.from(i).find((e=>"condense"!==e.collapse)),!this.collapsibleMainHeader)return;const a=x(this.collapsibleMainHeader),s=x(this.el);a&&s&&(g(a,!1),y(a.el,0),this.intersectionObserver=new IntersectionObserver((e=>{((e,n,t,i)=>{o((()=>{const o=i.scrollTop;((e,o,n)=>{if(!e[0].isIntersecting)return;const t=e[0].intersectionRatio>.9||n<=0?0:100*(1-e[0].intersectionRatio)/75;y(o.el,1===t?void 0:t)})(e,n,o);const a=e[0],s=a.intersectionRect,r=s.width*s.height,l=0===r&&0==a.rootBounds.width*a.rootBounds.height,d=Math.abs(s.left-a.boundingClientRect.left),c=Math.abs(s.right-a.boundingClientRect.right);l||r>0&&(d>=5||c>=5)||(a.isIntersecting?(g(n,!1),g(t)):(0===s.x&&0===s.y||0!==s.width&&0!==s.height)&&o>0&&(g(n),g(t,!1),y(n.el)))}))})(e,a,s,this.scrollEl)}),{root:n,threshold:[.25,.3,.4,.5,.6,.7,.8,.9,1]}),this.intersectionObserver.observe(s.toolbars[s.toolbars.length-1].el),this.contentScrollCallback=()=>{((n,t,i)=>{e((()=>{const e=c(1,1+-n.scrollTop/500,1.1);null===i.querySelector("ion-refresher.refresher-native")&&o((()=>{((e=[],o=1,n=!1)=>{e.forEach((e=>{const t=e.ionTitleEl,i=e.innerTitleEl;t&&"large"===t.size&&(i.style.transition=n?"all 0.2s ease-in-out":"",i.style.transform=`scale3d(${o}, ${o}, 1)`)}))})(t.toolbars,e)}))}))})(this.scrollEl,s,n)},this.scrollEl.addEventListener("scroll",this.contentScrollCallback),o((()=>{void 0!==this.collapsibleMainHeader&&this.collapsibleMainHeader.classList.add("header-collapse-main")})))}render(){const{translucent:e,inheritedAttributes:o}=this,n=b(this),t=this.collapse||"none",s="condense"===t,r=((e,o,n)=>e||o&&"md"===n?u:f)(p("ion-menu",this.el),s,n);return i(a,Object.assign({key:"863c4568cd7b8c0ec55109f193bbbaed68a1346e",role:r,class:{[n]:!0,[`header-${n}`]:!0,"header-translucent":this.translucent,[`header-collapse-${t}`]:!0,[`header-translucent-${n}`]:this.translucent}},o),"ios"===n&&e&&i("div",{key:"25c3bdce328b0b35607d154c8b8374679313d881",class:"header-background"}),i("slot",{key:"b44fab0a9be7920b9650da26117c783e751e1702"}))}get el(){return this}static get style(){return{ios:"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}",md:"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}"}}},[292,"ion-header",{collapse:[1],translucent:[4]}]);function w(){"undefined"!=typeof customElements&&["ion-header"].forEach((e=>{"ion-header"===e&&(customElements.get(s(e))||customElements.define(s(e),v))}))}export{v as H,w as d}
+import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
+import { f as clamp, i as inheritAriaAttributes } from './helpers.js';
+import { h as hostContext } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const TRANSITION = 'all 0.2s ease-in-out';
+const ROLE_NONE = 'none';
+const ROLE_BANNER = 'banner';
+const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};
+const createHeaderIndex = (headerEl) => {
+    if (!headerEl) {
+        return;
+    }
+    const toolbars = headerEl.querySelectorAll('ion-toolbar');
+    return {
+        el: headerEl,
+        toolbars: Array.from(toolbars).map((toolbar) => {
+            const ionTitleEl = toolbar.querySelector('ion-title');
+            return {
+                el: toolbar,
+                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
+                ionTitleEl,
+                innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
+                ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')),
+            };
+        }),
+    };
+};
+const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
+        // Native refresher should not cause titles to scale
+        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
+        if (nativeRefresher === null) {
+            writeTask(() => {
+                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+            });
+        }
+    });
+};
+const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+    /**
+     * Fading in the backdrop opacity
+     * should happen after the large title
+     * has collapsed, so it is handled
+     * by handleHeaderFade()
+     */
+    if (headerEl.collapse === 'fade') {
+        return;
+    }
+    if (opacity === undefined) {
+        headerEl.style.removeProperty('--opacity-scale');
+    }
+    else {
+        headerEl.style.setProperty('--opacity-scale', opacity.toString());
+    }
+};
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
+    if (!ev[0].isIntersecting) {
+        return;
+    }
+    /**
+     * There is a bug in Safari where overflow scrolling on a non-body element
+     * does not always reset the scrollTop position to 0 when letting go. It will
+     * set to 1 once the rubber band effect has ended. This causes the background to
+     * appear slightly on certain app setups.
+     *
+     * Additionally, we check if user is rubber banding (scrolling is negative)
+     * as this can mean they are using pull to refresh. Once the refresher starts,
+     * the content is transformed which can cause the intersection observer to erroneously
+     * fire here as well.
+     */
+    const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+    setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
+};
+/**
+ * If toolbars are intersecting, hide the scrollable toolbar content
+ * and show the primary toolbar content. If the toolbars are not intersecting,
+ * hide the primary toolbar content and show the scrollable toolbar content
+ */
+const handleToolbarIntersection = (ev, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
+mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
+    writeTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
+        const event = ev[0];
+        const intersection = event.intersectionRect;
+        const intersectionArea = intersection.width * intersection.height;
+        const rootArea = event.rootBounds.width * event.rootBounds.height;
+        const isPageHidden = intersectionArea === 0 && rootArea === 0;
+        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
+        if (isPageHidden || isPageTransitioning) {
+            return;
+        }
+        if (event.isIntersecting) {
+            setHeaderActive(mainHeaderIndex, false);
+            setHeaderActive(scrollHeaderIndex);
+        }
+        else {
+            /**
+             * There is a bug with IntersectionObserver on Safari
+             * where `event.isIntersecting === false` when cancelling
+             * a swipe to go back gesture. Checking the intersection
+             * x, y, width, and height provides a workaround. This bug
+             * does not happen when using Safari + Web Animations,
+             * only Safari + CSS Animations.
+             */
+            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
+            if (hasValidIntersection && scrollTop > 0) {
+                setHeaderActive(mainHeaderIndex);
+                setHeaderActive(scrollHeaderIndex, false);
+                setToolbarBackgroundOpacity(mainHeaderIndex.el);
+            }
+        }
+    });
+};
+const setHeaderActive = (headerIndex, active = true) => {
+    const headerEl = headerIndex.el;
+    const toolbars = headerIndex.toolbars;
+    const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
+    if (active) {
+        headerEl.setAttribute('role', ROLE_BANNER);
+        headerEl.classList.remove('header-collapse-condense-inactive');
+        ionTitles.forEach((ionTitle) => {
+            if (ionTitle) {
+                ionTitle.removeAttribute('aria-hidden');
+            }
+        });
+    }
+    else {
+        /**
+         * There can only be one banner landmark per page.
+         * By default, all ion-headers have the banner role.
+         * This causes an accessibility issue when using a
+         * condensed header since there are two ion-headers
+         * on the page at once (active and inactive).
+         * To solve this, the role needs to be toggled
+         * based on which header is active.
+         */
+        headerEl.setAttribute('role', ROLE_NONE);
+        headerEl.classList.add('header-collapse-condense-inactive');
+        /**
+         * The small title should only be accessed by screen readers
+         * when the large title collapses into the small title due
+         * to scrolling.
+         *
+         * Originally, the header was given `aria-hidden="true"`
+         * but this caused issues with screen readers not being
+         * able to access any focusable elements within the header.
+         */
+        ionTitles.forEach((ionTitle) => {
+            if (ionTitle) {
+                ionTitle.setAttribute('aria-hidden', 'true');
+            }
+        });
+    }
+};
+const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
+    toolbars.forEach((toolbar) => {
+        const ionTitle = toolbar.ionTitleEl;
+        const titleDiv = toolbar.innerTitleEl;
+        if (!ionTitle || ionTitle.size !== 'large') {
+            return;
+        }
+        titleDiv.style.transition = transition ? TRANSITION : '';
+        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+    });
+};
+const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const baseElHeight = baseEl.clientHeight;
+        const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
+        /**
+         * If we are using fade header with a condense
+         * header, then the toolbar backgrounds should
+         * not begin to fade in until the condense
+         * header has fully collapsed.
+         *
+         * Additionally, the main content should not
+         * overflow out of the container until the
+         * condense header has fully collapsed. When
+         * using just the condense header the content
+         * should overflow out of the container.
+         */
+        if (condenseHeader !== null && scrollTop < fadeStart) {
+            baseEl.style.setProperty('--opacity-scale', '0');
+            scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
+            return;
+        }
+        const distanceToStart = scrollTop - fadeStart;
+        const fadeDuration = 10;
+        const scale = clamp(0, distanceToStart / fadeDuration, 1);
+        writeTask(() => {
+            scrollEl.style.removeProperty('clip-path');
+            baseEl.style.setProperty('--opacity-scale', scale.toString());
+        });
+    });
+};
+/**
+ * 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'.
+ */
+const getRoleType = (isInsideMenu, isCondensed, mode) => {
+    // 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 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 Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        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);
+        };
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    componentDidLoad() {
+        this.checkCollapsibleHeader();
+    }
+    componentDidUpdate() {
+        this.checkCollapsibleHeader();
+    }
+    disconnectedCallback() {
+        this.destroyCollapsibleHeader();
+    }
+    async checkCollapsibleHeader() {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
+            return;
+        }
+        const { collapse } = this;
+        const hasCondense = collapse === 'condense';
+        const hasFade = collapse === 'fade';
+        this.destroyCollapsibleHeader();
+        if (hasCondense) {
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            // 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);
+        }
+        else 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;
+            }
+            const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
+            await this.setupFadeHeader(contentEl, condenseHeader);
+        }
+    }
+    destroyCollapsibleHeader() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = undefined;
+        }
+        if (this.scrollEl && this.contentScrollCallback) {
+            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+            this.contentScrollCallback = undefined;
+        }
+        if (this.collapsibleMainHeader) {
+            this.collapsibleMainHeader.classList.remove('header-collapse-main');
+            this.collapsibleMainHeader = undefined;
+        }
+    }
+    async setupCondenseHeader(contentEl, pageEl) {
+        if (!contentEl || !pageEl) {
+            printIonContentErrorMsg(this.el);
+            return;
+        }
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.scrollEl = await getScrollElement(contentEl);
+        const headers = pageEl.querySelectorAll('ion-header');
+        this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+        if (!this.collapsibleMainHeader) {
+            return;
+        }
+        const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
+        const scrollHeaderIndex = createHeaderIndex(this.el);
+        if (!mainHeaderIndex || !scrollHeaderIndex) {
+            return;
+        }
+        setHeaderActive(mainHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
+        /**
+         * Handle interaction between toolbar collapse and
+         * showing/hiding content in the primary ion-header
+         * as well as progressively showing/hiding the main header
+         * border as the top-most toolbar collapses or expands.
+         */
+        const toolbarIntersection = (ev) => {
+            handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
+        };
+        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
+            root: contentEl,
+            threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+        });
+        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
+        /**
+         * Handle scaling of large iOS titles and
+         * showing/hiding border on last toolbar
+         * in primary header
+         */
+        this.contentScrollCallback = () => {
+            handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+        };
+        this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
+        writeTask(() => {
+            if (this.collapsibleMainHeader !== undefined) {
+                this.collapsibleMainHeader.classList.add('header-collapse-main');
+            }
+        });
+    }
+    render() {
+        const { translucent, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const collapse = this.collapse || 'none';
+        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: {
+                [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' })));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: headerIosCss,
+        md: headerMdCss
+    }; }
+}, [292, "ion-header", {
+        "collapse": [1],
+        "translucent": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Header);
+            }
+            break;
+    } });
+}
+
+export { Header as H, defineCustomElement as d };