voyager-ionic-core 7.7.2 → 7.8.6

package/components/ion-menu-toggle.js

@@ -30,10 +30,10 @@ const MenuToggle = /*@__PURE__*/ proxyCustomElement(class MenuToggle extends HTM
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '5b75baade530bf9e7ed9165a5db3e513975e22f2', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '94a0815a634c6fb1991854bfbcf5b2b4b61d7710', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '65dea458274b685125c22af54aa153cf4977113c' })));
+            } }, h("slot", { key: 'f3ac6d17d5421390ab05f3f31ad00ec4f2ca5c7c' })));
     }
     static get style() { return IonMenuToggleStyle0; }
 }, [1, "ion-menu-toggle", {

package/components/ion-menu.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
-import { shoudUseCloseWatcher } from './hardware-back-button.js';
+import { shouldUseCloseWatcher } from './hardware-back-button.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
 import { o as getPresentedOverlay } from './overlays.js';
@@ -612,13 +612,13 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'be7145625a30951e5cc26646f6121ee4fa4c910f', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '7443f67fbe5122052025bab862136044fc942401', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, h("div", { key: 'ecd6e0641ed67691db270190801f7be365a2d121', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'aea3780e259f2b3ea84697a509bb7f13fa9531e9' })), h("ion-backdrop", { key: 'be3253506a34c4c00eb1814621c674196b72db46', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '45c7d37ace20f663a4bea89cb38bbc798f88dfbd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '975437a5d4029cc200b6dbc2d47a16b4318c00aa' })), h("ion-backdrop", { key: 'acc8a1f5dc1b1e2a34757bf797e794017f545bdc', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-modal.js

@@ -875,19 +875,32 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     }
     const canStart = (detail) => {
         /**
-         * If the sheet is fully expanded and
-         * the user is swiping on the content,
-         * the gesture should not start to
-         * allow for scrolling on the content.
+         * If we are swiping on the content, swiping should only be possible if the content
+         * is scrolled all the way to the top so that we do not interfere with scrolling.
+         *
+         * We cannot assume that the `ion-content` target will remain consistent between swipes.
+         * For example, when using ion-nav within a modal it is possible to swipe, push a view,
+         * and then swipe again. The target content will not be the same between swipes.
          */
-        const content = detail.event.target.closest('ion-content');
+        const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
-        if (currentBreakpoint === 1 && content) {
-            return false;
+        if (currentBreakpoint === 1 && contentEl) {
+            /**
+             * The modal should never swipe to close on the content with a refresher.
+             * Note 1: We cannot solve this by making this gesture have a higher priority than
+             * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
+             * addition to a gesture.
+             *
+             * Note 2: Do not use getScrollElement here because we need this to be a synchronous
+             * operation, and getScrollElement is asynchronous.
+             */
+            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
+            return !hasRefresherInContent && scrollEl.scrollTop === 0;
         }
         return true;
     };
-    const onStart = () => {
+    const onStart = (detail) => {
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down
@@ -902,11 +915,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
         /**
-         * If swiping on the content
-         * we should disable scrolling otherwise
-         * the sheet will expand and the content will scroll.
+         * If we are pulling down, then it is possible we are pulling on the content.
+         * We do not want scrolling to happen at the same time as the gesture.
          */
-        if (contentEl) {
+        if (detail.deltaY > 0 && contentEl) {
             contentEl.scrollY = false;
         }
         raf(() => {
@@ -919,6 +931,15 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If we are pulling down, then it is possible we are pulling on the content.
+         * We do not want scrolling to happen at the same time as the gesture.
+         * This accounts for when the user scrolls down, scrolls all the way up, and then
+         * pulls down again such that the modal should start to move.
+         */
+        if (detail.deltaY > 0 && contentEl) {
+            contentEl.scrollY = false;
+        }
         /**
          * Given the change in gesture position on the Y axis,
          * compute where the offset of the animation should be
@@ -1021,6 +1042,16 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         else if (!shouldRemainOpen) {
             onDismiss();
         }
+        /**
+         * If the sheet is going to be fully expanded then we should enable
+         * scrolling immediately. The sheet modal animation takes ~500ms to finish
+         * so if we wait until then there is a visible delay for when scrolling is
+         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+         * as the gesture is released, so we align with that.
+         */
+        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+            contentEl.scrollY = true;
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
@@ -1039,13 +1070,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
-                            /**
-                             * If the sheet is fully expanded, we can safely
-                             * enable scrolling again.
-                             */
-                            if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
-                                contentEl.scrollY = true;
-                            }
                             /**
                              * Backdrop should become enabled
                              * after the backdropBreakpoint value
@@ -1214,9 +1238,41 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        const { breakpoints, initialBreakpoint, el } = this;
+        const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
-        this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
+        const attributesToInherit = ['aria-label', 'role'];
+        this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        /**
+         * When using a controller modal you can set attributes
+         * using the htmlAttributes property. Since the above attributes
+         * need to be inherited inside of the modal, we need to look
+         * and see if these attributes are being set via htmlAttributes.
+         *
+         * We could alternatively move this to componentDidLoad to simplify the work
+         * here, but we'd then need to make inheritedAttributes a State variable,
+         * thus causing another render to always happen after the first render.
+         */
+        if (htmlAttributes !== undefined) {
+            attributesToInherit.forEach((attribute) => {
+                const attributeValue = htmlAttributes[attribute];
+                if (attributeValue) {
+                    /**
+                     * If an attribute we need to inherit was
+                     * set using htmlAttributes then add it to
+                     * inheritedAttributes and remove it from htmlAttributes.
+                     * This ensures the attribute is inherited and not
+                     * set on the host.
+                     *
+                     * In this case, if an inherited attribute is set
+                     * on the host element and using htmlAttributes then
+                     * htmlAttributes wins, but that's not a pattern that we recommend.
+                     * The only time you'd need htmlAttributes is when using modalController.
+                     */
+                    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attribute]: htmlAttributes[attribute] });
+                    delete htmlAttributes[attribute];
+                }
+            });
+        }
         if (isSheetModal) {
             this.currentBreakpoint = this.initialBreakpoint;
         }
@@ -1613,18 +1669,18 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '0c2c4369ab2df4ef4660addea5e927c6a0232864', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'e4ad28e6e794560d85252aebdca7f4752e4e7e99', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'd044383a776c2ee1703f996caedaedca47f2948f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: '8d23b6a3cc9069e4d46fa0645cde9db3e6f89507',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '6efd67361a062d15488390f9f0d6c0841e541893', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '557b1c6b297df75acc80d1350b971e65ace6c343', class: "modal-shadow" }), h("div", Object.assign({ key: '67f9b27b662303fbaadaee2ae89972caadfd9994',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8f1eecc451b52467a8c3cfe500335cf6254bbfbc', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '3fbb689e4bf5575fbb26ad1000f6ac5993f3bf8f' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: 'cdc923404f01a14b9071a434c68547da3b22c71e' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-nav-link.js

@@ -36,7 +36,7 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'a781794425ad0866705bc6691256184b93477a74', onClick: this.onClick });
+        return h(Host, { key: 'dab6e8a908395d99c87452c5e5aa4e61d9e72435', onClick: this.onClick });
     }
     get el() { return this; }
 }, [0, "ion-nav-link", {

package/components/ion-nav.js

@@ -902,7 +902,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         }
     }
     render() {
-        return h("slot", { key: '654286a8a7ef03d4a22497eb51e781a9a8979774' });
+        return h("slot", { key: '6894eccc60e446294b01261477691ea1e88348ab' });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-picker.js

@@ -242,11 +242,11 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'eb5f91ea74fb11daa6942f779ef461742cad9ecb', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), h("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, h("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), h("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '7ea872d939e62f14129fff15334b2822ad2360c9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '2d77c225091eacab0207e28c96b966122afafef0', tabindex: "0" }), h("div", { key: '630d21e0c60ad97b71462cdc540858bb6ced0b8f', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'fa8553ec8d2ce8bf93e16e02334b6475cb51b5d4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '177d1bcbd0ce38f16d9c936295a917fb981d02d7', class: "picker-columns" }, h("div", { key: 'be99b6e0279c210ef91a88ccc81acc7d37917a53', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: 'b36b21e8133b59e873e1d3447a1279f1b971c854', class: "picker-below-highlight" }))), h("div", { key: '17cea6dd24dbb0a08073ca4a84bfe027eb24833d', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-progress-bar.js

@@ -27,7 +27,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
-        return (h(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '944b79ed6fce1b2c0ed48681cd8517a5abbddd80', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/components/ion-range.js

@@ -100,8 +100,14 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                     el: rangeSlider,
                     gestureName: 'range',
                     gesturePriority: 100,
-                    threshold: 0,
-                    onStart: (ev) => this.onStart(ev),
+                    /**
+                     * Provide a threshold since the drag movement
+                     * might be a user scrolling the view.
+                     * If this is true, then the range
+                     * should not move.
+                     */
+                    threshold: 10,
+                    onStart: () => this.onStart(),
                     onMove: (ev) => this.onMove(ev),
                     onEnd: (ev) => this.onEnd(ev),
                 });
@@ -284,33 +290,93 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         this.value = this.ensureValueInBounds(this.value);
         this.ionChange.emit({ value: this.value });
     }
-    onStart(detail) {
-        const { contentEl } = this;
-        if (contentEl) {
+    /**
+     * The value should be updated on touch end or
+     * when the component is being dragged.
+     * This follows the native behavior of mobile devices.
+     *
+     * For example: When the user lifts their finger from the
+     * screen after tapping the bar or dragging the bar or knob.
+     */
+    onStart() {
+        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
+    }
+    /**
+     * The value should be updated while dragging the
+     * bar or knob.
+     *
+     * While the user is dragging, the view
+     * should not scroll. This is to prevent the user from
+     * feeling disoriented while dragging.
+     *
+     * The user can scroll on the view if the knob or
+     * bar is not being dragged.
+     *
+     * @param detail The details of the gesture event.
+     */
+    onMove(detail) {
+        const { contentEl, pressedKnob } = this;
+        const currentX = detail.currentX;
+        /**
+         * Since the user is dragging on the bar or knob, the view should not scroll.
+         *
+         * This only needs to be done once.
+         */
+        if (contentEl && this.initialContentScrollY === undefined) {
             this.initialContentScrollY = disableContentScrollY(contentEl);
         }
-        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
-        const currentX = detail.currentX;
-        // figure out which knob they started closer to
-        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
-        if (isRTL(this.el)) {
-            ratio = 1 - ratio;
+        /**
+         * The `pressedKnob` can be undefined if the user just
+         * started dragging the knob.
+         *
+         * This is necessary to determine which knob the user is dragging,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         *
+         * This only needs to be done once since the knob won't change
+         * while the user is dragging.
+         */
+        if (pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
         }
-        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-        this.setFocus(this.pressedKnob);
-        // update the active knob's position
         this.update(currentX);
-        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
-    }
-    onMove(detail) {
-        this.update(detail.currentX);
     }
+    /**
+     * The value should be updated on touch end:
+     * - When the user lifts their finger from the screen after
+     * tapping the bar.
+     *
+     * @param detail The details of the gesture or mouse event.
+     */
     onEnd(detail) {
         const { contentEl, initialContentScrollY } = this;
-        if (contentEl) {
+        const currentX = detail.currentX || detail.clientX;
+        /**
+         * The `pressedKnob` can be undefined if the user never
+         * dragged the knob. They just tapped on the bar.
+         *
+         * This is necessary to determine which knob the user is changing,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         */
+        if (this.pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
+        }
+        /**
+         * The user is no longer dragging the bar or
+         * knob (if they were dragging it).
+         *
+         * The user can now scroll on the view in the next gesture event.
+         */
+        if (contentEl && initialContentScrollY !== undefined) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
-        this.update(detail.currentX);
+        // update the active knob's position
+        this.update(currentX);
+        /**
+         * Reset the pressed knob to undefined since the user
+         * may start dragging a different knob in the next gesture event.
+         */
         this.pressedKnob = undefined;
         this.emitValueChange();
         this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
@@ -337,6 +403,16 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         // Update input value
         this.updateValue();
     }
+    setPressedKnob(currentX) {
+        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
+        // figure out which knob they started closer to
+        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+        if (isRTL(this.el)) {
+            ratio = 1 - ratio;
+        }
+        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
+        this.setFocus(this.pressedKnob);
+    }
     get valA() {
         return ratioToValue(this.ratioA, this.min, this.max, this.step);
     }
@@ -539,7 +615,36 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) {
             labelledBy = 'range-label';
         }
-        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
+        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+            /**
+             * Since the gesture has a threshold, the value
+             * won't change until the user has dragged past
+             * the threshold. This is to prevent the range
+             * from moving when the user is scrolling.
+             *
+             * This results in the value not being updated
+             * and the event emitters not being triggered
+             * if the user taps on the range. This is why
+             * we need to listen for the "pointerUp" event.
+             */
+            onPointerUp: (ev) => {
+                /**
+                 * If the user drags the knob on the web
+                 * version (does not occur on mobile),
+                 * the "pointerUp" event will be triggered
+                 * along with the gesture's events.
+                 * This leads to duplicate events.
+                 *
+                 * By checking if the pressedKnob is undefined,
+                 * we can determine if the "pointerUp" event was
+                 * triggered by a tap or a drag. If it was
+                 * dragged, the pressedKnob will be defined.
+                 */
+                if (this.pressedKnob === undefined) {
+                    this.onStart();
+                    this.onEnd(ev);
+                }
+            } }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
             }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {

package/components/ion-refresher-content.js

@@ -54,7 +54,7 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '537e4d601fd09804d072e9fed9b2c6ba8d890548', class: mode }, h("div", { key: '67f46df746f7da2fc60c47da9216a2920c25166f', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '216f96af452e1567df7906c4d9e6fbf8c397ad21', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: 'cf3caa51c4aba8a95622f6d32cafa90b683b9d6e', class: mode }, h("div", { key: '5ad70801104bbea873d3525206660c52e4447903', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '0f95df169fd367528bfaa5d9ccf6690a613609c4', class: "refresher-pulling-icon" }, h("div", { key: '4b8f0465a19f017751b207807c32e1fe00fda433', class: "spinner-arrow-container" }, h("ion-spinner", { key: '77e60179d76f0d17f8f2dc3518f97a2a924418e6', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'f78f63f08f071bead1bfe655bae6394f8a219d91', class: "arrow-container" }, h("ion-icon", { key: '4d833d134d2b221cae2dfb0611d4029f2d664db5', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'e6db19d7fa324363d2a7c3c046510f4c8461f7e6', class: "refresher-pulling-icon" }, h("ion-icon", { key: '66c2ef1a53c5809f49891de515da5f55d9bf8dcc', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '80c413e21d362a5bb0419fcd13092453b3445cee', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '0d5511f9644de26332a1a9ed39b160691fab74d9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '54e4a96b081c7b453a98e00cceea7c086268a450', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return this; }
 }, [0, "ion-refresher-content", {

package/components/ion-refresher.js

@@ -603,7 +603,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (h(Host, { key: '96f4f595ebdb92a12755b642398691bcaab9f7c1', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/components/ion-reorder-group.js

@@ -245,7 +245,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '067b8ff26887c4e458163f70f7308723c90a53f8', class: {
+        return (h(Host, { key: '68b5e5fa00a0531c74597964d84c82da8bc3252f', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/components/ion-reorder.js

@@ -30,7 +30,7 @@ const Reorder = /*@__PURE__*/ proxyCustomElement(class Reorder extends HTMLEleme
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'e625707b1810f93f5c667e38b8e2904988a3cff0', class: mode }, h("slot", { key: 'fd0c3167e8a7955a6f841b338345de0528535ff5' }, h("ion-icon", { key: '3fc7bb1adb0dde839ec4898361e359c640e81067', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '5747b63aa64b05bfed96bbce8087186c7e14c6d5', class: mode }, h("slot", { key: 'a745f29a23c905cd0bff572acb755b597a3fb3c3' }, h("ion-icon", { key: '48f433e85a3a68c16bc426623b2b74957b4b2eb7', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return this; }
     static get style() { return {

package/components/ion-router-link.js

@@ -30,10 +30,10 @@ const RouterLink = /*@__PURE__*/ proxyCustomElement(class RouterLink extends HTM
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '9944573e56abecc47afd2df03b386e38fc7ed2f3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e69892f4c6a6baf040a20c429afdec0e4db2dc0e', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '383de10c02eb9ab87e27890548ef681dccf2a765' }, attrs), h("slot", { key: '584a5a52e2b116f3827596cc5869a3557d6bcb6b' }))));
+            }) }, h("a", Object.assign({ key: '648cb22526f2933abe0865c86da6f30eac3ccb87' }, attrs), h("slot", { key: 'd6bc2e28b7c5cc228caedffebe653bde35934b67' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
 }, [1, "ion-router-link", {

package/components/ion-router-outlet.js

@@ -187,7 +187,7 @@ const RouterOutlet = /*@__PURE__*/ proxyCustomElement(class RouterOutlet extends
         return true;
     }
     render() {
-        return h("slot", { key: '5e31ebd99536453783f5b6f9119d7fa2bf8a5aad' });
+        return h("slot", { key: '3fe520ecae37af68e07a51f3a3223ea454035a59' });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-row.js

@@ -14,7 +14,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: getIonMode(this) }, h("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (h(Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: getIonMode(this) }, h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
     }
     static get style() { return IonRowStyle0; }
 }, [1, "ion-row"]);