@cupra/ui-kit 2.0.0-canary.62 → 2.0.0-canary.63

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

@@ -2,46 +2,47 @@ 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 { 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 { 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 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;
+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;
 };
-let s = class extends T($) {
+let s = class extends _($) {
   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;
+      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;
     }, 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";
+      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({
+        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 } : {}
+            1: this._valueMin,
+            ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
           }
         });
-        this.handleChange({ value: o, role: i });
+        this.handleChange({ value: n, role: i });
       });
     }, this.handleMouseDown = (t) => {
       var e;
@@ -53,23 +54,23 @@ let s = class extends T($) {
     }, 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");
+      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;
+      i.value = String(o ?? ""), this.keyboardMode && i.classList.add("focus-visible");
     }, this.commitInputValue = (t, e) => {
-      const i = t.currentTarget, o = e === 1 ? "min" : "max", { stepValue: n } = d({
+      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: o,
+        role: n,
         currentValues: {
-          1: this.valueMin,
-          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+          1: this._valueMin,
+          ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
         }
       });
-      this.handleChange({ value: n, role: o }), i.value = String(n);
+      this.handleChange({ value: o, role: n }), this.isControlled(n) || (i.value = String(o));
     }, this.onInputBlur = (t) => {
       var i;
       this.editingField = void 0;
@@ -80,40 +81,50 @@ let s = class extends T($) {
     }, 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({
+        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: n,
+          role: o,
           currentValues: {
-            1: this.valueMin,
-            ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+            1: this._valueMin,
+            ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
           }
         });
-        this.handleChange({ value: b, role: n });
+        this.handleChange({ value: b, role: o });
       }
     };
   }
+  get isRange() {
+    return typeof this.initialValueMax == "number" || typeof this.valueMax == "number";
+  }
+  isControlled(t) {
+    return typeof (t === "min" ? this.valueMin : this.valueMax) == "number";
+  }
+  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) => {
-      const n = this[i === "min" ? "initialValueMin" : "initialValueMax"];
-      if (typeof n != "number") return;
+      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: n,
+        proposedValue: o,
         role: i,
         currentValues: {
-          1: this.valueMin,
-          ...typeof this.valueMax == "number" ? { 2: this.valueMax } : {}
+          1: this._valueMin,
+          ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
         }
       });
-      this[i === "min" ? "valueMin" : "valueMax"] !== u && this.handleChange({ value: u, role: i });
+      this[i === "min" ? "_valueMin" : "_valueMax"] !== u && this.handleChange({ value: u, role: i });
     });
   }
   getTrackPct(t) {
@@ -121,8 +132,8 @@ let s = class extends T($) {
     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(
+    const i = S({ value: t, fractionDigits: this.maximumFractionDigits }), n = e === "min" ? "_valueMin" : "_valueMax";
+    this[n] !== i && (this.isControlled(e) || (this[n] = i), this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: !0,
         composed: !0,
@@ -148,39 +159,39 @@ let s = class extends T($) {
       fractionSeparator: this.fractionSeparator,
       useGrouping: this.useGrouping
     };
-    return P(e);
+    return L(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);
+    } = this.formatNumber(this.min), n = 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}
-                ${n === "left" ? l`<span>${o}</span>` : h}
+                ${o === "left" ? l`<span>${n}</span>` : h}
                 <span>${t}</span>
-                ${n === "right" ? l`<span>${o}</span>` : h}
+                ${o === "right" ? l`<span>${n}</span>` : h}
             </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}
+                ${o === "left" ? l`<span>${n}</span>` : h}
                 <span>${u}</span>
-                ${n === "right" ? l`<span>${o}</span>` : h}
+                ${o === "right" ? l`<span>${n}</span>` : h}
             </div>
         `;
   }
   getThumbTemplate(t) {
-    const e = t === 1 ? "min" : "max", i = e === "min" ? this.valueMin : this.valueMax, { minLimit: o, maxLimit: n } = d({
+    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 } : {}
+        1: this._valueMin,
+        ...typeof this._valueMax == "number" ? { 2: this._valueMax } : {}
       }
     }), u = this.getTrackPct(i);
     return l`
@@ -199,8 +210,8 @@ let s = class extends T($) {
                 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-valuemin=${n}
+                aria-valuemax=${o}
                 aria-valuenow=${i}
             >
                 <svg
@@ -217,12 +228,12 @@ let s = class extends T($) {
   get thumbTemplates() {
     return l`
             ${this.getThumbTemplate(1)}
-            ${typeof this.initialValueMax == "number" ? this.getThumbTemplate(2) : h}
+            ${this.isRange ? this.getThumbTemplate(2) : h}
         `;
   }
   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`
+    return this.isRange ? (t = this.getTrackPct(this._valueMin), e = this.getTrackPct(this._valueMax) - t) : (t = 0, e = this.getTrackPct(this._valueMin)), l`
             <style>
                 .track-range {
                     left: ${t}%;
@@ -233,17 +244,17 @@ let s = class extends T($) {
         `;
   }
   getInputTemplate(t) {
-    const e = t === 1 ? "min" : "max", i = this.editingField === e, o = e === "min" ? this.valueMin : this.valueMax, {
-      formattedValue: n,
+    const e = t === 1 ? "min" : "max", i = this.editingField === e, n = e === "min" ? this._valueMin : this._valueMax, {
+      formattedValue: o,
       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;
+    } = 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;
     return l`
             <div class="input-wrapper">
                 <input
                     class="input-value input-value-${t}"
                     type=${f}
-                    .value=${v}
+                    .value=${F(v)}
                     step=${String(this.step ?? 1)}
                     ?disabled=${this.disabled}
                     tabindex=${this.disabled ? -1 : 0}
@@ -263,7 +274,7 @@ let s = class extends T($) {
     return l`
             <div class="inputs-container">
                 ${this.getInputTemplate(1)}
-                ${typeof this.initialValueMax == "number" ? this.getInputTemplate(2) : h}
+                ${this.isRange ? this.getInputTemplate(2) : h}
             </div>
         `;
   }
@@ -278,7 +289,7 @@ let s = class extends T($) {
     };
   }
   get styleTokens() {
-    return D`
+    return P`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -289,7 +300,7 @@ let s = class extends T($) {
   render() {
     return l`
             ${this.styleTokens}
-            <div class=${F(this.containerClasses)}>
+            <div class=${E(this.containerClasses)}>
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track"  role="presentation">
                     ${this.thumbTemplates}
                     ${this.trackRangeTemplate}
@@ -300,7 +311,7 @@ let s = class extends T($) {
         `;
   }
 };
-s.styles = [N, I, C, A, O];
+s.styles = [N, C, I, R, A];
 a([
   r({ type: Number })
 ], s.prototype, "min", 2);
@@ -322,6 +333,12 @@ a([
 a([
   r({ type: Number, attribute: "initial-value-max" })
 ], s.prototype, "initialValueMax", 2);
+a([
+  r({ type: Number, attribute: "value-min" })
+], s.prototype, "valueMin", 2);
+a([
+  r({ type: Number, attribute: "value-max" })
+], s.prototype, "valueMax", 2);
 a([
   r({ type: String, reflect: !0 })
 ], s.prototype, "mode", 2);
@@ -369,10 +386,10 @@ a([
   r({ type: String, attribute: "fraction-separator" })
 ], s.prototype, "fractionSeparator", 2);
 a([
-  r({ type: String, converter: k })
+  r({ type: String, converter: D })
 ], s.prototype, "size", 2);
 a([
-  r({ type: Boolean, converter: L })
+  r({ type: Boolean, converter: T })
 ], s.prototype, "disabled", 2);
 a([
   r({ type: String, attribute: "input-min-aria-label" })
@@ -381,14 +398,14 @@ a([
   r({ type: String, attribute: "input-max-aria-label" })
 ], s.prototype, "inputMaxAriaLabel", 2);
 a([
-  E(".track")
+  k(".track")
 ], s.prototype, "track", 2);
 a([
   p()
-], s.prototype, "valueMin", 2);
+], s.prototype, "_valueMin", 2);
 a([
   p()
-], s.prototype, "valueMax", 2);
+], s.prototype, "_valueMax", 2);
 a([
   p()
 ], s.prototype, "activeThumb", 2);

package/dist/esm/components/ds-text-input/ds-text-input.js

@@ -1,21 +1,21 @@
-import { UiKitElement as c } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
+import { UiKitElement as d } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
 import { inputStatesMixin as m } from "../../mixins/inputStatesMixin.js";
 import { validateMaxLength as v } from "../../utils/validateMaxLength.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as o, nothing 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 l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.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 b } from "./styles/common.styles.js";
-var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, e, r, s) => {
-  for (var a = s > 1 ? void 0 : s ? E(e, r) : e, u = t.length - 1, h; u >= 0; u--)
+import { commonStyles as y } from "./styles/common.styles.js";
+var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? b(e, r) : e, u = t.length - 1, h; u >= 0; u--)
     (h = t[u]) && (a = (s ? h(e, r, a) : h(a)) || a);
-  return s && a && g(e, r, a), a;
+  return s && a && x(e, r, a), a;
 };
-let i = class extends m(c) {
+let i = class extends m(d) {
   constructor() {
-    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
+    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
       this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach(
         (t) => this.nativeInput.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }))
       );
@@ -27,6 +27,7 @@ let i = class extends m(c) {
       error: !!this.forcedError,
       [this.size]: !!this.size,
       disabled: this.inputStates.disabled,
+      readonly: this.inputStates.readonly,
       filled: this.inputStates.filled,
       invalid: this.inputStates.invalid,
       focus: this.inputStates.focus,
@@ -34,13 +35,14 @@ let i = class extends m(c) {
     };
   }
   render() {
-    return n`
+    return o`
             <div class=${f(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.iconTemplate}
                 </div>
                 <div class="footer">
+                    ${this.readonlyTextTemplate}
                     ${this.helperTextTemplate}
                     ${this.forcedErrorTemplate}
                     ${this.invalidErrorTemplate}
@@ -51,7 +53,7 @@ let i = class extends m(c) {
   }
   get iconTemplate() {
     var t, e, r;
-    return (e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length ? this.componentFactory.createIconButton({
+    return !((e = (t = this.nativeInput) == null ? void 0 : t.value) != null && e.length) || this.inputStates.readonly ? l : this.componentFactory.createIconButton({
       class: "icon-button",
       "icon-name": "cross",
       size: this.size,
@@ -59,41 +61,47 @@ let i = class extends m(c) {
       variant: "naked",
       "@click": this.handleClickIcon,
       "data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-    }) : p;
+    });
   }
   get lengthTemplate() {
     var e, r, s;
     const t = (r = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : r.toString();
-    return v(t) ? n`<span class="char-counter">${((s = this.inputStates.currentValue) == null ? void 0 : s.length) || 0}/${t}</span>` : p;
+    return v(t) ? o`<span class="char-counter">${((s = this.inputStates.currentValue) == null ? void 0 : s.length) || 0}/${t}</span>` : l;
   }
   get helperTextTemplate() {
-    return this.forcedError || this.inputStates.invalid && this.invalidError ? p : n`<span class="support-text helper-text">${this.helperText}</span>`;
+    return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? l : o`<span class="support-text helper-text">${this.helperText}</span>`;
   }
   get forcedErrorTemplate() {
-    return this.forcedError ? n`<span class="support-text error-text forced-error">${this.forcedError}</span>` : p;
+    return this.inputStates.readonly || !this.forcedError ? l : o`<span class="support-text error-text forced-error">${this.forcedError}</span>`;
+  }
+  get readonlyTextTemplate() {
+    return !this.inputStates.readonly || !this.readonlyText ? l : o`<span class="support-text readonly-text">${this.readonlyText}</span>`;
   }
   get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? p : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+    return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : o`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
   }
 };
-i.styles = [b];
-o([
-  l({ type: String })
+i.styles = [y];
+n([
+  p({ type: String })
 ], i.prototype, "size", 2);
-o([
-  l({ type: String, attribute: "helper-text" })
+n([
+  p({ type: String, attribute: "helper-text" })
 ], i.prototype, "helperText", 2);
-o([
-  l({ type: String, attribute: "forced-error" })
+n([
+  p({ type: String, attribute: "forced-error" })
 ], i.prototype, "forcedError", 2);
-o([
-  l({ type: String, attribute: "invalid-error" })
+n([
+  p({ type: String, attribute: "invalid-error" })
 ], i.prototype, "invalidError", 2);
-o([
-  l({ type: String, attribute: "data-aria-label-remove-button" })
+n([
+  p({ type: String, attribute: "readonly-text" })
+], i.prototype, "readonlyText", 2);
+n([
+  p({ type: String, attribute: "data-aria-label-remove-button" })
 ], i.prototype, "dataAriaLabelRemoveButton", 2);
-i = o([
-  d("ds-text-input")
+i = n([
+  c("ds-text-input")
 ], i);
 export {
   i as DsTextInput

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

@@ -1,23 +1,23 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
+import { UiKitElement as u } from "../base/UiKitElement.js";
+import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
 import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
 import { inputStatesMixin as f } from "../../mixins/inputStatesMixin.js";
-import { objectConverter as v } from "../../utils/objectConverter.js";
-import { validateMaxLength as x } from "../../utils/validateMaxLength.js";
+import { objectConverter as y } from "../../utils/objectConverter.js";
+import { validateMaxLength as v } from "../../utils/validateMaxLength.js";
 import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as a, nothing as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import { html as n, nothing 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 p } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as g } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as E } from "./styles/common.styles.js";
-var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (t, e, o, i) => {
-  for (var s = i > 1 ? void 0 : i ? S(e, o) : e, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (s = (i ? d(e, o, s) : d(s)) || s);
-  return i && s && y(e, o, s), s;
+import { classMap as x } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as g } from "./styles/common.styles.js";
+var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, r, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? T(r, a) : r, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (s = (i ? h(r, a, s) : h(s)) || s);
+  return i && s && S(r, a, s), s;
 };
-let r = class extends f(c(m)) {
+let e = class extends f(c(u)) {
   constructor() {
-    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.mode = "light";
+    super(...arguments), this.keyboardMode = !1, this.size = "medium", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.mode = "light";
   }
   onInputReady(t) {
     t.classList.add("ds-scroll");
@@ -30,6 +30,7 @@ let r = class extends f(c(m)) {
       [t]: !!t,
       [this.mode]: !!this.mode,
       disabled: this.inputStates.disabled,
+      readonly: this.inputStates.readonly,
       filled: this.inputStates.filled,
       invalid: this.inputStates.invalid,
       focus: this.inputStates.focus,
@@ -37,12 +38,13 @@ let r = class extends f(c(m)) {
     };
   }
   render() {
-    return a`
-            <div class=${g(this.classes)}>
+    return n`
+            <div class=${x(this.classes)}>
                 <div class="input-container">
                     <slot></slot>
                 </div>
                 <div class="footer">
+                    ${this.readonlyTextTemplate}
                     ${this.helperTextTemplate}
                     ${this.forcedErrorTemplate}
                     ${this.invalidErrorTemplate}
@@ -52,39 +54,45 @@ let r = class extends f(c(m)) {
         `;
   }
   get lengthTemplate() {
-    var e, o, i;
-    const t = (o = (e = this.nativeInput) == null ? void 0 : e.maxLength) == null ? void 0 : o.toString();
-    return x(t) ? a`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${t}</span>` : l;
+    var r, a, i;
+    const t = (a = (r = this.nativeInput) == null ? void 0 : r.maxLength) == null ? void 0 : a.toString();
+    return v(t) ? n`<span class="char-counter">${((i = this.inputStates.currentValue) == null ? void 0 : i.length) || 0}/${t}</span>` : l;
   }
   get helperTextTemplate() {
-    return this.forcedError || this.inputStates.invalid && this.invalidError ? l : a`<span class="support-text helper-text">${this.helperText}</span>`;
+    return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? l : n`<span class="support-text helper-text">${this.helperText}</span>`;
   }
   get forcedErrorTemplate() {
-    return this.forcedError ? a`<span class="support-text error-text forced-error">${this.forcedError}</span>` : l;
+    return this.inputStates.readonly || !this.forcedError ? l : n`<span class="support-text error-text forced-error">${this.forcedError}</span>`;
+  }
+  get readonlyTextTemplate() {
+    return !this.inputStates.readonly || !this.readonlyText ? l : n`<span class="support-text readonly-text">${this.readonlyText}</span>`;
   }
   get invalidErrorTemplate() {
-    return this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : a`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
+    return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? l : n`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
   }
 };
-r.styles = [E];
-n([
-  p({ type: String, converter: v })
-], r.prototype, "size", 2);
-n([
+e.styles = [g];
+o([
+  p({ type: String, converter: y })
+], e.prototype, "size", 2);
+o([
   p({ type: String, attribute: "helper-text" })
-], r.prototype, "helperText", 2);
-n([
+], e.prototype, "helperText", 2);
+o([
   p({ type: String, attribute: "forced-error" })
-], r.prototype, "forcedError", 2);
-n([
+], e.prototype, "forcedError", 2);
+o([
   p({ type: String, attribute: "invalid-error" })
-], r.prototype, "invalidError", 2);
-n([
+], e.prototype, "invalidError", 2);
+o([
+  p({ type: String, attribute: "readonly-text" })
+], e.prototype, "readonlyText", 2);
+o([
   p({ type: String })
-], r.prototype, "mode", 2);
-r = n([
-  u("ds-textarea")
-], r);
+], e.prototype, "mode", 2);
+e = o([
+  m("ds-textarea")
+], e);
 export {
-  r as DsTextarea
+  e as DsTextarea
 };

package/dist/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.62", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/2.0.0-canary.63", 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/esm/mixins/inputStatesMixin.js

@@ -6,10 +6,11 @@ const o = (u) => class extends u {
       focusVisible: !1,
       invalid: !1,
       filled: !1,
-      disabled: !1
+      disabled: !1,
+      readonly: !1
     }, this.keyboardMode = !1, this._updateStates = () => {
-      var t, e, s, i, n;
-      this.inputStates.currentValue = (t = this.nativeInput) == null ? void 0 : t.value, this.inputStates.invalid = !((e = this.nativeInput) != null && e.validity.valid), this.inputStates.focus = document.activeElement === this.nativeInput, this.inputStates.disabled = (s = this.nativeInput) == null ? void 0 : s.disabled, this.inputStates.filled = ((n = (i = this.nativeInput) == null ? void 0 : i.value) == null ? void 0 : n.length) > 0, this.requestUpdate();
+      var t, e, s, i, n, a;
+      this.inputStates.currentValue = (t = this.nativeInput) == null ? void 0 : t.value, this.inputStates.invalid = !((e = this.nativeInput) != null && e.validity.valid), this.inputStates.focus = document.activeElement === this.nativeInput, this.inputStates.disabled = (s = this.nativeInput) == null ? void 0 : s.disabled, this.inputStates.readonly = ((i = this.nativeInput) == null ? void 0 : i.readOnly) ?? !1, this.inputStates.filled = ((a = (n = this.nativeInput) == null ? void 0 : n.value) == null ? void 0 : a.length) > 0, this.requestUpdate();
     }, this._handleKeydown = () => {
       this.keyboardMode = !0;
     }, this._handleMousedown = () => {