@orangelogic/design-system 2.44.0 → 2.45.0

package/library/components/range.js

@@ -1,23 +1,247 @@
-import { i as T, n as h, C as V, x as _, c as D } from "../chunks/custom-element.fmLrnDZr.js";
-import { c as w } from "../chunks/component.styles.DtouHn2g.js";
-import { f as $ } from "../chunks/form-control.styles.j0hNjZTU.js";
-import { d as C } from "../chunks/popup.CJrePm7n.js";
-import { d as S } from "../chunks/default-value.BrNrMtnz.js";
-import { d as y } from "../chunks/drag.DXEXVXPv.js";
-import { F as L } from "../chunks/form.BY8-x3IU.js";
-import { L as z } from "../chunks/i18n.D33BKrRs.js";
-import { c as m } from "../chunks/math.DqTA6ya4.js";
-import { H as I } from "../chunks/slot.DJLm4Dig.js";
-import { w as g } from "../chunks/watch.BCJD77bD.js";
-import { r as b } from "../chunks/state.Dt9F_SuS.js";
-import { t as R } from "../chunks/event-options.CYHYGOd8.js";
-import { e as d } from "../chunks/query.BBf1UFkC.js";
+import R from "./resize-observer.js";
+import { x as M, i as I, n as u, C as P, c as F } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as U } from "../chunks/component.styles.DtouHn2g.js";
+import { f as O } from "../chunks/form-control.styles.j0hNjZTU.js";
+import { d as $ } from "../chunks/popup.CJrePm7n.js";
+import { d as N } from "../chunks/default-value.BrNrMtnz.js";
+import { d as w } from "../chunks/drag.DXEXVXPv.js";
+import { F as A } from "../chunks/form.BY8-x3IU.js";
+import { L as S } from "../chunks/i18n.D33BKrRs.js";
+import { c as d } from "../chunks/math.DqTA6ya4.js";
+import { H as B } from "../chunks/slot.DJLm4Dig.js";
+import { w as v } from "../chunks/watch.BCJD77bD.js";
+import { r as g } from "../chunks/state.Dt9F_SuS.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.DqNfBvJI.js";
-import { o as x } from "../chunks/if-defined.CKupVaWs.js";
-import { l as P } from "../chunks/live.DCdtYl87.js";
-import { o as c } from "../chunks/style-map.lEJHEwk3.js";
-import F from "./tooltip.js";
-const U = T`
+import { o as k } from "../chunks/if-defined.CKupVaWs.js";
+import { l as W } from "../chunks/live.DCdtYl87.js";
+import { o as f } from "../chunks/style-map.lEJHEwk3.js";
+import H from "./tooltip.js";
+import { e as K, n as j } from "../chunks/ref.BDmlFGTP.js";
+import { c as q } from "../chunks/repeat.B1pVpmRx.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 = I`
   :host {
     --thumb-color: #fff;
     --thumb-size: 20px;
@@ -331,50 +555,23 @@ const U = T`
     display: none;
   }
 `;
-function N({
-  edgeMode: t = "center",
-  maxOffset: i,
-  minOffset: e,
-  percentValue: a
-}) {
-  const n = t === "inside" ? e : 0, l = t === "inside" ? 100 - i : 100;
-  let o = a - e, u = a + i;
-  if (t === "inside")
-    o < n && (o = n, u = n + e + i), u > l && (u = l, o = l - e - i);
-  else {
-    if (o < 0) {
-      const f = -o;
-      o = 0, u += f;
-    }
-    if (u > 100) {
-      const f = u - 100;
-      u = 100, o -= f;
-    }
-  }
-  return {
-    maxThumbMaxLeft: m(l, 0, 100),
-    maxThumbMinLeft: m(u, 0, 100),
-    minThumbMaxLeft: m(o, 0, 100),
-    minThumbMinLeft: m(n, 0, 100)
-  };
-}
-var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, s = (t, i, e, a) => {
-  for (var n = a > 1 ? void 0 : a ? A(i, e) : i, l = t.length - 1, o; l >= 0; l--)
-    (o = t[l]) && (n = (a ? o(i, e, n) : o(n)) || n);
-  return a && n && O(i, e, n), n;
+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 r = class extends V {
+let s = class extends P {
   constructor() {
-    super(), this.formControlController = new L(this), this.hasSlotController = new I(
+    super(), this.formControlController = new A(this), this.hasSlotController = new B(
       this,
       "help-text",
       "label",
       "thumb-min",
       "thumb-max"
-    ), this.localize = new z(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 = {
+    ), 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.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);
+    }, 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;
@@ -423,42 +620,18 @@ let r = class extends V {
     if (super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
       this.multi && this.handleMultiResize(), this.syncRange();
     }), this.multi) {
-      const [t, i] = this.value, e = Math.max(this.min, Math.min(t, this.max)), a = Math.max(this.min, Math.min(i, this.max));
-      (t !== e || i !== a) && (this.value = [e, a]);
+      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.initMarks(), !this.step && (!this.marks || this.marks.length === 0) && (this.step = 1), this.updateComplete.then(() => {
+    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() {
-    if (!this.showMarks)
-      return;
-    const t = this.getAllMarks(), i = [];
-    if (t && t.length > 0)
-      t.forEach((e) => {
-        const a = e.getAttribute("value");
-        if (!a)
-          return;
-        const n = Number.parseFloat(a);
-        Number.isNaN(n) || i.push({
-          hidden: e.hasAttribute("hidden"),
-          label: e.textContent || "",
-          value: n
-        });
-      });
-    else {
-      const e = this.step || 1, a = this.min, n = this.max;
-      for (let l = a; l <= n; l += e)
-        i.push({
-          hidden: !1,
-          label: l.toString(),
-          value: l
-        });
-    }
-    this.marks = i;
+    this.marks = this.markController.initMarks();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.input && this.resizeObserver?.unobserve(this.input), this.multiContainer && this.resizeObserver?.unobserve(this.multiContainer);
@@ -484,33 +657,33 @@ let r = class extends V {
    * @returns whether the value has changed
    */
   snapValue(t) {
-    let i = t;
-    const e = this.marks.map((u) => u.value);
-    let a = 1 / 0, n = 0;
-    for (const u of e) {
-      const f = this.valueToPercentage(u), M = this.input.clientWidth;
-      let v = M * (f / 100);
-      this.localize.dir() === "rtl" && (v = M - v);
-      const k = Math.abs(i - v);
-      if (k > a)
+    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 = k, n = v;
+      a = _, r = b;
     }
-    this.step ? a <= this.snapThreshold && (i = n) : i = n;
-    const l = m(
-      this.pixelsToValue(i),
+    this.step ? a <= this.snapThreshold && (e = r) : e = r;
+    const n = d(
+      this.pixelsToValue(e),
       this.min,
       this.max
     );
-    this.input.value = l.toString();
+    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"), y(this, {
+    this.disabled || (this.hasTooltip = !0, this.state = "dragging", this.emit("cx-drag-start"), w(this, {
       initialEvent: t,
-      onMove: (i) => {
-        this.handleInput(), document.body.style.userSelect = "none", this.snapValue(i);
+      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();
@@ -548,8 +721,8 @@ let r = class extends V {
   handleMouseDown(t) {
     if (this.disabled)
       return;
-    const i = t.x - this.input.getBoundingClientRect().left;
-    this.snapValue(i), this.range.addEventListener("mouseup", this.handleMouseUp, {
+    const e = t.x - this.input.getBoundingClientRect().left;
+    this.snapValue(e), this.range.addEventListener("mouseup", this.handleMouseUp, {
       once: !0
     });
   }
@@ -568,11 +741,11 @@ let r = class extends V {
     }
   }
   valueToPercentage(t) {
-    return m((t - this.min) / (this.max - this.min), 0, 1) * 100;
+    return d((t - this.min) / (this.max - this.min), 0, 1) * 100;
   }
   pixelsToValue(t) {
-    const i = this.input.clientWidth;
-    return (this.localize.dir() === "rtl" ? i - t : t) / i * 100 / 100 * (this.max - this.min) + this.min;
+    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}%`);
@@ -591,12 +764,12 @@ let r = class extends V {
     } else {
       if (!this.output)
         return;
-      const t = this.value, i = m(
+      const t = this.value, e = d(
         (t - this.min) / (this.max - this.min),
         0,
         1
       );
-      this.syncProgress(i), this.tooltipDisplay === "auto" && (this.output.open = this.hasTooltip);
+      this.syncProgress(e), this.tooltipDisplay === "auto" && (this.output.open = this.hasTooltip);
     }
   }
   handleInvalid(t) {
@@ -620,52 +793,52 @@ let r = class extends V {
     return t ? t === "min" ? !this.minThumbDisabled : !this.maxThumbDisabled : !1;
   }
   /** Updates multi value for a specific thumb and returns whether it changed */
-  updateMultiThumbValue(t, i) {
-    const e = this._multiValue.min, a = this._multiValue.max;
-    let n = t === "min" ? i : this._multiValue.min, l = t === "max" ? i : this._multiValue.max;
-    return n > l && (this.thumbsCrossover === "block" ? t === "min" ? n = this._multiValue.max : l = this._multiValue.min : [n, l] = [l, n]), this.setMultiValue(n, l), this._multiValue.min !== e || this._multiValue.max !== a;
+  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((i) => i.value > t)?.value;
+    return this.marks.find((e) => e.value > t)?.value;
   }
   /** Finds the previous mark value less than the current value */
   findPreviousMark(t) {
-    for (let i = this.marks.length - 1; i >= 0; i--)
-      if (this.marks[i].value < t)
-        return this.marks[i].value;
+    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 i = this.findNextMark(t);
-    return i !== void 0 ? (this.value = i, !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 i = this.findPreviousMark(t);
-    return i !== void 0 ? (this.value = i, !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 i = this._multiValue[t];
+    const e = this._multiValue[t];
     if (this.step)
-      return this.updateMultiThumbValue(t, i + this.step);
-    const e = this.findNextMark(i);
-    return e !== void 0 ? this.updateMultiThumbValue(t, e) : !1;
+      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 i = this._multiValue[t];
+    const e = this._multiValue[t];
     if (this.step)
-      return this.updateMultiThumbValue(t, i - this.step);
-    const e = this.findPreviousMark(i);
-    return e !== void 0 ? this.updateMultiThumbValue(t, e) : !1;
+      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.
@@ -699,58 +872,27 @@ let r = class extends V {
   setCustomValidity(t) {
     this.multi ? (this.multiInputMin?.setCustomValidity(t), this.multiInputMax?.setCustomValidity(t)) : this.input?.setCustomValidity(t), this.formControlController.updateValidity();
   }
-  getAllMarks() {
-    return this.querySelector(
-      "datalist"
-    )?.querySelectorAll("option");
-  }
-  renderMarks() {
-    const t = this.localize.dir() === "rtl";
-    return this.marks.map((i) => {
-      const e = this.valueToPercentage(
-        t ? 100 - i.value : i.value
-      );
-      return _` <div
-          class=${p({
-        mark__tick: !0,
-        "mark__tick--hidden": i.hidden
-      })}
-          part="mark-tick"
-          style=${c({ left: `${e}%` })}
-        ></div>
-        <div
-          class=${p({
-        mark__label: !0,
-        "mark__label--hidden": i.hidden
-      })}
-          part="mark-label"
-          style=${c({ left: `${e}%` })}
-        >
-          ${i.label}
-        </div>`;
-    });
-  }
   handleMultiResize() {
     this.noOverlap && this.updateNoOverlapConstraints(), this.requestUpdate();
   }
   multiValueToPercent(t) {
-    return m((t - this.min) / (this.max - this.min), 0, 1) * 100;
+    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, i) {
-    const e = t / i * 100;
-    return this.multiPercentToValue(e);
+  multiPositionToValue(t, e) {
+    const i = t / e * 100;
+    return this.multiPercentToValue(i);
   }
   getConstrainedPercent(t) {
-    const i = this._multiValue[t];
-    let e = this.multiValueToPercent(i);
+    const e = this._multiValue[t];
+    let i = this.multiValueToPercent(e);
     if (this.noOverlap) {
       const a = this.thumbConstraints[t];
-      e = m(e, a.minLeft, a.maxLeft);
+      i = d(i, a.minLeft, a.maxLeft);
     }
-    return m(e, 0, 100);
+    return d(i, 0, 100);
   }
   getMultiThumbStyle(t) {
     return { left: `${this.getConstrainedPercent(t)}%` };
@@ -759,10 +901,10 @@ let r = class extends V {
    * 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, i) {
-    const e = this.trackLeftInset, a = this.trackRightInset, n = Math.max(t, e), l = Math.min(i, 100 - a), o = Math.max(0, l - n);
+  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: `${n}%`,
+      left: `${r}%`,
       /**
        * Hide the bar when width is 0 to prevent border from showing
        */
@@ -770,20 +912,20 @@ let r = class extends V {
       width: `${o}%`
     };
   }
-  setMultiValue(t, i) {
-    this.multiInputMin.value = String(t), this.multiInputMax.value = String(i);
-    let e = Number.parseFloat(this.multiInputMin.value), a = Number.parseFloat(this.multiInputMax.value);
-    e = m(e, this.min, this.max), a = m(a, this.min, this.max), e > a && (this.thumbsCrossover === "swap" ? (this.multiDragTarget === "min" ? this.multiDragTarget = "max" : this.multiDragTarget === "max" && (this.multiDragTarget = "min"), [e, a] = [a, e]) : this.multiDragTarget === "min" ? e = this._multiValue.max : this.multiDragTarget === "max" ? a = this._multiValue.min : (e = Math.min(e, a), a = Math.max(e, a))), !(this._multiValue.min === e && this._multiValue.max === a) && (this._multiValue = { max: a, min: e });
+  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), i = this.minThumbOffset, e = this.maxThumbOffset;
+    const t = this.multiValueToPercent(this._multiValue.min), e = this.minThumbOffset, i = this.maxThumbOffset;
     if (this.thumbsCrossover === "block") {
-      const a = N({
+      const a = X({
         edgeMode: this.thumbEdgeMode,
-        maxOffset: e,
-        minOffset: i,
+        maxOffset: i,
+        minOffset: e,
         percentValue: t
       });
       this.thumbConstraints = {
@@ -796,15 +938,15 @@ let r = class extends V {
         min: { maxLeft: 100, minLeft: 0 }
       };
   }
-  initiateMultiThumbDrag(t, i) {
-    if (this.disabled || (i === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+  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 = i === "min" ? "min" : "max", this.emit("cx-thumb-drag-start");
-    const n = this.multiContainer.getBoundingClientRect().width;
-    y(this, {
+    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: (l) => {
-        const o = this.multiPositionToValue(l, n);
+      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: () => {
@@ -816,13 +958,13 @@ let r = class extends V {
     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 i = this.multiContainer.getBoundingClientRect(), e = i.width, a = t.clientX - i.left;
-    this.hasTooltip = !0, y(this, {
+    const e = this.multiContainer.getBoundingClientRect(), i = e.width, a = t.clientX - e.left;
+    this.hasTooltip = !0, w(this, {
       initialEvent: t,
-      onMove: (n) => {
-        const l = this.multiPositionToValue(n, e) - this.multiPositionToValue(a, e);
-        let o = this.multiDragStartValue.min + l, u = this.multiDragStartValue.max + l;
-        o < this.min && (o = this.min, u = this.min + this.multiRangeWidth), u > this.max && (u = this.max, o = this.max - this.multiRangeWidth), this.minThumbDisabled && (o = this._multiValue.min, u = this._multiValue.min + this.multiRangeWidth), this.maxThumbDisabled && (u = this._multiValue.max, o = this._multiValue.max - this.multiRangeWidth), this.setMultiValue(o, u), this.handleInput();
+      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;
@@ -832,33 +974,33 @@ let r = class extends V {
   handleMultiContainerClick(t) {
     if (this.disabled)
       return;
-    const i = t.target;
-    if (i.classList.contains("range-slider__thumb") || i.classList.contains("range-slider__range") || this.minThumbDisabled && this.maxThumbDisabled)
+    const e = t.target;
+    if (e.classList.contains("range-slider__thumb") || e.classList.contains("range-slider__range") || this.minThumbDisabled && this.maxThumbDisabled)
       return;
-    const e = this.multiContainer.getBoundingClientRect(), a = e.width, n = t.clientX - e.left, l = this.multiPositionToValue(n, a), o = Math.abs(this._multiValue.min - l), u = Math.abs(this._multiValue.max - l);
-    this.minThumbDisabled ? l >= this._multiValue.min && this.setMultiValue(this._multiValue.min, l) : this.maxThumbDisabled ? l <= this._multiValue.max && this.setMultiValue(l, this._multiValue.max) : o <= u ? this.setMultiValue(l, this._multiValue.max) : this.setMultiValue(this._multiValue.min, l), this.emit("cx-change");
+    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, i) {
-    if (this.disabled || (i === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+  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(i);
+        t.preventDefault(), a = this.stepDown(e);
         break;
       }
       case "ArrowRight":
       case "ArrowUp": {
-        t.preventDefault(), a = this.stepUp(i);
+        t.preventDefault(), a = this.stepUp(e);
         break;
       }
       case "Home": {
-        t.preventDefault(), a = !0, this.updateMultiThumbValue(i, this.min);
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.min);
         break;
       }
       case "End": {
-        t.preventDefault(), a = !0, this.updateMultiThumbValue(i, this.max);
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.max);
         break;
       }
     }
@@ -871,15 +1013,15 @@ let r = class extends V {
     this.multi && (this.requestUpdate("value"), this.noOverlap && this.updateNoOverlapConstraints());
   }
   renderSingleRange() {
-    const t = this.hasSlotController.test("label"), i = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!t, a = this.helpText ? !0 : !!i;
-    return _`
+    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": e,
+      "form-control--has-label": i,
       "form-control--medium": !0
     })}
         @focus=${this.focus}
@@ -891,7 +1033,7 @@ let r = class extends V {
           part="form-control-label"
           class="form-control__label"
           for="input"
-          aria-hidden=${e ? "false" : "true"}
+          aria-hidden=${i ? "false" : "true"}
         >
           <slot name="label">${this.label}</slot>
         </label>
@@ -915,14 +1057,14 @@ let r = class extends V {
                 class="range__control"
                 title=${this.title}
                 type="range"
-                name=${x(this.name)}
+                name=${k(this.name)}
                 ?disabled=${this.disabled}
-                min=${x(this.min)}
-                max=${x(this.max)}
+                min=${k(this.min)}
+                max=${k(this.max)}
                 step=${this.step || Number.MIN_VALUE}
-                .value=${P(this.value.toString())}
+                .value=${W(this.value.toString())}
                 aria-describedby="help-text"
-                aria-label=${x(this.ariaLabel)}
+                aria-label=${k(this.ariaLabel)}
                 @change=${this.handleChange}
                 @focus=${this.handleFocus}
                 @input=${this.handleInput}
@@ -950,14 +1092,7 @@ let r = class extends V {
 
             <slot name="marks"> </slot>
 
-            <div
-              class="range__marks"
-              style=${c({
-      visibility: this.showMarks ? "visible" : "hidden"
-    })}
-            >
-              ${this.renderMarks()}
-            </div>
+            ${this.markController.renderMarks()}
           </div>
         </div>
 
@@ -973,20 +1108,20 @@ let r = class extends V {
     `;
   }
   renderMultiRange() {
-    const t = this.hasSlotController.test("label"), i = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!t, a = this.helpText ? !0 : i, n = this.getConstrainedPercent(
+    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 */
-    ), l = this.getConstrainedPercent(
+    ), n = this.getConstrainedPercent(
       "max"
       /* MAX */
     );
-    return _`
+    return M`
       <div
         part="form-control"
         class=${p({
       "form-control": !0,
       "form-control--has-help-text": a,
-      "form-control--has-label": e,
+      "form-control--has-label": i,
       "form-control--medium": !0
     })}
         @focus=${this.focus}
@@ -996,7 +1131,7 @@ let r = class extends V {
           part="form-control-label"
           class="form-control__label"
           for="input"
-          aria-hidden=${e ? "false" : "true"}
+          aria-hidden=${i ? "false" : "true"}
         >
           <slot name="label">${this.label}</slot>
         </label>
@@ -1028,7 +1163,7 @@ let r = class extends V {
       "range-slider--disabled": this.disabled,
       "range-slider--dragging": this.multiIsDragging
     })}
-            style=${c({
+            style=${f({
       "--track-left-inset": `${this.trackLeftInset}%`,
       "--track-right-inset": `${this.trackRightInset}%`
     })}
@@ -1054,7 +1189,7 @@ let r = class extends V {
       "range-slider__thumb--min": !0,
       "range-slider__thumb--slotted": this.hasSlotController.test("thumb-min")
     })}
-                style=${c(this.getMultiThumbStyle(
+                style=${f(this.getMultiThumbStyle(
       "min"
       /* MIN */
     ))}
@@ -1095,7 +1230,7 @@ let r = class extends V {
       "range-slider__thumb--max": !0,
       "range-slider__thumb--slotted": this.hasSlotController.test("thumb-max")
     })}
-                style=${c(this.getMultiThumbStyle(
+                style=${f(this.getMultiThumbStyle(
       "max"
       /* MAX */
     ))}
@@ -1124,7 +1259,7 @@ let r = class extends V {
       "range-slider__range--active": this.multiDragTarget === "range"
       /* RANGE */
     })}
-              style=${c(this.getRangeBarStyle(n, l))}
+              style=${f(this.getRangeBarStyle(r, n))}
               ?data-active=${this.multiDragTarget === "range"}
               @pointerdown=${this.initiateMultiRangeDrag}
             ></div>
@@ -1146,78 +1281,79 @@ let r = class extends V {
     return this.multi ? this.renderMultiRange() : this.renderSingleRange();
   }
 };
-r.styles = [
-  w,
-  $,
-  U
+s.styles = [
+  U,
+  O,
+  ot
 ];
-r.dependencies = {
-  "cx-tooltip": F
+s.dependencies = {
+  "cx-resize-observer": R,
+  "cx-tooltip": H
 };
-s([
-  d(".range__control")
-], r.prototype, "input", 2);
-s([
-  d(".range-slider__input--min")
-], r.prototype, "multiInputMin", 2);
-s([
-  d(".range-slider__input--max")
-], r.prototype, "multiInputMax", 2);
-s([
-  d(".range__tooltip")
-], r.prototype, "output", 2);
-s([
-  d(".range__tooltip--min")
-], r.prototype, "minTooltip", 2);
-s([
-  d(".range__tooltip--max")
-], r.prototype, "maxTooltip", 2);
-s([
-  d(".range-slider__thumb--min")
-], r.prototype, "minThumb", 2);
-s([
-  d(".range-slider__thumb--max")
-], r.prototype, "maxThumb", 2);
-s([
-  d(".range")
-], r.prototype, "range", 2);
-s([
-  d(".range-slider")
-], r.prototype, "multiContainer", 2);
-s([
-  b()
-], r.prototype, "hasFocus", 2);
-s([
-  b()
-], r.prototype, "hasTooltip", 2);
-s([
-  b()
-], r.prototype, "_multiValue", 2);
-s([
-  b()
-], r.prototype, "_singleValue", 2);
-s([
-  b()
-], r.prototype, "multiDragTarget", 2);
-s([
-  b()
-], r.prototype, "multiIsDragging", 2);
-s([
-  h()
-], r.prototype, "state", 2);
-s([
-  h()
-], r.prototype, "title", 2);
-s([
-  h()
-], r.prototype, "name", 2);
-s([
-  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 i = t.split(" ").map((e) => Number.parseFloat(e.trim()));
-          return [i[0] ?? 0, i[1] ?? 0];
+          const e = t.split(" ").map((i) => Number.parseFloat(i.trim()));
+          return [e[0] ?? 0, e[1] ?? 0];
         }
         return Number.parseFloat(t) || 0;
       },
@@ -1225,109 +1361,112 @@ s([
     },
     reflect: !0
   })
-], r.prototype, "value", 1);
-s([
-  h({ reflect: !0, type: Boolean })
-], r.prototype, "multi", 2);
-s([
-  h()
-], r.prototype, "label", 2);
-s([
-  h({ attribute: "help-text" })
-], r.prototype, "helpText", 2);
-s([
-  h({ reflect: !0, type: Boolean })
-], r.prototype, "disabled", 2);
-s([
-  h({ type: Number })
-], r.prototype, "min", 2);
-s([
-  h({ type: Number })
-], r.prototype, "max", 2);
-s([
-  h({ reflect: !0, type: Number })
-], r.prototype, "step", 2);
-s([
-  h({ attribute: "tooltip-placement" })
-], r.prototype, "tooltipPlacement", 2);
-s([
-  h({ attribute: "tooltip-display" })
-], r.prototype, "tooltipDisplay", 2);
-s([
-  h({ attribute: "tooltip-hoist", type: Boolean })
-], r.prototype, "tooltipHoist", 2);
-s([
-  h({ attribute: "tooltip-formatter" })
-], r.prototype, "tooltipFormatter", 2);
-s([
-  h()
-], r.prototype, "form", 2);
-s([
-  h({ attribute: "snap-threshold", type: Number })
-], r.prototype, "snapThreshold", 2);
-s([
-  h({ attribute: "show-marks", type: Boolean })
-], r.prototype, "showMarks", 2);
-s([
-  h({ attribute: "tooltip-offset", type: Number })
-], r.prototype, "tooltipOffset", 2);
-s([
-  h({ attribute: "min-thumb-disabled", reflect: !0, type: Boolean })
-], r.prototype, "minThumbDisabled", 2);
-s([
-  h({ attribute: "max-thumb-disabled", reflect: !0, type: Boolean })
-], r.prototype, "maxThumbDisabled", 2);
-s([
-  h({ attribute: "range-slide-disabled", type: Boolean })
-], r.prototype, "rangeSlideDisabled", 2);
-s([
-  h({ attribute: "thumbs-crossover" })
-], r.prototype, "thumbsCrossover", 2);
-s([
-  h({ attribute: "aria-label-lower" })
-], r.prototype, "ariaLabelLower", 2);
-s([
-  h({ attribute: "aria-label-upper" })
-], r.prototype, "ariaLabelUpper", 2);
-s([
-  h({ attribute: "no-overlap", reflect: !0, type: Boolean })
-], r.prototype, "noOverlap", 2);
-s([
-  h({ attribute: "thumb-edge-mode" })
-], r.prototype, "thumbEdgeMode", 2);
-s([
-  b()
-], r.prototype, "marks", 2);
-s([
-  S()
-], r.prototype, "defaultValue", 2);
-s([
-  g(["min", "max", "step"])
-], r.prototype, "initMarks", 1);
-s([
-  R({ passive: !0 })
-], r.prototype, "handleThumbDragStart", 1);
-s([
-  g("value", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleValueChange", 1);
-s([
-  g("disabled", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleDisabledChange", 1);
-s([
-  g("hasTooltip", { waitUntilFirstUpdate: !0 })
-], r.prototype, "syncRange", 1);
-s([
-  C(100)
-], r.prototype, "handleMultiResize", 1);
-s([
-  g(["min", "max", "step"], { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleConstraintsChange", 1);
-s([
-  g("_multiValue", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleMultiValueChange", 1);
-r = s([
-  D("cx-range")
-], r);
+], 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([
+  N()
+], 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([
+  F("cx-range")
+], s);
 export {
-  r as default
+  s as default
 };