@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.171

package/dist-react/esm/components/base/DsUiElement.js

@@ -1,47 +1,37 @@
-import { themeContext as n } from "../ds-theme-provider/themeContext.js";
-import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
-import { pubSub as l } from "../../utils/PubSub.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import { LitElement as c } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { adoptStyles as y } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var f = Object.defineProperty, h = (m, e, s, o) => {
-  for (var t = void 0, r = m.length - 1, i; r >= 0; r--)
-    (i = m[r]) && (t = i(e, s, t) || t);
-  return t && f(e, s, t), t;
-};
-class p extends c {
-  constructor() {
-    super(), this.handleChangeTheme = (e) => {
-      this.pubSubTheme = e;
-    }, this.pubSubTheme = l.subscribe("theme", this.handleChangeTheme);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.applyTheme();
-  }
-  updated(e) {
-    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && (this.theme = this.contextTheme ?? this.pubSubTheme, this.applyTheme());
-  }
-  applyTheme() {
-    var r;
-    const e = this.constructor, s = (r = e.themesStyles) == null ? void 0 : r[this.theme], o = Array.isArray(s) ? s : [s];
-    if (!(o != null && o.length)) return;
-    const t = Array.isArray(e.styles) ? e.styles : [e.styles];
-    y(this.shadowRoot, [...t, ...o].filter(Boolean));
-  }
-}
-h([
-  b({ attribute: !1 }),
-  u({ context: n, subscribe: !0 })
-], p.prototype, "contextTheme");
-h([
-  a()
-], p.prototype, "pubSubTheme");
-h([
-  a()
-], p.prototype, "theme");
-export {
-  p as DsUiElement
+import { c as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { themeContext as t } from "../ds-theme-provider/themeContext.js";
+import { pubSub as n } from "../../utils/PubSub.js";
+import { S as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import { i } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as s } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+//#region src/components/base/DsUiElement.ts
+var c = class extends i {
+	constructor() {
+		super(), this.handleChangeTheme = (e) => {
+			this.pubSubTheme = e;
+		}, this.pubSubTheme = n.subscribe("theme", this.handleChangeTheme);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.applyTheme();
+	}
+	updated(e) {
+		super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && (this.theme = this.contextTheme ?? this.pubSubTheme, this.applyTheme());
+	}
+	applyTheme() {
+		var e;
+		let t = this.constructor, n = (e = t.themesStyles) == null ? void 0 : e[this.theme], i = Array.isArray(n) ? n : [n];
+		if (!(i != null && i.length)) return;
+		let a = Array.isArray(t.styles) ? t.styles : [t.styles];
+		r(this.shadowRoot, [...a, ...i].filter(Boolean));
+	}
 };
+s([a({ attribute: !1 }), e({
+	context: t,
+	subscribe: !0
+})], c.prototype, "contextTheme", void 0), s([o()], c.prototype, "pubSubTheme", void 0), s([o()], c.prototype, "theme", void 0);
+//#endregion
+export { c as DsUiElement };

package/dist-react/esm/components/base/UiKitElement.js

@@ -1,82 +1,73 @@
-import { themeContext as m } from "../ds-theme-provider/themeContext.js";
-import { THEME_STORAGE_KEY as d } from "../../core/theme.constants.js";
-import { consume as u } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
-import { pubSub as p } from "../../utils/PubSub.js";
-import { stylesRegistry as S } from "../../utils/StylesRegistry/StylesRegistry.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import { LitElement as y } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as b } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { css as C, adoptStyles as T } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, l = (n, e, t, i) => {
-  for (var o = void 0, a = n.length - 1, s; a >= 0; a--)
-    (s = n[a]) && (o = s(e, t, o) || o);
-  return o && g(e, t, o), o;
-};
-const E = C`:host([unresolved]){visibility:hidden}`, h = class c extends y {
-  constructor() {
-    super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
-      this.pubSubTheme = e;
-    }, this.pubSubTheme = p.subscribe("theme", this.handleChangeTheme);
-  }
-  get theme() {
-    const e = typeof sessionStorage < "u" ? sessionStorage == null ? void 0 : sessionStorage.getItem(d) : null;
-    return this.contextTheme ?? this.pubSubTheme ?? e;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
-    const e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
-    T(this.shadowRoot, [...t, E]), this.applyThemeStyles();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), p.unsubscribe("theme", this.handleChangeTheme);
-  }
-  updated(e) {
-    super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeStyles();
-  }
-  getComponentNames() {
-    const e = /* @__PURE__ */ new Set();
-    let t = this.constructor;
-    for (; t && t !== c; )
-      Array.isArray(t.componentName) && t.componentName.forEach((i) => e.add(i)), t = Object.getPrototypeOf(t);
-    return Array.from(e).reverse();
-  }
-  supportsAdoptedSheets() {
-    return "adoptedStyleSheets" in ((ShadowRoot == null ? void 0 : ShadowRoot.prototype) || {}) && "replace" in CSSStyleSheet.prototype;
-  }
-  async applyThemeStyles() {
-    const e = this.getComponentNames();
-    if (!(!this.theme || !(e != null && e.length)))
-      try {
-        const t = await Promise.all(
-          e.map((s) => S.getStyles({ componentName: s, theme: this.theme }))
-        ), i = this.supportsAdoptedSheets(), o = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? o.filter((s) => !this.appliedConstructables.includes(s)) : o;
-        this.appliedConstructables = [], this.appliedStyleTags.forEach((s) => s.remove()), this.appliedStyleTags = [], t.forEach((s) => {
-          if (s)
-            if (i) {
-              const r = new CSSStyleSheet();
-              r.replaceSync(s), this.appliedConstructables.push(r);
-            } else {
-              const r = document.createElement("style");
-              r.textContent = s, this.shadowRoot.appendChild(r), this.appliedStyleTags.push(r);
-            }
-        }), i && (this.shadowRoot.adoptedStyleSheets = [...a, ...this.appliedConstructables]);
-      } catch (t) {
-        console.error(t);
-      } finally {
-        this.removeAttribute("unresolved"), this.requestUpdate();
-      }
-  }
-};
-l([
-  b({ attribute: !1 }),
-  u({ context: m, subscribe: !0 })
-], h.prototype, "contextTheme");
-l([
-  f()
-], h.prototype, "pubSubTheme");
-let N = h;
-export {
-  N as UiKitElement
+import { c as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/consume.js";
+import { themeContext as t } from "../ds-theme-provider/themeContext.js";
+import { THEME_STORAGE_KEY as n } from "../../core/theme.constants.js";
+import { pubSub as r } from "../../utils/PubSub.js";
+import { stylesRegistry as i } from "../../utils/StylesRegistry/StylesRegistry.js";
+import { S as a, i as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import { i as s } from "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as u } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+//#region src/components/base/UiKitElement.ts
+var d = o`:host([unresolved]){visibility:hidden}`, f = class e extends s {
+	constructor() {
+		super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
+			this.pubSubTheme = e;
+		}, this.pubSubTheme = r.subscribe("theme", this.handleChangeTheme);
+	}
+	get theme() {
+		var e;
+		let t = typeof sessionStorage < "u" ? (e = sessionStorage) == null ? void 0 : e.getItem(n) : null;
+		return this.contextTheme ?? this.pubSubTheme ?? t;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
+		let e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
+		a(this.shadowRoot, [...t, d]), this.applyThemeStyles();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), r.unsubscribe("theme", this.handleChangeTheme);
+	}
+	updated(e) {
+		super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeStyles();
+	}
+	getComponentNames() {
+		let t = /* @__PURE__ */ new Set(), n = this.constructor;
+		for (; n && n !== e;) Array.isArray(n.componentName) && n.componentName.forEach((e) => t.add(e)), n = Object.getPrototypeOf(n);
+		return Array.from(t).reverse();
+	}
+	supportsAdoptedSheets() {
+		var e;
+		return "adoptedStyleSheets" in (((e = ShadowRoot) == null ? void 0 : e.prototype) || {}) && "replace" in CSSStyleSheet.prototype;
+	}
+	async applyThemeStyles() {
+		let e = this.getComponentNames();
+		if (!(!this.theme || !(e != null && e.length))) try {
+			let t = await Promise.all(e.map((e) => i.getStyles({
+				componentName: e,
+				theme: this.theme
+			}))), n = this.supportsAdoptedSheets(), r = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? r.filter((e) => !this.appliedConstructables.includes(e)) : r;
+			this.appliedConstructables = [], this.appliedStyleTags.forEach((e) => e.remove()), this.appliedStyleTags = [], t.forEach((e) => {
+				if (e) if (n) {
+					let t = new CSSStyleSheet();
+					t.replaceSync(e), this.appliedConstructables.push(t);
+				} else {
+					let t = document.createElement("style");
+					t.textContent = e, this.shadowRoot.appendChild(t), this.appliedStyleTags.push(t);
+				}
+			}), n && (this.shadowRoot.adoptedStyleSheets = [...a, ...this.appliedConstructables]);
+		} catch (e) {
+			console.error(e);
+		} finally {
+			this.removeAttribute("unresolved"), this.requestUpdate();
+		}
+	}
 };
+u([c({ attribute: !1 }), e({
+	context: t,
+	subscribe: !0
+})], f.prototype, "contextTheme", void 0), u([l()], f.prototype, "pubSubTheme", void 0);
+//#endregion
+export { f as UiKitElement };

package/dist-react/esm/components/base/ds-base-input/ds-base-input.js

@@ -1,51 +1,48 @@
-import { DsUiElement as d } from "../DsUiElement.js";
-import { FormAssociatedMixin as m } from "../../../mixins/FormAssociatedMixin.js";
-import { booleanConverter as n } from "../../../utils/booleanConverter.js";
-import { htmlWithTokens as c } from "../../../utils/htmlWithTokens.js";
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as f } 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 u } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as y } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as v } from "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as x, inputStyles as b } from "./styles/common.styles.js";
-import { cupraStyles as T } from "./styles/cupra.styles.js";
-var g = Object.defineProperty, t = (p, i, a, $) => {
-  for (var s = void 0, l = p.length - 1, h; l >= 0; l--)
-    (h = p[l]) && (s = h(i, a, s) || s);
-  return s && g(i, a, s), s;
-};
-const o = class o extends m(d) {
-  constructor() {
-    super(...arguments), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.focused = !1, this.handleFocus = () => {
-      this.focused = !0;
-    }, this.handleBlur = () => {
-      this.focused = !1;
-    };
-  }
-  firstUpdated() {
-    this._value = this.initialValue;
-  }
-  get value() {
-    return this._value;
-  }
-  set value(i) {
-    this._value = i;
-  }
-  get classes() {
-    return {
-      container: !0,
-      focused: this.focused,
-      error: !!this.errorText,
-      success: this.success,
-      disabled: this.disabled,
-      [this.size]: !0,
-      [this.mode]: !0
-    };
-  }
-  get styleTokens() {
-    return c`
+import { x as e } 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 as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { e as r } 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 i } from "../../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { booleanConverter as a } from "../../../utils/booleanConverter.js";
+import { e as o } 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 { FormAssociatedMixin as s } from "../../../mixins/FormAssociatedMixin.js";
+import { DsUiElement as c } from "../DsUiElement.js";
+import { commonStyles as l, inputStyles as u } from "./styles/common.styles.js";
+import { cupraStyles as d } from "./styles/cupra.styles.js";
+//#region src/components/base/ds-base-input/ds-base-input.ts
+var f, p = class extends s(c) {
+	constructor(...e) {
+		super(...e), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.focused = !1, this.handleFocus = () => {
+			this.focused = !0;
+		}, this.handleBlur = () => {
+			this.focused = !1;
+		};
+	}
+	firstUpdated() {
+		this._value = this.initialValue;
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = e;
+	}
+	get classes() {
+		return {
+			container: !0,
+			focused: this.focused,
+			error: !!this.errorText,
+			success: this.success,
+			disabled: this.disabled,
+			[this.size]: !0,
+			[this.mode]: !0
+		};
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -53,11 +50,11 @@ const o = class o extends m(d) {
                 }
             </style>
         `;
-  }
-  render() {
-    return f`
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            <div class=${v(this.classes)}>
+            <div class=${o(this.classes)}>
                 <div class="inner-container">
                     ${this.labelTemplate}
                     ${this.inputTemplate}
@@ -68,45 +65,27 @@ const o = class o extends m(d) {
                 ${this.dropdownTemplate}
             </div>
         `;
-  }
-};
-o.styles = [x, b], o.themesStyles = {
-  cupra: T
-};
-let e = o;
-t([
-  r({ type: String, reflect: !0, attribute: "initial-value" })
-], e.prototype, "initialValue");
-t([
-  r({ type: String })
-], e.prototype, "label");
-t([
-  r({ type: String, attribute: "helper-text" })
-], e.prototype, "helperText");
-t([
-  r({ type: String, attribute: "error-text" })
-], e.prototype, "errorText");
-t([
-  r({ type: Boolean, converter: n })
-], e.prototype, "disabled");
-t([
-  r({ type: Boolean, converter: n })
-], e.prototype, "success");
-t([
-  r({ type: String, reflect: !0 })
-], e.prototype, "mode");
-t([
-  r({ type: String })
-], e.prototype, "size");
-t([
-  u()
-], e.prototype, "_value");
-t([
-  u()
-], e.prototype, "focused");
-t([
-  y(".input-field")
-], e.prototype, "inputField");
-export {
-  e as DsBaseInput
+	}
 };
+f = p, f.styles = [l, u], f.themesStyles = { cupra: d }, i([t({
+	type: String,
+	reflect: !0,
+	attribute: "initial-value"
+})], p.prototype, "initialValue", void 0), i([t({ type: String })], p.prototype, "label", void 0), i([t({
+	type: String,
+	attribute: "helper-text"
+})], p.prototype, "helperText", void 0), i([t({
+	type: String,
+	attribute: "error-text"
+})], p.prototype, "errorText", void 0), i([t({
+	type: Boolean,
+	converter: a
+})], p.prototype, "disabled", void 0), i([t({
+	type: Boolean,
+	converter: a
+})], p.prototype, "success", void 0), i([t({
+	type: String,
+	reflect: !0
+})], p.prototype, "mode", void 0), i([t({ type: String })], p.prototype, "size", void 0), i([n()], p.prototype, "_value", void 0), i([n()], p.prototype, "focused", void 0), i([r(".input-field")], p.prototype, "inputField", void 0);
+//#endregion
+export { p as DsBaseInput };

package/dist-react/esm/components/base/ds-base-input/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-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 { css as e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = e`
+import { i as e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/base/ds-base-input/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: 100%;
@@ -25,7 +24,7 @@ const r = e`
             font-size 0.2s;
         white-space: nowrap;
     }
-`, s = e`
+`, n = e`
     .container {
         position: relative;
     }
@@ -57,7 +56,5 @@ const r = e`
         outline: none;
     }
 `;
-export {
-  r as commonStyles,
-  s as inputStyles
-};
+//#endregion
+export { t as commonStyles, n as inputStyles };

package/dist-react/esm/components/base/ds-base-input/styles/cupra.styles.js

@@ -1,8 +1,6 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-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 { css as r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const o = r`
+import { i as e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+var t = [e`
     .container {
         padding: 16px 0 0 0;
     }
@@ -107,18 +105,17 @@ const o = r`
         color: var(--ds-color-grey);
     }
     .light .icon {
-        --ds-icon-color: var(--ds-color-dark-grey);
+        --ui-kit-icon-color: var(--ds-color-dark-grey);
     }
     .dark .icon {
-        --ds-icon-color: var(--ds-color-light-grey);
+        --ui-kit-icon-color: var(--ds-color-light-grey);
     }
     .disabled.light .icon {
-        --ds-icon-color: var(--ds-color-medium-grey);
+        --ui-kit-icon-color: var(--ds-color-medium-grey);
     }
     .disabled.dark .icon {
-        --ds-icon-color: var(--ds-color-dark-grey);
+        --ui-kit-icon-color: var(--ds-color-dark-grey);
     }
-`, d = [o];
-export {
-  d as cupraStyles
-};
+`];
+//#endregion
+export { t as cupraStyles };

package/dist-react/esm/components/base/ds-base-progress-bar/ds-base-progress-bar.js

@@ -1,64 +1,69 @@
-import { DsUiElement as n } from "../DsUiElement.js";
-import { booleanConverter as h } from "../../../utils/booleanConverter.js";
-import { htmlWithTokens as c } from "../../../utils/htmlWithTokens.js";
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as f } 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 s } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as y } from "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as u } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as d } from "./styles/cupra-diagonal.styles.js";
-import { cupraStyles as v } from "./styles/cupra.styles.js";
-import { seatStyles as g } from "./styles/seat.styles.js";
-var S = Object.defineProperty, i = (m, l, p, k) => {
-  for (var t = void 0, o = m.length - 1, a; o >= 0; o--)
-    (a = m[o]) && (t = a(l, p, t) || t);
-  return t && S(l, p, t), t;
-};
-const r = class r extends n {
-  constructor() {
-    super(...arguments), this.show = !1, this.mode = "light", this.size = "large";
-  }
-  get classes() {
-    return {
-      track: !0,
-      [this.size]: !0,
-      [this.mode]: !!this.mode
-    };
-  }
-  get styleTokens() {
-    return c`
+import { x as e } 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 as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { booleanConverter as r } from "../../../utils/booleanConverter.js";
+import { e as i } 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 { o as a } from "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { DsUiElement as o } from "../DsUiElement.js";
+import { commonStyles as s } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as c } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as l } from "./styles/cupra.styles.js";
+import { seatStyles as u } from "./styles/seat.styles.js";
+//#region src/components/base/ds-base-progress-bar/ds-base-progress-bar.ts
+var d, f = class extends o {
+	constructor(...e) {
+		super(...e), this.show = !1, this.mode = "light", this.size = "large";
+	}
+	get classes() {
+		return {
+			track: !0,
+			[this.size]: !0,
+			[this.mode]: !!this.mode
+		};
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  get barTemplate() {
-    return f`
+	}
+	get progressAriaValue() {}
+	get barTemplate() {
+		return e`
             ${this.styleTokens}
-            <div class=${y(this.classes)}>
+            <div
+                class=${i(this.classes)}
+                role="progressbar"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-valuenow=${this.progressAriaValue ?? 0}
+                aria-label=${a(this.dataAriaLabel)}
+            >
                 <div class="fill"></div>
             </div>
         `;
-  }
-};
-r.styles = [u], r.themesStyles = {
-  cupra: v,
-  "cupra-diagonal": d,
-  seat: g
-};
-let e = r;
-i([
-  s({ type: Boolean, converter: h })
-], e.prototype, "show");
-i([
-  s({ type: String, reflect: !0 })
-], e.prototype, "mode");
-i([
-  s({ type: String })
-], e.prototype, "size");
-export {
-  e as DsBaseProgressBar
+	}
 };
+d = f, d.styles = [s], d.themesStyles = {
+	cupra: l,
+	"cupra-diagonal": c,
+	seat: u
+}, n([t({
+	type: Boolean,
+	converter: r
+})], f.prototype, "show", void 0), n([t({
+	type: String,
+	reflect: !0
+})], f.prototype, "mode", void 0), n([t({ type: String })], f.prototype, "size", void 0), n([t({
+	type: String,
+	attribute: "data-aria-label"
+})], f.prototype, "dataAriaLabel", void 0);
+//#endregion
+export { f as DsBaseProgressBar };