@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/components/range.js

@@ -0,0 +1,1474 @@
+import R from "./resize-observer.js";
+import { n as u, C as I } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as P } from "../chunks/component.styles.DMSLciL5.js";
+import { f as F } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as U } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as $ } from "../chunks/debounce.DaHuiSGU.js";
+import { d as O } from "../chunks/default-value.COZopaet.js";
+import { d as w } from "../chunks/drag.DXEXVXPv.js";
+import { F as N } from "../chunks/form.DgwYWi0O.js";
+import { L as S } from "../chunks/i18n.Bge6Wbrz.js";
+import { c as d } from "../chunks/math.DqTA6ya4.js";
+import { H as A } from "../chunks/slot.j5oheLJC.js";
+import { w as v } from "../chunks/watch.q1sEjPWL.js";
+import { x as M, i as B } from "../chunks/lit-element.jLBm65_O.js";
+import { r as g } from "../chunks/state.CSDxrqLd.js";
+import { t as E } from "../chunks/event-options.CYHYGOd8.js";
+import { e as c } from "../chunks/query.BBf1UFkC.js";
+import { e as p } from "../chunks/class-map.BiVq-cVR.js";
+import { o as k } from "../chunks/if-defined.BRoBj_Rp.js";
+import { l as W } from "../chunks/live.SCz6M8Gs.js";
+import { o as f } from "../chunks/style-map.llVFPd__.js";
+import H from "./tooltip.js";
+import { e as K, n as j } from "../chunks/ref.bzeTdX0K.js";
+import { c as q } from "../chunks/repeat.DbF2p5ae.js";
+function X({
+  edgeMode: t = "center",
+  maxOffset: e,
+  minOffset: i,
+  percentValue: a
+}) {
+  const r = t === "inside" ? i : 0, n = t === "inside" ? 100 - e : 100;
+  let o = a - i, h = a + e;
+  if (t === "inside")
+    o < r && (o = r, h = r + i + e), h > n && (h = n, o = n - i - e);
+  else {
+    if (o < 0) {
+      const m = -o;
+      o = 0, h += m;
+    }
+    if (h > 100) {
+      const m = h - 100;
+      h = 100, o -= m;
+    }
+  }
+  return {
+    maxThumbMaxLeft: d(n, 0, 100),
+    maxThumbMinLeft: d(h, 0, 100),
+    minThumbMaxLeft: d(o, 0, 100),
+    minThumbMinLeft: d(r, 0, 100)
+  };
+}
+function y(t, e, i) {
+  const a = i - e;
+  return a === 0 ? 0 : d((t - e) / a, 0, 1) * 100;
+}
+function Y(t) {
+  return t.filter((e) => !e.hidden);
+}
+function J(t, e) {
+  return Math.floor(t / Math.max(e, 1));
+}
+function G(t, e) {
+  const i = (t - 1) / (e + 1);
+  return Math.ceil(i);
+}
+function Q(t, e) {
+  return t / e * 100;
+}
+function Z(t, e, i, a) {
+  const r = Math.abs(t - e), n = Math.abs(t - i);
+  return r >= a && n >= a;
+}
+function tt(t) {
+  return new Set(t.map((e) => e.value));
+}
+function et(t) {
+  const e = /* @__PURE__ */ new Set(), i = Math.floor(t.length / 2), a = t[i];
+  return a && e.add(a.value), e;
+}
+function it(t, e) {
+  const i = /* @__PURE__ */ new Set(), a = t[0], r = t.at(-1);
+  return a && i.add(a.value), r && e > 1 && i.add(r.value), i;
+}
+function at(t, e, i, a, r, n) {
+  const o = /* @__PURE__ */ new Set(), h = t[0], m = t.at(-1);
+  if (!h || !m)
+    return o;
+  const x = G(t.length, e), b = Q(i, a), D = y(h.value, r, n), _ = y(m.value, r, n);
+  for (let V = 1; V <= e; V++) {
+    const C = V * x, T = t[C];
+    if (!T || C >= t.length - 1)
+      continue;
+    const z = y(T.value, r, n);
+    Z(
+      z,
+      D,
+      _,
+      b
+    ) && o.add(T.value);
+  }
+  return o;
+}
+function rt(t, e, i, a, r) {
+  if (!e || t.length === 0)
+    return /* @__PURE__ */ new Set();
+  const n = Y(t);
+  if (n.length === 0)
+    return /* @__PURE__ */ new Set();
+  const o = J(e, i);
+  if (o >= n.length)
+    return tt(n);
+  if (o <= 1)
+    return et(n);
+  const h = it(n, o);
+  if (o > 2) {
+    const m = o - 2;
+    at(
+      n,
+      m,
+      i,
+      e,
+      a,
+      r
+    ).forEach((b) => h.add(b));
+  }
+  return h;
+}
+var st = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, lt = (t, e, i, a) => {
+  for (var r = nt(e, i), n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (r = o(e, i, r) || r);
+  return r && st(e, i, r), r;
+};
+class L {
+  constructor(e) {
+    this.marksContainerRef = K(), this.containerWidth = 0, this.marksWithLabels = /* @__PURE__ */ new Set(), this.host = e, this.host.addController(this), this.localize = new S(e), this.handleResize = this.handleResize.bind(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+  }
+  hostUpdated() {
+  }
+  /**
+   * Gets all mark elements from the datalist slot.
+   * @returns NodeList of option elements or null
+   */
+  getAllMarks() {
+    return this.host.querySelector("datalist")?.querySelectorAll("option");
+  }
+  /**
+   * Initializes marks based on the datalist slot or auto-generates them from step.
+   * @returns Array of valid mark objects
+   */
+  initMarks() {
+    if (!this.host.showMarks)
+      return [];
+    const e = this.getAllMarks(), i = [];
+    if (e && e.length > 0)
+      e.forEach((a) => {
+        const r = a.getAttribute("value");
+        if (!r)
+          return;
+        const n = Number.parseFloat(r);
+        Number.isNaN(n) || i.push({
+          hidden: a.hasAttribute("hidden"),
+          label: a.textContent || "",
+          value: n
+        });
+      });
+    else {
+      const a = this.host.step || 1, r = this.host.min, n = this.host.max, o = Math.round((n - r) / a);
+      for (let h = 0; h <= o; h++) {
+        const m = r + h * a;
+        i.push({
+          hidden: !1,
+          label: m.toString(),
+          value: m
+        });
+      }
+    }
+    return this.calculateVisibleLabels(i), i;
+  }
+  renderMark(e) {
+    const i = this.localize.dir() === "rtl", a = y(
+      e.value,
+      this.host.min,
+      this.host.max
+    ), r = i ? 100 - a : a;
+    return M` <div
+        class=${p({
+      mark__tick: !0,
+      "mark__tick--hidden": e.hidden
+    })}
+        part="mark-tick"
+        style=${f({ left: `${r}%` })}
+      ></div>
+      <div
+        class=${p({
+      mark__label: !0,
+      "mark__label--hidden": e.hidden || !this.marksWithLabels.has(e.value)
+    })}
+        part="mark-label"
+        style=${f({ left: `${r}%` })}
+      >
+        ${e.label}
+      </div>`;
+  }
+  /**
+   * Calculates which marks should display labels based on available width.
+   * Uses a minimum spacing between labels to prevent overcrowding.
+   */
+  calculateVisibleLabels(e) {
+    this.marksWithLabels = rt(
+      e,
+      this.containerWidth,
+      this.host.markLabelSpacing,
+      this.host.min,
+      this.host.max
+    );
+  }
+  handleResize() {
+    const e = this.marksContainerRef.value?.clientWidth ?? 0;
+    e !== this.containerWidth && (this.containerWidth = e, this.calculateVisibleLabels(this.host.marks), this.host.requestUpdate());
+  }
+  renderMarks() {
+    return M` <cx-resize-observer @cx-resize=${this.handleResize}>
+      <div
+        class="range__marks"
+        ${j(this.marksContainerRef)}
+        style=${f({
+      visibility: this.host.showMarks ? "visible" : "hidden"
+    })}
+      >
+        ${q(
+      this.host.marks,
+      (e) => e.value,
+      (e) => this.renderMark(e)
+    )}
+      </div>
+    </cx-resize-observer>`;
+  }
+}
+lt([
+  $(100)
+], L.prototype, "handleResize");
+const ot = B`
+  :host {
+    --thumb-color: #fff;
+    --thumb-size: 20px;
+    --track-color-active: var(--cx-color-primary);
+    --track-color-inactive: var(--cx-color-neutral-200);
+    --track-active-offset: 0%;
+    --track-height: 6px;
+    --border-radius: 3px;
+    --track-border: none;
+
+    display: block;
+    isolation: isolate;
+  }
+
+  .range {
+    position: relative;
+    cursor: pointer;
+    margin: var(--cx-spacing-large) 0;
+  }
+
+  .range::before {
+    content: '';
+    background-color: var(--track-color-active);
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--percent);
+    z-index: 1;
+  }
+
+  .range__container {
+    position: relative;
+    height: var(--track-height);
+  }
+
+  .range__control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-appearance: none;
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: var(--track-height);
+    background: transparent;
+    line-height: var(--cx-input-height-medium);
+    vertical-align: middle;
+    margin: 0;
+
+    background-image: linear-gradient(
+      to right,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive)
+        min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive)
+        max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
+
+    cursor: pointer;
+  }
+
+  .range--disabled .range__control {
+    cursor: default;
+  }
+
+  .range--rtl .range__control {
+    background-image: linear-gradient(
+      to left,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive)
+        min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive)
+        max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
+  }
+
+  /* Webkit */
+  .range__control::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--track-height);
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+  }
+
+  .range__control::-webkit-slider-thumb {
+    display: none;
+  }
+
+  .range__control::-moz-range-thumb {
+    display: none;
+    visibility: hidden; /** Just display: none doesn't seem to work in Firefox */
+  }
+
+  /* Firefox */
+  .range__control::-moz-focus-outer {
+    border: 0;
+  }
+
+  .range__control::-moz-range-progress {
+    background-color: var(--track-color-active);
+    border-radius: var(--border-radius);
+    height: var(--track-height);
+  }
+
+  .range__control::-moz-range-track {
+    width: 100%;
+    height: var(--track-height);
+    background-color: var(--track-color-inactive);
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+  }
+
+  .range__control::-moz-range-thumb {
+    display: none;
+  }
+
+  /* States */
+  .range__control:focus-visible {
+    outline: none;
+  }
+
+  .range__control:disabled {
+    opacity: 0.5;
+  }
+
+  .range__control:disabled::-webkit-slider-thumb {
+    cursor: default;
+  }
+
+  .range__control:disabled::-moz-range-thumb {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    .range__control,
+    .range__control::-webkit-slider-thumb {
+      border: solid 1px transparent;
+    }
+
+    .range__control::-moz-range-thumb {
+      border: solid 1px transparent;
+    }
+  }
+
+  ::slotted([slot='marks']) {
+    display: none;
+  }
+
+  .range__marks {
+    position: absolute;
+    height: 10px;
+    width: 100%;
+    transform: translateY(-50%);
+    display: flex;
+  }
+
+  .mark__tick {
+    height: 10px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 1px solid var(--cx-color-neutral-1000);
+  }
+  .mark__tick--hidden {
+    visibility: hidden;
+  }
+  .mark__label {
+    position: absolute;
+    top: var(--cx-spacing-medium);
+    transform: translateX(-50%);
+  }
+  .mark__label--hidden {
+    visibility: hidden;
+  }
+
+  .range__thumb {
+    position: absolute;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    border: var(--cx-panel-border-width) solid var(--cx-panel-border-color);
+    box-shadow: var(--cx-shadow-large);
+    top: 50%;
+    transform: translate(-50%, -50%);
+    left: var(--percent);
+    z-index: 1;
+  }
+
+  .range__thumb:dir(rtl) {
+    left: calc(100% - var(--percent));
+  }
+
+  .range__control:focus-visible ~ .range__thumb {
+    outline: var(--cx-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .range--disabled .range__container {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  /* ============================================
+   * Multi Range Styles
+   * ============================================ */
+
+  .range-slider {
+    --track-left-inset: 0%;
+    --track-right-inset: 0%;
+
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: var(--track-height);
+  }
+
+  .range-slider::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: var(--track-left-inset);
+    width: calc(100% - var(--track-left-inset) - var(--track-right-inset));
+    height: 100%;
+    background: var(--track-color-inactive);
+    border-radius: calc(var(--track-height) / 2);
+  }
+
+  .range-slider--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .range-slider__thumb {
+    position: absolute;
+    z-index: 3;
+    top: 50%;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    transform: translate(-50%, -50%);
+    border-radius: var(--cx-border-radius-circle);
+    background-color: var(--thumb-color);
+    border: var(--cx-panel-border-width) solid var(--cx-panel-border-color);
+    box-shadow: var(--cx-shadow-large);
+    cursor: pointer;
+    transition: box-shadow 0.15s ease;
+  }
+
+  .range-slider__thumb:focus {
+    outline: none;
+  }
+
+  .range-slider__thumb:focus-visible {
+    outline: var(--cx-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .range-slider__thumb--disabled {
+    z-index: 2;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .range-slider__thumb--slotted {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    width: auto;
+    height: auto;
+    display: flex;
+  }
+
+  .range-slider__thumb--slotted ::slotted(*) {
+    pointer-events: none;
+  }
+
+  .range-slider__range {
+    position: absolute;
+    z-index: 1;
+    transform: translate(0, -50%);
+    top: 50%;
+    height: 100%;
+    background: var(--track-color-active);
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+  }
+
+  .range-slider--disabled .range-slider__thumb,
+  .range-slider--disabled .range-slider__range {
+    cursor: not-allowed;
+  }
+
+  .range-slider__input--min,
+  .range-slider__input--max {
+    display: none;
+  }
+`;
+var ht = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, l = (t, e, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? ut(e, i) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (r = (a ? o(e, i, r) : o(r)) || r);
+  return a && r && ht(e, i, r), r;
+};
+let s = class extends I {
+  constructor() {
+    super(), this.formControlController = new N(this), this.hasSlotController = new A(
+      this,
+      "help-text",
+      "label",
+      "thumb-min",
+      "thumb-max"
+    ), this.localize = new S(this), this.markController = new L(this), this.hasFocus = !1, this.hasTooltip = !1, this._multiValue = { max: 75, min: 25 }, this._singleValue = 0, this.multiDragTarget = null, this.multiIsDragging = !1, this.multiRangeWidth = 0, this.multiDragStartValue = { max: 0, min: 0 }, this.thumbConstraints = {
+      max: { maxLeft: 100, minLeft: 0 },
+      min: { maxLeft: 100, minLeft: 0 }
+    }, this.state = "idle", this.title = "", this.name = "", this.multi = !1, this.label = "", this.helpText = "", this.disabled = !1, this.min = 0, this.max = 100, this.markLabelSpacing = 10, this.tooltipPlacement = "top", this.tooltipDisplay = "auto", this.tooltipHoist = !1, this.tooltipFormatter = (t) => t.toString(), this.form = void 0, this.snapThreshold = 12, this.showMarks = !1, this.tooltipOffset = 8, this.minThumbDisabled = !1, this.maxThumbDisabled = !1, this.rangeSlideDisabled = !1, this.thumbsCrossover = "swap", this.noOverlap = !1, this.thumbEdgeMode = "center", this.marks = [], this.defaultValue = 0, this.handleMouseUp = this.handleMouseUp.bind(this), this.handleMultiResize = this.handleMultiResize.bind(this);
+  }
+  set value(t) {
+    Array.isArray(t) ? this._multiValue = { max: t[1], min: t[0] } : this._singleValue = t;
+  }
+  get value() {
+    return this.multi ? [this._multiValue.min, this._multiValue.max] : this._singleValue;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.multi ? this.multiInputMin.validity.valid ? this.multiInputMax.validity : this.multiInputMin.validity : this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.multi ? this.multiInputMin?.validationMessage || this.multiInputMax?.validationMessage || "" : this.input.validationMessage;
+  }
+  get minThumbSize() {
+    return this.minThumb?.getBoundingClientRect().width ?? 0;
+  }
+  get maxThumbSize() {
+    return this.maxThumb?.getBoundingClientRect().width ?? 0;
+  }
+  get multiContainerSize() {
+    return this.multiContainer?.getBoundingClientRect().width ?? 0;
+  }
+  get minThumbOffset() {
+    return this.multiContainerSize === 0 ? 0 : this.minThumbSize / 2 / this.multiContainerSize * 100;
+  }
+  get maxThumbOffset() {
+    return this.multiContainerSize === 0 ? 0 : this.maxThumbSize / 2 / this.multiContainerSize * 100;
+  }
+  /**
+   * Gets the track left inset for 'inside' mode.
+   * This trims the track on the left to match the min thumb's visual bounds.
+   */
+  get trackLeftInset() {
+    return this.thumbEdgeMode === "inside" && this.noOverlap && this.multiContainerSize > 0 ? this.minThumbOffset : 0;
+  }
+  /**
+   * Gets the track right inset for 'inside' mode.
+   * This trims the track on the right to match the max thumb's visual bounds.
+   */
+  get trackRightInset() {
+    return this.thumbEdgeMode === "inside" && this.noOverlap && this.multiContainerSize > 0 ? this.maxThumbOffset : 0;
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
+      this.multi && this.handleMultiResize(), this.syncRange();
+    }), this.multi) {
+      const [t, e] = this.value, i = Math.max(this.min, Math.min(t, this.max)), a = Math.max(this.min, Math.min(e, this.max));
+      (t !== i || e !== a) && (this.value = [i, a]);
+    } else {
+      const t = this.value;
+      t < this.min && (this.value = this.min), t > this.max && (this.value = this.max);
+    }
+    this.marks = this.markController.initMarks(), !this.step && (!this.marks || this.marks.length === 0) && (this.step = 1), this.updateComplete.then(() => {
+      this.multi && this.multiContainer ? this.resizeObserver.observe(this.multiContainer) : this.input && this.resizeObserver.observe(this.input), this.syncRange();
+    });
+  }
+  initMarks() {
+    this.marks = this.markController.initMarks();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.input && this.resizeObserver?.unobserve(this.input), this.multiContainer && this.resizeObserver?.unobserve(this.multiContainer);
+  }
+  handleChange() {
+    this.emit("cx-change");
+  }
+  handleInput() {
+    this.emit("cx-input"), this.syncRange();
+  }
+  handleBlur() {
+    this.hasFocus = !1, this.emit("cx-blur");
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.emit("cx-focus");
+  }
+  handleMouseUp() {
+    this.handleInput(), this.handleChange();
+  }
+  /**
+   * Snaps the value to the nearest snap point to a given x position
+   * @param x the x position that is seeked to
+   * @returns whether the value has changed
+   */
+  snapValue(t) {
+    let e = t;
+    const i = this.marks.map((h) => h.value);
+    let a = 1 / 0, r = 0;
+    for (const h of i) {
+      const m = this.valueToPercentage(h), x = this.input.clientWidth;
+      let b = x * (m / 100);
+      this.localize.dir() === "rtl" && (b = x - b);
+      const _ = Math.abs(e - b);
+      if (_ > a)
+        break;
+      a = _, r = b;
+    }
+    this.step ? a <= this.snapThreshold && (e = r) : e = r;
+    const n = d(
+      this.pixelsToValue(e),
+      this.min,
+      this.max
+    );
+    this.input.value = n.toString();
+    const o = Number.parseFloat(this.input.value);
+    return this.value === o ? !1 : (this.value = o, !0);
+  }
+  handleThumbDragStart(t) {
+    this.disabled || (this.hasTooltip = !0, this.state = "dragging", this.emit("cx-drag-start"), w(this, {
+      initialEvent: t,
+      onMove: (e) => {
+        this.handleInput(), document.body.style.userSelect = "none", this.snapValue(e);
+      },
+      onStop: () => {
+        document.body.style.userSelect = "", this.state = "idle", this.hasTooltip = !1, this.emit("cx-drag-end"), this.handleChange();
+      }
+    }));
+  }
+  handleMaxThumbDragStart(t) {
+    this.initiateMultiThumbDrag(
+      t,
+      "max"
+      /* MAX */
+    );
+  }
+  handleMinThumbDragStart(t) {
+    this.initiateMultiThumbDrag(
+      t,
+      "min"
+      /* MIN */
+    );
+  }
+  handleMinThumbKeyDown(t) {
+    this.handleMultiKeyDown(
+      t,
+      "min"
+      /* MIN */
+    );
+  }
+  handleMaxThumbKeyDown(t) {
+    this.handleMultiKeyDown(
+      t,
+      "max"
+      /* MAX */
+    );
+  }
+  handleMouseDown(t) {
+    if (this.disabled)
+      return;
+    const e = t.x - this.input.getBoundingClientRect().left;
+    this.snapValue(e), this.range.addEventListener("mouseup", this.handleMouseUp, {
+      once: !0
+    });
+  }
+  handleKeyDown(t) {
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowDown": {
+        t.preventDefault(), this.stepDown(), this.handleInput(), this.handleChange();
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowUp": {
+        t.preventDefault(), this.stepUp(), this.handleInput(), this.handleChange();
+        break;
+      }
+    }
+  }
+  valueToPercentage(t) {
+    return d((t - this.min) / (this.max - this.min), 0, 1) * 100;
+  }
+  pixelsToValue(t) {
+    const e = this.input.clientWidth;
+    return (this.localize.dir() === "rtl" ? e - t : t) / e * 100 / 100 * (this.max - this.min) + this.min;
+  }
+  syncProgress(t) {
+    this.range.style.setProperty("--percent", `${t * 100}%`);
+  }
+  handleValueChange() {
+    this.formControlController.updateValidity(), this.syncRange();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  syncRange() {
+    if (this.multi) {
+      if (!this.minTooltip || !this.maxTooltip)
+        return;
+      this.tooltipDisplay === "auto" && (this.minTooltip.open = this.hasTooltip && this.multiDragTarget !== "max", this.maxTooltip.open = this.hasTooltip && this.multiDragTarget !== "min");
+    } else {
+      if (!this.output)
+        return;
+      const t = this.value, e = d(
+        (t - this.min) / (this.max - this.min),
+        0,
+        1
+      );
+      this.syncProgress(e), this.tooltipDisplay === "auto" && (this.output.open = this.hasTooltip);
+    }
+  }
+  handleInvalid(t) {
+    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
+  }
+  /**
+   * Sets focus on the range. In multi mode, focuses the min thumb by default, or max if min is disabled.
+   * @param options - The focus options to pass to the thumb.
+   */
+  focus(t) {
+    this.multi ? this.minThumbDisabled ? this.maxThumbDisabled || this.maxThumb?.focus(t) : this.minThumb?.focus(t) : this.input?.focus(t);
+  }
+  /**
+   * Removes focus from the range. In multi mode, blurs both thumbs.
+   */
+  blur() {
+    this.multi ? (this.minThumb?.blur(), this.maxThumb?.blur()) : this.input?.blur();
+  }
+  /** Checks if multi mode thumb is available for stepping */
+  isMultiThumbAvailable(t) {
+    return t ? t === "min" ? !this.minThumbDisabled : !this.maxThumbDisabled : !1;
+  }
+  /** Updates multi value for a specific thumb and returns whether it changed */
+  updateMultiThumbValue(t, e) {
+    const i = this._multiValue.min, a = this._multiValue.max;
+    let r = t === "min" ? e : this._multiValue.min, n = t === "max" ? e : this._multiValue.max;
+    return r > n && (this.thumbsCrossover === "block" ? t === "min" ? r = this._multiValue.max : n = this._multiValue.min : [r, n] = [n, r]), this.setMultiValue(r, n), this._multiValue.min !== i || this._multiValue.max !== a;
+  }
+  /** Finds the next mark value greater than the current value */
+  findNextMark(t) {
+    return this.marks.find((e) => e.value > t)?.value;
+  }
+  /** Finds the previous mark value less than the current value */
+  findPreviousMark(t) {
+    for (let e = this.marks.length - 1; e >= 0; e--)
+      if (this.marks[e].value < t)
+        return this.marks[e].value;
+  }
+  /** Handles step up for single mode */
+  stepUpSingle() {
+    const t = this.value;
+    if (this.step)
+      return this.input.stepUp(), t !== Number(this.input.value) ? (this.value = Number(this.input.value), !0) : !1;
+    const e = this.findNextMark(t);
+    return e !== void 0 ? (this.value = e, !0) : !1;
+  }
+  /** Handles step down for single mode */
+  stepDownSingle() {
+    const t = this.value;
+    if (this.step)
+      return this.input.stepDown(), t !== Number(this.input.value) ? (this.value = Number(this.input.value), !0) : !1;
+    const e = this.findPreviousMark(t);
+    return e !== void 0 ? (this.value = e, !0) : !1;
+  }
+  /** Handles step up for multi mode */
+  stepUpMulti(t) {
+    const e = this._multiValue[t];
+    if (this.step)
+      return this.updateMultiThumbValue(t, e + this.step);
+    const i = this.findNextMark(e);
+    return i !== void 0 ? this.updateMultiThumbValue(t, i) : !1;
+  }
+  /** Handles step down for multi mode */
+  stepDownMulti(t) {
+    const e = this._multiValue[t];
+    if (this.step)
+      return this.updateMultiThumbValue(t, e - this.step);
+    const i = this.findPreviousMark(e);
+    return i !== void 0 ? this.updateMultiThumbValue(t, i) : !1;
+  }
+  /**
+   * Increments the value of the range by the value of the step attribute.
+   * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
+   * @returns whether the value has changed
+   */
+  stepUp(t) {
+    return this.multi ? this.isMultiThumbAvailable(t) && this.stepUpMulti(t) : this.stepUpSingle();
+  }
+  /**
+   * Decrements the value of the range by the value of the step attribute.
+   * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
+   * @returns whether the value has changed
+   */
+  stepDown(t) {
+    return this.multi ? this.isMultiThumbAvailable(t) && this.stepDownMulti(t) : this.stepDownSingle();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.multi ? this.multiInputMin?.checkValidity() && this.multiInputMax?.checkValidity() : this.input?.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.multi ? this.multiInputMin?.reportValidity() ? this.multiInputMax?.reportValidity() : !1 : this.input?.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(t) {
+    this.multi ? (this.multiInputMin?.setCustomValidity(t), this.multiInputMax?.setCustomValidity(t)) : this.input?.setCustomValidity(t), this.formControlController.updateValidity();
+  }
+  handleMultiResize() {
+    this.noOverlap && this.updateNoOverlapConstraints(), this.requestUpdate();
+  }
+  multiValueToPercent(t) {
+    return d((t - this.min) / (this.max - this.min), 0, 1) * 100;
+  }
+  multiPercentToValue(t) {
+    return t / 100 * (this.max - this.min) + this.min;
+  }
+  multiPositionToValue(t, e) {
+    const i = t / e * 100;
+    return this.multiPercentToValue(i);
+  }
+  getConstrainedPercent(t) {
+    const e = this._multiValue[t];
+    let i = this.multiValueToPercent(e);
+    if (this.noOverlap) {
+      const a = this.thumbConstraints[t];
+      i = d(i, a.minLeft, a.maxLeft);
+    }
+    return d(i, 0, 100);
+  }
+  getMultiThumbStyle(t) {
+    return { left: `${this.getConstrainedPercent(t)}%` };
+  }
+  /**
+   * Gets the style for the range bar (active portion between thumbs).
+   * In 'inside' mode, the bar is trimmed to match the track bounds.
+   */
+  getRangeBarStyle(t, e) {
+    const i = this.trackLeftInset, a = this.trackRightInset, r = Math.max(t, i), n = Math.min(e, 100 - a), o = Math.max(0, n - r);
+    return {
+      left: `${r}%`,
+      /**
+       * Hide the bar when width is 0 to prevent border from showing
+       */
+      visibility: o === 0 ? "hidden" : "visible",
+      width: `${o}%`
+    };
+  }
+  setMultiValue(t, e) {
+    this.multiInputMin.value = String(t), this.multiInputMax.value = String(e);
+    let i = Number.parseFloat(this.multiInputMin.value), a = Number.parseFloat(this.multiInputMax.value);
+    i = d(i, this.min, this.max), a = d(a, this.min, this.max), i > a && (this.thumbsCrossover === "swap" ? (this.multiDragTarget === "min" ? this.multiDragTarget = "max" : this.multiDragTarget === "max" && (this.multiDragTarget = "min"), [i, a] = [a, i]) : this.multiDragTarget === "min" ? i = this._multiValue.max : this.multiDragTarget === "max" ? a = this._multiValue.min : (i = Math.min(i, a), a = Math.max(i, a))), !(this._multiValue.min === i && this._multiValue.max === a) && (this._multiValue = { max: a, min: i });
+  }
+  updateNoOverlapConstraints() {
+    if (!this.noOverlap)
+      return;
+    const t = this.multiValueToPercent(this._multiValue.min), e = this.minThumbOffset, i = this.maxThumbOffset;
+    if (this.thumbsCrossover === "block") {
+      const a = X({
+        edgeMode: this.thumbEdgeMode,
+        maxOffset: i,
+        minOffset: e,
+        percentValue: t
+      });
+      this.thumbConstraints = {
+        max: { maxLeft: a.maxThumbMaxLeft, minLeft: a.maxThumbMinLeft },
+        min: { maxLeft: a.minThumbMaxLeft, minLeft: a.minThumbMinLeft }
+      };
+    } else
+      this.thumbConstraints = {
+        max: { maxLeft: 100, minLeft: 0 },
+        min: { maxLeft: 100, minLeft: 0 }
+      };
+  }
+  initiateMultiThumbDrag(t, e) {
+    if (this.disabled || (e === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+      return;
+    t.preventDefault(), t.stopPropagation(), this.hasTooltip = !0, this.multiIsDragging = !0, this.multiDragTarget = e === "min" ? "min" : "max", this.emit("cx-thumb-drag-start");
+    const r = this.multiContainer.getBoundingClientRect().width;
+    w(this, {
+      initialEvent: t,
+      onMove: (n) => {
+        const o = this.multiPositionToValue(n, r);
+        this.multiDragTarget === "min" ? this.setMultiValue(o, this._multiValue.max) : this.setMultiValue(this._multiValue.min, o), this.handleInput();
+      },
+      onStop: () => {
+        this.multiIsDragging = !1, this.multiDragTarget = null, this.emit("cx-thumb-drag-end"), this.emit("cx-change"), this.hasTooltip = !1;
+      }
+    });
+  }
+  initiateMultiRangeDrag(t) {
+    if (this.disabled || this.rangeSlideDisabled || this.minThumbDisabled && this.maxThumbDisabled)
+      return;
+    t.preventDefault(), t.stopPropagation(), this.multiIsDragging = !0, this.multiDragTarget = "range", this.multiRangeWidth = this._multiValue.max - this._multiValue.min, this.multiDragStartValue = { ...this._multiValue }, this.emit("cx-range-drag-start");
+    const e = this.multiContainer.getBoundingClientRect(), i = e.width, a = t.clientX - e.left;
+    this.hasTooltip = !0, w(this, {
+      initialEvent: t,
+      onMove: (r) => {
+        const n = this.multiPositionToValue(r, i) - this.multiPositionToValue(a, i);
+        let o = this.multiDragStartValue.min + n, h = this.multiDragStartValue.max + n;
+        o < this.min && (o = this.min, h = this.min + this.multiRangeWidth), h > this.max && (h = this.max, o = this.max - this.multiRangeWidth), this.minThumbDisabled && (o = this._multiValue.min, h = this._multiValue.min + this.multiRangeWidth), this.maxThumbDisabled && (h = this._multiValue.max, o = this._multiValue.max - this.multiRangeWidth), this.setMultiValue(o, h), this.handleInput();
+      },
+      onStop: () => {
+        this.multiIsDragging = !1, this.multiDragTarget = null, this.emit("cx-range-drag-end"), this.emit("cx-change"), this.hasTooltip = !1;
+      }
+    });
+  }
+  handleMultiContainerClick(t) {
+    if (this.disabled)
+      return;
+    const e = t.target;
+    if (e.classList.contains("range-slider__thumb") || e.classList.contains("range-slider__range") || this.minThumbDisabled && this.maxThumbDisabled)
+      return;
+    const i = this.multiContainer.getBoundingClientRect(), a = i.width, r = t.clientX - i.left, n = this.multiPositionToValue(r, a), o = Math.abs(this._multiValue.min - n), h = Math.abs(this._multiValue.max - n);
+    this.minThumbDisabled ? n >= this._multiValue.min && this.setMultiValue(this._multiValue.min, n) : this.maxThumbDisabled ? n <= this._multiValue.max && this.setMultiValue(n, this._multiValue.max) : o <= h ? this.setMultiValue(n, this._multiValue.max) : this.setMultiValue(this._multiValue.min, n), this.emit("cx-change");
+  }
+  handleMultiKeyDown(t, e) {
+    if (this.disabled || (e === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+      return;
+    let a = !1;
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowDown": {
+        t.preventDefault(), a = this.stepDown(e);
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowUp": {
+        t.preventDefault(), a = this.stepUp(e);
+        break;
+      }
+      case "Home": {
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.min);
+        break;
+      }
+      case "End": {
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.max);
+        break;
+      }
+    }
+    a && this.emit("cx-change");
+  }
+  handleConstraintsChange() {
+    this.multi && this.setMultiValue(this._multiValue.min, this._multiValue.max);
+  }
+  handleMultiValueChange() {
+    this.multi && (this.requestUpdate("value"), this.noOverlap && this.updateNoOverlapConstraints());
+  }
+  renderSingleRange() {
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, a = this.helpText ? !0 : !!e;
+    return M`
+      <div
+        part="form-control"
+        class=${p({
+      "form-control": !0,
+      "form-control--has-help-text": a,
+      // range only has one size
+      "form-control--has-label": i,
+      "form-control--medium": !0
+    })}
+        @focus=${this.focus}
+        @blur=${this.blur}
+        @keydown=${this.handleKeyDown}
+        tabindex="0"
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${i ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <div
+            part="base"
+            class=${p({
+      range: !0,
+      "range--disabled": this.disabled,
+      "range--focused": this.hasFocus,
+      "range--rtl": this.localize.dir() === "rtl",
+      "range--tooltip-visible": this.tooltipDisplay === "auto" && this.hasTooltip || this.tooltipDisplay === "on"
+    })}
+            @mousedown=${this.handleMouseDown}
+          >
+            <div class="range__container">
+              <input
+                part="input"
+                id="input"
+                class="range__control"
+                title=${this.title}
+                type="range"
+                name=${k(this.name)}
+                ?disabled=${this.disabled}
+                min=${k(this.min)}
+                max=${k(this.max)}
+                step=${this.step || Number.MIN_VALUE}
+                .value=${W(this.value.toString())}
+                aria-describedby="help-text"
+                aria-label=${k(this.ariaLabel)}
+                @change=${this.handleChange}
+                @focus=${this.handleFocus}
+                @input=${this.handleInput}
+                @invalid=${this.handleInvalid}
+                @blur=${this.handleBlur}
+              />
+              <cx-tooltip
+                open
+                class="range__tooltip"
+                trigger="manual"
+                ?hoist=${this.tooltipHoist}
+                ?disabled=${this.tooltipDisplay === "off"}
+                distance=${this.tooltipOffset}
+                placement=${this.tooltipPlacement}
+                content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this.value) : this.value}
+              >
+                <div
+                  part="thumb"
+                  class="range__thumb"
+                  @mousedown=${this.handleThumbDragStart}
+                  @touchstart=${this.handleThumbDragStart}
+                ></div>
+              </cx-tooltip>
+            </div>
+
+            <slot name="marks"> </slot>
+
+            ${this.markController.renderMarks()}
+          </div>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${a ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+  renderMultiRange() {
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, a = this.helpText ? !0 : e, r = this.getConstrainedPercent(
+      "min"
+      /* MIN */
+    ), n = this.getConstrainedPercent(
+      "max"
+      /* MAX */
+    );
+    return M`
+      <div
+        part="form-control"
+        class=${p({
+      "form-control": !0,
+      "form-control--has-help-text": a,
+      "form-control--has-label": i,
+      "form-control--medium": !0
+    })}
+        @focus=${this.focus}
+        @blur=${this.blur}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${i ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control-input">
+          <input
+            type="range"
+            class="range-slider__input--min"
+            hidden
+            min=${this.min}
+            max=${this.max}
+            step=${this.step || Number.MIN_VALUE}
+            .value=${String(this._multiValue.min)}
+          />
+          <input
+            type="range"
+            class="range-slider__input--max"
+            hidden
+            min=${this.min}
+            max=${this.max}
+            step=${this.step || Number.MIN_VALUE}
+            .value=${String(this._multiValue.max)}
+          />
+
+          <div
+            part="base"
+            class=${p({
+      "range-slider": !0,
+      "range-slider--disabled": this.disabled,
+      "range-slider--dragging": this.multiIsDragging
+    })}
+            style=${f({
+      "--track-left-inset": `${this.trackLeftInset}%`,
+      "--track-right-inset": `${this.trackRightInset}%`
+    })}
+            ?data-disabled=${this.disabled}
+            @pointerdown=${this.handleMultiContainerClick}
+          >
+            <cx-tooltip
+              open
+              class="range__tooltip range__tooltip--min"
+              trigger="manual"
+              ?hoist=${this.tooltipHoist}
+              ?disabled=${this.tooltipDisplay === "off"}
+              distance=${this.tooltipOffset}
+              placement=${this.tooltipPlacement}
+              content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this._multiValue.min) : this._multiValue.min}
+            >
+              <div
+                part="thumb thumb-lower"
+                class=${p({
+      "range-slider__thumb": !0,
+      "range-slider__thumb--active": this.multiDragTarget === "min",
+      "range-slider__thumb--disabled": this.minThumbDisabled,
+      "range-slider__thumb--min": !0,
+      "range-slider__thumb--slotted": this.hasSlotController.test("thumb-min")
+    })}
+                style=${f(this.getMultiThumbStyle(
+      "min"
+      /* MIN */
+    ))}
+                role="slider"
+                tabindex=${this.disabled || this.minThumbDisabled ? -1 : 0}
+                aria-label=${this.ariaLabelLower ?? "Lower value"}
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${this._multiValue.min}
+                aria-valuetext=${String(this._multiValue.min)}
+                ?data-lower=${!0}
+                ?data-disabled=${this.minThumbDisabled}
+                data-min-left=${this.thumbConstraints.min.minLeft}
+                data-max-left=${this.thumbConstraints.min.maxLeft}
+                @pointerdown=${this.handleMinThumbDragStart}
+                @keydown=${this.handleMinThumbKeyDown}
+              >
+                <slot name="thumb-min"></slot>
+              </div>
+            </cx-tooltip>
+
+            <cx-tooltip
+              open
+              class="range__tooltip range__tooltip--max"
+              trigger="manual"
+              ?hoist=${this.tooltipHoist}
+              ?disabled=${this.tooltipDisplay === "off"}
+              distance=${this.tooltipOffset}
+              placement=${this.tooltipPlacement}
+              content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this._multiValue.max) : this._multiValue.max}
+            >
+              <div
+                part="thumb thumb-upper"
+                class=${p({
+      "range-slider__thumb": !0,
+      "range-slider__thumb--active": this.multiDragTarget === "max",
+      "range-slider__thumb--disabled": this.maxThumbDisabled,
+      "range-slider__thumb--max": !0,
+      "range-slider__thumb--slotted": this.hasSlotController.test("thumb-max")
+    })}
+                style=${f(this.getMultiThumbStyle(
+      "max"
+      /* MAX */
+    ))}
+                role="slider"
+                tabindex=${this.disabled || this.maxThumbDisabled ? -1 : 0}
+                aria-label=${this.ariaLabelUpper ?? "Upper value"}
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${this._multiValue.max}
+                aria-valuetext=${String(this._multiValue.max)}
+                ?data-upper=${!0}
+                ?data-disabled=${this.maxThumbDisabled}
+                data-min-left=${this.thumbConstraints.max.minLeft}
+                data-max-left=${this.thumbConstraints.max.maxLeft}
+                @pointerdown=${this.handleMaxThumbDragStart}
+                @keydown=${this.handleMaxThumbKeyDown}
+              >
+                <slot name="thumb-max"></slot>
+              </div>
+            </cx-tooltip>
+
+            <div
+              part="range"
+              class=${p({
+      "range-slider__range": !0,
+      "range-slider__range--active": this.multiDragTarget === "range"
+      /* RANGE */
+    })}
+              style=${f(this.getRangeBarStyle(r, n))}
+              ?data-active=${this.multiDragTarget === "range"}
+              @pointerdown=${this.initiateMultiRangeDrag}
+            ></div>
+          </div>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${a ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return this.multi ? this.renderMultiRange() : this.renderSingleRange();
+  }
+};
+s.styles = [
+  P,
+  F,
+  ot
+];
+s.dependencies = {
+  "cx-resize-observer": R,
+  "cx-tooltip": H
+};
+l([
+  c(".range__control")
+], s.prototype, "input", 2);
+l([
+  c(".range-slider__input--min")
+], s.prototype, "multiInputMin", 2);
+l([
+  c(".range-slider__input--max")
+], s.prototype, "multiInputMax", 2);
+l([
+  c(".range__tooltip")
+], s.prototype, "output", 2);
+l([
+  c(".range__tooltip--min")
+], s.prototype, "minTooltip", 2);
+l([
+  c(".range__tooltip--max")
+], s.prototype, "maxTooltip", 2);
+l([
+  c(".range-slider__thumb--min")
+], s.prototype, "minThumb", 2);
+l([
+  c(".range-slider__thumb--max")
+], s.prototype, "maxThumb", 2);
+l([
+  c(".range")
+], s.prototype, "range", 2);
+l([
+  c(".range-slider")
+], s.prototype, "multiContainer", 2);
+l([
+  g()
+], s.prototype, "hasFocus", 2);
+l([
+  g()
+], s.prototype, "hasTooltip", 2);
+l([
+  g()
+], s.prototype, "_multiValue", 2);
+l([
+  g()
+], s.prototype, "_singleValue", 2);
+l([
+  g()
+], s.prototype, "multiDragTarget", 2);
+l([
+  g()
+], s.prototype, "multiIsDragging", 2);
+l([
+  u()
+], s.prototype, "state", 2);
+l([
+  u()
+], s.prototype, "title", 2);
+l([
+  u()
+], s.prototype, "name", 2);
+l([
+  u({
+    converter: {
+      fromAttribute: (t) => {
+        if (t.includes(" ")) {
+          const e = t.split(" ").map((i) => Number.parseFloat(i.trim()));
+          return [e[0] ?? 0, e[1] ?? 0];
+        }
+        return Number.parseFloat(t) || 0;
+      },
+      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : String(t)
+    },
+    reflect: !0
+  })
+], s.prototype, "value", 1);
+l([
+  u({ reflect: !0, type: Boolean })
+], s.prototype, "multi", 2);
+l([
+  u()
+], s.prototype, "label", 2);
+l([
+  u({ attribute: "help-text" })
+], s.prototype, "helpText", 2);
+l([
+  u({ reflect: !0, type: Boolean })
+], s.prototype, "disabled", 2);
+l([
+  u({ type: Number })
+], s.prototype, "min", 2);
+l([
+  u({ type: Number })
+], s.prototype, "max", 2);
+l([
+  u({ reflect: !0, type: Number })
+], s.prototype, "step", 2);
+l([
+  u({ attribute: "mark-label-spacing", type: Number })
+], s.prototype, "markLabelSpacing", 2);
+l([
+  u({ attribute: "tooltip-placement" })
+], s.prototype, "tooltipPlacement", 2);
+l([
+  u({ attribute: "tooltip-display" })
+], s.prototype, "tooltipDisplay", 2);
+l([
+  u({ attribute: "tooltip-hoist", type: Boolean })
+], s.prototype, "tooltipHoist", 2);
+l([
+  u({ attribute: "tooltip-formatter" })
+], s.prototype, "tooltipFormatter", 2);
+l([
+  u()
+], s.prototype, "form", 2);
+l([
+  u({ attribute: "snap-threshold", type: Number })
+], s.prototype, "snapThreshold", 2);
+l([
+  u({ attribute: "show-marks", type: Boolean })
+], s.prototype, "showMarks", 2);
+l([
+  u({ attribute: "tooltip-offset", type: Number })
+], s.prototype, "tooltipOffset", 2);
+l([
+  u({ attribute: "min-thumb-disabled", reflect: !0, type: Boolean })
+], s.prototype, "minThumbDisabled", 2);
+l([
+  u({ attribute: "max-thumb-disabled", reflect: !0, type: Boolean })
+], s.prototype, "maxThumbDisabled", 2);
+l([
+  u({ attribute: "range-slide-disabled", type: Boolean })
+], s.prototype, "rangeSlideDisabled", 2);
+l([
+  u({ attribute: "thumbs-crossover" })
+], s.prototype, "thumbsCrossover", 2);
+l([
+  u({ attribute: "aria-label-lower" })
+], s.prototype, "ariaLabelLower", 2);
+l([
+  u({ attribute: "aria-label-upper" })
+], s.prototype, "ariaLabelUpper", 2);
+l([
+  u({ attribute: "no-overlap", reflect: !0, type: Boolean })
+], s.prototype, "noOverlap", 2);
+l([
+  u({ attribute: "thumb-edge-mode" })
+], s.prototype, "thumbEdgeMode", 2);
+l([
+  g()
+], s.prototype, "marks", 2);
+l([
+  O()
+], s.prototype, "defaultValue", 2);
+l([
+  v(["min", "max", "step"])
+], s.prototype, "initMarks", 1);
+l([
+  E({ passive: !0 })
+], s.prototype, "handleThumbDragStart", 1);
+l([
+  v("value", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleValueChange", 1);
+l([
+  v("disabled", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleDisabledChange", 1);
+l([
+  v("hasTooltip", { waitUntilFirstUpdate: !0 })
+], s.prototype, "syncRange", 1);
+l([
+  $(100)
+], s.prototype, "handleMultiResize", 1);
+l([
+  v(["min", "max", "step"], { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleConstraintsChange", 1);
+l([
+  v("_multiValue", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleMultiValueChange", 1);
+s = l([
+  U("cx-range")
+], s);
+export {
+  s as default
+};