@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.161

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

@@ -1,207 +1,243 @@
-import { UiKitElement as $ } from "../base/UiKitElement.js";
-import { getStepValue as d } from "./utils/getStepValue/getStepValue.js";
-import { roundToDecimals as S } from "./utils/roundToDecimals/roundToDecimals.js";
-import { customUiKitElement as V } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as T } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as L } from "../../utils/booleanConverter.js";
-import { formatNumber as P } from "../../utils/formatNumber/formatNumber.js";
-import { htmlWithTokens as D } from "../../utils/htmlWithTokens.js";
-import { objectConverter as k } 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 E } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as F } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as N, trackStyles as I, thumbStyles as C, currentValueStyles as A, rangeValueStyles as O } from "./styles/common.styles.js";
-var R = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, e, i, o) => {
-  for (var n = o > 1 ? void 0 : o ? _(e, i) : e, u = t.length - 1, m; u >= 0; u--)
-    (m = t[u]) && (n = (o ? m(e, i, n) : m(n)) || n);
-  return o && n && R(e, i, n), n;
-};
-let s = class extends T($) {
-  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(), o = t.type.indexOf("mouse") !== -1 ? t.clientX : t.touches[0].clientX, u = Math.min(Math.max(0, o - i), e) * 100 / e;
-      return this.min + u * (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: o } = d({
-          step: this.step,
-          min: this.min,
-          max: this.max,
-          proposedValue: e,
-          role: i,
-          currentValues: {
-            1: this.valueMin,
-            ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
-          }
-        });
-        this.handleChange({ value: o, 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, o = e === 1 ? "min" : "max";
-      this.editingField = o, i.type = "number", i.step = String(this.step ?? 1);
-      const n = o === "min" ? this.valueMin : this.valueMax;
-      i.value = String(n ?? ""), this.keyboardMode && i.classList.add("focus-visible");
-    }, this.commitInputValue = (t, e) => {
-      const i = t.currentTarget, o = e === 1 ? "min" : "max", { stepValue: n } = d({
-        step: this.step,
-        min: this.min,
-        max: this.max,
-        proposedValue: Number(i.value),
-        role: o,
-        currentValues: {
-          1: this.valueMin,
-          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
-        }
-      });
-      this.handleChange({ value: n, role: o }), i.value = String(n);
-    }, 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, o = t.key === "ArrowLeft" ? -i : i, n = e === 1 ? "min" : "max", m = (n === "min" ? this.valueMin : this.valueMax) + o, { stepValue: b } = d({
-          step: this.step,
-          min: this.min,
-          max: this.max,
-          proposedValue: m,
-          role: n,
-          currentValues: {
-            1: this.valueMin,
-            ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
-          }
-        });
-        this.handleChange({ value: b, role: n });
-      }
-    };
-  }
-  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) => {
-      const n = this[i === "min" ? "initialValueMin" : "initialValueMax"];
-      if (typeof n != "number") return;
-      const { stepValue: u } = d({
-        step: this.step,
-        min: this.min,
-        max: this.max,
-        proposedValue: n,
-        role: i,
-        currentValues: {
-          1: this.valueMin,
-          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
-        }
-      });
-      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;
-  }
-  handleChange({ value: t, role: e }) {
-    const i = S({ value: t, fractionDigits: this.maximumFractionDigits }), o = e === "min" ? "valueMin" : "valueMax";
-    this[o] !== i && (this[o] = 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), o = this.unitSymbol ?? e, n = 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 { uiKitHtml as l } from "../../utils/uiKitHtml.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 "../ds-text-input/ds-text-input.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, inputResetStyles as y, rangeValueStyles as b, thumbStyles as x, trackStyles as S } from "./styles/common.styles.js";
+//#region src/components/ds-slider/ds-slider.ts
+var C, w = class extends d(o) {
+	static {
+		C = this;
+	}
+	constructor(...e) {
+		super(...e), this.variant = "primary", 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._initialValuesApplied = !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
+			}), a = h({
+				value: i,
+				fractionDigits: this.maximumFractionDigits
+			});
+			this.handleChange({
+				value: a,
+				role: r
+			}), this.isControlled(r) || (n.value = String(a));
+		}, 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 = [
+			_,
+			S,
+			x,
+			v,
+			b,
+			y
+		];
+	}
+	get isRange() {
+		return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
+	}
+	get sliderSizeToTextInputSize() {
+		return (typeof this.size == "string" ? this.size : this.size?.[this.viewport]) === "large" ? "large" : "medium";
+	}
+	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), this._initialValuesApplied || (this._initialValuesApplied = !0, this.applyInitialValues());
+	}
+	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);
+	}
+	applyInitialValues() {
+		["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-private-slider-thumb-radius, 0px)";
+	}
+	trackPosition(e) {
+		let t = C.THUMB_RADIUS_CSS_VAR;
+		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
+	}
+	trackWidth(e) {
+		return `calc((100% - ${C.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 { formattedNumber: n, unitSymbol: r, unitSymbolPosition: i } = this.formatNumber(this.min), a = this.unitSymbol ?? r, o = this.unitSymbolPosition ?? i ?? (a ? "right" : void 0), { formattedNumber: s } = this.formatNumber(this.max);
+		return t`
             <div class="range-value-text">
-                ${this.minLabel ? l`<span class="range-value-label">${this.minLabel}</span>` : h}
-                ${n === "left" ? l`<span>${o}</span>` : h}
-                <span>${t}</span>
-                ${n === "right" ? l`<span>${o}</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}
-                ${n === "left" ? l`<span>${o}</span>` : h}
-                <span>${u}</span>
-                ${n === "right" ? l`<span>${o}</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 = t === 1 ? "min" : "max", i = e === "min" ? this.valueMin : this.valueMax, { minLimit: o, maxLimit: n } = d({
-      step: this.step,
-      min: this.min,
-      max: this.max,
-      proposedValue: i,
-      role: e,
-      currentValues: {
-        1: this.valueMin,
-        ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
-      }
-    }), 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: ${u}%;
+                .thumb${e} {
+                    left: ${this.trackPosition(o)};
                 }
             </style>
             <div
-                class="thumb${t} thumb"
+                class="thumb${e} thumb"
                 @focus=${() => {
-      this.activeThumb = t === 1 ? "min" : "max";
-    }}
-                @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=${o}
-                aria-valuemax=${n}
-                aria-valuenow=${i}
+                aria-label=${e === 1 ? "Minumum value" : "Maximum Value"}
+                aria-valuemin=${i}
+                aria-valuemax=${a}
+                aria-valuenow=${r}
             >
                 <svg
                     class="thumb-svg"
@@ -213,197 +249,199 @@ let s = class extends T($) {
                 </svg>
             </div>
         `;
-  }
-  get thumbTemplates() {
-    return l`
+	}
+	get thumbTemplates() {
+		return t`
             ${this.getThumbTemplate(1)}
-            ${typeof this.initialValueMax == "number" ? this.getThumbTemplate(2) : h}
+            ${this.isRange ? this.getThumbTemplate(2) : e}
         `;
-  }
-  get trackRangeTemplate() {
-    let t, e;
-    return typeof this.initialValueMax != "number" ? (t = 0, e = this.getTrackPct(this.valueMin)) : (t = this.getTrackPct(this.valueMin), e = this.getTrackPct(this.valueMax) - t), l`
+	}
+	get trackRangeTemplate() {
+		let e = this.getTrackPct(this._valueMin);
+		return t`
             <style>
                 .track-range {
-                    left: ${t}%;
-                    width: ${e}%;
+                    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 = t === 1 ? "min" : "max", i = this.editingField === e, o = e === "min" ? this.valueMin : this.valueMax, {
-      formattedValue: n,
-      unitSymbol: u,
-      unitSymbolPosition: m
-    } = this.formatNumber(o), b = this.unitSymbolPosition ?? m, y = this.unitSymbol ?? u, g = y ? b === "left" ? `${y} ${n}` : `${n} ${y}` : `${n}`, f = i ? "number" : "text", v = i ? String(o ?? "") : g, M = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, x = typeof this.initialValueMax == "number" ? t === 1 ? "Start value" : "End value" : "Value", w = M ?? x;
-    return l`
+	}
+	getInputTemplate(e) {
+		let t = this.getRoleById(e), n = this.editingField === t, r = t === "min" ? this._valueMin : this._valueMax, { formattedNumber: i, unitSymbol: a, unitSymbolPosition: o } = this.formatNumber(r), s = this.unitSymbolPosition ?? o, c = this.unitSymbol ?? a, u = c ? s === "left" ? `${c} ${i}` : `${i} ${c}` : `${i}`, d = n ? "number" : "text", f = n ? String(r ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", h = p ?? m;
+		return l`
             <div class="input-wrapper">
-                <input
-                    class="input-value input-value-${t}"
-                    type=${f}
-                    .value=${v}
-                    step=${String(this.step ?? 1)}
-                    ?disabled=${this.disabled}
-                    tabindex=${this.disabled ? -1 : 0}
-                    aria-disabled=${String(!!this.disabled)}
-                    aria-label=${w}
-                    ?readonly=${this.disabled}
-                    @focus=${(c) => this.onInputFocus(c, t)}
-                    @blur=${this.onInputBlur}
-                    @change=${(c) => this.commitInputValue(c, t)}
-                    @keydown=${(c) => this.onInputKeyDown(c, t)}
-                    title=${v}
-                />
+                <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
+                    <input
+                        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=${h}
+                        ?readonly=${this.disabled}
+                        @focus=${(t) => this.onInputFocus(t, e)}
+                        @blur=${this.onInputBlur}
+                        @change=${(t) => this.commitInputValue(t, e)}
+                        @keydown=${(t) => this.onInputKeyDown(t, e)}
+                        title=${f}
+                    />
+                </ds-text-input>
             </div>
         `;
-  }
-  get inputsTemplate() {
-    return l`
+	}
+	get inputsTemplate() {
+		return t`
             <div class="inputs-container">
                 ${this.getInputTemplate(1)}
-                ${typeof this.initialValueMax == "number" ? this.getInputTemplate(2) : h}
+                ${this.isRange ? this.getInputTemplate(2) : e}
+            </div>
+        `;
+	}
+	getSecondaryInputTemplate(n) {
+		let r = this.getRoleById(n) === "min" ? this._valueMin : this._valueMax, { unitSymbol: i } = this.formatNumber(r), a = this.unitSymbol ?? i, o = n === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, s = this.isRange ? n === 1 ? "Start value" : "End value" : "Value", c = o ?? s;
+		return l`
+            <div class="secondary-input-group">
+                <div class="secondary-input-wrapper">
+                    <ds-text-input size="xlarge" hide-clear-button>
+                        <input
+                            class="secondary-input-value secondary-input-value-${n}"
+                            type="number"
+                            .value=${g(String(r ?? ""))}
+                            step=${String(this.step ?? 1)}
+                            ?disabled=${this.disabled}
+                            tabindex=${this.disabled ? -1 : 0}
+                            aria-disabled=${String(!!this.disabled)}
+                            aria-label=${c}
+                            ?readonly=${this.disabled}
+                            @change=${(e) => this.commitInputValue(e, n)}
+                            @keydown=${(e) => this.onInputKeyDown(e, n)}
+                            title=${String(r ?? "")}
+                        />
+                    </ds-text-input>
+                </div>
+                ${a ? t`<span class="secondary-unit-text">${a}</span>` : 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 D`
+	}
+	get secondaryInputsTemplate() {
+		return t`
+            <div class="secondary-inputs-container">
+                ${this.getSecondaryInputTemplate(1)}
+                ${this.isRange ? t`<span class="secondary-inputs-separator">-</span>${this.getSecondaryInputTemplate(2)}` : e}
+            </div>
+        `;
+	}
+	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,
+			[`variant-${this.variant}`]: !!this.variant
+		};
+	}
+	get styleTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  render() {
-    return l`
+	}
+	render() {
+		let n = this.variant === "secondary";
+		return t`
             ${this.styleTokens}
-            <div class=${F(this.containerClasses)}>
-                <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
+            <div class=${u(this.containerClasses)}>
+                ${n ? this.secondaryInputsTemplate : e}
+                <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
                 </div>
                 <div class="range-value-container">${this.rangeValuesTemplates}</div>
-                ${this.inputsTemplate}
+                ${n ? e : this.inputsTemplate}
             </div>
         `;
-  }
-};
-s.styles = [N, I, C, A, O];
-a([
-  r({ type: Number })
-], s.prototype, "min", 2);
-a([
-  r({ type: Number })
-], s.prototype, "max", 2);
-a([
-  r({ type: String, attribute: "min-label" })
-], s.prototype, "minLabel", 2);
-a([
-  r({ type: String, attribute: "max-label" })
-], s.prototype, "maxLabel", 2);
-a([
-  r({ type: Number })
-], s.prototype, "step", 2);
-a([
-  r({ type: Number, attribute: "initial-value-min" })
-], s.prototype, "initialValueMin", 2);
-a([
-  r({ type: Number, attribute: "initial-value-max" })
-], s.prototype, "initialValueMax", 2);
-a([
-  r({ type: String, reflect: !0 })
-], s.prototype, "mode", 2);
-a([
-  r({ type: String, attribute: "locale" })
-], s.prototype, "locale", 2);
-a([
-  r({ type: String, attribute: "locale-matcher" })
-], s.prototype, "localeMatcher", 2);
-a([
-  r({ type: String, attribute: "unit-symbol" })
-], s.prototype, "unitSymbol", 2);
-a([
-  r({ type: String, attribute: "unit-symbol-position" })
-], s.prototype, "unitSymbolPosition", 2);
-a([
-  r({ type: String, attribute: "unit-style" })
-], s.prototype, "unitStyle", 2);
-a([
-  r({ type: String, attribute: "currency" })
-], s.prototype, "currency", 2);
-a([
-  r({ type: String, attribute: "unit" })
-], s.prototype, "unit", 2);
-a([
-  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);
-a([
-  r({ type: Number, attribute: "minimum-integer-digits" })
-], s.prototype, "minimumIntegerDigits", 2);
-a([
-  r({ type: Number, attribute: "minimum-fraction-digits" })
-], s.prototype, "minimumFractionDigits", 2);
-a([
-  r({ type: Number, attribute: "maximum-fraction-digits" })
-], s.prototype, "maximumFractionDigits", 2);
-a([
-  r({ type: String, attribute: "thousand-separator" })
-], s.prototype, "thousandSeparator", 2);
-a([
-  r({ type: String, attribute: "fraction-separator" })
-], s.prototype, "fractionSeparator", 2);
-a([
-  r({ type: String, converter: k })
-], s.prototype, "size", 2);
-a([
-  r({ type: Boolean, converter: L })
-], s.prototype, "disabled", 2);
-a([
-  r({ type: String, attribute: "input-min-aria-label" })
-], s.prototype, "inputMinAriaLabel", 2);
-a([
-  r({ type: String, attribute: "input-max-aria-label" })
-], s.prototype, "inputMaxAriaLabel", 2);
-a([
-  E(".track")
-], s.prototype, "track", 2);
-a([
-  p()
-], s.prototype, "valueMin", 2);
-a([
-  p()
-], s.prototype, "valueMax", 2);
-a([
-  p()
-], s.prototype, "activeThumb", 2);
-a([
-  p()
-], s.prototype, "animationFrameRequest", 2);
-a([
-  p()
-], s.prototype, "editingField", 2);
-a([
-  p()
-], s.prototype, "keyboardMode", 2);
-s = a([
-  V("ds-slider")
-], s);
-export {
-  s as DsSlider
+	}
 };
+a([n({ type: String })], w.prototype, "variant", void 0), a([n({ type: Number })], w.prototype, "min", void 0), a([n({ type: Number })], w.prototype, "max", void 0), a([n({
+	type: String,
+	attribute: "min-label"
+})], w.prototype, "minLabel", void 0), a([n({
+	type: String,
+	attribute: "max-label"
+})], w.prototype, "maxLabel", void 0), a([n({ type: Number })], w.prototype, "step", void 0), a([n({
+	type: Number,
+	attribute: "initial-value-min"
+})], w.prototype, "initialValueMin", void 0), a([n({
+	type: Number,
+	attribute: "initial-value-max"
+})], w.prototype, "initialValueMax", void 0), a([n({
+	type: Number,
+	attribute: "value-min"
+})], w.prototype, "valueMin", void 0), a([n({
+	type: Number,
+	attribute: "value-max"
+})], w.prototype, "valueMax", void 0), a([n({
+	type: String,
+	reflect: !0
+})], w.prototype, "mode", void 0), a([n({
+	type: String,
+	attribute: "locale"
+})], w.prototype, "locale", void 0), a([n({
+	type: String,
+	attribute: "locale-matcher"
+})], w.prototype, "localeMatcher", void 0), a([n({
+	type: String,
+	attribute: "unit-symbol"
+})], w.prototype, "unitSymbol", void 0), a([n({
+	type: String,
+	attribute: "unit-symbol-position"
+})], w.prototype, "unitSymbolPosition", void 0), a([n({
+	type: String,
+	attribute: "unit-style"
+})], w.prototype, "unitStyle", void 0), a([n({
+	type: String,
+	attribute: "currency"
+})], w.prototype, "currency", void 0), a([n({
+	type: String,
+	attribute: "unit"
+})], w.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"
+})], w.prototype, "useGrouping", void 0), a([n({
+	type: Number,
+	attribute: "minimum-integer-digits"
+})], w.prototype, "minimumIntegerDigits", void 0), a([n({
+	type: Number,
+	attribute: "minimum-fraction-digits"
+})], w.prototype, "minimumFractionDigits", void 0), a([n({
+	type: Number,
+	attribute: "maximum-fraction-digits"
+})], w.prototype, "maximumFractionDigits", void 0), a([n({
+	type: String,
+	attribute: "thousand-separator"
+})], w.prototype, "thousandSeparator", void 0), a([n({
+	type: String,
+	attribute: "fraction-separator"
+})], w.prototype, "fractionSeparator", void 0), a([n({
+	type: String,
+	converter: f
+})], w.prototype, "size", void 0), a([n({
+	type: Boolean,
+	converter: c
+})], w.prototype, "disabled", void 0), a([n({
+	type: String,
+	attribute: "input-min-aria-label"
+})], w.prototype, "inputMinAriaLabel", void 0), a([n({
+	type: String,
+	attribute: "input-max-aria-label"
+})], w.prototype, "inputMaxAriaLabel", void 0), a([i(".track")], w.prototype, "track", void 0), a([r()], w.prototype, "_valueMin", void 0), a([r()], w.prototype, "_valueMax", void 0), a([r()], w.prototype, "editingField", void 0), w = C = a([s("ds-slider")], w);
+//#endregion