@pod-os/elements 0.6.1-bea440b.0 → 0.7.1-2196a40.0

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

@@ -1,48 +1,54 @@
-import { w as writeTask, r as registerInstance, c as createEvent, d as readTask, h, a as getElement, H as Host } from './index-e4deec27.js';
-import { a as isPlatform, g as getIonMode } from './ionic-global-2e28f7c7.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-108b8579.js';
-import { a as componentOnReady, c as clamp, g as getElementRoot, r as raf } from './helpers-44e3bd9f.js';
-import { c as hapticImpact } from './haptic-c424e670.js';
-import { c as createAnimation } from './animation-fe6ed422.js';
+import { w as writeTask, r as registerInstance, d as createEvent, e as readTask, h, c as getElement, H as Host } from './index-cb938ffb.js';
+import { a as isPlatform, g as getIonMode } from './ionic-global-6cd57191.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-538b6253.js';
+import { I as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, b as ION_CONTENT_CLASS_SELECTOR, g as getScrollElement } from './index-ebf7f059.js';
+import { t as transitionEndAsync, c as componentOnReady, b as clamp, g as getElementRoot, r as raf } from './helpers-aeff219b.js';
+import { h as hapticImpact } from './haptic-e7d5ef4d.js';
+import { c as createAnimation } from './animation-801a007a.js';
+import './index-1f3d8582.js';
+import './index-0dbaca1a.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const getRefresherAnimationType = (contentEl) => {
   const previousSibling = contentEl.previousElementSibling;
   const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
   return hasHeader ? 'translate' : 'scale';
 };
 const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
-  return type === 'scale' ? createScaleAnimation(pullingSpinner, refresherEl) : createTranslateAnimation(pullingSpinner, refresherEl);
+  return type === 'scale'
+    ? createScaleAnimation(pullingSpinner, refresherEl)
+    : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
   const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
-  const arrow = (arrowContainer) ? arrowContainer.querySelector('ion-icon') : null;
-  const baseAnimation = createAnimation()
-    .duration(1000)
-    .easing('ease-out');
+  const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
+  const baseAnimation = createAnimation().duration(1000).easing('ease-out');
   const spinnerArrowContainerAnimation = createAnimation()
     .addElement(spinnerArrowContainer)
     .keyframes([
     { offset: 0, opacity: '0.3' },
     { offset: 0.45, opacity: '0.3' },
     { offset: 0.55, opacity: '1' },
-    { offset: 1, opacity: '1' }
+    { offset: 1, opacity: '1' },
   ]);
   const circleInnerAnimation = createAnimation()
     .addElement(circle)
     .keyframes([
     { offset: 0, strokeDasharray: '1px, 200px' },
-    { offset: 0.20, strokeDasharray: '1px, 200px' },
+    { offset: 0.2, strokeDasharray: '1px, 200px' },
     { offset: 0.55, strokeDasharray: '100px, 200px' },
-    { offset: 1, strokeDasharray: '100px, 200px' }
+    { offset: 1, strokeDasharray: '100px, 200px' },
   ]);
   const circleOuterAnimation = createAnimation()
     .addElement(spinner)
     .keyframes([
     { offset: 0, transform: 'rotate(-90deg)' },
-    { offset: 1, transform: 'rotate(210deg)' }
+    { offset: 1, transform: 'rotate(210deg)' },
   ]);
   /**
    * Only add arrow animation if present
@@ -54,17 +60,17 @@ const createBaseAnimation = (pullingRefresherIcon) => {
       .addElement(arrowContainer)
       .keyframes([
       { offset: 0, transform: 'rotate(0deg)' },
-      { offset: 0.30, transform: 'rotate(0deg)' },
+      { offset: 0.3, transform: 'rotate(0deg)' },
       { offset: 0.55, transform: 'rotate(280deg)' },
-      { offset: 1, transform: 'rotate(400deg)' }
+      { offset: 1, transform: 'rotate(400deg)' },
     ]);
     const arrowAnimation = createAnimation()
       .addElement(arrow)
       .keyframes([
       { offset: 0, transform: 'translateX(2px) scale(0)' },
-      { offset: 0.30, transform: 'translateX(2px) scale(0)' },
+      { offset: 0.3, transform: 'translateX(2px) scale(0)' },
       { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
-      { offset: 1, transform: 'translateX(-1.5px) scale(1)' }
+      { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
     ]);
     baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
   }
@@ -85,7 +91,7 @@ const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
     .addElement(pullingRefresherIcon)
     .keyframes([
     { offset: 0, transform: `scale(0) translateY(-${height}px)` },
-    { offset: 1, transform: 'scale(1) translateY(100px)' }
+    { offset: 1, transform: 'scale(1) translateY(100px)' },
   ]);
   return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
 };
@@ -104,7 +110,7 @@ const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
     .addElement(pullingRefresherIcon)
     .keyframes([
     { offset: 0, transform: `translateY(-${height}px)` },
-    { offset: 1, transform: 'translateY(100px)' }
+    { offset: 1, transform: 'translateY(100px)' },
   ]);
   return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
 };
@@ -119,26 +125,38 @@ const createSnapBackAnimation = (pullingRefresherIcon) => {
 const setSpinnerOpacity = (spinner, opacity) => {
   spinner.style.setProperty('opacity', opacity.toString());
 };
-const handleScrollWhilePulling = (spinner, ticks, opacity, currentTickToShow) => {
+const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
+  const max = 1;
   writeTask(() => {
-    setSpinnerOpacity(spinner, opacity);
-    ticks.forEach((el, i) => el.style.setProperty('opacity', (i <= currentTickToShow) ? '0.99' : '0'));
+    ticks.forEach((el, i) => {
+      /**
+       * Compute the opacity of each tick
+       * mark as a percentage of the pullAmount
+       * offset by max / numTicks so
+       * the tick marks are shown staggered.
+       */
+      const min = i * (max / numTicks);
+      const range = max - min;
+      const start = pullAmount - min;
+      const progression = clamp(0, start / range, 1);
+      el.style.setProperty('opacity', progression.toString());
+    });
   });
 };
 const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
   writeTask(() => {
     // If user pulls down quickly, the spinner should spin faster
-    spinner.style.setProperty('--refreshing-rotation-duration', (lastVelocityY >= 1.0) ? '0.5s' : '2s');
+    spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
     spinner.style.setProperty('opacity', '1');
   });
 };
-const translateElement = (el, value) => {
+const translateElement = (el, value, duration = 200) => {
   if (!el) {
     return Promise.resolve();
   }
-  const trans = transitionEndAsync(el, 200);
+  const trans = transitionEndAsync(el, duration);
   writeTask(() => {
-    el.style.setProperty('transition', '0.2s all ease-out');
+    el.style.setProperty('transition', `${duration}ms all ease-out`);
     if (value === undefined) {
       el.style.removeProperty('transform');
     }
@@ -155,7 +173,7 @@ const shouldUseNativeRefresher = async (referenceEl, mode) => {
   if (!refresherContent) {
     return Promise.resolve(false);
   }
-  await new Promise(resolve => componentOnReady(refresherContent, resolve));
+  await new Promise((resolve) => componentOnReady(refresherContent, resolve));
   const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
   return (pullingSpinner !== null &&
@@ -163,44 +181,8 @@ const shouldUseNativeRefresher = async (referenceEl, mode) => {
     ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
       mode === 'md'));
 };
-const transitionEndAsync = (el, expectedDuration = 0) => {
-  return new Promise(resolve => {
-    transitionEnd(el, expectedDuration, resolve);
-  });
-};
-const transitionEnd = (el, expectedDuration = 0, callback) => {
-  let unRegTrans;
-  let animationTimeout;
-  const opts = { passive: true };
-  const ANIMATION_FALLBACK_TIMEOUT = 500;
-  const unregister = () => {
-    if (unRegTrans) {
-      unRegTrans();
-    }
-  };
-  const onTransitionEnd = (ev) => {
-    if (ev === undefined || el === ev.target) {
-      unregister();
-      callback(ev);
-    }
-  };
-  if (el) {
-    el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
-    el.addEventListener('transitionend', onTransitionEnd, opts);
-    animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT);
-    unRegTrans = () => {
-      if (animationTimeout) {
-        clearTimeout(animationTimeout);
-        animationTimeout = undefined;
-      }
-      el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
-      el.removeEventListener('transitionend', onTransitionEnd, opts);
-    };
-  }
-  return unregister;
-};
 
-const refresherIosCss = "ion-refresher{left:0;top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}[dir=rtl] ion-refresher,:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:flex;flex-direction:column;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{transform-origin:center;transition:200ms;font-size:30px;text-align:center}[dir=rtl] .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{transform-origin:calc(100% - center)}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native ion-spinner{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;animation:250ms linear refresher-pop forwards}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}@keyframes refresher-pop{0%{transform:scale(1);animation-timing-function:ease-in}50%{transform:scale(1.2);animation-timing-function:ease-out}100%{transform:scale(1)}}@keyframes refresher-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}";
+const refresherIosCss = "ion-refresher{left:0;top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}[dir=rtl] ion-refresher,:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:flex;flex-direction:column;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{transform-origin:center;transition:200ms;font-size:30px;text-align:center}[dir=rtl] .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{transform-origin:calc(100% - center)}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native ion-spinner{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0) rotate(180deg);transition:300ms}@keyframes refresher-pop{0%{transform:scale(1);animation-timing-function:ease-in}50%{transform:scale(1.2);animation-timing-function:ease-out}100%{transform:scale(1)}}@keyframes refresher-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}";
 
 const refresherMdCss = "ion-refresher{left:0;top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}[dir=rtl] ion-refresher,:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:flex;flex-direction:column;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{transform-origin:center;transition:200ms;font-size:30px;text-align:center}[dir=rtl] .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{transform-origin:calc(100% - center)}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-md .refresher-pulling-icon,.refresher-md .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-md .refresher-pulling-text,.refresher-md .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-md .refresher-refreshing .spinner-lines-md line,.refresher-md .refresher-refreshing .spinner-lines-small-md line,.refresher-md .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-md .refresher-refreshing .spinner-bubbles circle,.refresher-md .refresher-refreshing .spinner-circles circle,.refresher-md .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;width:24px;height:24px;color:var(--ion-color-primary, #3880ff)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native ion-spinner{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}ion-refresher.refresher-native .spinner-arrow-container{display:inherit}ion-refresher.refresher-native .arrow-container{display:block;position:absolute;width:24px;height:24px}ion-refresher.refresher-native .arrow-container ion-icon{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;left:0;right:0;bottom:-4px;position:absolute;color:var(--ion-color-primary, #3880ff);font-size:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native .arrow-container ion-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}ion-refresher.refresher-native.refresher-pulling ion-refresher-content .refresher-pulling,ion-refresher.refresher-native.refresher-ready ion-refresher-content .refresher-pulling{display:flex}ion-refresher.refresher-native.refresher-refreshing ion-refresher-content .refresher-refreshing,ion-refresher.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing,ion-refresher.refresher-native.refresher-cancelling ion-refresher-content .refresher-refreshing{display:flex}ion-refresher.refresher-native .refresher-pulling-icon{transform:translateY(calc(-100% - 10px))}ion-refresher.refresher-native .refresher-pulling-icon,ion-refresher.refresher-native .refresher-refreshing-icon{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;border-radius:100%;padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:flex;border:1px solid var(--ion-color-step-200, #ececec);background:var(--ion-color-step-250, #ffffff);box-shadow:0px 1px 6px rgba(0, 0, 0, 0.1)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native .refresher-pulling-icon,ion-refresher.refresher-native .refresher-refreshing-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-refresher.refresher-native .refresher-pulling-icon,ion-refresher.refresher-native .refresher-refreshing-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}";
 
@@ -229,7 +211,7 @@ const Refresher = class {
      * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
      * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
      */
-    this.state = 1 /* Inactive */;
+    this.state = 1 /* RefresherState.Inactive */;
     /**
      * The minimum distance the user must pull down until the
      * refresher will go into the `refreshing` state.
@@ -302,7 +284,7 @@ const Refresher = class {
   async resetNativeRefresher(el, state) {
     this.state = state;
     if (getIonMode(this) === 'ios') {
-      await translateElement(el, undefined);
+      await translateElement(el, undefined, 300);
     }
     else {
       await transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon'), 200);
@@ -310,20 +292,20 @@ const Refresher = class {
     this.didRefresh = false;
     this.needsCompletion = false;
     this.pointerDown = false;
-    this.animations.forEach(ani => ani.destroy());
+    this.animations.forEach((ani) => ani.destroy());
     this.animations = [];
     this.progress = 0;
-    this.state = 1 /* Inactive */;
+    this.state = 1 /* RefresherState.Inactive */;
   }
   async setupiOSNativeRefresher(pullingSpinner, refreshingSpinner) {
     this.elementToTransform = this.scrollEl;
     const ticks = pullingSpinner.shadowRoot.querySelectorAll('svg');
     let MAX_PULL = this.scrollEl.clientHeight * 0.16;
     const NUM_TICKS = ticks.length;
-    writeTask(() => ticks.forEach(el => el.style.setProperty('animation', 'none')));
+    writeTask(() => ticks.forEach((el) => el.style.setProperty('animation', 'none')));
     this.scrollListenerCallback = () => {
       // If pointer is not on screen or refresher is not active, ignore scroll
-      if (!this.pointerDown && this.state === 1 /* Inactive */) {
+      if (!this.pointerDown && this.state === 1 /* RefresherState.Inactive */) {
         return;
       }
       readTask(() => {
@@ -335,12 +317,11 @@ const Refresher = class {
            * If refresher is refreshing and user tries to scroll
            * progressively fade refresher out/in
            */
-          if (this.state === 8 /* Refreshing */) {
+          if (this.state === 8 /* RefresherState.Refreshing */) {
             const ratio = clamp(0, scrollTop / (refresherHeight * 0.5), 1);
             writeTask(() => setSpinnerOpacity(refreshingSpinner, 1 - ratio));
             return;
           }
-          writeTask(() => setSpinnerOpacity(pullingSpinner, 0));
           return;
         }
         if (this.pointerDown) {
@@ -353,11 +334,16 @@ const Refresher = class {
             this.ionPull.emit();
           }
         }
-        // delay showing the next tick marks until user has pulled 30px
-        const opacity = clamp(0, Math.abs(scrollTop) / refresherHeight, 0.99);
-        const pullAmount = this.progress = clamp(0, (Math.abs(scrollTop) - 30) / MAX_PULL, 1);
-        const currentTickToShow = clamp(0, Math.floor(pullAmount * NUM_TICKS), NUM_TICKS - 1);
-        const shouldShowRefreshingSpinner = this.state === 8 /* Refreshing */ || currentTickToShow === NUM_TICKS - 1;
+        /**
+         * We want to delay the start of this gesture by ~30px
+         * when initially pulling down so the refresher does not
+         * overlap with the content. But when letting go of the
+         * gesture before the refresher completes, we want the
+         * refresher tick marks to quickly fade out.
+         */
+        const offset = this.didStart ? 30 : 0;
+        const pullAmount = (this.progress = clamp(0, (Math.abs(scrollTop) - offset) / MAX_PULL, 1));
+        const shouldShowRefreshingSpinner = this.state === 8 /* RefresherState.Refreshing */ || pullAmount === 1;
         if (shouldShowRefreshingSpinner) {
           if (this.pointerDown) {
             handleScrollWhileRefreshing(refreshingSpinner, this.lastVelocityY);
@@ -376,13 +362,13 @@ const Refresher = class {
           }
         }
         else {
-          this.state = 2 /* Pulling */;
-          handleScrollWhilePulling(pullingSpinner, ticks, opacity, currentTickToShow);
+          this.state = 2 /* RefresherState.Pulling */;
+          handleScrollWhilePulling(ticks, NUM_TICKS, pullAmount);
         }
       });
     };
     this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
+    this.gesture = (await import('./index-d39eb62b.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -405,14 +391,14 @@ const Refresher = class {
           MAX_PULL = this.scrollEl.clientHeight * 0.16;
         }
       },
-      onMove: ev => {
+      onMove: (ev) => {
         this.lastVelocityY = ev.velocityY;
       },
       onEnd: () => {
         this.pointerDown = false;
         this.didStart = false;
         if (this.needsCompletion) {
-          this.resetNativeRefresher(this.elementToTransform, 32 /* Completing */);
+          this.resetNativeRefresher(this.elementToTransform, 32 /* RefresherState.Completing */);
           this.needsCompletion = false;
         }
         else if (this.didRefresh) {
@@ -434,14 +420,17 @@ const Refresher = class {
         refreshingCircle.style.setProperty('animation-delay', '-655ms');
       });
     }
-    this.gesture = (await import('./index-3a1bd803.js')).createGesture({
+    this.gesture = (await import('./index-d39eb62b.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
       direction: 'y',
       threshold: 5,
-      canStart: () => this.state !== 8 /* Refreshing */ && this.state !== 32 /* Completing */ && this.scrollEl.scrollTop === 0,
+      canStart: () => this.state !== 8 /* RefresherState.Refreshing */ &&
+        this.state !== 32 /* RefresherState.Completing */ &&
+        this.scrollEl.scrollTop === 0,
       onStart: (ev) => {
+        this.progress = 0;
         ev.data = { animation: undefined, didStart: false, cancelled: false };
       },
       onMove: (ev) => {
@@ -451,7 +440,7 @@ const Refresher = class {
         }
         if (!ev.data.didStart) {
           ev.data.didStart = true;
-          this.state = 2 /* Pulling */;
+          this.state = 2 /* RefresherState.Pulling */;
           writeTask(() => this.scrollEl.style.setProperty('--overflow', 'hidden'));
           const animationType = getRefresherAnimationType(contentEl);
           const animation = createPullingAnimation(animationType, pullingRefresherIcon, this.el);
@@ -470,16 +459,14 @@ const Refresher = class {
         if (!ev.data.didStart) {
           return;
         }
+        this.gesture.enable(false);
         writeTask(() => this.scrollEl.style.removeProperty('--overflow'));
         if (this.progress <= 0.4) {
-          this.gesture.enable(false);
-          ev.data.animation
-            .progressEnd(0, this.progress, 500)
-            .onFinish(() => {
-            this.animations.forEach(ani => ani.destroy());
+          ev.data.animation.progressEnd(0, this.progress, 500).onFinish(() => {
+            this.animations.forEach((ani) => ani.destroy());
             this.animations = [];
             this.gesture.enable(true);
-            this.state = 1 /* Inactive */;
+            this.state = 1 /* RefresherState.Inactive */;
           });
           return;
         }
@@ -487,13 +474,14 @@ const Refresher = class {
         const snapBackAnimation = createSnapBackAnimation(pullingRefresherIcon);
         this.animations.push(snapBackAnimation);
         writeTask(async () => {
-          pullingRefresherIcon.style.setProperty('--ion-pulling-refresher-translate', `${(progress * 100)}px`);
+          pullingRefresherIcon.style.setProperty('--ion-pulling-refresher-translate', `${progress * 100}px`);
           ev.data.animation.progressEnd();
           await snapBackAnimation.play();
           this.beginRefresh();
           ev.data.animation.destroy();
+          this.gesture.enable(true);
         });
-      }
+      },
     });
     this.disabledChanged();
   }
@@ -527,32 +515,47 @@ const Refresher = class {
       console.error('Make sure you use: <ion-refresher slot="fixed">');
       return;
     }
-    const contentEl = this.el.closest('ion-content');
+    const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
     if (!contentEl) {
-      console.error('<ion-refresher> must be used inside an <ion-content>');
+      printIonContentErrorMsg(this.el);
       return;
     }
-    await new Promise(resolve => componentOnReady(contentEl, resolve));
-    this.scrollEl = await contentEl.getScrollElement();
-    this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content');
-    if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
-      this.setupNativeRefresher(contentEl);
-    }
-    else {
-      this.gesture = (await import('./index-3a1bd803.js')).createGesture({
-        el: contentEl,
-        gestureName: 'refresher',
-        gesturePriority: 31,
-        direction: 'y',
-        threshold: 20,
-        passive: false,
-        canStart: () => this.canStart(),
-        onStart: () => this.onStart(),
-        onMove: ev => this.onMove(ev),
-        onEnd: () => this.onEnd(),
-      });
-      this.disabledChanged();
-    }
+    /**
+     * Waits for the content to be ready before querying the scroll
+     * or the background content element.
+     */
+    componentOnReady(contentEl, async () => {
+      const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
+      /**
+       * Query the custom scroll target (if available), first. In refresher implementations,
+       * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
+       * querying the custom scroll target first and falling back to the ion-content element,
+       * the correct scroll element will be returned by the implementation.
+       */
+      this.scrollEl = await getScrollElement(customScrollTarget !== null && customScrollTarget !== void 0 ? customScrollTarget : contentEl);
+      /**
+       * Query the background content element from the host ion-content element directly.
+       */
+      this.backgroundContentEl = await contentEl.getBackgroundElement();
+      if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
+        this.setupNativeRefresher(contentEl);
+      }
+      else {
+        this.gesture = (await import('./index-d39eb62b.js')).createGesture({
+          el: contentEl,
+          gestureName: 'refresher',
+          gesturePriority: 31,
+          direction: 'y',
+          threshold: 20,
+          passive: false,
+          canStart: () => this.canStart(),
+          onStart: () => this.onStart(),
+          onMove: (ev) => this.onMove(ev),
+          onEnd: () => this.onEnd(),
+        });
+        this.disabledChanged();
+      }
+    });
   }
   disconnectedCallback() {
     this.destroyNativeRefresher();
@@ -576,11 +579,11 @@ const Refresher = class {
       this.needsCompletion = true;
       // Do not reset scroll el until user removes pointer from screen
       if (!this.pointerDown) {
-        raf(() => raf(() => this.resetNativeRefresher(this.elementToTransform, 32 /* Completing */)));
+        raf(() => raf(() => this.resetNativeRefresher(this.elementToTransform, 32 /* RefresherState.Completing */)));
       }
     }
     else {
-      this.close(32 /* Completing */, '120ms');
+      this.close(32 /* RefresherState.Completing */, '120ms');
     }
   }
   /**
@@ -590,11 +593,11 @@ const Refresher = class {
     if (this.nativeRefresher) {
       // Do not reset scroll el until user removes pointer from screen
       if (!this.pointerDown) {
-        raf(() => raf(() => this.resetNativeRefresher(this.elementToTransform, 16 /* Cancelling */)));
+        raf(() => raf(() => this.resetNativeRefresher(this.elementToTransform, 16 /* RefresherState.Cancelling */)));
       }
     }
     else {
-      this.close(16 /* Cancelling */, '');
+      this.close(16 /* RefresherState.Cancelling */, '');
     }
   }
   /**
@@ -613,7 +616,7 @@ const Refresher = class {
     if (!this.scrollEl) {
       return false;
     }
-    if (this.state !== 1 /* Inactive */) {
+    if (this.state !== 1 /* RefresherState.Inactive */) {
       return false;
     }
     // if the scrollTop is greater than zero then it's
@@ -625,7 +628,7 @@ const Refresher = class {
   }
   onStart() {
     this.progress = 0;
-    this.state = 1 /* Inactive */;
+    this.state = 1 /* RefresherState.Inactive */;
   }
   onMove(detail) {
     if (!this.scrollEl) {
@@ -636,16 +639,16 @@ const Refresher = class {
     // best to do any DOM read/writes only when absolutely necessary
     // if multi-touch then get out immediately
     const ev = detail.event;
-    if (ev.touches && ev.touches.length > 1) {
+    if (ev.touches !== undefined && ev.touches.length > 1) {
       return;
     }
     // do nothing if it's actively refreshing
     // or it's in the way of closing
     // or this was never a startY
-    if ((this.state & 56 /* _BUSY_ */) !== 0) {
+    if ((this.state & 56 /* RefresherState._BUSY_ */) !== 0) {
       return;
     }
-    const pullFactor = (Number.isNaN(this.pullFactor) || this.pullFactor < 0) ? 1 : this.pullFactor;
+    const pullFactor = Number.isNaN(this.pullFactor) || this.pullFactor < 0 ? 1 : this.pullFactor;
     const deltaY = detail.deltaY * pullFactor;
     // don't bother if they're scrolling up
     // and have not already started dragging
@@ -653,7 +656,7 @@ const Refresher = class {
       // the current Y is higher than the starting Y
       // so they scrolled up enough to be ignored
       this.progress = 0;
-      this.state = 1 /* Inactive */;
+      this.state = 1 /* RefresherState.Inactive */;
       if (this.appliedStyles) {
         // reset the styles only if they were applied
         this.setCss(0, '', false, '');
@@ -661,7 +664,7 @@ const Refresher = class {
       }
       return;
     }
-    if (this.state === 1 /* Inactive */) {
+    if (this.state === 1 /* RefresherState.Inactive */) {
       // this refresh is not already actively pulling down
       // get the content's scrollTop
       const scrollHostScrollTop = this.scrollEl.scrollTop;
@@ -672,7 +675,7 @@ const Refresher = class {
         return;
       }
       // content scrolled all the way to the top, and dragging down
-      this.state = 2 /* Pulling */;
+      this.state = 2 /* RefresherState.Pulling */;
     }
     // prevent native scroll events
     if (ev.cancelable) {
@@ -699,7 +702,7 @@ const Refresher = class {
     // do nothing if the delta is less than the pull threshold
     if (deltaY < pullMin) {
       // ensure it stays in the pulling state, cuz its not ready yet
-      this.state = 2 /* Pulling */;
+      this.state = 2 /* RefresherState.Pulling */;
       return;
     }
     if (deltaY > this.pullMax) {
@@ -710,16 +713,16 @@ const Refresher = class {
     // pulled farther than the pull min!!
     // it is now in the `ready` state!!
     // if they let go then it'll refresh, kerpow!!
-    this.state = 4 /* Ready */;
+    this.state = 4 /* RefresherState.Ready */;
     return;
   }
   onEnd() {
     // only run in a zone when absolutely necessary
-    if (this.state === 4 /* Ready */) {
+    if (this.state === 4 /* RefresherState.Ready */) {
       // they pulled down far enough, so it's ready to refresh
       this.beginRefresh();
     }
-    else if (this.state === 2 /* Pulling */) {
+    else if (this.state === 2 /* RefresherState.Pulling */) {
       // they were pulling down, but didn't pull down far enough
       // set the content back to it's original location
       // and close the refresher
@@ -730,19 +733,19 @@ const Refresher = class {
   beginRefresh() {
     // assumes we're already back in a zone
     // they pulled down far enough, so it's ready to refresh
-    this.state = 8 /* Refreshing */;
+    this.state = 8 /* RefresherState.Refreshing */;
     // place the content in a hangout position while it thinks
     this.setCss(this.pullMin, this.snapbackDuration, true, '');
     // emit "refresh" because it was pulled down far enough
     // and they let go to begin refreshing
     this.ionRefresh.emit({
-      complete: this.complete.bind(this)
+      complete: this.complete.bind(this),
     });
   }
   close(state, delay) {
     // create fallback timer incase something goes wrong with transitionEnd event
     setTimeout(() => {
-      this.state = 1 /* Inactive */;
+      this.state = 1 /* RefresherState.Inactive */;
       this.progress = 0;
       this.didStart = false;
       this.setCss(0, '0ms', false, '');
@@ -751,21 +754,20 @@ const Refresher = class {
     // set that the refresh is actively cancelling/completing
     this.state = state;
     this.setCss(0, this.closeDuration, true, delay);
-    // TODO: stop gesture
   }
   setCss(y, duration, overflowVisible, delay) {
     if (this.nativeRefresher) {
       return;
     }
-    this.appliedStyles = (y > 0);
+    this.appliedStyles = y > 0;
     writeTask(() => {
       if (this.scrollEl && this.backgroundContentEl) {
         const scrollStyle = this.scrollEl.style;
         const backgroundStyle = this.backgroundContentEl.style;
-        scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : '');
+        scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
         scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
         scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
+        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
       }
     });
   }
@@ -776,12 +778,12 @@ const Refresher = class {
         // Used internally for styling
         [`refresher-${mode}`]: true,
         'refresher-native': this.nativeRefresher,
-        'refresher-active': this.state !== 1 /* Inactive */,
-        'refresher-pulling': this.state === 2 /* Pulling */,
-        'refresher-ready': this.state === 4 /* Ready */,
-        'refresher-refreshing': this.state === 8 /* Refreshing */,
-        'refresher-cancelling': this.state === 16 /* Cancelling */,
-        'refresher-completing': this.state === 32 /* Completing */,
+        'refresher-active': this.state !== 1 /* RefresherState.Inactive */,
+        'refresher-pulling': this.state === 2 /* RefresherState.Pulling */,
+        'refresher-ready': this.state === 4 /* RefresherState.Ready */,
+        'refresher-refreshing': this.state === 8 /* RefresherState.Refreshing */,
+        'refresher-cancelling': this.state === 16 /* RefresherState.Cancelling */,
+        'refresher-completing': this.state === 32 /* RefresherState.Completing */,
       } }));
   }
   get el() { return getElement(this); }