@ionic/core 8.7.19-dev.11772655618.1af0949f → 8.7.19-dev.11773072221.15efeed0

package/dist/collection/components/range/range.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
 import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -17,30 +17,13 @@ import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
  *
- * @part label - The label text describing the range.
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
+ * @part pin - The counter that appears above a knob.
+ * @part knob - The handle that is used to drag the range.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
- * @part knob-handle - The container that wraps the knob and handles drag interactions.
- * @part knob-handle-a - The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part knob-handle-b - The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part knob-handle-lower - The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
- * @part knob-handle-upper - The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
- * @part pin - The value indicator displayed above a knob.
- * @part pin-a - The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part pin-b - The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part pin-lower - The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
- * @part pin-upper - The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
- * @part knob - The visual knob element on the range track.
- * @part knob-a - The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part knob-b - The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
- * @part knob-lower - The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
- * @part knob-upper - The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
- * @part activated - Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`.
- * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
- * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
- * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part label - The label text describing the range.
  */
 export class Range {
     constructor() {
@@ -51,12 +34,6 @@ export class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
-        /**
-         * Used to avoid setting the focused state on click or tap. The focused
-         * state is only set when the focus comes from the keyboard (e.g. Tab).
-         * This is set to true on pointer down (mouse/touch).
-         */
-        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -166,31 +143,6 @@ export class Range {
                 this.gesture.enable(!this.disabled);
             }
         };
-        /**
-         * Observes the knob handles for the ion-activated class and syncs
-         * activatedKnob so the activated part is correctly set on the handle,
-         * knob, and pin.
-         */
-        this.setupActivatedObserver = () => {
-            const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
-            const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
-            const syncActivated = () => {
-                this.activatedKnob = (knobHandleA === null || knobHandleA === void 0 ? void 0 : knobHandleA.classList.contains('ion-activated'))
-                    ? 'A'
-                    : (knobHandleB === null || knobHandleB === void 0 ? void 0 : knobHandleB.classList.contains('ion-activated'))
-                        ? 'B'
-                        : undefined;
-            };
-            if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-                this.activatedObserver = new MutationObserver(syncActivated);
-                this.activatedObserver.observe(this.el.shadowRoot, {
-                    attributes: true,
-                    attributeFilter: ['class'],
-                    subtree: true,
-                });
-            }
-            syncActivated();
-        };
         this.handleKeyboard = (knob, isIncrease) => {
             const { ensureValueInBounds } = this;
             let step = this.step;
@@ -213,7 +165,6 @@ export class Range {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
-                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -224,20 +175,21 @@ export class Range {
             }
         };
         this.onKnobFocus = (knob) => {
-            // Clicking focuses the range which is needed for the keyboard,
-            // but we only want to add the ion-focused class when focused via Tab.
-            if (!this.focusFromPointer) {
-                this.focusedKnob = knob;
-            }
-            else {
-                this.focusFromPointer = false;
-                this.focusedKnob = undefined;
-            }
-            // If the knob was not already focused, emit the focus event
             if (!this.hasFocus) {
                 this.hasFocus = true;
                 this.ionFocus.emit();
             }
+            // Manually manage ion-focused class for dual knobs
+            if (this.dualKnobs && this.el.shadowRoot) {
+                const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                // Remove ion-focused from both knobs first
+                knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                // Add ion-focused only to the focused knob
+                const focusedKnobEl = knob === 'A' ? knobA : knobB;
+                focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
+            }
         };
         this.onKnobBlur = () => {
             // Check if focus is moving to another knob within the same range
@@ -249,18 +201,18 @@ export class Range {
                 if (!isStillFocusedOnKnob) {
                     if (this.hasFocus) {
                         this.hasFocus = false;
-                        this.focusedKnob = undefined;
                         this.ionBlur.emit();
                     }
+                    // Remove ion-focused from both knobs when focus leaves the range
+                    if (this.dualKnobs && this.el.shadowRoot) {
+                        const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                        const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                        knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                        knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                    }
                 }
             }, 0);
         };
-        this.onKnobMouseEnter = (knob) => {
-            this.hoveredKnob = knob;
-        };
-        this.onKnobMouseLeave = () => {
-            this.hoveredKnob = undefined;
-        };
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -337,7 +289,6 @@ export class Range {
         this.originalIonInput = this.ionInput;
         this.setupGesture();
         this.updateRatio();
-        this.setupActivatedObserver();
         this.didLoad = true;
     }
     connectedCallback() {
@@ -354,7 +305,6 @@ export class Range {
          */
         if (this.didLoad) {
             this.setupGesture();
-            this.setupActivatedObserver();
         }
         const ionContent = findClosestIonContent(this.el);
         this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
@@ -364,10 +314,6 @@ export class Range {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        if (this.activatedObserver) {
-            this.activatedObserver.disconnect();
-            this.activatedObserver = undefined;
-        }
     }
     getValue() {
         var _a;
@@ -438,7 +384,7 @@ export class Range {
          * started dragging the knob.
          *
          * This is necessary to determine which knob the user is dragging,
-         * especially when using dual knobs.
+         * 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
@@ -465,7 +411,7 @@ export class Range {
          * dragged the knob. They just tapped on the bar.
          *
          * This is necessary to determine which knob the user is changing,
-         * especially when using dual knobs.
+         * especially when it's a dual knob.
          * Plus, it determines when to apply certain styles.
          */
         if (this.pressedKnob === undefined) {
@@ -520,6 +466,7 @@ export class Range {
             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);
@@ -546,23 +493,9 @@ export class Range {
     updateRatio() {
         const value = this.getValue();
         const { min, max } = this;
-        /**
-         * For dual knobs, value gives lower/upper but not which is A vs B.
-         * Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
-         * minimizes change from the current ratios so the knobs don't swap.
-         */
         if (this.dualKnobs) {
-            const lowerRatio = valueToRatio(value.lower, min, max);
-            const upperRatio = valueToRatio(value.upper, min, max);
-            if (Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
-                Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)) {
-                this.ratioA = lowerRatio;
-                this.ratioB = upperRatio;
-            }
-            else {
-                this.ratioA = upperRatio;
-                this.ratioB = lowerRatio;
-            }
+            this.ratioA = valueToRatio(value.lower, min, max);
+            this.ratioB = valueToRatio(value.upper, min, max);
         }
         else {
             this.ratioA = valueToRatio(value, min, max);
@@ -579,6 +512,14 @@ export class Range {
             };
         this.noUpdate = false;
     }
+    setFocus(knob) {
+        if (this.el.shadowRoot) {
+            const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
+            if (knobEl) {
+                knobEl.focus();
+            }
+        }
+    }
     /**
      * Returns true if content was passed to the "start" slot
      */
@@ -596,7 +537,7 @@ export class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, activatedKnob, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
         const rtl = isRTL(this.el);
@@ -656,9 +597,7 @@ export class Range {
                 ticks.push(tick);
             }
         }
-        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl), onPointerDown: () => {
-                this.focusFromPointer = true;
-            },
+        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
@@ -671,7 +610,6 @@ export class Range {
              * we need to listen for the "pointerUp" event.
              */
             onPointerUp: (ev) => {
-                this.focusFromPointer = false;
                 /**
                  * If the user drags the knob on the web
                  * version (does not occur on mobile),
@@ -697,11 +635,6 @@ export class Range {
                 'has-ticks': ticks.length > 0,
             }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
             knob: 'A',
-            position: getKnobPosition('A', this.ratioA, this.ratioB, this.dualKnobs),
-            dualKnobs: this.dualKnobs,
-            activated: activatedKnob === 'A',
-            focused: focusedKnob === 'A',
-            hovered: hoveredKnob === 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
             ratio: this.ratioA,
@@ -714,16 +647,9 @@ export class Range {
             inheritedAttributes,
             onKnobFocus: this.onKnobFocus,
             onKnobBlur: this.onKnobBlur,
-            onKnobMouseEnter: this.onKnobMouseEnter,
-            onKnobMouseLeave: this.onKnobMouseLeave,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
-                position: getKnobPosition('B', this.ratioA, this.ratioB, this.dualKnobs),
-                dualKnobs: this.dualKnobs,
-                activated: activatedKnob === 'B',
-                focused: focusedKnob === 'B',
-                hovered: hoveredKnob === 'B',
                 pressed: pressedKnob === 'B',
                 value: this.valB,
                 ratio: this.ratioB,
@@ -736,12 +662,10 @@ export class Range {
                 inheritedAttributes,
                 onKnobFocus: this.onKnobFocus,
                 onKnobBlur: this.onKnobBlur,
-                onKnobMouseEnter: this.onKnobMouseEnter,
-                onKnobMouseLeave: this.onKnobMouseLeave,
             })));
     }
     render() {
-        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, dualKnobs, min, max } = this;
+        const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
         const inItem = hostContext('ion-item', el);
         /**
          * If there is no start content then the knob at
@@ -756,37 +680,20 @@ export class Range {
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
-        /**
-         * Determine the name and position of the pressed knob to apply
-         * Host classes for styling.
-         */
-        const pressedKnobName = dualKnobs ? pressedKnob === null || pressedKnob === void 0 ? void 0 : pressedKnob.toLowerCase() : undefined;
-        const pressedKnobPosition = dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
-        /**
-         * Determine if any knob is at the min or max value to
-         * apply Host classes for styling.
-         */
-        const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
-        const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'affcac4709096a48a5b4c1864b209b6352f6b078', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
-                'range-dual-knobs': dualKnobs,
                 'range-pressed': pressedKnob !== undefined,
-                [`range-pressed-${pressedKnobName}`]: pressedKnob !== undefined && pressedKnobName !== undefined,
-                [`range-pressed-${pressedKnobPosition}`]: pressedKnob !== undefined && pressedKnobPosition !== undefined,
                 'range-has-pin': pin,
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-                'range-value-min': valueAtMin,
-                'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, h("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', class: {
+            }) }, h("label", { key: 'c7cf95fa831d10b17c137995d0a9e0cf84006a76', class: "range-wrapper", id: "range-label" }, h("div", { key: '5b8479c7939ae0f94a042c3aafd64316e4577d30', 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: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, h("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), h("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c275d822b29a8008e044722e8b6bdabd3ecfad7', class: "native-wrapper" }, h("slot", { key: '03c849d0aa708914984ad57ca292bc5fc66ecad5', name: "start" }), this.renderRangeSlider(), h("slot", { key: '10ca7b8152cac00b45d8fa98ad91410f59fd176a', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -814,8 +721,7 @@ export class Range {
                         "Color": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::Color",
-                            "referenceLocation": "Color"
+                            "id": "src/interface.d.ts::Color"
                         }
                     }
                 },
@@ -978,8 +884,7 @@ export class Range {
                         "PinFormatter": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::PinFormatter",
-                            "referenceLocation": "PinFormatter"
+                            "id": "src/components/range/range-interface.ts::PinFormatter"
                         }
                     }
                 },
@@ -1102,8 +1007,7 @@ export class Range {
                         "RangeValue": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::RangeValue",
-                            "referenceLocation": "RangeValue"
+                            "id": "src/components/range/range-interface.ts::RangeValue"
                         }
                     }
                 },
@@ -1145,9 +1049,6 @@ export class Range {
         return {
             "ratioA": {},
             "ratioB": {},
-            "activatedKnob": {},
-            "focusedKnob": {},
-            "hoveredKnob": {},
             "pressedKnob": {}
         };
     }
@@ -1169,8 +1070,7 @@ export class Range {
                         "RangeChangeEventDetail": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail",
-                            "referenceLocation": "RangeChangeEventDetail"
+                            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
                         }
                     }
                 }
@@ -1191,8 +1091,7 @@ export class Range {
                         "RangeChangeEventDetail": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail",
-                            "referenceLocation": "RangeChangeEventDetail"
+                            "id": "src/components/range/range-interface.ts::RangeChangeEventDetail"
                         }
                     }
                 }
@@ -1243,8 +1142,7 @@ export class Range {
                         "RangeKnobMoveStartEventDetail": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail",
-                            "referenceLocation": "RangeKnobMoveStartEventDetail"
+                            "id": "src/components/range/range-interface.ts::RangeKnobMoveStartEventDetail"
                         }
                     }
                 }
@@ -1265,8 +1163,7 @@ export class Range {
                         "RangeKnobMoveEndEventDetail": {
                             "location": "import",
                             "path": "./range-interface",
-                            "id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail",
-                            "referenceLocation": "RangeKnobMoveEndEventDetail"
+                            "id": "src/components/range/range-interface.ts::RangeKnobMoveEndEventDetail"
                         }
                     }
                 }
@@ -1298,7 +1195,7 @@ export class Range {
             }];
     }
 }
-const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, disabled, activated, focused, hovered, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -1319,74 +1216,16 @@ const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, di
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, onMouseEnter: () => onKnobMouseEnter(knob), onMouseLeave: onKnobMouseLeave, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
             'range-knob-handle': true,
-            'range-knob-handle-a': knob === 'A',
-            'range-knob-handle-b': knob === 'B',
+            'range-knob-a': knob === 'A',
+            'range-knob-b': knob === 'B',
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-            'ion-focused': focused,
-        }, part: [
-            'knob-handle',
-            dualKnobs && knob === 'A' && 'knob-handle-a',
-            dualKnobs && knob === 'B' && 'knob-handle-b',
-            dualKnobs && position === 'lower' && 'knob-handle-lower',
-            dualKnobs && position === 'upper' && 'knob-handle-upper',
-            pressed && 'pressed',
-            focused && 'focused',
-            hovered && 'hover',
-            activated && 'activated',
-        ]
-            .filter(Boolean)
-            .join(' '), style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: [
-            'pin',
-            dualKnobs && knob === 'A' && 'pin-a',
-            dualKnobs && knob === 'B' && 'pin-b',
-            dualKnobs && position === 'lower' && 'pin-lower',
-            dualKnobs && position === 'upper' && 'pin-upper',
-            pressed && 'pressed',
-            focused && 'focused',
-            hovered && 'hover',
-            activated && 'activated',
-        ]
-            .filter(Boolean)
-            .join(' ') }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: [
-            'knob',
-            dualKnobs && knob === 'A' && 'knob-a',
-            dualKnobs && knob === 'B' && 'knob-b',
-            dualKnobs && position === 'lower' && 'knob-lower',
-            dualKnobs && position === 'upper' && 'knob-upper',
-            pressed && 'pressed',
-            focused && 'focused',
-            hovered && 'hover',
-            activated && 'activated',
-        ]
-            .filter(Boolean)
-            .join(' ') })));
-};
-/**
- * Returns whether the given knob is at the lower or upper position based
- * on current ratios for the given knob.
- *
- * When both knobs have the same ratio, we only want one "lower" and one
- * "upper" position so that the `lower` and `upper` parts are not applied to
- * the same knob. In that case, we treat knob "A" as the lower position and
- * knob "B" as the upper position.
- */
-const getKnobPosition = (knob, ratioA, ratioB, dualKnobs) => {
-    if (!dualKnobs) {
-        return 'lower';
-    }
-    if (ratioA === ratioB) {
-        return knob === 'A' ? 'lower' : 'upper';
-    }
-    if (knob === 'A') {
-        return ratioA < ratioB ? 'lower' : 'upper';
-    }
-    return ratioB < ratioA ? 'lower' : 'upper';
+        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;