@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition42.js

@@ -1,12 +1,45 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { C as Checkbox, a as checkboxRegistries } from './definition15.js';
-import { a as radioRegistries } from './definition40.js';
-import { C as Connotation } from './enums.js';
-import { R as Radio } from './radio.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, a as attr, o as observable, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
+import { c as keyHome, d as keyEnd, e as keyArrowUp, k as keyArrowLeft, f as keyArrowDown, a as keyArrowRight } from './key-codes2.js';
+import './affix.js';
+import { f as formElements } from './index2.js';
+import { L as Localized } from './localized.js';
+import { F as FormAssociated } from './form-associated.js';
+import { l as limit, g as getMarkersTemplate } from './slider.template.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { O as Orientation } from './aria2.js';
+import { r as ref } from './ref.js';
 import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}\n";
+
+class _RangeSlider extends FoundationElement {
+}
+class FormAssociatedRangeSlider extends FormAssociated(_RangeSlider) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+const getDecimalPlaces = (num) => {
+  const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  return Math.max(
+    0,
+    // Number of digits right of decimal point.
+    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0)
+  );
+};
+const roundToStepValue = (value, step) => {
+  const decimalPlaces = getDecimalPlaces(step);
+  const factor = Math.pow(10, decimalPlaces);
+  const roundedValue = Math.round(value / step) * step;
+  return Math.round(roundedValue * factor) / factor;
+};
+
+const lerp = (a, b, value) => a + (b - a) * value;
+const inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,125 +52,537 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class SelectableBox extends FoundationElement {
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+var _isInternalValueUpdate, _updateValues, updateValues_fn, _applyStep, applyStep_fn, _updateFormValue, updateFormValue_fn, _thumbs, thumbs_get, _thumbConstraints, thumbConstraints_get, _draggingThumb, _updateThumbPositions, updateThumbPositions_fn, _thumbTrackEndOffset, thumbTrackEndOffset_fn, _calculateValueFromMouseEvent, calculateValueFromMouseEvent_fn, _roundToNearestStep, roundToNearestStep_fn, _registerThumbListeners, registerThumbListeners_fn, _unregisterThumbListeners, unregisterThumbListeners_fn, _onThumbMousedown, _onThumbKeydown, _registerDragHandlers, registerDragHandlers_fn, _unregisterDragListeners, unregisterDragListeners_fn, _onDragMove, _onDragEnd;
+const Direction = {
+  Increment: 1,
+  Decrement: -1
+};
+let RangeSlider = class extends FormAssociatedRangeSlider {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.checked = false;
-    this.clickable = false;
-    this.clickableBox = false;
-    this.tight = false;
+    __privateAdd(this, _updateValues);
+    __privateAdd(this, _applyStep);
+    __privateAdd(this, _updateFormValue);
+    __privateAdd(this, _thumbs);
+    __privateAdd(this, _thumbConstraints);
+    __privateAdd(this, _updateThumbPositions);
+    __privateAdd(this, _thumbTrackEndOffset);
+    __privateAdd(this, _calculateValueFromMouseEvent);
+    __privateAdd(this, _roundToNearestStep);
+    // --- Event handling ---
+    __privateAdd(this, _registerThumbListeners);
+    __privateAdd(this, _unregisterThumbListeners);
+    __privateAdd(this, _registerDragHandlers);
+    __privateAdd(this, _unregisterDragListeners);
+    // --- Start & end values ---
+    __privateAdd(this, _isInternalValueUpdate, false);
+    this.start = "";
+    this.end = "";
+    this.min = 0;
+    this.max = 10;
+    this.step = 1;
+    this.orientation = Orientation.horizontal;
+    this.ariaStartLabel = null;
+    this.ariaEndLabel = null;
+    this.markers = false;
+    this.valueTextFormatter = (value) => value;
+    // --- Thumbs ---
+    /**
+     * @internal
+     */
+    this._trackEl = null;
+    /**
+     * @internal
+     */
+    this._startThumbEl = null;
+    /**
+     * @internal
+     */
+    this._endThumbEl = null;
+    __privateAdd(this, _draggingThumb, false);
+    this._startThumbCss = "";
+    this._endThumbCss = "";
+    this._selectedRangeCss = "";
+    __privateAdd(this, _onThumbMousedown, (event) => {
+      if (this.disabled || event.defaultPrevented) {
+        return;
+      }
+      let target = event.target;
+      if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) {
+        target = this._startThumbEl;
+      }
+      target.focus();
+      __privateSet(this, _draggingThumb, target === this._startThumbEl ? "start" : "end");
+      __privateMethod(this, _registerDragHandlers, registerDragHandlers_fn).call(this);
+    });
+    __privateAdd(this, _onThumbKeydown, (e) => {
+      const thumb = e.target === this._startThumbEl ? "start" : "end";
+      if (e.key === keyHome) {
+        e.preventDefault();
+        __privateMethod(this, _updateValues, updateValues_fn).call(this, { [thumb]: `${__privateGet(this, _thumbConstraints, thumbConstraints_get)[thumb].min}` });
+      } else if (e.key === keyEnd) {
+        e.preventDefault();
+        __privateMethod(this, _updateValues, updateValues_fn).call(this, { [thumb]: `${__privateGet(this, _thumbConstraints, thumbConstraints_get)[thumb].max}` });
+      } else if (!e.shiftKey) {
+        switch (e.key) {
+          case keyArrowRight:
+          case keyArrowDown:
+            e.preventDefault();
+            __privateMethod(this, _applyStep, applyStep_fn).call(this, thumb, Direction.Increment);
+            break;
+          case keyArrowLeft:
+          case keyArrowUp:
+            e.preventDefault();
+            __privateMethod(this, _applyStep, applyStep_fn).call(this, thumb, Direction.Decrement);
+            break;
+        }
+      }
+    });
+    __privateAdd(this, _onDragMove, (e) => {
+      if (this.disabled || e.defaultPrevented || !__privateGet(this, _draggingThumb)) {
+        return;
+      }
+      const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+      const value = __privateMethod(this, _calculateValueFromMouseEvent, calculateValueFromMouseEvent_fn).call(this, sourceEvent);
+      __privateMethod(this, _updateValues, updateValues_fn).call(this, {
+        [__privateGet(this, _draggingThumb)]: `${__privateMethod(this, _roundToNearestStep, roundToNearestStep_fn).call(this, __privateGet(this, _draggingThumb), value)}`
+      });
+    });
+    __privateAdd(this, _onDragEnd, () => {
+      __privateSet(this, _draggingThumb, false);
+      __privateMethod(this, _unregisterDragListeners, unregisterDragListeners_fn).call(this);
+    });
   }
   /**
    * @internal
    */
-  _handleCheckedChange() {
-    if (this.controlType === "radio" && this.checked)
-      return;
-    this.checked = !this.checked;
-    if (this.clickableBox || this.clickable)
-      this.$emit("change");
+  startChanged() {
+    this.currentStart = this.start;
+    if (!__privateGet(this, _isInternalValueUpdate)) {
+      this.dirtyValue = true;
+      __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+    }
+    if (this.$fastController.isConnected) {
+      __privateMethod(this, _updateThumbPositions, updateThumbPositions_fn).call(this);
+    }
   }
   /**
    * @internal
    */
-  _handleKeydown(event) {
-    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
-      return this._handleCheckedChange();
-    return true;
+  initialStartChanged(_, newValue) {
+    if (newValue && !this.dirtyValue) {
+      this.start = newValue;
+      this.dirtyValue = false;
+    }
   }
-}
+  /**
+   * @internal
+   */
+  currentStartChanged() {
+    this.start = this.currentStart;
+  }
+  /**
+   * The start property, typed as a number.
+   *
+   * @public
+   */
+  get startAsNumber() {
+    return parseFloat(this.start);
+  }
+  set startAsNumber(next) {
+    this.start = next.toString();
+  }
+  /**
+   * @internal
+   */
+  endChanged() {
+    this.currentEnd = this.end;
+    if (!__privateGet(this, _isInternalValueUpdate)) {
+      this.dirtyValue = true;
+      __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+    }
+    if (this.$fastController.isConnected) {
+      __privateMethod(this, _updateThumbPositions, updateThumbPositions_fn).call(this);
+    }
+  }
+  /**
+   * @internal
+   */
+  initialEndChanged(_, newValue) {
+    if (newValue && !this.dirtyValue) {
+      this.end = newValue;
+      this.dirtyValue = false;
+    }
+  }
+  /**
+   * @internal
+   */
+  currentEndChanged() {
+    this.end = this.currentEnd;
+  }
+  /**
+   * The end property, typed as a number.
+   *
+   * @public
+   */
+  get endAsNumber() {
+    return parseFloat(this.end);
+  }
+  set endAsNumber(next) {
+    this.end = next.toString();
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    if (this.$fastController.isConnected) {
+      __privateMethod(this, _updateThumbPositions, updateThumbPositions_fn).call(this);
+    }
+  }
+  // --- Form handling ---
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    super.nameChanged(previous, next);
+    __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+  }
+  formResetCallback() {
+    __privateMethod(this, _updateValues, updateValues_fn).call(this, {
+      start: this.initialStart ?? this.min.toString(),
+      end: this.initialEnd ?? this.max.toString()
+    });
+    super.formResetCallback();
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _updateValues, updateValues_fn).call(this, {
+      start: this.start || this.initialStart || this.min.toString(),
+      end: this.end || this.initialEnd || this.max.toString()
+    }, false);
+    __privateMethod(this, _registerThumbListeners, registerThumbListeners_fn).call(this);
+    __privateMethod(this, _updateThumbPositions, updateThumbPositions_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateMethod(this, _unregisterThumbListeners, unregisterThumbListeners_fn).call(this);
+    __privateMethod(this, _unregisterDragListeners, unregisterDragListeners_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _onMouseDown(e) {
+    if (this.disabled || __privateGet(this, _draggingThumb)) {
+      return;
+    }
+    const value = __privateMethod(this, _calculateValueFromMouseEvent, calculateValueFromMouseEvent_fn).call(this, e);
+    const startDistance = Math.abs(value - Number(this.start));
+    const endDistance = Math.abs(value - Number(this.end));
+    const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
+    __privateMethod(this, _updateValues, updateValues_fn).call(this, {
+      [thumb]: `${__privateMethod(this, _roundToNearestStep, roundToNearestStep_fn).call(this, thumb, value)}`
+    });
+    __privateSet(this, _draggingThumb, thumb);
+    __privateGet(this, _thumbs, thumbs_get)[thumb].focus();
+    __privateMethod(this, _registerDragHandlers, registerDragHandlers_fn).call(this);
+  }
+};
+_isInternalValueUpdate = new WeakMap();
+_updateValues = new WeakSet();
+updateValues_fn = function({ start, end }, emitEvents = true) {
+  if (start === this.start) {
+    start = void 0;
+  }
+  if (end === this.end) {
+    end = void 0;
+  }
+  if (start === void 0 && end === void 0) {
+    return;
+  }
+  __privateSet(this, _isInternalValueUpdate, true);
+  if (start !== void 0) {
+    this.start = start;
+  }
+  if (end !== void 0) {
+    this.end = end;
+  }
+  __privateSet(this, _isInternalValueUpdate, false);
+  if (emitEvents) {
+    if (start !== void 0) {
+      this.$emit("input:start");
+    }
+    if (end !== void 0) {
+      this.$emit("input:end");
+    }
+    this.$emit("input");
+    this.$emit("change");
+    this.dirtyValue = true;
+  }
+  __privateMethod(this, _updateFormValue, updateFormValue_fn).call(this);
+};
+_applyStep = new WeakSet();
+applyStep_fn = function(thumb, direction) {
+  __privateMethod(this, _updateValues, updateValues_fn).call(this, {
+    [thumb]: __privateMethod(this, _roundToNearestStep, roundToNearestStep_fn).call(this, thumb, Number(this[thumb]) + direction * this.step).toString()
+  });
+};
+_updateFormValue = new WeakSet();
+updateFormValue_fn = function() {
+  if (!this.name) {
+    this.setFormValue(null);
+  } else {
+    const formData = new FormData();
+    formData.append(this.name, this.start);
+    formData.append(this.name, this.end);
+    this.setFormValue(formData);
+  }
+};
+_thumbs = new WeakSet();
+thumbs_get = function() {
+  return {
+    start: this._startThumbEl,
+    end: this._endThumbEl
+  };
+};
+_thumbConstraints = new WeakSet();
+thumbConstraints_get = function() {
+  return {
+    start: { min: this.min, max: this.endAsNumber },
+    end: { min: this.startAsNumber, max: this.max }
+  };
+};
+_draggingThumb = new WeakMap();
+_updateThumbPositions = new WeakSet();
+updateThumbPositions_fn = function() {
+  const startOffsetPct = __privateMethod(this, _thumbTrackEndOffset, thumbTrackEndOffset_fn).call(this, this.startAsNumber);
+  const endOffsetPct = __privateMethod(this, _thumbTrackEndOffset, thumbTrackEndOffset_fn).call(this, this.endAsNumber);
+  const [dirProp, dimProp] = this.orientation === Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
+  const transition = `transition: ${__privateGet(this, _draggingThumb) ? "none" : "all 0.2s ease"};`;
+  this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
+  this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
+  this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
+};
+_thumbTrackEndOffset = new WeakSet();
+thumbTrackEndOffset_fn = function(value) {
+  return (1 - inverseLerp(this.min, this.max, value)) * 100;
+};
+_calculateValueFromMouseEvent = new WeakSet();
+calculateValueFromMouseEvent_fn = function(e) {
+  const trackClientRect = this._trackEl.getBoundingClientRect();
+  const [minPos, maxPos, valuePos] = this.orientation === Orientation.horizontal ? [
+    this._trackEl.clientLeft,
+    this._trackEl.clientWidth,
+    e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+  ] : [
+    trackClientRect.top,
+    trackClientRect.bottom,
+    e.pageY - document.documentElement.scrollTop
+  ];
+  return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
+};
+_roundToNearestStep = new WeakSet();
+roundToNearestStep_fn = function(thumb, value) {
+  return limit(
+    __privateGet(this, _thumbConstraints, thumbConstraints_get)[thumb].min,
+    __privateGet(this, _thumbConstraints, thumbConstraints_get)[thumb].max,
+    roundToStepValue(value - this.min, this.step) + this.min
+  );
+};
+_registerThumbListeners = new WeakSet();
+registerThumbListeners_fn = function() {
+  for (const thumb of ["start", "end"]) {
+    __privateGet(this, _thumbs, thumbs_get)[thumb].addEventListener("keydown", __privateGet(this, _onThumbKeydown));
+    __privateGet(this, _thumbs, thumbs_get)[thumb].addEventListener(
+      "mousedown",
+      __privateGet(this, _onThumbMousedown),
+      { passive: true }
+    );
+    __privateGet(this, _thumbs, thumbs_get)[thumb].addEventListener(
+      "touchstart",
+      __privateGet(this, _onThumbMousedown),
+      { passive: true }
+    );
+  }
+};
+_unregisterThumbListeners = new WeakSet();
+unregisterThumbListeners_fn = function() {
+  for (const thumb of ["start", "end"]) {
+    __privateGet(this, _thumbs, thumbs_get)[thumb].removeEventListener("keydown", __privateGet(this, _onThumbKeydown));
+    __privateGet(this, _thumbs, thumbs_get)[thumb].removeEventListener(
+      "mousedown",
+      __privateGet(this, _onThumbMousedown)
+    );
+    __privateGet(this, _thumbs, thumbs_get)[thumb].removeEventListener(
+      "touchstart",
+      __privateGet(this, _onThumbMousedown)
+    );
+  }
+};
+_onThumbMousedown = new WeakMap();
+_onThumbKeydown = new WeakMap();
+_registerDragHandlers = new WeakSet();
+registerDragHandlers_fn = function() {
+  window.addEventListener("mousemove", __privateGet(this, _onDragMove), { passive: true });
+  window.addEventListener("touchmove", __privateGet(this, _onDragMove), { passive: true });
+  window.addEventListener("mouseup", __privateGet(this, _onDragEnd));
+  window.addEventListener("touchend", __privateGet(this, _onDragEnd));
+  window.document.addEventListener("mouseleave", __privateGet(this, _onDragEnd));
+};
+_unregisterDragListeners = new WeakSet();
+unregisterDragListeners_fn = function() {
+  window.removeEventListener("mouseup", __privateGet(this, _onDragEnd));
+  window.document.removeEventListener("mouseleave", __privateGet(this, _onDragEnd));
+  window.removeEventListener("mousemove", __privateGet(this, _onDragMove));
+  window.removeEventListener("touchmove", __privateGet(this, _onDragMove));
+  window.removeEventListener("touchend", __privateGet(this, _onDragEnd));
+};
+_onDragMove = new WeakMap();
+_onDragEnd = new WeakMap();
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], SelectableBox.prototype, "ariaLabel", 2);
+  observable
+], RangeSlider.prototype, "start", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "checked", 2);
+  attr({ mode: "fromView", attribute: "start" })
+], RangeSlider.prototype, "initialStart", 2);
 __decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "clickable", 2);
+  attr({ attribute: "current-start" })
+], RangeSlider.prototype, "currentStart", 2);
+__decorateClass([
+  observable
+], RangeSlider.prototype, "end", 2);
+__decorateClass([
+  attr({ mode: "fromView", attribute: "end" })
+], RangeSlider.prototype, "initialEnd", 2);
+__decorateClass([
+  attr({ attribute: "current-end" })
+], RangeSlider.prototype, "currentEnd", 2);
 __decorateClass([
-  attr({ attribute: "clickable-box", mode: "boolean" })
-], SelectableBox.prototype, "clickableBox", 2);
+  attr({ converter: nullableNumberConverter })
+], RangeSlider.prototype, "min", 2);
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], RangeSlider.prototype, "max", 2);
+__decorateClass([
+  attr({ converter: nullableNumberConverter })
+], RangeSlider.prototype, "step", 2);
 __decorateClass([
   attr
-], SelectableBox.prototype, "connotation", 2);
+], RangeSlider.prototype, "orientation", 2);
+__decorateClass([
+  attr({ attribute: "aria-start-label" })
+], RangeSlider.prototype, "ariaStartLabel", 2);
 __decorateClass([
-  attr({ attribute: "control-type" })
-], SelectableBox.prototype, "controlType", 2);
+  attr({ attribute: "aria-end-label" })
+], RangeSlider.prototype, "ariaEndLabel", 2);
 __decorateClass([
   attr({ mode: "boolean" })
-], SelectableBox.prototype, "tight", 2);
+], RangeSlider.prototype, "markers", 2);
+__decorateClass([
+  attr
+], RangeSlider.prototype, "connotation", 2);
+__decorateClass([
+  observable
+], RangeSlider.prototype, "valueTextFormatter", 2);
+__decorateClass([
+  observable
+], RangeSlider.prototype, "_startThumbCss", 2);
+__decorateClass([
+  observable
+], RangeSlider.prototype, "_endThumbCss", 2);
+__decorateClass([
+  observable
+], RangeSlider.prototype, "_selectedRangeCss", 2);
+RangeSlider = __decorateClass([
+  formElements
+], RangeSlider);
+applyMixins(RangeSlider, Localized);
 
-const getClasses = ({ connotation, tight, checked, clickableBox, clickable }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["tight", tight],
-  ["selected", checked],
-  ["clickable", clickableBox || clickable],
-  ["readonly", !clickableBox && !clickable]
+const getClasses = ({ disabled, connotation }) => classNames(
+  "control",
+  ["disabled", Boolean(disabled)],
+  [`connotation-${connotation}`, Boolean(connotation)]
 );
-function handleControlChange(x) {
-  if (!x.clickableBox)
-    x._handleCheckedChange();
-}
-function checkbox(context) {
-  const checkboxTag = context.tagFor(Checkbox);
-  return html`${when((x) => x.controlType !== "radio", html`
-		<${checkboxTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
-		></${checkboxTag}>`)}
-	`;
-}
-function radio(context) {
-  const radioTag = context.tagFor(Radio);
-  return html`${when((x) => x.controlType === "radio", html`
-		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
-			@change="${(x) => handleControlChange(x)}"
-			class="control radio"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
-		></${radioTag}>`)}
-	`;
-}
-const SelectableBoxTemplate = (context) => {
-  return html`<template role="presentation">
-	<div
-		class="${getClasses}"
-		tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-		role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-		aria-pressed="${(x) => (x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
-		aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
-		@keydown="${(x, c) => x._handleKeydown(c.event)}"
-		@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
+const RangeSliderTemplate = () => {
+  return html` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
-		${checkbox(context)}
-		${radio(context)}
-		<slot></slot>
-	</div>
-</template>`;
+		<div class="${getClasses} ${(x) => x.orientation}">
+			<div class="positioning-region">
+				<div ${ref("_trackEl")} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${when(
+    (x) => x.markers,
+    html`${(x) => getMarkersTemplate(
+      x.orientation === Orientation.horizontal,
+      Math.floor((x.max - x.min) / x.step)
+    )}`
+  )}
+				</div>
+				<div
+					${ref("_startThumbEl")}
+					class="thumb-container"
+					style="${(x) => x._startThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
+					aria-valuenow="${(x) => x.start}"
+					aria-valuemin="${(x) => x.min}"
+					aria-valuemax="${(x) => x.end}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				<div
+					${ref("_endThumbEl")}
+					class="thumb-container"
+					style="${(x) => x._endThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
+					aria-valuenow="${(x) => x.end}"
+					aria-valuemin="${(x) => x.start}"
+					aria-valuemax="${(x) => x.max}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+			</div>
+		</div>
+	</template>`;
 };
 
-const selectableBoxDefinition = SelectableBox.compose({
-  baseName: "selectable-box",
-  template: SelectableBoxTemplate,
+const rangeSliderDefinition = RangeSlider.compose({
+  baseName: "range-slider",
+  template: RangeSliderTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const selectableBoxRegistries = [
-  selectableBoxDefinition(),
-  ...checkboxRegistries,
-  ...radioRegistries
-];
-const registerSelectableBox = registerFactory(selectableBoxRegistries);
+const rangeSliderRegistries = [rangeSliderDefinition()];
+const registerRangeSlider = registerFactory(rangeSliderRegistries);
 
-export { selectableBoxRegistries as a, registerSelectableBox as r, selectableBoxDefinition as s };
+export { rangeSliderRegistries as a, registerRangeSlider as b, rangeSliderDefinition as r };