voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.2

package/components/ion-item-sliding.js

@@ -393,7 +393,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae9da267d130e2875b2d854952b70daa739effd8', class: {
+        return (h(Host, { key: '9e64f1c1c787f0b5f27703b50b47c36aad38b677', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/components/ion-loading.js

@@ -256,9 +256,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '0b32f7915df1327934877cc71228aea71205266f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8b21abdb9968e2b9e69ea4ca4dab98fa9bbcc79b', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'ca6c4c48b83457685a17c7a396e67cd7a6b06ab9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'd76304807d988c02de44fc947124a15179ba2c6c', tabindex: "0" }), h("div", { key: '79ec338787a709a668c8f170d75a271bad3c2488', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'a8e3e70c79e1b359f821c6769b1f4b4bf90da992', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '1a76dd7ce9a801e0171cfa1d3db3b9b5f1574517', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1db24db60f9fad1a9b760a83aa94cab40582d33a', tabindex: "0" }), h("div", { key: '479d80d7a1c89c3b0f63df815a6f8f20221fd158', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'eaaf110a1a174b56a249a867cc676eebfa6b9bdc', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-menu-button.js

@@ -51,7 +51,7 @@ const MenuButton = /*@__PURE__*/ proxyCustomElement(class MenuButton extends HTM
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '3cdbc04925c8c62ac65763fe83efdfffda0a16fa', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '349011cb97d80efbbdccde34096e34abe98d03ff', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -60,7 +60,7 @@ const MenuButton = /*@__PURE__*/ proxyCustomElement(class MenuButton extends HTM
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '63db22c49359bf77fa344f5a13b733570ff088a4' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '011af3fa930dd888f7f4aca24ba294d23b2ceba7', class: "button-inner" }, h("slot", { key: 'dc75fd2f1f3d42eb30aefd9cd3ef137d6c8a515a' }, h("ion-icon", { key: '55cfdc7df1eab0bdc386e2a5c90be87be56a000a', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'e8b326cd96486ad62026413b5616801d496fc969' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'a9878e6fd2f6bd774c4f1d142d7ab2cf09c4ad44', class: "button-inner" }, h("slot", { key: 'd5e7a66233bad1cce7ad814f403aac2f73792d83' }, h("ion-icon", { key: '3c01d567a4ed591a0db3b5ac6645b7afcda43e51', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return this; }
     static get style() { return {

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: 'fa7f54b6264dd2110f4cda34aaa6ea7ec4f5040f', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '6148f06183b46097ec7ce279891d6dbf41a6a531', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
+            } }, h("slot", { key: '2cc7bb2fa93d354321cb7271be441ee047f877c1' })));
     }
     static get style() { return IonMenuToggleStyle0; }
 }, [1, "ion-menu-toggle", {

package/components/ion-menu.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@s
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays.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 { m as isEndSide, i as inheritAriaAttributes, n as assert, k as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
 import { h as hostContext } from './theme.js';
@@ -596,14 +596,14 @@ 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: 'b75052668f8384e55009d5a9f436f2de590bf2c3', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '6cd86687e471bd5336ad1d71d0d0323dc2991570', 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,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'd500486fe03917b9115fa399921d73f95602d14e', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2078b5b36210658681980be69b8dc791e0b7dd96' })), h("ion-backdrop", { key: 'c43171d0f0804c0430b319de54e80c38d1768c80', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'b9420db4e6d8c77903ed9191ddb092c24d8006b0', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3633bed75a12aa7437613497e7dabb1c62a2ebb9' })), h("ion-backdrop", { key: '00d60182f11380b51033b5aca9376ce29c41ae37', 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

@@ -1628,9 +1628,9 @@ 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: 'dbd61751e4964ad81fc1dee19468b716d4f23c8a', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '0fc72571cfcdfeadeffbec280e79f864a5dc3577', "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: 'a7646a7a7aeef7eef1bb647373f509d4a26036ad', 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: 'bc6bc6ff7d2357206265240eaa76d730a0ecfd2c',
+            }, 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: '4ce27aace82b3c2a24b5dcef0cbb2d27a8d333d1', 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: 'b54e9d3bf5f31b9533535d8273538ff0ea69bc53',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1639,7 +1639,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             */
             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",
             // 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: '0ce06b895deb1da5fbdefa65b079dbd1ada349f7' }))));
+            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: '3e143a68b0293a9cd7c075b0f8b5455a5cabe42d' }))));
     }
     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: '7b6b746a0e945a48b308eec2dcd9893daf00bca1', onClick: this.onClick });
+        return h(Host, { key: '467f69e018b51cbf5d8e672a3994087d615920b7', onClick: this.onClick });
     }
     get el() { return this; }
 }, [0, "ion-nav-link", {

package/components/ion-nav.js

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

package/components/ion-note.js

@@ -1,7 +1,49 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { N as Note, d as defineCustomElement$1 } from './note.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createColorClasses } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6));font-size:max(14px, 1rem)}";
+const IonNoteIosStyle0 = noteIosCss;
+
+const noteMdCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));font-size:0.875rem}";
+const IonNoteMdStyle0 = noteMdCss;
+
+const Note = /*@__PURE__*/ proxyCustomElement(class Note extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.color = undefined;
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'c28c242d5e60e447c4c926041fa62abfbad3f0fd', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: 'e4c8e1d32527ba4a9c6d10d579aaba06cb040042' })));
+    }
+    static get style() { return {
+        ios: IonNoteIosStyle0,
+        md: IonNoteMdStyle0
+    }; }
+}, [33, "ion-note", {
+        "color": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-note"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-note":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Note);
+            }
+            break;
+    } });
+}
 
 const IonNote = Note;
 const defineCustomElement = defineCustomElement$1;

package/components/ion-picker-legacy.js

@@ -240,11 +240,11 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4144eef6498c66a82f3873ae5c8e55d2ee1d381e', "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: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', 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: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '4344a38bea27537a0f907d929ae3e88d16e751a5', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'a9634e85c6feb73e298407dadb02c1260e2f2f9b', tabindex: "0" }), h("div", { key: '871bb60dbb57c7b0c357491d84da97a2b3900071', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '92e0d584c0d5e0c365af7d48781181248718e17e', 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: '76c9024a822a96a9f9cd0e121629e5c02ba757e3', class: "picker-columns" }, h("div", { key: 'd1326bb793aedff0a5fc16eb2ddd5d5152210838', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1a9273ff23a5fc42003929dbdc267a29587cc5c6', class: "picker-below-highlight" }))), h("div", { key: 'cbc1280639e26e1b50e8dc9b6e640b357eb22c33', tabindex: "0" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-progress-bar.js

@@ -29,7 +29,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'b38b62bfe013dfe5f847a6faf6934b02ce32c113', 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

@@ -96,8 +96,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),
                 });
@@ -263,33 +269,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) });
@@ -316,6 +382,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);
     }
@@ -459,7 +535,36 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         if (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: {
@@ -512,7 +617,7 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ff8dbbb4e0c8b9802408a40fa0d93528ec730a9f', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '576015afd256abb6faa88630dc482b75333c69e0', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -521,10 +626,10 @@ const Range = /*@__PURE__*/ proxyCustomElement(class Range extends HTMLElement {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '2164b0ec67215d7791d795a1f6274b595ad74d80', class: "range-wrapper", id: "range-label" }, h("div", { key: '717346e2bcfb29a3a5ef39b5fec226d484aa1f46', class: {
+            }) }, h("label", { key: '45619166eaf5015154ca24aeac8d088fed9606ec', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e5ce095b0b1545dd9d39a04bc0d81fa643ec3739', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'a6ffff056ab81a45f1a0b38fa42031c51ceabb52', class: "native-wrapper" }, h("slot", { key: 'df3f155a9886cc62d3f0d23467c406c52cd3e082', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3fab316ecdff317c07010a204d89e85af12d347e', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9bff70bac89c8439b3a8933c2d4dbf0851a49165', class: "native-wrapper" }, h("slot", { key: '5c62813869cad97aa70a1c766c5df7a8fd279258', name: "start" }), this.renderRangeSlider(), h("slot", { key: '888d5665c12debcda85af5024842f5468b086c70', name: "end" })))));
     }
     get el() { return this; }
     static get watchers() { return {

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: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, h("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', 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: '402b0e02cfee42358c4fd690b60c8eb39386569f', 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: '14a4ef75a0f56d499ee0e0bb6ba23565626ad442', class: mode }, h("div", { key: 'b738ea69256548d66512744ecaa5cbf651c1f6dd', 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: '6cbcc1f90df56b53c51a99c5a63e185dba00e9b2', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { 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: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
+        return (h(Host, { key: 'b5f7ccfe964f0f970c46ae813649c36625d82a1d', 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: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
+        return (h(Host, { key: '868762829627e101926293f5e7e9f4bcf54490b1', 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: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, h("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, h("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '068457526894b0f557537d5b85f5596781988bbd', class: mode }, h("slot", { key: '006afcb58b0c8c0e4988e58d2c1441a7f4472de1' }, h("ion-icon", { key: '25e63dd8a8eeee62e6c5095bb39f887af2c82124', 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: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '9dac58d3edaa6b5278c3636e0e245c7ddc2cb888', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), h("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
+            }) }, h("a", Object.assign({ key: '81d2ffd44f798703da2cd6f926576c6e96a7c41f' }, attrs), h("slot", { key: '26853d510e4cdb93b436cdf70ebb5a7dca288bfb' }))));
     }
     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: '94fc9ea2d94548a7b4703498b9d740a0cf9b43a0' });
+        return h("slot", { key: '3425cdea6102946b2a7f4dcb3bb0133b2c7c561c' });
     }
     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: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        return (h(Host, { key: '8b54835ea837e25c278ffa3e298238e92b095ccc', class: getIonMode(this) }, h("slot", { key: 'cb77d85c8d02fdee29a72b58f3091db8daeaf3b2' })));
     }
     static get style() { return IonRowStyle0; }
 }, [1, "ion-row"]);