@cupra/ui-kit 2.0.0-canary.64 → 2.0.0-canary.65

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

@@ -1,11 +1,11 @@
-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 { 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 L } from "../../utils/formatNumber/formatNumber.js";
-import { htmlWithTokens as P } from "../../utils/htmlWithTokens.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";
@@ -13,36 +13,26 @@ import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-
 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 E } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { live as F } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/live.js";
-import { commonStyles as N, trackStyles as C, thumbStyles as I, currentValueStyles as R, rangeValueStyles as A } from "./styles/common.styles.js";
-var O = Object.defineProperty, U = Object.getOwnPropertyDescriptor, a = (t, e, i, n) => {
-  for (var o = n > 1 ? void 0 : n ? U(e, i) : e, u = t.length - 1, m; u >= 0; u--)
-    (m = t[u]) && (o = (n ? m(e, i, o) : m(o)) || o);
-  return n && o && O(e, i, o), o;
+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 _($) {
+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(), n = t.type.indexOf("mouse") !== -1 ? t.clientX : t.touches[0].clientX, u = Math.min(Math.max(0, n - i), e) * 100 / e;
-      return this.min + u * (this.max - this.min) / 100;
+      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: n } = 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: n, role: i });
+        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;
@@ -54,23 +44,13 @@ let s = class extends _($) {
     }, this.handlePointerOrMouseDown = () => {
       this.keyboardMode = !1;
     }, this.onInputFocus = (t, e) => {
-      const i = t.currentTarget, n = e === 1 ? "min" : "max";
-      this.editingField = n, i.type = "number", i.step = String(this.step ?? 1);
-      const o = n === "min" ? this._valueMin : this._valueMax;
+      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, n = e === 1 ? "min" : "max", { stepValue: o } = d({
-        step: this.step,
-        min: this.min,
-        max: this.max,
-        proposedValue: Number(i.value),
-        role: n,
-        currentValues: {
-          1: this._valueMin,
-          ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
-        }
-      });
-      this.handleChange({ value: o, role: n }), this.isControlled(n) || (i.value = String(o));
+      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;
@@ -81,18 +61,8 @@ let s = class extends _($) {
     }, this.onThumbKeyDown = (t, e) => {
       if (!this.disabled && (t.key === "ArrowLeft" || t.key === "ArrowRight")) {
         t.preventDefault();
-        const i = this.step ?? 1, n = t.key === "ArrowLeft" ? -i : i, o = e === 1 ? "min" : "max", m = (o === "min" ? this._valueMin : this._valueMax) + n, { stepValue: b } = d({
-          step: this.step,
-          min: this.min,
-          max: this.max,
-          proposedValue: m,
-          role: o,
-          currentValues: {
-            1: this._valueMin,
-            ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
-          }
-        });
-        this.handleChange({ value: b, role: o });
+        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 });
       }
     };
   }
@@ -102,6 +72,25 @@ let s = class extends _($) {
   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);
   }
@@ -113,17 +102,7 @@ let s = class extends _($) {
       if (this.isControlled(i)) return;
       const o = this[i === "min" ? "initialValueMin" : "initialValueMax"];
       if (typeof o != "number") return;
-      const { stepValue: u } = d({
-        step: this.step,
-        min: this.min,
-        max: this.max,
-        proposedValue: o,
-        role: i,
-        currentValues: {
-          1: this._valueMin,
-          ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
-        }
-      });
+      const { stepValue: u } = this.computeStep({ proposedValue: o, role: i });
       this[i === "min" ? "_valueMin" : "_valueMax"] !== u && this.handleChange({ value: u, role: i });
     });
   }
@@ -131,9 +110,21 @@ let s = class extends _($) {
     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 = S({ value: t, fractionDigits: this.maximumFractionDigits }), n = e === "min" ? "_valueMin" : "_valueMax";
-    this[n] !== i && (this.isControlled(e) || (this[n] = i), this.dispatchEvent(
+    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,
@@ -159,58 +150,48 @@ let s = class extends _($) {
       fractionSeparator: this.fractionSeparator,
       useGrouping: this.useGrouping
     };
-    return L(e);
+    return P(e);
   }
   get rangeValuesTemplates() {
     const {
       formattedValue: t,
       unitSymbol: e,
       unitSymbolPosition: i
-    } = this.formatNumber(this.min), n = this.unitSymbol ?? e, o = this.unitSymbolPosition ?? i, { formattedValue: u } = this.formatNumber(this.max);
+    } = this.formatNumber(this.min), a = this.unitSymbol ?? e, o = this.unitSymbolPosition ?? i, { formattedValue: u } = this.formatNumber(this.max);
     return l`
             <div class="range-value-text">
                 ${this.minLabel ? l`<span class="range-value-label">${this.minLabel}</span>` : h}
-                ${o === "left" ? l`<span>${n}</span>` : h}
+                ${o === "left" ? l`<span>${a}</span>` : h}
                 <span>${t}</span>
-                ${o === "right" ? l`<span>${n}</span>` : h}
+                ${o === "right" ? l`<span>${a}</span>` : h}
             </div>
             <div class="range-value-text">
                 ${this.maxLabel ? l` <span class="range-value-label">${this.maxLabel}</span>` : h}
-                ${o === "left" ? l`<span>${n}</span>` : h}
+                ${o === "left" ? l`<span>${a}</span>` : h}
                 <span>${u}</span>
-                ${o === "right" ? l`<span>${n}</span>` : h}
+                ${o === "right" ? l`<span>${a}</span>` : h}
             </div>
         `;
   }
   getThumbTemplate(t) {
-    const e = t === 1 ? "min" : "max", i = e === "min" ? this._valueMin : this._valueMax, { minLimit: n, maxLimit: o } = 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);
+    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`
             <style>
                 .thumb${t} {
-                    left: ${u}%;
+                    left: ${this.trackPosition(u)};
                 }
             </style>
             <div
                 class="thumb${t} thumb"
                 @focus=${() => {
-      this.activeThumb = t === 1 ? "min" : "max";
+      this.activeThumb = e;
     }}
                 @keydown=${(m) => this.onThumbKeyDown(m, t)}
                 role="slider"
                 tabindex=${this.disabled ? -1 : 0}
                 aria-disabled=${String(!!this.disabled)}
                 aria-label=${t === 1 ? "Minumum value" : "Maximum Value"}
-                aria-valuemin=${n}
+                aria-valuemin=${a}
                 aria-valuemax=${o}
                 aria-valuenow=${i}
             >
@@ -232,29 +213,29 @@ let s = class extends _($) {
         `;
   }
   get trackRangeTemplate() {
-    let t, e;
-    return this.isRange ? (t = this.getTrackPct(this._valueMin), e = this.getTrackPct(this._valueMax) - t) : (t = 0, e = this.getTrackPct(this._valueMin)), l`
+    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`
             <style>
                 .track-range {
-                    left: ${t}%;
-                    width: ${e}%;
+                    left: ${e};
+                    width: ${i};
                 }
             </style>
             <div class="track-range" role="presentation"></div>
         `;
   }
   getInputTemplate(t) {
-    const e = t === 1 ? "min" : "max", i = this.editingField === e, n = e === "min" ? this._valueMin : this._valueMax, {
+    const e = this.getRoleById(t), i = this.editingField === e, a = e === "min" ? this._valueMin : this._valueMax, {
       formattedValue: o,
       unitSymbol: u,
       unitSymbolPosition: m
-    } = this.formatNumber(n), b = this.unitSymbolPosition ?? m, y = this.unitSymbol ?? u, g = y ? b === "left" ? `${y} ${o}` : `${o} ${y}` : `${o}`, f = i ? "number" : "text", v = i ? String(n ?? "") : g, M = t === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, x = this.isRange ? t === 1 ? "Start value" : "End value" : "Value", w = M ?? x;
+    } = 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`
             <div class="input-wrapper">
                 <input
                     class="input-value input-value-${t}"
-                    type=${f}
-                    .value=${F(v)}
+                    type=${g}
+                    .value=${E(y)}
                     step=${String(this.step ?? 1)}
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled ? -1 : 0}
@@ -265,7 +246,7 @@ let s = class extends _($) {
                     @blur=${this.onInputBlur}
                     @change=${(c) => this.commitInputValue(c, t)}
                     @keydown=${(c) => this.onInputKeyDown(c, t)}
-                    title=${v}
+                    title=${y}
                 />
             </div>
         `;
@@ -289,7 +270,7 @@ let s = class extends _($) {
     };
   }
   get styleTokens() {
-    return P`
+    return L`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -300,7 +281,7 @@ let s = class extends _($) {
   render() {
     return l`
             ${this.styleTokens}
-            <div class=${E(this.containerClasses)}>
+            <div class=${R(this.containerClasses)}>
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
@@ -311,114 +292,115 @@ let s = class extends _($) {
         `;
   }
 };
-s.styles = [N, C, I, R, A];
-a([
+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);
-a([
+n([
   r({ type: Number })
 ], s.prototype, "max", 2);
-a([
+n([
   r({ type: String, attribute: "min-label" })
 ], s.prototype, "minLabel", 2);
-a([
+n([
   r({ type: String, attribute: "max-label" })
 ], s.prototype, "maxLabel", 2);
-a([
+n([
   r({ type: Number })
 ], s.prototype, "step", 2);
-a([
+n([
   r({ type: Number, attribute: "initial-value-min" })
 ], s.prototype, "initialValueMin", 2);
-a([
+n([
   r({ type: Number, attribute: "initial-value-max" })
 ], s.prototype, "initialValueMax", 2);
-a([
+n([
   r({ type: Number, attribute: "value-min" })
 ], s.prototype, "valueMin", 2);
-a([
+n([
   r({ type: Number, attribute: "value-max" })
 ], s.prototype, "valueMax", 2);
-a([
+n([
   r({ type: String, reflect: !0 })
 ], s.prototype, "mode", 2);
-a([
+n([
   r({ type: String, attribute: "locale" })
 ], s.prototype, "locale", 2);
-a([
+n([
   r({ type: String, attribute: "locale-matcher" })
 ], s.prototype, "localeMatcher", 2);
-a([
+n([
   r({ type: String, attribute: "unit-symbol" })
 ], s.prototype, "unitSymbol", 2);
-a([
+n([
   r({ type: String, attribute: "unit-symbol-position" })
 ], s.prototype, "unitSymbolPosition", 2);
-a([
+n([
   r({ type: String, attribute: "unit-style" })
 ], s.prototype, "unitStyle", 2);
-a([
+n([
   r({ type: String, attribute: "currency" })
 ], s.prototype, "currency", 2);
-a([
+n([
   r({ type: String, attribute: "unit" })
 ], s.prototype, "unit", 2);
-a([
+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);
-a([
+n([
   r({ type: Number, attribute: "minimum-integer-digits" })
 ], s.prototype, "minimumIntegerDigits", 2);
-a([
+n([
   r({ type: Number, attribute: "minimum-fraction-digits" })
 ], s.prototype, "minimumFractionDigits", 2);
-a([
+n([
   r({ type: Number, attribute: "maximum-fraction-digits" })
 ], s.prototype, "maximumFractionDigits", 2);
-a([
+n([
   r({ type: String, attribute: "thousand-separator" })
 ], s.prototype, "thousandSeparator", 2);
-a([
+n([
   r({ type: String, attribute: "fraction-separator" })
 ], s.prototype, "fractionSeparator", 2);
-a([
+n([
   r({ type: String, converter: D })
 ], s.prototype, "size", 2);
-a([
+n([
   r({ type: Boolean, converter: T })
 ], s.prototype, "disabled", 2);
-a([
+n([
   r({ type: String, attribute: "input-min-aria-label" })
 ], s.prototype, "inputMinAriaLabel", 2);
-a([
+n([
   r({ type: String, attribute: "input-max-aria-label" })
 ], s.prototype, "inputMaxAriaLabel", 2);
-a([
+n([
   k(".track")
 ], s.prototype, "track", 2);
-a([
+n([
   p()
 ], s.prototype, "_valueMin", 2);
-a([
+n([
   p()
 ], s.prototype, "_valueMax", 2);
-a([
+n([
   p()
 ], s.prototype, "activeThumb", 2);
-a([
+n([
   p()
 ], s.prototype, "animationFrameRequest", 2);
-a([
+n([
   p()
 ], s.prototype, "editingField", 2);
-a([
+n([
   p()
 ], s.prototype, "keyboardMode", 2);
-s = a([
+s = n([
   V("ds-slider")
 ], s);
 export {

package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/2.0.0-canary.64", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/2.0.0-canary.65", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ class l {
     }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.64"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.65"), h = globalThis;
 let i = h[c];
 i || (i = new l(), Object.defineProperty(h, c, {
   value: i,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.64"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.65"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js

@@ -7,7 +7,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/2.0.0-canary.64/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/2.0.0-canary.65/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = h(() => this.fetchStyle({ url: c })).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../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 { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-64"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-65"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-64"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-65"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/types/components/ds-slider/ds-slider.d.ts

@@ -41,10 +41,17 @@ export declare class DsSlider extends DsSlider_base {
     static styles: import("lit").CSSResult[];
     protected get isRange(): boolean;
     private isControlled;
+    private getRoleById;
+    private get currentValues();
+    private computeStep;
     protected willUpdate(changedProps: PropertyValues): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProps: PropertyValues): void;
     protected getTrackPct(value: number): number;
+    protected get thumbRadius(): number;
+    private static readonly THUMB_RADIUS_CSS_VAR;
+    private trackPosition;
+    private trackWidth;
     protected getNewValue: (event: MouseEvent | TouchEvent) => number;
     protected setActiveThumb: (event: MouseEvent | TouchEvent) => void;
     protected handleMouseMove: (event: MouseEvent | TouchEvent) => void;
@@ -66,7 +73,7 @@ export declare class DsSlider extends DsSlider_base {
     protected onInputBlur: (event: FocusEvent) => void;
     protected onInputKeyDown: (event: KeyboardEvent, id: 1 | 2) => void;
     protected onThumbKeyDown: (event: KeyboardEvent, id: 1 | 2) => void;
-    protected getInputTemplate(id: number): import("lit").TemplateResult<1>;
+    protected getInputTemplate(id: 1 | 2): import("lit").TemplateResult<1>;
     protected get inputsTemplate(): import("lit").TemplateResult<1>;
     protected get containerClasses(): {
         [x: string]: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupra/ui-kit",
-  "version": "2.0.0-canary.64",
+  "version": "2.0.0-canary.65",
   "description": "Web components library",
   "author": "SEAT S.A.",
   "license": "SEAT S.A. Library EULA 1.0",