@amwaljs/checkout-button 0.3.1 → 0.3.2

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

@@ -1,21 +1,21 @@
-import { r as registerInstance, h, H as Host } from './index-93OyAGoo.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, h, H as Host } from './index-8cc94b11.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.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;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 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;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 Grid = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.fixed = false;
-    }
-    render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'a1c2ff77f97761c2bbcd869b2cc7b1558032b406', class: {
-                [mode]: true,
-                'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'cd25166436cf3a63a11ad436a9b9c5a607e72600' })));
-    }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fixed = false;
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: 'a1c2ff77f97761c2bbcd869b2cc7b1558032b406', class: {
+        [mode]: true,
+        'grid-fixed': this.fixed,
+      } }, h("slot", { key: 'cd25166436cf3a63a11ad436a9b9c5a607e72600' })));
+  }
 };
-Grid.style = gridCss();
+Grid.style = gridCss;
 
 export { Grid as ion_grid };

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

@@ -1,9 +1,9 @@
-import { a as readTask, w as writeTask, r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { g as getScrollElement, b as findIonContent, p as printIonContentErrorMsg } from './index-BMJhFU53.js';
-import { e as clamp, k as inheritAriaAttributes } from './helpers-C6kqtbmV.js';
-import { h as hostContext } from './theme-DiVJyqlX.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
-import './index-D8d_89Nl.js';
+import { f as readTask, w as writeTask, r as registerInstance, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index-5e663431.js';
+import { k as clamp, i as inheritAriaAttributes } from './helpers-f0dcbd72.js';
+import { h as hostContext } from './theme-35c700b7.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
+import './index-d9b41a43.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -184,155 +184,155 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     });
 };
 
-const headerIosCss = () => `ion-header{display:block;position:relative;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 (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{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: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{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 headerIosCss = "ion-header{display:block;position:relative;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 (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{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: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{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 headerMdCss = () => `ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{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{box-shadow:none}`;
+const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{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{box-shadow:none}";
 
 const Header = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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.translucent = false;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.translucent = false;
+  }
+  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;
     }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    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);
     }
-    componentDidLoad() {
-        this.checkCollapsibleHeader();
+    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);
     }
-    componentDidUpdate() {
-        this.checkCollapsibleHeader();
+  }
+  destroyCollapsibleHeader() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
     }
-    disconnectedCallback() {
-        this.destroyCollapsibleHeader();
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
     }
-    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);
-        }
+    if (this.collapsibleMainHeader) {
+      this.collapsibleMainHeader.classList.remove('header-collapse-main');
+      this.collapsibleMainHeader = undefined;
     }
-    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;
     }
-    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');
-            }
-        });
+    if (typeof IntersectionObserver === 'undefined') {
+      return;
     }
-    render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(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: '9fa0af97b605f9fe98b13361bc3d1289745c549f', 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: '1a780d2625302f2465718e304bdd3794c89c9845', class: "header-background" }), h("slot", { key: 'b2b8557b44be40c590bfcc362ac4350f9f8b889e' })));
+    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;
     }
-    get el() { return getElement(this); }
+    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';
+    // 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: '9fa0af97b605f9fe98b13361bc3d1289745c549f', 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: '1a780d2625302f2465718e304bdd3794c89c9845', class: "header-background" }), h("slot", { key: 'b2b8557b44be40c590bfcc362ac4350f9f8b889e' })));
+  }
+  get el() { return getElement(this); }
 };
 Header.style = {
-    ios: headerIosCss(),
-    md: headerMdCss()
+  ios: headerIosCss,
+  md: headerMdCss
 };
 
 export { Header as ion_header };

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

@@ -1,4 +1,4 @@
-import { j as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
+import { j as getAssetPath, r as registerInstance, h, H as Host, e as getElement } from './index-8cc94b11.js';
 
 let CACHED_MAP;
 const getIconMap = () => {
@@ -230,131 +230,121 @@ const getSvgContent = (url, sanitize) => {
   return req;
 };
 
-const iconCss = () => `:host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}`;
+const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
 
 const Icon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.iconName = null;
-        this.inheritedAttributes = {};
-        this.didLoadIcon = false;
-        this.svgContent = undefined;
-        this.isVisible = false;
-        this.mode = getIonMode();
-        this.color = undefined;
-        this.ios = undefined;
-        this.md = undefined;
-        this.flipRtl = undefined;
-        this.name = undefined;
-        this.src = undefined;
-        this.icon = undefined;
-        this.size = undefined;
-        this.lazy = false;
-        this.sanitize = true;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconName = null;
+    this.inheritedAttributes = {};
+    this.didLoadIcon = false;
+    this.svgContent = undefined;
+    this.isVisible = false;
+    this.mode = getIonMode();
+    this.color = undefined;
+    this.ios = undefined;
+    this.md = undefined;
+    this.flipRtl = undefined;
+    this.name = undefined;
+    this.src = undefined;
+    this.icon = undefined;
+    this.size = undefined;
+    this.lazy = false;
+    this.sanitize = true;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
+  connectedCallback() {
+    // purposely do not return the promise here because loading
+    // the svg file should not hold up loading the app
+    // only load the svg if it's visible
+    this.waitUntilVisible(this.el, '50px', () => {
+      this.isVisible = true;
+      this.loadIcon();
+    });
+  }
+  componentDidLoad() {
+    /**
+     * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
+     * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
+     * This modification pertains to the usage of Angular's binding syntax:
+     * `<ion-icon [name]="myIconName"></ion-icon>`
+     */
+    if (!this.didLoadIcon) {
+      this.loadIcon();
     }
-    connectedCallback() {
-        // purposely do not return the promise here because loading
-        // the svg file should not hold up loading the app
-        // only load the svg if it's visible
-        this.waitUntilVisible(this.el, '50px', () => {
-            this.isVisible = true;
-            this.loadIcon();
-        });
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
     }
-    componentDidLoad() {
-        /**
-         * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
-         * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
-         * This modification pertains to the usage of Angular's binding syntax:
-         * `<ion-icon [name]="myIconName"></ion-icon>`
-         */
-        if (!this.didLoadIcon) {
-            this.loadIcon();
+  }
+  waitUntilVisible(el, rootMargin, cb) {
+    if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          cb();
         }
+      }, { rootMargin }));
+      io.observe(el);
     }
-    disconnectedCallback() {
-        if (this.io) {
-            this.io.disconnect();
-            this.io = undefined;
-        }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
     }
-    waitUntilVisible(el, rootMargin, cb) {
-        if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
-            const io = (this.io = new window.IntersectionObserver((data) => {
-                if (data[0].isIntersecting) {
-                    io.disconnect();
-                    this.io = undefined;
-                    cb();
-                }
-            }, { rootMargin }));
-            io.observe(el);
+  }
+  loadIcon() {
+    if (this.isVisible) {
+      const url = getUrl(this);
+      if (url) {
+        if (ioniconContent.has(url)) {
+          // sync if it's already loaded
+          this.svgContent = ioniconContent.get(url);
         }
         else {
-            // browser doesn't support IntersectionObserver
-            // so just fallback to always show it
-            cb();
+          // async if it hasn't been loaded
+          getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
         }
+        this.didLoadIcon = true;
+      }
     }
-    loadIcon() {
-        if (this.isVisible) {
-            const url = getUrl(this);
-            if (url) {
-                if (ioniconContent.has(url)) {
-                    // sync if it's already loaded
-                    this.svgContent = ioniconContent.get(url);
-                }
-                else {
-                    // async if it hasn't been loaded
-                    getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
-                }
-                this.didLoadIcon = true;
-            }
-        }
-        this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
-    }
-    render() {
-        const { flipRtl, iconName, inheritedAttributes, el } = this;
-        const mode = this.mode || 'md';
-        // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
-        const shouldAutoFlip = iconName
-            ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
-            : false;
-        // if shouldBeFlippable is true, the icon should change direction when `dir` changes
-        const shouldBeFlippable = flipRtl || shouldAutoFlip;
-        return (h(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
-    }
-    static get assetsDirs() { return ["svg"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "name": [{
-                "loadIcon": 0
-            }],
-        "src": [{
-                "loadIcon": 0
-            }],
-        "icon": [{
-                "loadIcon": 0
-            }],
-        "ios": [{
-                "loadIcon": 0
-            }],
-        "md": [{
-                "loadIcon": 0
-            }]
-    }; }
+    this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+  }
+  render() {
+    const { flipRtl, iconName, inheritedAttributes, el } = this;
+    const mode = this.mode || 'md';
+    // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
+    const shouldAutoFlip = iconName
+      ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
+      : false;
+    // if shouldBeFlippable is true, the icon should change direction when `dir` changes
+    const shouldBeFlippable = flipRtl || shouldAutoFlip;
+    return (h(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"],
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"],
+    "ios": ["loadIcon"],
+    "md": ["loadIcon"]
+  }; }
 };
 const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
 const createColorClasses = (color) => {
-    return color
-        ? {
-            'ion-color': true,
-            [`ion-color-${color}`]: true,
-        }
-        : null;
+  return color
+    ? {
+      'ion-color': true,
+      [`ion-color-${color}`]: true,
+    }
+    : null;
 };
-Icon.style = iconCss();
+Icon.style = iconCss;
 
 export { Icon as ion_icon };