@cupra/ui-kit 2.0.0-canary.88 → 2.0.0-canary.89

package/dist/esm/components/ds-slider/ds-slider.js

@@ -1,199 +1,232 @@
-import { UiKitElement as S } from "../base/UiKitElement.js";
-import { getStepValue as x } from "./utils/getStepValue/getStepValue.js";
-import { roundToDecimals as $ } from "./utils/roundToDecimals/roundToDecimals.js";
-import { customUiKitElement as V } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as _ } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as T } from "../../utils/booleanConverter.js";
-import { formatNumber as P } from "../../utils/formatNumber/formatNumber.js";
-import { htmlWithTokens as L } from "../../utils/htmlWithTokens.js";
-import { objectConverter as D } from "../../utils/objectConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as h, html as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as k } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as R } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { live as E } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
-import { commonStyles as I, trackStyles as F, thumbStyles as C, currentValueStyles as N, rangeValueStyles as A } from "./styles/common.styles.js";
-var U = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
-  for (var o = a > 1 ? void 0 : a ? B(e, i) : e, u = t.length - 1, m; u >= 0; u--)
-    (m = t[u]) && (o = (a ? m(e, i, o) : m(o)) || o);
-  return a && o && U(e, i, o), o;
-};
-let s = class extends _(S) {
-  constructor() {
-    super(...arguments), this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this.getNewValue = (t) => {
-      const { width: e, left: i } = this.track.getBoundingClientRect(), a = this.thumbRadius, o = t.type.indexOf("mouse") !== -1 ? t.clientX : t.touches[0].clientX, u = e - a * 2, m = Math.min(Math.max(0, o - i - a), u), d = u > 0 ? m * 100 / u : 0;
-      return this.min + d * (this.max - this.min) / 100;
-    }, this.setActiveThumb = (t) => {
-      const e = this.getNewValue(t);
-      typeof this._valueMax != "number" || e <= this._valueMin ? this.activeThumb = "min" : e >= this._valueMax ? this.activeThumb = "max" : e - this._valueMin < this._valueMax - e ? this.activeThumb = "min" : this.activeThumb = "max";
-    }, this.handleMouseMove = (t) => {
-      this.animationFrameRequest && cancelAnimationFrame(this.animationFrameRequest), this.animationFrameRequest = requestAnimationFrame(() => {
-        const e = this.getNewValue(t), i = this.activeThumb ?? "min", { stepValue: a } = this.computeStep({ proposedValue: e, role: i });
-        this.handleChange({ value: a, role: i });
-      });
-    }, this.handleMouseDown = (t) => {
-      var e;
-      this.disabled || ((e = t == null ? void 0 : t.preventDefault) == null || e.call(t), this.setActiveThumb(t), this.handleMouseMove(t), window == null || window.addEventListener("mousemove", this.handleMouseMove), window == null || window.addEventListener("touchmove", this.handleMouseMove), window == null || window.addEventListener("pointerup", this.handlePointerUp));
-    }, this.handlePointerUp = () => {
-      window == null || window.removeEventListener("mousemove", this.handleMouseMove), window == null || window.removeEventListener("touchmove", this.handleMouseMove), window == null || window.removeEventListener("pointerup", this.handlePointerUp);
-    }, this.handleKeydown = () => {
-      this.keyboardMode = !0;
-    }, this.handlePointerOrMouseDown = () => {
-      this.keyboardMode = !1;
-    }, this.onInputFocus = (t, e) => {
-      const i = t.currentTarget, a = this.getRoleById(e);
-      this.editingField = a, i.type = "number", i.step = String(this.step ?? 1);
-      const o = a === "min" ? this._valueMin : this._valueMax;
-      i.value = String(o ?? ""), this.keyboardMode && i.classList.add("focus-visible");
-    }, this.commitInputValue = (t, e) => {
-      const i = t.currentTarget, a = this.getRoleById(e), { stepValue: o } = this.computeStep({ proposedValue: Number(i.value), role: a });
-      this.handleChange({ value: o, role: a }), this.isControlled(a) || (i.value = String(o));
-    }, this.onInputBlur = (t) => {
-      var i;
-      this.editingField = void 0;
-      const e = t.currentTarget;
-      (i = e == null ? void 0 : e.classList) == null || i.remove("focus-visible");
-    }, this.onInputKeyDown = (t, e) => {
-      t.key === "Enter" && (t.preventDefault(), this.commitInputValue(t, e));
-    }, this.onThumbKeyDown = (t, e) => {
-      if (!this.disabled && (t.key === "ArrowLeft" || t.key === "ArrowRight")) {
-        t.preventDefault();
-        const i = this.step ?? 1, a = t.key === "ArrowLeft" ? -i : i, o = this.getRoleById(e), u = o === "min" ? this._valueMin : this._valueMax, { stepValue: m } = this.computeStep({ proposedValue: u + a, role: o });
-        this.handleChange({ value: m, role: o });
-      }
-    };
-  }
-  get isRange() {
-    return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
-  }
-  isControlled(t) {
-    return typeof (t === "min" ? this.valueMin : this.valueMax) == "number";
-  }
-  getRoleById(t) {
-    return t === 1 ? "min" : "max";
-  }
-  get currentValues() {
-    return {
-      1: this._valueMin,
-      ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
-    };
-  }
-  computeStep({ proposedValue: t, role: e }) {
-    return x({
-      step: this.step,
-      min: this.min,
-      max: this.max,
-      proposedValue: t,
-      role: e,
-      currentValues: this.currentValues
-    });
-  }
-  willUpdate(t) {
-    super.willUpdate(t), typeof this.valueMin == "number" && (this._valueMin = this.valueMin), typeof this.valueMax == "number" && (this._valueMax = this.valueMax);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window == null || window.removeEventListener("mousemove", this.handleMouseMove), window == null || window.removeEventListener("touchmove", this.handleMouseMove), window == null || window.removeEventListener("pointerup", this.handlePointerUp), window == null || window.removeEventListener("keydown", this.handleKeydown), window == null || window.removeEventListener("mousedown", this.handlePointerOrMouseDown), window == null || window.removeEventListener("pointerdown", this.handlePointerOrMouseDown);
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), window == null || window.addEventListener("keydown", this.handleKeydown), window == null || window.addEventListener("mousedown", this.handlePointerOrMouseDown), window == null || window.addEventListener("pointerdown", this.handlePointerOrMouseDown), ["min", "max"].forEach((i) => {
-      if (this.isControlled(i)) return;
-      const o = this[i === "min" ? "initialValueMin" : "initialValueMax"];
-      if (typeof o != "number") return;
-      const { stepValue: u } = this.computeStep({ proposedValue: o, role: i });
-      this[i === "min" ? "_valueMin" : "_valueMax"] !== u && this.handleChange({ value: u, role: i });
-    });
-  }
-  getTrackPct(t) {
-    const e = this.max - this.min;
-    return e === 0 ? 0 : (t - this.min) / e * 100;
-  }
-  get thumbRadius() {
-    var e;
-    const t = (e = this.renderRoot) == null ? void 0 : e.querySelector(".thumb");
-    return t ? t.offsetWidth / 2 : 0;
-  }
-  trackPosition(t) {
-    const e = s.THUMB_RADIUS_CSS_VAR;
-    return `calc(${e} + (100% - ${e} * 2) * ${t / 100})`;
-  }
-  trackWidth(t) {
-    return `calc((100% - ${s.THUMB_RADIUS_CSS_VAR} * 2) * ${t / 100})`;
-  }
-  handleChange({ value: t, role: e }) {
-    const i = $({ value: t, fractionDigits: this.maximumFractionDigits }), a = e === "min" ? "_valueMin" : "_valueMax";
-    this[a] !== i && (this.isControlled(e) || (this[a] = i), this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          role: e,
-          value: i
-        }
-      })
-    ));
-  }
-  formatNumber(t) {
-    const e = {
-      value: t,
-      locale: this.locale,
-      ...this.unitStyle && { style: this.unitStyle },
-      ...this.currency && { currency: this.currency },
-      ...this.unit && { unit: this.unit },
-      localeMatcher: this.localeMatcher,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      thousandSeparator: this.thousandSeparator,
-      fractionSeparator: this.fractionSeparator,
-      useGrouping: this.useGrouping
-    };
-    return P(e);
-  }
-  get rangeValuesTemplates() {
-    const {
-      formattedValue: t,
-      unitSymbol: e,
-      unitSymbolPosition: i
-    } = this.formatNumber(this.min), a = this.unitSymbol ?? e, o = this.unitSymbolPosition ?? i, { formattedValue: u } = this.formatNumber(this.max);
-    return l`
+import "../ds-theme-provider/themeContext.js";
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as o } from "../base/UiKitElement.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as l } from "../../utils/htmlWithTokens.js";
+import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
+import { objectConverter as f } from "../../utils/objectConverter.js";
+import { formatNumber as p } from "../../utils/formatNumber/formatNumber.js";
+import { getStepValue as m } from "./utils/getStepValue/getStepValue.js";
+import { roundToDecimals as h } from "./utils/roundToDecimals/roundToDecimals.js";
+import { l as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/live.js";
+import { commonStyles as _, currentValueStyles as v, rangeValueStyles as y, thumbStyles as b, trackStyles as x } from "./styles/common.styles.js";
+//#region src/components/ds-slider/ds-slider.ts
+var S, C = class extends d(o) {
+	static {
+		S = this;
+	}
+	constructor(...e) {
+		super(...e), this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.keyboardMode = !1, this.getNewValue = (e) => {
+			let { width: t, left: n } = this.track.getBoundingClientRect(), r = this.thumbRadius, i = e.type.indexOf("mouse") === -1 ? e.touches[0].clientX : e.clientX, a = t - r * 2, o = Math.min(Math.max(0, i - n - r), a), s = a > 0 ? o * 100 / a : 0;
+			return this.min + s * (this.max - this.min) / 100;
+		}, this.setActiveThumb = (e) => {
+			let t = this.getNewValue(e);
+			typeof this._valueMax != "number" || t <= this._valueMin ? this.activeThumb = "min" : t >= this._valueMax ? this.activeThumb = "max" : t - this._valueMin < this._valueMax - t ? this.activeThumb = "min" : this.activeThumb = "max";
+		}, this.handleMouseMove = (e) => {
+			this.animationFrameRequest && cancelAnimationFrame(this.animationFrameRequest), this.animationFrameRequest = requestAnimationFrame(() => {
+				let t = this.getNewValue(e), n = this.activeThumb ?? "min", { stepValue: r } = this.computeStep({
+					proposedValue: t,
+					role: n
+				});
+				this.handleChange({
+					value: r,
+					role: n
+				});
+			});
+		}, this.handleMouseDown = (e) => {
+			this.disabled || (e?.preventDefault?.(), this.setActiveThumb(e), this.handleMouseMove(e), window?.addEventListener("mousemove", this.handleMouseMove), window?.addEventListener("touchmove", this.handleMouseMove), window?.addEventListener("pointerup", this.handlePointerUp));
+		}, this.handlePointerUp = () => {
+			window?.removeEventListener("mousemove", this.handleMouseMove), window?.removeEventListener("touchmove", this.handleMouseMove), window?.removeEventListener("pointerup", this.handlePointerUp);
+		}, this.handleKeydown = () => {
+			this.keyboardMode = !0;
+		}, this.handlePointerOrMouseDown = () => {
+			this.keyboardMode = !1;
+		}, this.onInputFocus = (e, t) => {
+			let n = e.currentTarget, r = this.getRoleById(t);
+			this.editingField = r, n.type = "number", n.step = String(this.step ?? 1);
+			let i = r === "min" ? this._valueMin : this._valueMax;
+			n.value = String(i ?? ""), this.keyboardMode && n.classList.add("focus-visible");
+		}, this.commitInputValue = (e, t) => {
+			let n = e.currentTarget, r = this.getRoleById(t), { stepValue: i } = this.computeStep({
+				proposedValue: Number(n.value),
+				role: r
+			});
+			this.handleChange({
+				value: i,
+				role: r
+			}), this.isControlled(r) || (n.value = String(i));
+		}, this.onInputBlur = (e) => {
+			this.editingField = void 0, e.currentTarget?.classList?.remove("focus-visible");
+		}, this.onInputKeyDown = (e, t) => {
+			e.key === "Enter" && (e.preventDefault(), this.commitInputValue(e, t));
+		}, this.onThumbKeyDown = (e, t) => {
+			if (!this.disabled && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+				e.preventDefault();
+				let n = this.step ?? 1, r = e.key === "ArrowLeft" ? -n : n, i = this.getRoleById(t), a = i === "min" ? this._valueMin : this._valueMax, { stepValue: o } = this.computeStep({
+					proposedValue: a + r,
+					role: i
+				});
+				this.handleChange({
+					value: o,
+					role: i
+				});
+			}
+		};
+	}
+	static {
+		this.styles = [
+			_,
+			x,
+			b,
+			v,
+			y
+		];
+	}
+	get isRange() {
+		return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
+	}
+	isControlled(e) {
+		return typeof (e === "min" ? this.valueMin : this.valueMax) == "number";
+	}
+	getRoleById(e) {
+		return e === 1 ? "min" : "max";
+	}
+	get currentValues() {
+		return {
+			1: this._valueMin,
+			...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
+		};
+	}
+	computeStep({ proposedValue: e, role: t }) {
+		return m({
+			step: this.step,
+			min: this.min,
+			max: this.max,
+			proposedValue: e,
+			role: t,
+			currentValues: this.currentValues
+		});
+	}
+	willUpdate(e) {
+		super.willUpdate(e), typeof this.valueMin == "number" && (this._valueMin = this.valueMin), typeof this.valueMax == "number" && (this._valueMax = this.valueMax);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window?.removeEventListener("mousemove", this.handleMouseMove), window?.removeEventListener("touchmove", this.handleMouseMove), window?.removeEventListener("pointerup", this.handlePointerUp), window?.removeEventListener("keydown", this.handleKeydown), window?.removeEventListener("mousedown", this.handlePointerOrMouseDown), window?.removeEventListener("pointerdown", this.handlePointerOrMouseDown);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), window?.addEventListener("keydown", this.handleKeydown), window?.addEventListener("mousedown", this.handlePointerOrMouseDown), window?.addEventListener("pointerdown", this.handlePointerOrMouseDown), ["min", "max"].forEach((e) => {
+			if (this.isControlled(e)) return;
+			let t = this[e === "min" ? "initialValueMin" : "initialValueMax"];
+			if (typeof t != "number") return;
+			let { stepValue: n } = this.computeStep({
+				proposedValue: t,
+				role: e
+			});
+			this[e === "min" ? "_valueMin" : "_valueMax"] !== n && this.handleChange({
+				value: n,
+				role: e
+			});
+		});
+	}
+	getTrackPct(e) {
+		let t = this.max - this.min;
+		return t === 0 ? 0 : (e - this.min) / t * 100;
+	}
+	get thumbRadius() {
+		let e = this.renderRoot?.querySelector(".thumb");
+		return e ? e.offsetWidth / 2 : 0;
+	}
+	static {
+		this.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-slider-thumb-radius, 0px)";
+	}
+	trackPosition(e) {
+		let t = S.THUMB_RADIUS_CSS_VAR;
+		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
+	}
+	trackWidth(e) {
+		return `calc((100% - ${S.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
+	}
+	handleChange({ value: e, role: t }) {
+		let n = h({
+			value: e,
+			fractionDigits: this.maximumFractionDigits
+		}), r = t === "min" ? "_valueMin" : "_valueMax";
+		this[r] !== n && (this.isControlled(t) || (this[r] = n), this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				role: t,
+				value: n
+			}
+		})));
+	}
+	formatNumber(e) {
+		return p({
+			value: e,
+			locale: this.locale,
+			...this.unitStyle && { style: this.unitStyle },
+			...this.currency && { currency: this.currency },
+			...this.unit && { unit: this.unit },
+			localeMatcher: this.localeMatcher,
+			minimumIntegerDigits: this.minimumIntegerDigits,
+			minimumFractionDigits: this.minimumFractionDigits,
+			maximumFractionDigits: this.maximumFractionDigits,
+			thousandSeparator: this.thousandSeparator,
+			fractionSeparator: this.fractionSeparator,
+			useGrouping: this.useGrouping
+		});
+	}
+	get rangeValuesTemplates() {
+		let { formattedValue: n, unitSymbol: r, unitSymbolPosition: i } = this.formatNumber(this.min), a = this.unitSymbol ?? r, o = this.unitSymbolPosition ?? i, { formattedValue: s } = this.formatNumber(this.max);
+		return t`
             <div class="range-value-text">
-                ${this.minLabel ? l`<span class="range-value-label">${this.minLabel}</span>` : h}
-                ${o === "left" ? l`<span>${a}</span>` : h}
-                <span>${t}</span>
-                ${o === "right" ? l`<span>${a}</span>` : h}
+                ${this.minLabel ? t`<span class="range-value-label">${this.minLabel}</span>` : e}
+                ${o === "left" ? t`<span>${a}</span>` : e}
+                <span>${n}</span>
+                ${o === "right" ? t`<span>${a}</span>` : e}
             </div>
             <div class="range-value-text">
-                ${this.maxLabel ? l` <span class="range-value-label">${this.maxLabel}</span>` : h}
-                ${o === "left" ? l`<span>${a}</span>` : h}
-                <span>${u}</span>
-                ${o === "right" ? l`<span>${a}</span>` : h}
+                ${this.maxLabel ? t` <span class="range-value-label">${this.maxLabel}</span>` : e}
+                ${o === "left" ? t`<span>${a}</span>` : e}
+                <span>${s}</span>
+                ${o === "right" ? t`<span>${a}</span>` : e}
             </div>
         `;
-  }
-  getThumbTemplate(t) {
-    const e = this.getRoleById(t), i = e === "min" ? this._valueMin : this._valueMax, { minLimit: a, maxLimit: o } = this.computeStep({ proposedValue: i, role: e }), u = this.getTrackPct(i);
-    return l`
+	}
+	getThumbTemplate(e) {
+		let n = this.getRoleById(e), r = n === "min" ? this._valueMin : this._valueMax, { minLimit: i, maxLimit: a } = this.computeStep({
+			proposedValue: r,
+			role: n
+		}), o = this.getTrackPct(r);
+		return t`
             <style>
-                .thumb${t} {
-                    left: ${this.trackPosition(u)};
+                .thumb${e} {
+                    left: ${this.trackPosition(o)};
                 }
             </style>
             <div
-                class="thumb${t} thumb"
+                class="thumb${e} thumb"
                 @focus=${() => {
-      this.activeThumb = e;
-    }}
-                @keydown=${(m) => this.onThumbKeyDown(m, t)}
+			this.activeThumb = n;
+		}}
+                @keydown=${(t) => this.onThumbKeyDown(t, e)}
                 role="slider"
                 tabindex=${this.disabled ? -1 : 0}
                 aria-disabled=${String(!!this.disabled)}
-                aria-label=${t === 1 ? "Minumum value" : "Maximum Value"}
-                aria-valuemin=${a}
-                aria-valuemax=${o}
-                aria-valuenow=${i}
+                aria-label=${e === 1 ? "Minumum value" : "Maximum Value"}
+                aria-valuemin=${i}
+                aria-valuemax=${a}
+                aria-valuenow=${r}
             >
                 <svg
                     class="thumb-svg"
@@ -205,83 +238,78 @@ let s = class extends _(S) {
                 </svg>
             </div>
         `;
-  }
-  get thumbTemplates() {
-    return l`
+	}
+	get thumbTemplates() {
+		return t`
             ${this.getThumbTemplate(1)}
-            ${this.isRange ? this.getThumbTemplate(2) : h}
+            ${this.isRange ? this.getThumbTemplate(2) : e}
         `;
-  }
-  get trackRangeTemplate() {
-    const t = this.getTrackPct(this._valueMin), e = this.isRange ? this.trackPosition(t) : "0px", i = this.isRange ? this.trackWidth(this.getTrackPct(this._valueMax) - t) : this.trackPosition(t);
-    return l`
+	}
+	get trackRangeTemplate() {
+		let e = this.getTrackPct(this._valueMin);
+		return t`
             <style>
                 .track-range {
-                    left: ${e};
-                    width: ${i};
+                    left: ${this.isRange ? this.trackPosition(e) : "0px"};
+                    width: ${this.isRange ? this.trackWidth(this.getTrackPct(this._valueMax) - e) : this.trackPosition(e)};
                 }
             </style>
             <div class="track-range" role="presentation"></div>
         `;
-  }
-  getInputTemplate(t) {
-    const e = this.getRoleById(t), i = this.editingField === e, a = e === "min" ? this._valueMin : this._valueMax, {
-      formattedValue: o,
-      unitSymbol: u,
-      unitSymbolPosition: m
-    } = this.formatNumber(a), d = this.unitSymbolPosition ?? m, b = this.unitSymbol ?? u, v = b ? d === "left" ? `${b} ${o}` : `${o} ${b}` : `${o}`, g = i ? "number" : "text", y = i ? String(a ?? "") : v, f = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, M = this.isRange ? t === 1 ? "Start value" : "End value" : "Value", w = f ?? M;
-    return l`
+	}
+	getInputTemplate(e) {
+		let n = this.getRoleById(e), r = this.editingField === n, i = n === "min" ? this._valueMin : this._valueMax, { formattedValue: a, unitSymbol: o, unitSymbolPosition: s } = this.formatNumber(i), c = this.unitSymbolPosition ?? s, l = this.unitSymbol ?? o, u = l ? c === "left" ? `${l} ${a}` : `${a} ${l}` : `${a}`, d = r ? "number" : "text", f = r ? String(i ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", h = p ?? m;
+		return t`
             <div class="input-wrapper">
                 <input
-                    class="input-value input-value-${t}"
-                    type=${g}
-                    .value=${E(y)}
+                    class="input-value input-value-${e}"
+                    type=${d}
+                    .value=${g(f)}
                     step=${String(this.step ?? 1)}
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled ? -1 : 0}
                     aria-disabled=${String(!!this.disabled)}
-                    aria-label=${w}
+                    aria-label=${h}
                     ?readonly=${this.disabled}
-                    @focus=${(c) => this.onInputFocus(c, t)}
+                    @focus=${(t) => this.onInputFocus(t, e)}
                     @blur=${this.onInputBlur}
-                    @change=${(c) => this.commitInputValue(c, t)}
-                    @keydown=${(c) => this.onInputKeyDown(c, t)}
-                    title=${y}
+                    @change=${(t) => this.commitInputValue(t, e)}
+                    @keydown=${(t) => this.onInputKeyDown(t, e)}
+                    title=${f}
                 />
             </div>
         `;
-  }
-  get inputsTemplate() {
-    return l`
+	}
+	get inputsTemplate() {
+		return t`
             <div class="inputs-container">
                 ${this.getInputTemplate(1)}
-                ${this.isRange ? this.getInputTemplate(2) : h}
+                ${this.isRange ? this.getInputTemplate(2) : e}
             </div>
         `;
-  }
-  get containerClasses() {
-    var e;
-    const t = typeof this.size == "string" ? this.size : (e = this.size) == null ? void 0 : e[this.viewport];
-    return {
-      container: !0,
-      [this.mode]: !!this.mode,
-      [t]: !!t,
-      disabled: !!this.disabled
-    };
-  }
-  get styleTokens() {
-    return L`
+	}
+	get containerClasses() {
+		let e = typeof this.size == "string" ? this.size : this.size?.[this.viewport];
+		return {
+			container: !0,
+			[this.mode]: !!this.mode,
+			[e]: !!e,
+			disabled: !!this.disabled
+		};
+	}
+	get styleTokens() {
+		return l`
             <style>
                 :host{
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  render() {
-    return l`
+	}
+	render() {
+		return t`
             ${this.styleTokens}
-            <div class=${R(this.containerClasses)}>
+            <div class=${u(this.containerClasses)}>
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
@@ -290,119 +318,80 @@ let s = class extends _(S) {
                 ${this.inputsTemplate}
             </div>
         `;
-  }
-};
-s.styles = [I, F, C, N, A];
-s.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-slider-thumb-radius, 0px)";
-n([
-  r({ type: Number })
-], s.prototype, "min", 2);
-n([
-  r({ type: Number })
-], s.prototype, "max", 2);
-n([
-  r({ type: String, attribute: "min-label" })
-], s.prototype, "minLabel", 2);
-n([
-  r({ type: String, attribute: "max-label" })
-], s.prototype, "maxLabel", 2);
-n([
-  r({ type: Number })
-], s.prototype, "step", 2);
-n([
-  r({ type: Number, attribute: "initial-value-min" })
-], s.prototype, "initialValueMin", 2);
-n([
-  r({ type: Number, attribute: "initial-value-max" })
-], s.prototype, "initialValueMax", 2);
-n([
-  r({ type: Number, attribute: "value-min" })
-], s.prototype, "valueMin", 2);
-n([
-  r({ type: Number, attribute: "value-max" })
-], s.prototype, "valueMax", 2);
-n([
-  r({ type: String, reflect: !0 })
-], s.prototype, "mode", 2);
-n([
-  r({ type: String, attribute: "locale" })
-], s.prototype, "locale", 2);
-n([
-  r({ type: String, attribute: "locale-matcher" })
-], s.prototype, "localeMatcher", 2);
-n([
-  r({ type: String, attribute: "unit-symbol" })
-], s.prototype, "unitSymbol", 2);
-n([
-  r({ type: String, attribute: "unit-symbol-position" })
-], s.prototype, "unitSymbolPosition", 2);
-n([
-  r({ type: String, attribute: "unit-style" })
-], s.prototype, "unitStyle", 2);
-n([
-  r({ type: String, attribute: "currency" })
-], s.prototype, "currency", 2);
-n([
-  r({ type: String, attribute: "unit" })
-], s.prototype, "unit", 2);
-n([
-  r({
-    type: String,
-    attribute: "use-grouping",
-    converter: (t) => t === "auto" ? "auto" : typeof t == "boolean" ? t : t === "true" || t === "" ? !0 : t !== "false"
-  })
-], s.prototype, "useGrouping", 2);
-n([
-  r({ type: Number, attribute: "minimum-integer-digits" })
-], s.prototype, "minimumIntegerDigits", 2);
-n([
-  r({ type: Number, attribute: "minimum-fraction-digits" })
-], s.prototype, "minimumFractionDigits", 2);
-n([
-  r({ type: Number, attribute: "maximum-fraction-digits" })
-], s.prototype, "maximumFractionDigits", 2);
-n([
-  r({ type: String, attribute: "thousand-separator" })
-], s.prototype, "thousandSeparator", 2);
-n([
-  r({ type: String, attribute: "fraction-separator" })
-], s.prototype, "fractionSeparator", 2);
-n([
-  r({ type: String, converter: D })
-], s.prototype, "size", 2);
-n([
-  r({ type: Boolean, converter: T })
-], s.prototype, "disabled", 2);
-n([
-  r({ type: String, attribute: "input-min-aria-label" })
-], s.prototype, "inputMinAriaLabel", 2);
-n([
-  r({ type: String, attribute: "input-max-aria-label" })
-], s.prototype, "inputMaxAriaLabel", 2);
-n([
-  k(".track")
-], s.prototype, "track", 2);
-n([
-  p()
-], s.prototype, "_valueMin", 2);
-n([
-  p()
-], s.prototype, "_valueMax", 2);
-n([
-  p()
-], s.prototype, "activeThumb", 2);
-n([
-  p()
-], s.prototype, "animationFrameRequest", 2);
-n([
-  p()
-], s.prototype, "editingField", 2);
-n([
-  p()
-], s.prototype, "keyboardMode", 2);
-s = n([
-  V("ds-slider")
-], s);
-export {
-  s as DsSlider
+	}
 };
+a([n({ type: Number })], C.prototype, "min", void 0), a([n({ type: Number })], C.prototype, "max", void 0), a([n({
+	type: String,
+	attribute: "min-label"
+})], C.prototype, "minLabel", void 0), a([n({
+	type: String,
+	attribute: "max-label"
+})], C.prototype, "maxLabel", void 0), a([n({ type: Number })], C.prototype, "step", void 0), a([n({
+	type: Number,
+	attribute: "initial-value-min"
+})], C.prototype, "initialValueMin", void 0), a([n({
+	type: Number,
+	attribute: "initial-value-max"
+})], C.prototype, "initialValueMax", void 0), a([n({
+	type: Number,
+	attribute: "value-min"
+})], C.prototype, "valueMin", void 0), a([n({
+	type: Number,
+	attribute: "value-max"
+})], C.prototype, "valueMax", void 0), a([n({
+	type: String,
+	reflect: !0
+})], C.prototype, "mode", void 0), a([n({
+	type: String,
+	attribute: "locale"
+})], C.prototype, "locale", void 0), a([n({
+	type: String,
+	attribute: "locale-matcher"
+})], C.prototype, "localeMatcher", void 0), a([n({
+	type: String,
+	attribute: "unit-symbol"
+})], C.prototype, "unitSymbol", void 0), a([n({
+	type: String,
+	attribute: "unit-symbol-position"
+})], C.prototype, "unitSymbolPosition", void 0), a([n({
+	type: String,
+	attribute: "unit-style"
+})], C.prototype, "unitStyle", void 0), a([n({
+	type: String,
+	attribute: "currency"
+})], C.prototype, "currency", void 0), a([n({
+	type: String,
+	attribute: "unit"
+})], C.prototype, "unit", void 0), a([n({
+	type: String,
+	attribute: "use-grouping",
+	converter: (e) => e === "auto" ? "auto" : typeof e == "boolean" ? e : e === "true" || e === "" ? !0 : e !== "false"
+})], C.prototype, "useGrouping", void 0), a([n({
+	type: Number,
+	attribute: "minimum-integer-digits"
+})], C.prototype, "minimumIntegerDigits", void 0), a([n({
+	type: Number,
+	attribute: "minimum-fraction-digits"
+})], C.prototype, "minimumFractionDigits", void 0), a([n({
+	type: Number,
+	attribute: "maximum-fraction-digits"
+})], C.prototype, "maximumFractionDigits", void 0), a([n({
+	type: String,
+	attribute: "thousand-separator"
+})], C.prototype, "thousandSeparator", void 0), a([n({
+	type: String,
+	attribute: "fraction-separator"
+})], C.prototype, "fractionSeparator", void 0), a([n({
+	type: String,
+	converter: f
+})], C.prototype, "size", void 0), a([n({
+	type: Boolean,
+	converter: c
+})], C.prototype, "disabled", void 0), a([n({
+	type: String,
+	attribute: "input-min-aria-label"
+})], C.prototype, "inputMinAriaLabel", void 0), a([n({
+	type: String,
+	attribute: "input-max-aria-label"
+})], C.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], C.prototype, "track", void 0), a([r()], C.prototype, "_valueMin", void 0), a([r()], C.prototype, "_valueMax", void 0), a([r()], C.prototype, "activeThumb", void 0), a([r()], C.prototype, "animationFrameRequest", void 0), a([r()], C.prototype, "editingField", void 0), a([r()], C.prototype, "keyboardMode", void 0), C = S = a([s("ds-slider")], C);
+//#endregion