@ionic/core 8.7.17-dev.11769628168.11eca7cd → 8.7.17-dev.11769813102.16c5bfac

package/hydrate/index.js

@@ -12871,6 +12871,7 @@ const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:colu
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -14046,7 +14047,7 @@ class Datetime {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (hAsync("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
@@ -14121,7 +14122,7 @@ class Datetime {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
-        return (hAsync("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
@@ -14133,7 +14134,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 ev.stopPropagation();
@@ -14145,7 +14146,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 ev.stopPropagation();
@@ -14178,7 +14179,7 @@ class Datetime {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
@@ -14189,7 +14190,7 @@ class Datetime {
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
@@ -14202,7 +14203,7 @@ class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (hAsync("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
@@ -14544,7 +14545,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '19e20c9b6b5f9467e91a2567b6dc7d9d38b56cc3', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -14554,7 +14555,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: 'e31b5ef76cd6262dafd39f2d21980887880ec32e', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14626,6 +14627,7 @@ class Datetime {
 let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
+const WHEEL_PART = 'wheel';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;
 
@@ -28715,13 +28717,28 @@ const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:
  * @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 label - The label text describing the range.
+ * @part knob-handle - The container element that wraps the knob and handles drag interactions.
+ * @part knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`.
+ * @part pin - The counter that appears above a knob.
+ * @part pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`.
+ * @part pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`.
+ * @part pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`.
+ * @part pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`.
+ * @part knob - The visual knob element that appears on the range track.
+ * @part knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-upper - The visual knob element for the upper knob. Only available 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.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time.
  */
 class Range {
     constructor(hostRef) {
@@ -28739,6 +28756,7 @@ class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -28870,6 +28888,7 @@ class Range {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
+                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -28880,21 +28899,20 @@ 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
@@ -28906,15 +28924,9 @@ 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);
         };
@@ -29171,7 +29183,6 @@ 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);
@@ -29198,9 +29209,23 @@ 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) {
-            this.ratioA = valueToRatio(value.lower, min, max);
-            this.ratioB = valueToRatio(value.upper, min, max);
+            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;
+            }
         }
         else {
             this.ratioA = valueToRatio(value, min, max);
@@ -29217,14 +29242,6 @@ 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
      */
@@ -29242,7 +29259,7 @@ class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        const { min, max, step, handleKeyboard, focusedKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
         const rtl = isRTL$1(this.el);
@@ -29302,7 +29319,9 @@ class Range {
                 ticks.push(tick);
             }
         }
-        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl), onPointerDown: () => {
+                this.focusFromPointer = true;
+            },
             /**
              * Since the gesture has a threshold, the value
              * won't change until the user has dragged past
@@ -29315,6 +29334,7 @@ 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),
@@ -29340,7 +29360,10 @@ class Range {
                 'has-ticks': ticks.length > 0,
             }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
             knob: 'A',
+            position: this.dualKnobs ? (this.ratioA <= this.ratioB ? 'lower' : 'upper') : 'lower',
+            dualKnobs: this.dualKnobs,
             pressed: pressedKnob === 'A',
+            focused: focusedKnob === 'A',
             value: this.valA,
             ratio: this.ratioA,
             pin,
@@ -29355,7 +29378,10 @@ class Range {
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
+                position: this.ratioB <= this.ratioA ? 'lower' : 'upper',
+                dualKnobs: this.dualKnobs,
                 pressed: pressedKnob === 'B',
+                focused: focusedKnob === 'B',
                 value: this.valB,
                 ratio: this.ratioB,
                 pin,
@@ -29392,10 +29418,11 @@ class Range {
         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 (hAsync(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6f3ac66d528c499f840afd31fa3958f2749c9ff5', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
+                'range-dual-knobs': dualKnobs,
                 'range-pressed': pressedKnob !== undefined,
                 'range-has-pin': pin,
                 [`range-label-placement-${labelPlacement}`]: true,
@@ -29403,10 +29430,10 @@ class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', class: {
+            }) }, hAsync("label", { key: 'a33e928dc37228bd4e1c4d3f804a7bb49d484088', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '5d4b885fd1a87621734244701838f86d5145b914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '5341da8d19eb29091df680978a0e20cc8f2eec65', class: "native-wrapper" }, hAsync("slot", { key: '09f1437078032676695442d8c827a16faa7dffe2', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '02b7781970ea4d44f10b5f4627a2ca36eca45f85', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '335a10bdb191a179c426ecba3541adada6d6aeb8', class: "native-wrapper" }, hAsync("slot", { key: '57dc846d33d0e1b1f4f18fc8553dc7fa2cca70bf', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '57f85044b4f507015d905a73dca9d13a224560b1', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29444,14 +29471,15 @@ class Range {
             "labelPlacement": [1, "label-placement"],
             "ratioA": [32],
             "ratioB": [32],
-            "pressedKnob": [32]
+            "pressedKnob": [32],
+            "focusedKnob": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["color", "color"]]
     }; }
 }
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
+const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, disabled, pressed, focused, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -29474,14 +29502,45 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
             }
         }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
             'range-knob-handle': true,
-            'range-knob-a': knob === 'A',
-            'range-knob-b': knob === 'B',
+            'range-knob-handle-a': knob === 'A',
+            'range-knob-handle-b': knob === 'B',
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-        }, 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 && (hAsync("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), hAsync("div", { class: "range-knob", role: "presentation", part: "knob" })));
+            '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',
+        ]
+            .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 && (hAsync("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',
+        ]
+            .filter(Boolean)
+            .join(' ') }, pinFormatter(value))), hAsync("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',
+        ]
+            .filter(Boolean)
+            .join(' ') })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;