@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/range.js

@@ -1,16 +1,16 @@
 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 P } from "../chunks/component.styles.CRO4Odto.js";
+import { f as F } from "../chunks/form-control.styles.CaGWmeAS.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.C0iakJkV.js";
+import { F as N } from "../chunks/form.CFc09rKh.js";
+import { L as S } from "../chunks/i18n.BFqTRDCA.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 { w as v } from "../chunks/watch.BCJD77bD.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";
@@ -22,16 +22,16 @@ 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({
+function Y({
   edgeMode: t = "center",
   maxOffset: e,
   minOffset: i,
   percentValue: a
 }) {
-  const r = t === "inside" ? i : 0, n = t === "inside" ? 100 - e : 100;
+  const r = t === "inside" ? i : 0, l = 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);
+    o < r && (o = r, h = r + i + e), h > l && (h = l, o = l - i - e);
   else {
     if (o < 0) {
       const m = -o;
@@ -43,7 +43,7 @@ function X({
     }
   }
   return {
-    maxThumbMaxLeft: d(n, 0, 100),
+    maxThumbMaxLeft: d(l, 0, 100),
     maxThumbMinLeft: d(h, 0, 100),
     minThumbMaxLeft: d(o, 0, 100),
     minThumbMinLeft: d(r, 0, 100)
@@ -53,13 +53,13 @@ function y(t, e, i) {
   const a = i - e;
   return a === 0 ? 0 : d((t - e) / a, 0, 1) * 100;
 }
-function Y(t) {
+function X(t) {
   return t.filter((e) => !e.hidden);
 }
-function J(t, e) {
+function G(t, e) {
   return Math.floor(t / Math.max(e, 1));
 }
-function G(t, e) {
+function J(t, e) {
   const i = (t - 1) / (e + 1);
   return Math.ceil(i);
 }
@@ -67,8 +67,8 @@ 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;
+  const r = Math.abs(t - e), l = Math.abs(t - i);
+  return r >= a && l >= a;
 }
 function tt(t) {
   return new Set(t.map((e) => e.value));
@@ -81,16 +81,16 @@ 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) {
+function at(t, e, i, a, r, l) {
   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);
+  const x = J(t.length, e), b = Q(i, a), D = y(h.value, r, l), _ = y(m.value, r, l);
   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);
+    const z = y(T.value, r, l);
     Z(
       z,
       D,
@@ -103,19 +103,19 @@ function at(t, e, i, a, r, n) {
 function rt(t, e, i, a, r) {
   if (!e || t.length === 0)
     return /* @__PURE__ */ new Set();
-  const n = Y(t);
-  if (n.length === 0)
+  const l = X(t);
+  if (l.length === 0)
     return /* @__PURE__ */ new Set();
-  const o = J(e, i);
-  if (o >= n.length)
-    return tt(n);
+  const o = G(e, i);
+  if (o >= l.length)
+    return tt(l);
   if (o <= 1)
-    return et(n);
-  const h = it(n, o);
+    return et(l);
+  const h = it(l, o);
   if (o > 2) {
     const m = o - 2;
     at(
-      n,
+      l,
       m,
       i,
       e,
@@ -125,9 +125,9 @@ function rt(t, e, i, a, r) {
   }
   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);
+var st = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, nt = (t, e, i, a) => {
+  for (var r = lt(e, i), l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = o(e, i, r) || r);
   return r && st(e, i, r), r;
 };
 class L {
@@ -160,15 +160,15 @@ class L {
         const r = a.getAttribute("value");
         if (!r)
           return;
-        const n = Number.parseFloat(r);
-        Number.isNaN(n) || i.push({
+        const l = Number.parseFloat(r);
+        Number.isNaN(l) || i.push({
           hidden: a.hasAttribute("hidden"),
           label: a.textContent || "",
-          value: n
+          value: l
         });
       });
     else {
-      const a = this.host.step || 1, r = this.host.min, n = this.host.max, o = Math.round((n - r) / a);
+      const a = this.host.step || 1, r = this.host.min, l = this.host.max, o = Math.round((l - r) / a);
       for (let h = 0; h <= o; h++) {
         const m = r + h * a;
         i.push({
@@ -186,24 +186,13 @@ class L {
       this.host.min,
       this.host.max
     ), r = i ? 100 - a : a;
-    return M` <div
-        class=${p({
+    return M`<div class=${p({
       mark__tick: !0,
       "mark__tick--hidden": e.hidden
-    })}
-        part="mark-tick"
-        style=${f({ left: `${r}%` })}
-      ></div>
-      <div
-        class=${p({
+    })} 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>`;
+    })} part="mark-label" style=${f({ left: `${r}%` })}>${e.label}</div>`;
   }
   /**
    * Calculates which marks should display labels based on available width.
@@ -223,343 +212,22 @@ class L {
     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({
+    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(
+    })}>${q(
       this.host.marks,
       (e) => e.value,
       (e) => this.renderMark(e)
-    )}
-      </div>
-    </cx-resize-observer>`;
+    )}</div></cx-resize-observer>`;
   }
 }
-lt([
+nt([
   $(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);
+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;isolation:isolate;display:block}.range{cursor:pointer;margin:var(--cx-spacing-large) 0;position:relative}.range:before{content:"";background-color:var(--track-color-active);border-radius:var(--border-radius);border:var(--track-border);pointer-events:none;height:100%;width:var(--percent);z-index:1;position:absolute;top:50%;left:0;transform:translateY(-50%)}.range__container{height:var(--track-height);position:relative}.range__control{-webkit-appearance:none;border-radius:var(--border-radius);width:100%;height:var(--track-height);line-height:var(--cx-input-height-medium);vertical-align:middle;background:0 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;margin:0;position:absolute;top:0;left:0}.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%)}.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{visibility:hidden;display:none}.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}.range__control:focus-visible{outline:none}.range__control:disabled{opacity:.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:1px solid #0000}.range__control::-moz-range-thumb{border:1px solid #0000}}::slotted([slot=marks]){display:none}.range__marks{width:100%;height:10px;display:flex;position:absolute;transform:translateY(-50%)}.mark__tick{border-left:1px solid var(--cx-color-neutral-1000);height:10px;position:absolute;left:50%;transform:translate(-50%)}.mark__tick--hidden{visibility:hidden}.mark__label{top:var(--cx-spacing-medium);position:absolute;transform:translate(-50%)}.mark__label--hidden{visibility:hidden}.range__thumb{width:var(--thumb-size);height:var(--thumb-size);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%;left:var(--percent);z-index:1;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.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:.5;cursor:default}.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;width:100%;height:var(--track-height);display:block;position:relative}.range-slider:before{content:"";top:0;left:var(--track-left-inset);width:calc(100% - var(--track-left-inset) - var(--track-right-inset));background:var(--track-color-inactive);border-radius:calc(var(--track-height) / 2);height:100%;position:absolute}.range-slider--disabled{opacity:.5;cursor:not-allowed}.range-slider__thumb{z-index:3;width:var(--thumb-size);height:var(--thumb-size);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 .15s;position:absolute;top:50%;transform:translate(-50%,-50%)}.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:.6}.range-slider__thumb--slotted{box-shadow:none;background:0 0;border:none;width:auto;height:auto;display:flex}.range-slider__thumb--slotted ::slotted(*){pointer-events:none}.range-slider__range{z-index:1;background:var(--track-color-active);cursor:pointer;border-radius:var(--border-radius);border:var(--track-border);height:100%;position:absolute;top:50%;transform:translateY(-50%)}.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, n = (t, e, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? ut(e, i) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (r = (a ? o(e, i, r) : o(r)) || r);
   return a && r && ht(e, i, r), r;
 };
 let s = class extends I {
@@ -672,12 +340,12 @@ let s = class extends I {
       a = _, r = b;
     }
     this.step ? a <= this.snapThreshold && (e = r) : e = r;
-    const n = d(
+    const l = d(
       this.pixelsToValue(e),
       this.min,
       this.max
     );
-    this.input.value = n.toString();
+    this.input.value = l.toString();
     const o = Number.parseFloat(this.input.value);
     return this.value === o ? !1 : (this.value = o, !0);
   }
@@ -797,8 +465,8 @@ let s = class extends I {
   /** 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;
+    let r = t === "min" ? e : this._multiValue.min, l = t === "max" ? e : this._multiValue.max;
+    return r > l && (this.thumbsCrossover === "block" ? t === "min" ? r = this._multiValue.max : l = this._multiValue.min : [r, l] = [l, r]), this.setMultiValue(r, l), this._multiValue.min !== i || this._multiValue.max !== a;
   }
   /** Finds the next mark value greater than the current value */
   findNextMark(t) {
@@ -904,7 +572,7 @@ let s = class extends I {
    * 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);
+    const i = this.trackLeftInset, a = this.trackRightInset, r = Math.max(t, i), l = Math.min(e, 100 - a), o = Math.max(0, l - r);
     return {
       left: `${r}%`,
       /**
@@ -924,7 +592,7 @@ let s = class extends I {
       return;
     const t = this.multiValueToPercent(this._multiValue.min), e = this.minThumbOffset, i = this.maxThumbOffset;
     if (this.thumbsCrossover === "block") {
-      const a = X({
+      const a = Y({
         edgeMode: this.thumbEdgeMode,
         maxOffset: i,
         minOffset: e,
@@ -947,8 +615,8 @@ let s = class extends I {
     const r = this.multiContainer.getBoundingClientRect().width;
     w(this, {
       initialEvent: t,
-      onMove: (n) => {
-        const o = this.multiPositionToValue(n, r);
+      onMove: (l) => {
+        const o = this.multiPositionToValue(l, r);
         this.multiDragTarget === "min" ? this.setMultiValue(o, this._multiValue.max) : this.setMultiValue(this._multiValue.min, o), this.handleInput();
       },
       onStop: () => {
@@ -964,8 +632,8 @@ let s = class extends I {
     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;
+        const l = this.multiPositionToValue(r, i) - this.multiPositionToValue(a, i);
+        let o = this.multiDragStartValue.min + l, h = this.multiDragStartValue.max + l;
         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: () => {
@@ -979,8 +647,8 @@ let s = class extends I {
     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");
+    const i = this.multiContainer.getBoundingClientRect(), a = i.width, r = t.clientX - i.left, l = this.multiPositionToValue(r, a), o = Math.abs(this._multiValue.min - l), h = 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 <= h ? this.setMultiValue(l, this._multiValue.max) : this.setMultiValue(this._multiValue.min, l), this.emit("cx-change");
   }
   handleMultiKeyDown(t, e) {
     if (this.disabled || (e === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
@@ -1016,268 +684,63 @@ let s = class extends I {
   }
   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({
+    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({
+    })} @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>
-    `;
+    })} @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(
+    ), l = this.getConstrainedPercent(
       "max"
       /* MAX */
     );
-    return M`
-      <div
-        part="form-control"
-        class=${p({
+    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({
+    })} @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({
+    })} 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({
+    })} ?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(
+    })} 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({
+    ))} 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(
+    })} 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({
+    ))} 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>
-    `;
+    })} style=${f(this.getRangeBarStyle(r, l))} ?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();
@@ -1292,64 +755,64 @@ s.dependencies = {
   "cx-resize-observer": R,
   "cx-tooltip": H
 };
-l([
+n([
   c(".range__control")
 ], s.prototype, "input", 2);
-l([
+n([
   c(".range-slider__input--min")
 ], s.prototype, "multiInputMin", 2);
-l([
+n([
   c(".range-slider__input--max")
 ], s.prototype, "multiInputMax", 2);
-l([
+n([
   c(".range__tooltip")
 ], s.prototype, "output", 2);
-l([
+n([
   c(".range__tooltip--min")
 ], s.prototype, "minTooltip", 2);
-l([
+n([
   c(".range__tooltip--max")
 ], s.prototype, "maxTooltip", 2);
-l([
+n([
   c(".range-slider__thumb--min")
 ], s.prototype, "minThumb", 2);
-l([
+n([
   c(".range-slider__thumb--max")
 ], s.prototype, "maxThumb", 2);
-l([
+n([
   c(".range")
 ], s.prototype, "range", 2);
-l([
+n([
   c(".range-slider")
 ], s.prototype, "multiContainer", 2);
-l([
+n([
   g()
 ], s.prototype, "hasFocus", 2);
-l([
+n([
   g()
 ], s.prototype, "hasTooltip", 2);
-l([
+n([
   g()
 ], s.prototype, "_multiValue", 2);
-l([
+n([
   g()
 ], s.prototype, "_singleValue", 2);
-l([
+n([
   g()
 ], s.prototype, "multiDragTarget", 2);
-l([
+n([
   g()
 ], s.prototype, "multiIsDragging", 2);
-l([
+n([
   u()
 ], s.prototype, "state", 2);
-l([
+n([
   u()
 ], s.prototype, "title", 2);
-l([
+n([
   u()
 ], s.prototype, "name", 2);
-l([
+n([
   u({
     converter: {
       fromAttribute: (t) => {
@@ -1364,109 +827,109 @@ l([
     reflect: !0
   })
 ], s.prototype, "value", 1);
-l([
+n([
   u({ reflect: !0, type: Boolean })
 ], s.prototype, "multi", 2);
-l([
+n([
   u()
 ], s.prototype, "label", 2);
-l([
+n([
   u({ attribute: "help-text" })
 ], s.prototype, "helpText", 2);
-l([
+n([
   u({ reflect: !0, type: Boolean })
 ], s.prototype, "disabled", 2);
-l([
+n([
   u({ type: Number })
 ], s.prototype, "min", 2);
-l([
+n([
   u({ type: Number })
 ], s.prototype, "max", 2);
-l([
+n([
   u({ reflect: !0, type: Number })
 ], s.prototype, "step", 2);
-l([
+n([
   u({ attribute: "mark-label-spacing", type: Number })
 ], s.prototype, "markLabelSpacing", 2);
-l([
+n([
   u({ attribute: "tooltip-placement" })
 ], s.prototype, "tooltipPlacement", 2);
-l([
+n([
   u({ attribute: "tooltip-display" })
 ], s.prototype, "tooltipDisplay", 2);
-l([
+n([
   u({ attribute: "tooltip-hoist", type: Boolean })
 ], s.prototype, "tooltipHoist", 2);
-l([
+n([
   u({ attribute: "tooltip-formatter" })
 ], s.prototype, "tooltipFormatter", 2);
-l([
+n([
   u()
 ], s.prototype, "form", 2);
-l([
+n([
   u({ attribute: "snap-threshold", type: Number })
 ], s.prototype, "snapThreshold", 2);
-l([
+n([
   u({ attribute: "show-marks", type: Boolean })
 ], s.prototype, "showMarks", 2);
-l([
+n([
   u({ attribute: "tooltip-offset", type: Number })
 ], s.prototype, "tooltipOffset", 2);
-l([
+n([
   u({ attribute: "min-thumb-disabled", reflect: !0, type: Boolean })
 ], s.prototype, "minThumbDisabled", 2);
-l([
+n([
   u({ attribute: "max-thumb-disabled", reflect: !0, type: Boolean })
 ], s.prototype, "maxThumbDisabled", 2);
-l([
+n([
   u({ attribute: "range-slide-disabled", type: Boolean })
 ], s.prototype, "rangeSlideDisabled", 2);
-l([
+n([
   u({ attribute: "thumbs-crossover" })
 ], s.prototype, "thumbsCrossover", 2);
-l([
+n([
   u({ attribute: "aria-label-lower" })
 ], s.prototype, "ariaLabelLower", 2);
-l([
+n([
   u({ attribute: "aria-label-upper" })
 ], s.prototype, "ariaLabelUpper", 2);
-l([
+n([
   u({ attribute: "no-overlap", reflect: !0, type: Boolean })
 ], s.prototype, "noOverlap", 2);
-l([
+n([
   u({ attribute: "thumb-edge-mode" })
 ], s.prototype, "thumbEdgeMode", 2);
-l([
+n([
   g()
 ], s.prototype, "marks", 2);
-l([
+n([
   O()
 ], s.prototype, "defaultValue", 2);
-l([
+n([
   v(["min", "max", "step"])
 ], s.prototype, "initMarks", 1);
-l([
+n([
   E({ passive: !0 })
 ], s.prototype, "handleThumbDragStart", 1);
-l([
+n([
   v("value", { waitUntilFirstUpdate: !0 })
 ], s.prototype, "handleValueChange", 1);
-l([
+n([
   v("disabled", { waitUntilFirstUpdate: !0 })
 ], s.prototype, "handleDisabledChange", 1);
-l([
+n([
   v("hasTooltip", { waitUntilFirstUpdate: !0 })
 ], s.prototype, "syncRange", 1);
-l([
+n([
   $(100)
 ], s.prototype, "handleMultiResize", 1);
-l([
+n([
   v(["min", "max", "step"], { waitUntilFirstUpdate: !0 })
 ], s.prototype, "handleConstraintsChange", 1);
-l([
+n([
   v("_multiValue", { waitUntilFirstUpdate: !0 })
 ], s.prototype, "handleMultiValueChange", 1);
-s = l([
+s = n([
   U("cx-range")
 ], s);
 export {