@ionic/core 8.3.4-dev.11730140347.1a5a7bee → 8.3.4-dev.11730315987.18af6259

package/components/ion-footer.js

@@ -2,10 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index6.js';
+import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
 import { c as createKeyboardController } from './keyboard-controller.js';
-import { c as config } from './config2.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 import { k as clamp } from './helpers.js';
 
 const handleFooterFade = (scrollEl, baseEl) => {
@@ -37,10 +36,7 @@ const handleFooterFade = (scrollEl, baseEl) => {
     });
 };
 
-const ionicFooterMdCss = "ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
-const IonFooterIonicStyle0 = ionicFooterMdCss;
-
-const footerIosCss = "ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}";
+const 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 IonFooterIosStyle0 = footerIosCss;
 
 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}";
@@ -52,16 +48,15 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         this.__registerHost();
         this.keyboardCtrl = null;
         this.checkCollapsibleFooter = () => {
-            const theme = getIonTheme(this);
-            if (theme !== 'ios') {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
                 return;
             }
             const { collapse } = this;
             const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
             if (hasFade) {
-                const appRootSelector = config.get('appRootSelector', 'ion-app');
-                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
                 const contentEl = pageEl ? findIonContent(pageEl) : null;
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
@@ -117,22 +112,21 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     }
     render() {
         const { translucent, collapse } = this;
-        const theme = getIonTheme(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');
-        return (h(Host, { key: '4d217c3986708145ae20c4702c0a6343c2300530', role: "contentinfo", class: {
-                [theme]: true,
+        return (h(Host, { key: 'ddc228f1a1e7fa4f707dccf74db2490ca3241137', role: "contentinfo", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`footer-${theme}`]: true,
+                [`footer-${mode}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${theme}`]: translucent,
+                [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: 'c17c1cc7f073186594604dbf366d7a1c31f7cb0f', class: "footer-background" }), h("slot", { key: '043d2fea09805fed312774970ef353eca579710a' })));
+            } }, mode === 'ios' && translucent && h("div", { key: 'e16ed4963ff94e06de77eb8038201820af73937c', class: "footer-background" }), h("slot", { key: 'f186934febf85d37133d9351a96c1a64b0a4b203' })));
     }
     get el() { return this; }
     static get style() { return {
-        ionic: IonFooterIonicStyle0,
         ios: IonFooterIosStyle0,
         md: IonFooterMdStyle0
     }; }

package/components/ion-grid.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const gridCss = ":host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
 const IonGridStyle0 = gridCss;
@@ -15,11 +15,11 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
         this.fixed = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'af14461caa863f0731d25021ac70bb760536cb42', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
+                [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '1abc7d0df9b7e0931c01d4ac35f9d256cf68dae4' })));
+            } }, h("slot", { key: 'c781fff853b093d8f44bdb7943bbc4f17c903803' })));
     }
     static get style() { return IonGridStyle0; }
 }, [1, "ion-grid", {

package/components/ion-header.js

@@ -1,366 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index6.js';
-import { k as clamp, i as inheritAriaAttributes } from './helpers.js';
-import { h as hostContext } from './theme.js';
-import { c as config } from './config2.js';
-import { c as getIonTheme } from './ionic-global.js';
-
-const TRANSITION = 'all 0.2s ease-in-out';
-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;
-    if (active) {
-        headerEl.classList.remove('header-collapse-condense-inactive');
-        headerEl.removeAttribute('aria-hidden');
-    }
-    else {
-        headerEl.classList.add('header-collapse-condense-inactive');
-        headerEl.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());
-        });
-    });
-};
-
-const headerIonicCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{-webkit-box-shadow:var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));z-index:10}ion-header.header-divider{border-bottom:var(--ion-border-size-025, 1px) var(--ion-border-style-solid, solid) var(--ion-primitives-neutral-300, #cfcfcf)}ion-toolbar+ion-toolbar{--padding-start:var(--ion-space-400, 16px);--padding-end:var(--ion-space-400, 16px)}";
-const IonHeaderIonicStyle0 = headerIonicCss;
-
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-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{--background:var(--ion-background-color, #fff);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-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 IonHeaderIosStyle0 = headerIosCss;
-
-const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
-const IonHeaderMdStyle0 = headerMdCss;
-
-const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.inheritedAttributes = {};
-        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);
-        };
-        this.collapse = undefined;
-        this.divider = false;
-        this.translucent = false;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
-    }
-    componentDidLoad() {
-        this.checkCollapsibleHeader();
-    }
-    componentDidUpdate() {
-        this.checkCollapsibleHeader();
-    }
-    disconnectedCallback() {
-        this.destroyCollapsibleHeader();
-    }
-    async checkCollapsibleHeader() {
-        const theme = getIonTheme(this);
-        if (theme !== 'ios') {
-            return;
-        }
-        const { collapse } = this;
-        const hasCondense = collapse === 'condense';
-        const hasFade = collapse === 'fade';
-        this.destroyCollapsibleHeader();
-        const appRootSelector = config.get('appRootSelector', 'ion-app');
-        if (hasCondense) {
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            // Cloned elements are always needed in iOS transition
-            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(`${appRootSelector},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, divider } = this;
-        const theme = getIonTheme(this);
-        const collapse = this.collapse || 'none';
-        // banner role must be at top level, so remove role if inside a menu
-        const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'acfb36bd8441f9add0e2b13f0f00cb0dbff1997e', role: roleType, class: {
-                [theme]: true,
-                // Used internally for styling
-                [`header-${theme}`]: true,
-                [`header-translucent`]: this.translucent,
-                [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${theme}`]: this.translucent,
-                ['header-divider']: divider,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '724237987614340e620c7247ad05d07aad5f21ab', class: "header-background" }), h("slot", { key: '27756e7e66029d34a83705bde894537c6895049f' })));
-    }
-    get el() { return this; }
-    static get style() { return {
-        ionic: IonHeaderIonicStyle0,
-        ios: IonHeaderIosStyle0,
-        md: IonHeaderMdStyle0
-    }; }
-}, [36, "ion-header", {
-        "collapse": [1],
-        "divider": [4],
-        "translucent": [4]
-    }]);
-function defineCustomElement$1() {
-    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;
-    } });
-}
+import { H as Header, d as defineCustomElement$1 } from './header.js';
 
 const IonHeader = Header;
 const defineCustomElement = defineCustomElement$1;

package/components/ion-img.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as inheritAttributes } from './helpers.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
 const IonImgStyle0 = imgCss;
@@ -78,10 +78,7 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '50b0d4416440b0f33788b176392257d192a804dd', class: {
-                [theme]: true,
-            } }, h("img", { key: '5658e3d8b7333a49cd864ac69e6ae2b0036c134d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode(this) }, h("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-infinite-scroll-content.js

@@ -3,13 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
-import { c as config } from './config2.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const ionicInfiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-const IonInfiniteScrollContentIonicStyle0 = ionicInfiniteScrollContentMdCss;
-
 const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
 const IonInfiniteScrollContentIosStyle0 = infiniteScrollContentIosCss;
 
@@ -26,8 +22,8 @@ const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScr
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const theme = getIonTheme(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -38,15 +34,14 @@ const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScr
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '5e07828d6779d069bcb8ad2fb30abd794dda6382', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '3b4860d1c460b48df8c088b1d802470b1aece653', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '02cc45daab301bdec1fa8cadba665446b00efc65', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '6a057d0ec87957c72df7f4566b0b5ce8114cced3', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, h("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
-        ionic: IonInfiniteScrollContentIonicStyle0,
         ios: IonInfiniteScrollContentIosStyle0,
         md: IonInfiniteScrollContentMdStyle0
     }; }

package/components/ion-infinite-scroll.js

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, readTask, h, Host } from '@stencil/core/internal/client';
-import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index6.js';
-import { c as getIonTheme } from './ionic-global.js';
+import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const infiniteScrollCss = "ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}";
 const IonInfiniteScrollStyle0 = infiniteScrollCss;
@@ -172,10 +172,10 @@ const InfiniteScroll = /*@__PURE__*/ proxyCustomElement(class InfiniteScroll ext
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '510d34ac956ef88ebe5ec6ea658391f18ae77113', class: {
-                [theme]: true,
+        return (h(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
+                [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));