@ionic/core 7.5.8-dev.11702398696.1ab62ea9 → 7.5.8-dev.11703088210.14a72b83

package/components/{picker.js → picker-internal.js}

@@ -4,11 +4,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementRoot } from './helpers.js';
 
-const pickerIosCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, #eeeeef))}";
+const pickerInternalIosCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
 
-const pickerMdCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
+const pickerInternalMdCss = ":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
 
-const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement {
+const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -42,7 +42,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
         this.onFocusOut = (ev) => {
             // TODO(FW-2832): type
             const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
+            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
                 this.exitInputMode();
             }
         };
@@ -60,7 +60,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
              * make sure that this function only ever runs when
              * focusing a picker column.
              */
-            if (target.tagName !== 'ION-PICKER-COLUMN') {
+            if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
                 return;
             }
             /**
@@ -127,7 +127,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
                      * since we just tapped the highlight and
                      * not a column.
                      */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN') {
+                    if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
                         /**
                          * If user taps 2 different columns
                          * then we should just switch to input mode
@@ -161,7 +161,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
                      * If there is only 1 numeric input column
                      * then we should skip multi column input.
                      */
-                    const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
+                    const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
                     const columnEl = columns.length === 1 ? ev.target : undefined;
                     this.actionOnClick = () => {
                         this.enterInputMode(columnEl);
@@ -195,7 +195,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
              * Only active input mode if there is at
              * least one column that accepts numeric input.
              */
-            const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
+            const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
             if (!hasInputColumn) {
                 return;
             }
@@ -248,7 +248,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
             if (!inputEl || !inputModeColumn) {
                 return;
             }
-            const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
+            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
             /**
              * If users pause for a bit, the search
              * value should be reset similar to how a
@@ -288,13 +288,8 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
              * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
              * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
              */
-            const findItemFromCompleteValue = options.find(({ textContent }) => {
-                /**
-                 * Keyboard entry is currently only used inside of Datetime
-                 * where we guarantee textContent is set.
-                 * If we end up exposing this feature publicly we should revisit this assumption.
-                 */
-                const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+            const findItemFromCompleteValue = values.find(({ text }) => {
+                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
                 return parsedText === inputEl.value;
             });
             if (findItemFromCompleteValue) {
@@ -319,11 +314,9 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
          */
         this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
             const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
-                return el.disabled !== true && el.textContent.replace(behavior, '') === value;
-            });
-            if (option) {
-                colEl.setValue(option.value);
+            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+            if (item) {
+                colEl.setValue(item.value);
             }
         };
         this.selectMultiColumn = () => {
@@ -331,7 +324,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
             if (!inputEl) {
                 return;
             }
-            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
+            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
             const firstColumn = numericPickers[0];
             const lastColumn = numericPickers[1];
             let value = inputEl.value;
@@ -483,24 +476,24 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     }
     get el() { return this; }
     static get style() { return {
-        ios: pickerIosCss,
-        md: pickerMdCss
+        ios: pickerInternalIosCss,
+        md: pickerInternalMdCss
     }; }
-}, [33, "ion-picker", {
+}, [33, "ion-picker-internal", {
         "exitInputMode": [64]
     }, [[1, "touchstart", "preventTouchStartPropagation"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ion-picker"];
+    const components = ["ion-picker-internal"];
     components.forEach(tagName => { switch (tagName) {
-        case "ion-picker":
+        case "ion-picker-internal":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, Picker);
+                customElements.define(tagName, PickerInternal);
             }
             break;
     } });
 }
 
-export { Picker as P, defineCustomElement as d };
+export { PickerInternal as P, defineCustomElement as d };

package/components/refresher.utils.js

@@ -0,0 +1,196 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { writeTask } from '@stencil/core/internal/client';
+import { c as createAnimation } from './animation.js';
+import { t as transitionEndAsync, c as componentOnReady, m as clamp } from './helpers.js';
+
+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);
+};
+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 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' },
+    ]);
+    const circleInnerAnimation = createAnimation()
+        .addElement(circle)
+        .keyframes([
+        { offset: 0, strokeDasharray: '1px, 200px' },
+        { offset: 0.2, strokeDasharray: '1px, 200px' },
+        { offset: 0.55, strokeDasharray: '100px, 200px' },
+        { offset: 1, strokeDasharray: '100px, 200px' },
+    ]);
+    const circleOuterAnimation = createAnimation()
+        .addElement(spinner)
+        .keyframes([
+        { offset: 0, transform: 'rotate(-90deg)' },
+        { offset: 1, transform: 'rotate(210deg)' },
+    ]);
+    /**
+     * Only add arrow animation if present
+     * this allows users to customize the spinners
+     * without errors being thrown
+     */
+    if (arrowContainer && arrow) {
+        const arrowContainerAnimation = createAnimation()
+            .addElement(arrowContainer)
+            .keyframes([
+            { offset: 0, transform: 'rotate(0deg)' },
+            { offset: 0.3, transform: 'rotate(0deg)' },
+            { offset: 0.55, transform: 'rotate(280deg)' },
+            { offset: 1, transform: 'rotate(400deg)' },
+        ]);
+        const arrowAnimation = createAnimation()
+            .addElement(arrow)
+            .keyframes([
+            { offset: 0, 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)' },
+        ]);
+        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
+    }
+    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
+};
+const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `scale(0) translateY(-${height}px)` },
+        { offset: 1, transform: 'scale(1) translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `translateY(-${height}px)` },
+        { offset: 1, transform: 'translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createSnapBackAnimation = (pullingRefresherIcon) => {
+    return createAnimation()
+        .duration(125)
+        .addElement(pullingRefresherIcon)
+        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
+};
+// iOS Native Refresher
+// -----------------------------
+const setSpinnerOpacity = (spinner, opacity) => {
+    spinner.style.setProperty('opacity', opacity.toString());
+};
+const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
+    const max = 1;
+    writeTask(() => {
+        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('opacity', '1');
+    });
+};
+const translateElement = (el, value, duration = 200) => {
+    if (!el) {
+        return Promise.resolve();
+    }
+    const trans = transitionEndAsync(el, duration);
+    writeTask(() => {
+        el.style.setProperty('transition', `${duration}ms all ease-out`);
+        if (value === undefined) {
+            el.style.removeProperty('transform');
+        }
+        else {
+            el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
+        }
+    });
+    return trans;
+};
+// Utils
+// -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+const supportsRubberBandScrolling = () => {
+    return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
+const shouldUseNativeRefresher = async (referenceEl, mode) => {
+    const refresherContent = referenceEl.querySelector('ion-refresher-content');
+    if (!refresherContent) {
+        return Promise.resolve(false);
+    }
+    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 &&
+        refreshingSpinner !== null &&
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
+};
+
+export { setSpinnerOpacity as a, handleScrollWhilePulling as b, createPullingAnimation as c, createSnapBackAnimation as d, supportsRubberBandScrolling as e, getRefresherAnimationType as g, handleScrollWhileRefreshing as h, shouldUseNativeRefresher as s, translateElement as t };

package/dist/cjs/{app-globals-0af482c7.js → app-globals-28656db1.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 
 const globalScripts = ionicGlobal.initialize;
 

package/dist/cjs/{button-active-9d7e0640.js → button-active-75b38d77.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-const index$1 = require('./index-bbb4336c.js');
+const index$1 = require('./index-b0102f48.js');
 const haptic = require('./haptic-216df36c.js');
-const index = require('./index-ee07ed59.js');
+const index = require('./index-d1b59ffa.js');
 
 const createButtonActiveGesture = (el, isButton) => {
     let currentTouchedButton;

package/dist/cjs/{data-e7526b58.js → data-36b9094e.js}

@@ -1394,7 +1394,7 @@ const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, f
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column
+ * @returns Date data to be used in ion-picker-column-internal
  */
 const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
     day: 'numeric',

package/dist/cjs/{gesture-controller-9436f482.js → gesture-controller-c40c045a.js}

@@ -194,5 +194,4 @@ class BlockerDelegate {
 const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 const GESTURE_CONTROLLER = new GestureController();
 
-exports.BACKDROP_NO_SCROLL = BACKDROP_NO_SCROLL;
 exports.GESTURE_CONTROLLER = GESTURE_CONTROLLER;

package/dist/cjs/{index-5cbb20f9.js → index-097270a3.js}

@@ -6,7 +6,7 @@
 const index = require('./index-5915f9b3.js');
 const hardwareBackButton = require('./hardware-back-button-76833cac.js');
 const helpers = require('./helpers-76bb7efb.js');
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 const animation = require('./animation-cc40e39c.js');
 
 /**

package/dist/cjs/{index-bbb4336c.js → index-b0102f48.js}

@@ -285,17 +285,6 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
-/**
- * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
- * document and all its nodes.
- *
- * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
- *
- * @param hostElm The element to hydrate.
- * @param tagName The element's tag name.
- * @param hostId The host ID assigned to the element by the server.
- * @param hostRef The host reference for the element.
- */
 const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const endHydrate = createTime('hydrateClient', tagName);
     const shadowRoot = hostElm.shadowRoot;
@@ -313,8 +302,6 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
         const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
         const node = c.$elm$;
-        // Put the node back in its original location since the native Shadow DOM
-        // can handle rendering it its correct location now
         if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
             orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
         }
@@ -336,22 +323,6 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     endHydrate();
 };
-/**
- * Recursively constructs the virtual node tree for a host element and its children.
- * The tree is constructed by parsing the annotations set on the nodes by the server.
- *
- * In addition to constructing the vNode tree, we also track information about the node's
- * descendants like which are slots, which should exist in the shadow root, and which
- * are nodes that should be rendered as children of the parent node.
- *
- * @param parentVNode The vNode representing the parent node.
- * @param childRenderNodes An array of all child nodes in the parent's node tree.
- * @param slotNodes An array of all slot nodes in the parent's node tree.
- * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
- * @param hostElm The parent element.
- * @param node The node to construct the vNode tree for.
- * @param hostId The host ID assigned to the element by the server.
- */
 const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
     let childNodeType;
     let childIdSplt;
@@ -496,13 +467,6 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
         parentVNode.$children$ = [vnode];
     }
 };
-/**
- * Recursively locate any comments representing an original location for a node in a node's
- * children or shadowRoot children.
- *
- * @param node The node to search.
- * @param orgLocNodes A map of the original location annotation and the current node being searched.
- */
 const initializeDocumentHydrate = (node, orgLocNodes) => {
     if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
         let i = 0;
@@ -2585,14 +2549,12 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // If we have styles, add them to the DOM
     if (dataStyles.innerHTML.length) {
         dataStyles.setAttribute('data-styles', '');
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
             dataStyles.setAttribute('nonce', nonce);
         }
-        // Insert the styles into the document head
-        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;

package/dist/cjs/{index-d4c2e02c.js → index-cb3e0ab7.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-bbb4336c.js');
+const index = require('./index-b0102f48.js');
 const helpers = require('./helpers-76bb7efb.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-a4ffb5a2.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-292abe1c.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-d9c0e4fb.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-4fac8a87.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/{index-ee07ed59.js → index-d1b59ffa.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const gestureController = require('./gesture-controller-9436f482.js');
+const gestureController = require('./gesture-controller-c40c045a.js');
 
 const addEventListener = (el, // TODO(FW-2832): type
 eventName, callback, opts) => {

package/dist/cjs/index.cjs.js

@@ -6,20 +6,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const animation = require('./animation-cc40e39c.js');
-const index = require('./index-d4c2e02c.js');
-const ios_transition = require('./ios.transition-a4ffb5a2.js');
-const md_transition = require('./md.transition-292abe1c.js');
+const index = require('./index-cb3e0ab7.js');
+const ios_transition = require('./ios.transition-d9c0e4fb.js');
+const md_transition = require('./md.transition-4fac8a87.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const index$1 = require('./index-ee07ed59.js');
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const index$1 = require('./index-d1b59ffa.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 const helpers = require('./helpers-76bb7efb.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-5cbb20f9.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const index$2 = require('./index-097270a3.js');
+const overlays = require('./overlays-b1471172.js');
 require('./index-306a7476.js');
-require('./index-bbb4336c.js');
-require('./gesture-controller-9436f482.js');
+require('./index-b0102f48.js');
+require('./gesture-controller-c40c045a.js');
 require('./index-5915f9b3.js');
 require('./hardware-back-button-76833cac.js');
 require('./framework-delegate-1c29b14a.js');

package/dist/cjs/ion-accordion_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bbb4336c.js');
+const index = require('./index-b0102f48.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-09471526.js');
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 const index$2 = require('./index-5915f9b3.js');
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -5,19 +5,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bbb4336c.js');
-const buttonActive = require('./button-active-9d7e0640.js');
+const index = require('./index-b0102f48.js');
+const buttonActive = require('./button-active-75b38d77.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const overlays = require('./overlays-b1471172.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 const animation = require('./animation-cc40e39c.js');
 require('./haptic-216df36c.js');
 require('./capacitor-46980811.js');
 require('./index-306a7476.js');
-require('./index-ee07ed59.js');
-require('./gesture-controller-9436f482.js');
+require('./index-d1b59ffa.js');
+require('./gesture-controller-c40c045a.js');
 require('./framework-delegate-1c29b14a.js');
 require('./hardware-back-button-76833cac.js');
 require('./index-5915f9b3.js');

package/dist/cjs/ion-alert.cjs.entry.js

@@ -5,20 +5,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bbb4336c.js');
+const index = require('./index-b0102f48.js');
 const config = require('./config-4f60b98a.js');
-const buttonActive = require('./button-active-9d7e0640.js');
+const buttonActive = require('./button-active-75b38d77.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const overlays = require('./overlays-b1471172.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-f4a2093b.js');
+const ionicGlobal = require('./ionic-global-62510d64.js');
 const animation = require('./animation-cc40e39c.js');
 require('./haptic-216df36c.js');
 require('./capacitor-46980811.js');
 require('./index-306a7476.js');
-require('./index-ee07ed59.js');
-require('./gesture-controller-9436f482.js');
+require('./index-d1b59ffa.js');
+require('./gesture-controller-c40c045a.js');
 require('./framework-delegate-1c29b14a.js');
 require('./hardware-back-button-76833cac.js');
 require('./index-5915f9b3.js');