@sparkle-learning/core 0.0.34 → 0.0.35

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host } from './index-9db08224.js';
+import { g as getIonMode } from './ionic-global-293e882b.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
 const SIZE_TO_MEDIA = {
-  'xs': '(min-width: 0px)',
-  'sm': '(min-width: 576px)',
-  'md': '(min-width: 768px)',
-  'lg': '(min-width: 992px)',
-  'xl': '(min-width: 1200px)',
+  xs: '(min-width: 0px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
 };
 // Check if the window matches the media query
 // at the breakpoint passed
@@ -27,7 +27,8 @@ const matchBreakpoint = (breakpoint) => {
 
 const colCss = ":host{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}}";
 
-const win = (typeof window !== 'undefined') ? window : undefined;
+const win = typeof window !== 'undefined' ? window : undefined;
+// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const Col = class {
@@ -64,17 +65,18 @@ const Col = class {
       return;
     }
     // If the size is set to auto then don't calculate a size
-    const colSize = (columns === 'auto')
+    const colSize = columns === 'auto'
       ? 'auto'
-      // If CSS supports variables we should use the grid columns var
-      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-        // Convert the columns to a percentage by dividing by the total number
-        // of columns (12) and then multiplying by 100
-        : ((columns / 12) * 100) + '%';
+      : // If CSS supports variables we should use the grid columns var
+        SUPPORTS_VARS
+          ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+          : // Convert the columns to a percentage by dividing by the total number
+            // of columns (12) and then multiplying by 100
+            (columns / 12) * 100 + '%';
     return {
-      'flex': `0 0 ${colSize}`,
-      'width': `${colSize}`,
-      'max-width': `${colSize}`
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      'max-width': `${colSize}`,
     };
   }
   // Called by push, pull, and offset since they use the same calculations
@@ -86,13 +88,15 @@ const Col = class {
     // If the number of columns passed are greater than 0 and less than
     // 12 we can position the column, else default to auto
     const amount = SUPPORTS_VARS
-      // If CSS supports variables we should use the grid columns var
-      ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-      // Convert the columns to a percentage by dividing by the total number
-      // of columns (12) and then multiplying by 100
-      : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto';
+      ? // If CSS supports variables we should use the grid columns var
+        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+      : // Convert the columns to a percentage by dividing by the total number
+        // of columns (12) and then multiplying by 100
+        columns > 0 && columns < 12
+          ? (columns / 12) * 100 + '%'
+          : 'auto';
     return {
-      [modifier]: amount
+      [modifier]: amount,
     };
   }
   calculateOffset(isRTL) {
@@ -108,7 +112,7 @@ const Col = class {
     const isRTL = document.dir === 'rtl';
     const mode = getIonMode(this);
     return (h(Host, { class: {
-        [mode]: true
+        [mode]: true,
       }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", null)));
   }
 };
@@ -128,7 +132,7 @@ const Grid = class {
     const mode = getIonMode(this);
     return (h(Host, { class: {
         [mode]: true,
-        'grid-fixed': this.fixed
+        'grid-fixed': this.fixed,
       } }, h("slot", null)));
   }
 };

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

@@ -1,10 +1,12 @@
-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, e as clamp, i as inheritAttributes } from './helpers-9d0930de.js';
+import { r as registerInstance, e as createEvent, j as readTask, f as forceUpdate, h, H as Host, i as getElement, w as writeTask } from './index-9db08224.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-293e882b.js';
+import { c as componentOnReady, m as clamp, i as inheritAriaAttributes } from './helpers-94a5855b.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
+import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index-c23a1826.js';
+import './index-dad75b83.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;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 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:pan-x pan-y pinch-zoom}@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) {
@@ -71,9 +73,7 @@ const Content = class {
   shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode(this);
-    return forceOverscroll === undefined
-      ? mode === 'ios' && isPlatform('ios')
-      : forceOverscroll;
+    return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
   }
   resize() {
     if (this.fullscreen) {
@@ -104,7 +104,7 @@ const Content = class {
     }
     if (!this.queued && this.scrollEvents) {
       this.queued = true;
-      readTask(ts => {
+      readTask((ts) => {
         this.queued = false;
         this.detail.event = ev;
         updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
@@ -126,7 +126,7 @@ const Content = class {
      * 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));
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
     }
     return Promise.resolve(this.scrollEl);
   }
@@ -179,20 +179,20 @@ const Content = class {
     }
     let resolve;
     let startTime = 0;
-    const promise = new Promise(r => resolve = r);
+    const promise = new Promise((r) => (resolve = r));
     const fromY = el.scrollTop;
     const fromX = el.scrollLeft;
     const deltaY = y != null ? y - fromY : 0;
     const deltaX = x != null ? x - fromX : 0;
     // scroll loop
     const step = (timeStamp) => {
-      const linearTime = Math.min(1, ((timeStamp - startTime) / duration)) - 1;
+      const linearTime = Math.min(1, (timeStamp - startTime) / duration) - 1;
       const easedT = Math.pow(linearTime, 3) + 1;
       if (deltaY !== 0) {
-        el.scrollTop = Math.floor((easedT * deltaY) + fromY);
+        el.scrollTop = Math.floor(easedT * deltaY + fromY);
       }
       if (deltaX !== 0) {
-        el.scrollLeft = Math.floor((easedT * deltaX) + fromX);
+        el.scrollLeft = Math.floor(easedT * deltaX + fromX);
       }
       if (easedT < 1) {
         // do not use DomController here
@@ -205,7 +205,7 @@ const Content = class {
       }
     };
     // chill out for a frame first
-    requestAnimationFrame(ts => {
+    requestAnimationFrame((ts) => {
       startTime = ts;
       step(ts);
     });
@@ -214,7 +214,7 @@ const Content = class {
   onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({
-      isScrolling: true
+      isScrolling: true,
     });
     if (this.watchDog) {
       clearInterval(this.watchDog);
@@ -232,7 +232,7 @@ const Content = class {
     if (this.isScrolling) {
       this.isScrolling = false;
       this.ionScrollEnd.emit({
-        isScrolling: false
+        isScrolling: false,
       });
     }
   }
@@ -247,8 +247,8 @@ const Content = class {
     return (h(Host, { class: createColorClasses(this.color, {
         [mode]: true,
         'content-sizing': hostContext('ion-popover', this.el),
-        'overscroll': forceOverscroll,
-        [`content-${rtl}`]: true
+        overscroll: forceOverscroll,
+        [`content-${rtl}`]: true,
       }), style: {
         '--offset-top': `${this.cTop}px`,
         '--offset-bottom': `${this.cBottom}px`,
@@ -256,17 +256,18 @@ const Content = class {
         'inner-scroll': true,
         'scroll-x': scrollX,
         'scroll-y': scrollY,
-        'overscroll': (scrollX || scrollY) && forceOverscroll
-      }, ref: (scrollEl) => this.scrollEl = scrollEl, onScroll: (this.scrollEvents) ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+        overscroll: (scrollX || scrollY) && forceOverscroll,
+      }, 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); }
 };
 const getParentElement = (el) => {
+  var _a;
   if (el.parentElement) {
     // normal element with a parent element
     return el.parentElement;
   }
-  if (el.parentNode && el.parentNode.host) {
+  if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
     // shadow dom's document fragment
     return el.parentNode.host;
   }
@@ -345,16 +346,16 @@ const createHeaderIndex = (headerEl) => {
         el: toolbar,
         background: toolbar.shadowRoot.querySelector('.toolbar-background'),
         ionTitleEl,
-        innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
-        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
+        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);
+    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) {
@@ -396,8 +397,8 @@ const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
    * 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);
+  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
@@ -450,13 +451,13 @@ const setHeaderActive = (headerIndex, active = true) => {
   }
 };
 const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
-  toolbars.forEach(toolbar => {
+  toolbars.forEach((toolbar) => {
     const ionTitle = toolbar.ionTitleEl;
     const titleDiv = toolbar.innerTitleEl;
     if (!ionTitle || ionTitle.size !== 'large') {
       return;
     }
-    titleDiv.style.transition = (transition) ? TRANSITION : '';
+    titleDiv.style.transition = transition ? TRANSITION : '';
     titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
   });
 };
@@ -464,7 +465,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
   readTask(() => {
     const scrollTop = scrollEl.scrollTop;
     const baseElHeight = baseEl.clientHeight;
-    const fadeStart = (condenseHeader) ? condenseHeader.clientHeight : 0;
+    const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
     /**
      * If we are using fade header with a condense
      * header, then the toolbar backgrounds should
@@ -477,14 +478,14 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
      * using just the condense header the content
      * should overflow out of the container.
      */
-    if ((condenseHeader !== null) && (scrollTop < fadeStart)) {
+    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);
+    const scale = clamp(0, distanceToStart / fadeDuration, 1);
     writeTask(() => {
       scrollEl.style.removeProperty('clip-path');
       baseEl.style.setProperty('--opacity-scale', scale.toString());
@@ -510,22 +511,19 @@ const Header = class {
      */
     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();
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
       /**
        * Handle fading of toolbars on scroll
        */
-      this.contentScrollCallback = () => { handleHeaderFade(this.scrollEl, this.el, condenseHeader); };
+      this.contentScrollCallback = () => {
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+      };
       scrollEl.addEventListener('scroll', this.contentScrollCallback);
       handleHeaderFade(this.scrollEl, this.el, condenseHeader);
     };
   }
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['role']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   componentDidLoad() {
     this.checkCollapsibleHeader();
@@ -547,7 +545,7 @@ const Header = class {
     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;
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
       // Cloned elements are always needed in iOS transition
       writeTask(() => {
         const title = cloneElement('ion-title');
@@ -558,8 +556,12 @@ const Header = class {
     }
     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;
+      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);
     }
   }
@@ -579,14 +581,13 @@ const Header = class {
   }
   async setupCondenseHeader(contentEl, pageEl) {
     if (!contentEl || !pageEl) {
-      console.error('ion-header requires a content to collapse, make sure there is an ion-content.');
+      printIonContentErrorMsg(this.el);
       return;
     }
     if (typeof IntersectionObserver === 'undefined') {
       return;
     }
-    await new Promise(resolve => componentOnReady(contentEl, resolve));
-    this.scrollEl = await contentEl.getScrollElement();
+    this.scrollEl = await getScrollElement(contentEl);
     const headers = pageEl.querySelectorAll('ion-header');
     this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
     if (!this.collapsibleMainHeader) {
@@ -605,15 +606,22 @@ const Header = class {
      * 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] });
+    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.contentScrollCallback = () => {
+      handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+    };
     this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
     writeTask(() => {
       if (this.collapsibleMainHeader !== undefined) {
@@ -634,8 +642,7 @@ const Header = class {
         [`header-translucent`]: this.translucent,
         [`header-collapse-${collapse}`]: true,
         [`header-translucent-${mode}`]: this.translucent,
-      } }, inheritedAttributes), mode === 'ios' && translucent &&
-      h("div", { class: "header-background" }), h("slot", null)));
+      } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
   }
   get el() { return getElement(this); }
 };