@sparkle-learning/core 0.0.29 → 0.0.32

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

@@ -1,9 +1,10 @@
-import { r as registerInstance, e as createEvent, i as readTask, f as forceUpdate, h, H as Host, d as getElement, w as writeTask } from './index-55fc9f5e.js';
-import { g as getIonMode, a as isPlatform, c as config } from './ionic-global-1f9287cc.js';
-import { j as clamp } from './helpers-e7f66b2b.js';
-import { c as createColorClasses, h as hostContext } from './theme-12606872.js';
+import { r as registerInstance, i as createEvent, j as readTask, f as forceUpdate, h, H as Host, e as getElement, w as writeTask } from './index-5568e3fa.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-0939c477.js';
+import { c as componentOnReady, l as clamp, i as inheritAttributes } from './helpers-39367fe1.js';
+import { i as isRTL } from './dir-03012648.js';
+import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{touch-action:pan-y;overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{touch-action:pan-x;overflow-x:var(--overflow);overscroll-behavior-x:contain}.scroll-x.scroll-y{touch-action:auto}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){contain:none}:host(.content-sizing) .inner-scroll{position:relative}.transition-effect{display:none;position:absolute;left:-100%;width:100%;height:100vh;opacity:0;pointer-events:none}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;right:0;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}::slotted([slot=fixed]){position:absolute}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden;touch-action:manipulation}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
 
 const Content = class {
   constructor(hostRef) {
@@ -16,6 +17,7 @@ const Content = class {
     this.queued = false;
     this.cTop = -1;
     this.cBottom = -1;
+    this.isMainContent = true;
     // Detail is used in a hot loop in the scroll event, by allocating it here
     // V8 will be able to inline any read/write to it since it's a monomorphic class.
     // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -57,18 +59,15 @@ const Content = class {
      */
     this.scrollEvents = false;
   }
+  connectedCallback() {
+    this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+  }
   disconnectedCallback() {
     this.onScrollEnd();
   }
   onAppLoad() {
     this.resize();
   }
-  onClick(ev) {
-    if (this.isScrolling) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-  }
   shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode(this);
@@ -121,7 +120,14 @@ const Content = class {
    * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
    * and `scrollToPoint()` to scroll the content into a certain point.
    */
-  getScrollElement() {
+  async getScrollElement() {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.scrollEl) {
+      await new Promise(resolve => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.scrollEl);
   }
   /**
@@ -137,8 +143,9 @@ const Content = class {
    *
    * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
    */
-  scrollToBottom(duration = 0) {
-    const y = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
+  async scrollToBottom(duration = 0) {
+    const scrollEl = await this.getScrollElement();
+    const y = scrollEl.scrollHeight - scrollEl.clientHeight;
     return this.scrollToPoint(undefined, y, duration);
   }
   /**
@@ -148,8 +155,9 @@ const Content = class {
    * @param y The amount to scroll by on the vertical axis.
    * @param duration The amount of time to take scrolling by that amount.
    */
-  scrollByPoint(x, y, duration) {
-    return this.scrollToPoint(x + this.scrollEl.scrollLeft, y + this.scrollEl.scrollTop, duration);
+  async scrollByPoint(x, y, duration) {
+    const scrollEl = await this.getScrollElement();
+    return this.scrollToPoint(x + scrollEl.scrollLeft, y + scrollEl.scrollTop, duration);
   }
   /**
    * Scroll to a specified X/Y location in the component.
@@ -159,7 +167,7 @@ const Content = class {
    * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
    */
   async scrollToPoint(x, y, duration = 0) {
-    const el = this.scrollEl;
+    const el = await this.getScrollElement();
     if (duration < 32) {
       if (y != null) {
         el.scrollTop = y;
@@ -229,24 +237,27 @@ const Content = class {
     }
   }
   render() {
-    const { scrollX, scrollY } = this;
+    const { isMainContent, scrollX, scrollY, el } = this;
+    const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
-    const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true));
+    const transitionShadow = mode === 'ios';
+    const TagType = isMainContent ? 'main' : 'div';
     this.resize();
     return (h(Host, { class: createColorClasses(this.color, {
         [mode]: true,
         'content-sizing': hostContext('ion-popover', this.el),
         'overscroll': forceOverscroll,
+        [`content-${rtl}`]: true
       }), style: {
         '--offset-top': `${this.cTop}px`,
         '--offset-bottom': `${this.cBottom}px`,
-      } }, h("div", { id: "background-content", part: "background" }), h("main", { class: {
+      } }, h("div", { id: "background-content", part: "background" }), h(TagType, { class: {
         'inner-scroll': true,
         'scroll-x': scrollX,
         'scroll-y': scrollY,
         'overscroll': (scrollX || scrollY) && forceOverscroll
-      }, ref: el => this.scrollEl = el, onScroll: (this.scrollEvents) ? ev => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+      }, ref: (scrollEl) => this.scrollEl = scrollEl, onScroll: (this.scrollEvents) ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
   }
   get el() { return getElement(this); }
 };
@@ -266,7 +277,12 @@ const getPageElement = (el) => {
   if (tabs) {
     return tabs;
   }
-  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+  /**
+   * If we're in a popover, we need to use its wrapper so we can account for space
+   * between the popover and the edges of the screen. But if the popover contains
+   * its own page element, we should use that instead.
+   */
+  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
   if (page) {
     return page;
   }
@@ -301,6 +317,9 @@ const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
 };
 Content.style = contentCss;
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const TRANSITION = 'all 0.2s ease-in-out';
 const cloneElement = (tagName) => {
   const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
@@ -345,15 +364,24 @@ const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
     }
   });
 };
-const setToolbarBackgroundOpacity = (toolbar, opacity) => {
+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) {
-    toolbar.background.style.removeProperty('--opacity');
+    headerEl.style.removeProperty('--opacity-scale');
   }
   else {
-    toolbar.background.style.setProperty('--opacity', opacity.toString());
+    headerEl.style.setProperty('--opacity-scale', opacity.toString());
   }
 };
-const handleToolbarBorderIntersection = (ev, mainHeaderIndex) => {
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
   if (!ev[0].isIntersecting) {
     return;
   }
@@ -362,20 +390,24 @@ const handleToolbarBorderIntersection = (ev, mainHeaderIndex) => {
    * 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) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-  mainHeaderIndex.toolbars.forEach(toolbar => {
-    setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);
-  });
+  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, mainHeaderIndex, scrollHeaderIndex) => {
+const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
   writeTask(() => {
-    handleToolbarBorderIntersection(ev, mainHeaderIndex);
+    const scrollTop = scrollEl.scrollTop;
+    handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
     const event = ev[0];
     const intersection = event.intersectionRect;
     const intersectionArea = intersection.width * intersection.height;
@@ -401,10 +433,10 @@ const handleToolbarIntersection = (ev, mainHeaderIndex, scrollHeaderIndex) => {
        * only Safari + CSS Animations.
        */
       const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
-      if (hasValidIntersection) {
+      if (hasValidIntersection && scrollTop > 0) {
         setHeaderActive(mainHeaderIndex);
         setHeaderActive(scrollHeaderIndex, false);
-        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
+        setToolbarBackgroundOpacity(mainHeaderIndex.el);
       }
     }
   });
@@ -428,15 +460,46 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
     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 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-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:7px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.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}";
+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:7px;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{height:48px;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}";
 
 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::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:\"\"}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}";
 
 const Header = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.collapsibleHeaderInitialized = false;
+    this.inheritedAttributes = {};
     /**
      * If `true`, the header will be translucent.
      * Only applies when the mode is `"ios"` and the device supports
@@ -446,24 +509,43 @@ const Header = class {
      * attribute needs to be set on the content.
      */
     this.translucent = false;
+    this.setupFadeHeader = async (contentEl, condenseHeader) => {
+      if (!contentEl) {
+        console.error('ion-header requires a content to collapse. Make sure there is an ion-content.');
+        return;
+      }
+      await new Promise(resolve => componentOnReady(contentEl, resolve));
+      const scrollEl = this.scrollEl = await contentEl.getScrollElement();
+      /**
+       * 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);
+    };
   }
-  async componentDidLoad() {
-    await this.checkCollapsibleHeader();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['role']);
   }
-  async componentDidUpdate() {
-    await this.checkCollapsibleHeader();
+  componentDidLoad() {
+    this.checkCollapsibleHeader();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleHeader();
   }
   disconnectedCallback() {
     this.destroyCollapsibleHeader();
   }
   async checkCollapsibleHeader() {
-    // Determine if the header can collapse
-    const hasCollapse = this.collapse === 'condense';
-    const canCollapse = (hasCollapse && getIonMode(this) === 'ios') ? hasCollapse : false;
-    if (!canCollapse && this.collapsibleHeaderInitialized) {
-      this.destroyCollapsibleHeader();
+    const mode = getIonMode(this);
+    if (mode !== 'ios') {
+      return;
     }
-    else if (canCollapse && !this.collapsibleHeaderInitialized) {
+    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) ? pageEl.querySelector('ion-content') : null;
       // Cloned elements are always needed in iOS transition
@@ -472,7 +554,13 @@ const Header = class {
         title.size = 'large';
         cloneElement('ion-back-button');
       });
-      await this.setupCollapsibleHeader(contentEl, pageEl);
+      await this.setupCondenseHeader(contentEl, pageEl);
+    }
+    else if (hasFade) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
+      const condenseHeader = (contentEl) ? contentEl.querySelector('ion-header[collapse="condense"]') : null;
+      await this.setupFadeHeader(contentEl, condenseHeader);
     }
   }
   destroyCollapsibleHeader() {
@@ -489,7 +577,7 @@ const Header = class {
       this.collapsibleMainHeader = undefined;
     }
   }
-  async setupCollapsibleHeader(contentEl, pageEl) {
+  async setupCondenseHeader(contentEl, pageEl) {
     if (!contentEl || !pageEl) {
       console.error('ion-header requires a content to collapse, make sure there is an ion-content.');
       return;
@@ -497,6 +585,7 @@ const Header = class {
     if (typeof IntersectionObserver === 'undefined') {
       return;
     }
+    await new Promise(resolve => componentOnReady(contentEl, resolve));
     this.scrollEl = await contentEl.getScrollElement();
     const headers = pageEl.querySelectorAll('ion-header');
     this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
@@ -509,16 +598,14 @@ const Header = class {
       return;
     }
     setHeaderActive(mainHeaderIndex, false);
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-      setToolbarBackgroundOpacity(toolbar, 0);
-    });
+    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); };
+    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);
     /**
@@ -533,20 +620,21 @@ const Header = class {
         this.collapsibleMainHeader.classList.add('header-collapse-main');
       }
     });
-    this.collapsibleHeaderInitialized = true;
   }
   render() {
-    const { translucent } = this;
+    const { translucent, inheritedAttributes } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
-    return (h(Host, { role: "banner", class: {
+    // 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({ 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,
-      } }, mode === 'ios' && translucent &&
+      } }, inheritedAttributes), mode === 'ios' && translucent &&
       h("div", { class: "header-background" }), h("slot", null)));
   }
   get el() { return getElement(this); }