@cupra/ui-kit 2.0.0-canary.119 → 2.0.0-canary.121

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

@@ -17,7 +17,7 @@ import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } from "./st
 //#region src/components/ds-button/ds-button.ts
 var g = class extends l(i) {
 	constructor(...e) {
-		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1, this.baseVariant = "primary";
 	}
 	static {
 		this.styles = [
@@ -30,13 +30,14 @@ var g = class extends l(i) {
 		super.connectedCallback(), this.closestForm = this.closest("form");
 	}
 	get classes() {
-		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport], t = this.variant === "custom" ? this.baseVariant : this.variant;
 		return {
 			button: !0,
-			custom: this.htmlTagName === "custom",
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${t}`]: !0,
+			custom: this.variant === "custom",
 			[e]: !!e,
 			[this.mode]: !!this.mode,
-			[this.variant]: !!this.variant,
 			rounded: this.rounded,
 			disabled: this.disabled || this.loading,
 			destructive: this.destructive,
@@ -75,6 +76,9 @@ var g = class extends l(i) {
 	get contentTemplate() {
 		return this.loading && this.textLoading ? t`${this.textLoading}` : t`<slot></slot>`;
 	}
+	updated(e) {
+		super.updated(e), this.variant === "custom" && this.customBackground ? this.style.setProperty("--ui-kit-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-button-custom-bg"), this.variant === "custom" && this.customColor ? this.style.setProperty("--ui-kit-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-button-custom-color");
+	}
 	get cssTokens() {
 		return s`
             <style>
@@ -136,7 +140,10 @@ var g = class extends l(i) {
         `;
 	}
 };
-r([n({ type: String })], g.prototype, "variant", void 0), r([n({
+r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "variant", void 0), r([n({
 	type: String,
 	reflect: !0
 })], g.prototype, "mode", void 0), r([n({
@@ -179,6 +186,15 @@ r([n({ type: String })], g.prototype, "variant", void 0), r([n({
 })], g.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "text-loading"
-})], g.prototype, "textLoading", void 0), g = r([a("ds-button")], g);
+})], g.prototype, "textLoading", void 0), r([n({
+	type: String,
+	attribute: "base-variant"
+})], g.prototype, "baseVariant", void 0), r([n({
+	type: String,
+	attribute: "custom-background"
+})], g.prototype, "customBackground", void 0), r([n({
+	type: String,
+	attribute: "custom-color"
+})], g.prototype, "customColor", void 0), g = r([a("ds-button")], g);
 //#endregion
 export { g as DsButton };

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

@@ -31,7 +31,7 @@ var t = e`
         width: 100%;
     }
 
-    .custom ::slotted(*) {
+    .tag-custom ::slotted(*) {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -53,13 +53,13 @@ var t = e`
         box-sizing: border-box;
     }
 
-    .custom ::slotted(*:disabled),
-    .custom.disabled ::slotted(*) {
+    .tag-custom ::slotted(*:disabled),
+    .tag-custom.disabled ::slotted(*) {
         pointer-events: none;
         cursor: default;
     }
 
-    .custom ::slotted(*:focus-visible) {
+    .tag-custom ::slotted(*:focus-visible) {
         outline: none;
     }
 `, n = e`

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

@@ -17,7 +17,13 @@ import { commonStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-checkbox/ds-checkbox.ts
 var g = class extends m(o) {
 	constructor(...e) {
-		super(...e), this.inputPlacement = "left", this.checked = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1, this.dataAriaLabel = "";
+		super(...e), this.inputPlacement = "left", this._checked = void 0, this._checkedState = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1, this.dataAriaLabel = "";
+	}
+	get checked() {
+		return this._checked ?? this._checkedState;
+	}
+	set checked(e) {
+		this._checked = e;
 	}
 	static {
 		this.styles = [h];
@@ -77,11 +83,12 @@ var g = class extends m(o) {
 		return this.errorGroup ?? !!this._forcedError;
 	}
 	handleChange(e) {
-		this.checked = e.target.checked, this.dispatchEvent(new CustomEvent("change", {
+		let t = e.target.checked;
+		this._checkedState = t, this._checked = void 0, this.dispatchEvent(new CustomEvent("change", {
 			bubbles: !0,
 			composed: !0,
 			detail: {
-				checked: this.checked,
+				checked: t,
 				value: this.value
 			}
 		}));
@@ -155,9 +162,10 @@ a([r({ type: String })], g.prototype, "name", void 0), a([r({ type: String })],
 	attribute: "input-placement"
 })], g.prototype, "inputPlacement", void 0), a([r({
 	type: Boolean,
+	attribute: "checked",
 	converter: c,
 	reflect: !0
-})], g.prototype, "checked", void 0), a([r({
+})], g.prototype, "_checked", void 0), a([i()], g.prototype, "_checkedState", void 0), a([r({
 	type: Boolean,
 	converter: c
 })], g.prototype, "required", void 0), a([r({

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

@@ -16,7 +16,7 @@ import { commonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-dialog/ds-dialog.ts
 var p = class extends o {
 	constructor(...e) {
-		super(...e), this.lockClose = !1, this.lockScroll = !0, this.open = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.scrollLocked = !1, this.handleCloseButtonClick = () => {
+		super(...e), this.lockClose = !1, this.lockScroll = !0, this._open = void 0, this._openState = !1, this.size = "medium", this.hasBeenOpened = !1, this.hasScroll = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.scrollLocked = !1, this.handleCloseButtonClick = () => {
 			this.handleClose("button");
 		}, this.handleDialogClick = (e) => {
 			e.target === this.nativeDialog && this.handleClose("backdrop");
@@ -29,8 +29,14 @@ var p = class extends o {
 	static {
 		this.styles = [f];
 	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
+	}
 	updated(e) {
-		super.updated(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0), e.has("open") && (this.open || (this.hasScroll = !1), this.handleResizeObserver(), this.syncNativeDialogState(), this.syncScrollLock());
+		super.updated(e), !this.hasBeenOpened && (e.has("_open") || e.has("_openState")) && this.open && (this.hasBeenOpened = !0), (e.has("_open") || e.has("_openState")) && (this.open || (this.hasScroll = !1), this.handleResizeObserver(), this.syncNativeDialogState(), this.syncScrollLock());
 	}
 	syncScrollLock() {
 		this.open && this.lockScroll ? (d.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (d.unlock(), !1);
@@ -65,7 +71,7 @@ var p = class extends o {
 		}));
 	}
 	handleClose(e) {
-		this.lockClose || (this.open = !1, this.dispatchCloseEvents(e));
+		this.lockClose || (this._openState = !1, this._open = void 0, this.dispatchCloseEvents(e));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.resizeObserver = new ResizeObserver(this.debouncedCheckScroll), this.handleResizeObserver(), this.addEventListener("click", this.handleHostClick);
@@ -109,8 +115,9 @@ a([n({
 	attribute: "lock-scroll"
 })], p.prototype, "lockScroll", void 0), a([n({
 	type: Boolean,
+	attribute: "open",
 	converter: c
-})], p.prototype, "open", void 0), a([n({ type: String })], p.prototype, "size", void 0), a([n({
+})], p.prototype, "_open", void 0), a([r()], p.prototype, "_openState", void 0), a([n({ type: String })], p.prototype, "size", void 0), a([n({
 	type: String,
 	attribute: "data-aria-label"
 })], p.prototype, "dataAriaLabel", void 0), a([n({

package/dist-react/esm/components/ds-dialog-fullscreen/ds-dialog-fullscreen.js

@@ -15,18 +15,24 @@ import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-dialog-fullscreen/ds-dialog-fullscreen.ts
 var f = class extends o {
 	constructor(...e) {
-		super(...e), this.lockClose = !1, this.lockScroll = !0, this.open = !1, this.hasScroll = !1, this.hasBeenOpened = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
+		super(...e), this.lockClose = !1, this.lockScroll = !0, this._open = void 0, this._openState = !1, this.hasScroll = !1, this.hasBeenOpened = !1, this.debouncedCheckScroll = u({ func: () => this.checkScroll() }), this.handleKeyDown = (e) => {
 			this.open && e.key === "Escape" && this.handleClose();
 		};
 	}
 	static {
 		this.styles = [d];
 	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
+	}
 	willUpdate(e) {
-		super.willUpdate(e), !this.hasBeenOpened && e.has("open") && this.open && (this.hasBeenOpened = !0);
+		super.willUpdate(e), !this.hasBeenOpened && (e.has("_open") || e.has("_openState")) && this.open && (this.hasBeenOpened = !0);
 	}
 	updated(e) {
-		super.updated(e), e.has("open") && this.handleResizeObserver();
+		super.updated(e), (e.has("_open") || e.has("_openState")) && this.handleResizeObserver();
 	}
 	async handleResizeObserver() {
 		this.lockScroll && (document.getElementById("storybook-root") || (document.body.style.overflow = this.open ? "hidden" : "")), this.resizeObserver?.disconnect(), this.content && (this.resizeObserver.observe(this.content), await new Promise(requestAnimationFrame), this.checkScroll());
@@ -39,7 +45,7 @@ var f = class extends o {
 		};
 	}
 	handleClose() {
-		this.lockClose || (this.open = !1, this.dispatchEvent(new Event("ds-dialog-fullscreen:close", {
+		this.lockClose || (this._openState = !1, this._open = void 0, this.dispatchEvent(new Event("ds-dialog-fullscreen:close", {
 			bubbles: !0,
 			composed: !0
 		})));
@@ -84,6 +90,7 @@ a([n({
 	attribute: "lock-scroll"
 })], f.prototype, "lockScroll", void 0), a([n({
 	type: Boolean,
+	attribute: "open",
 	converter: c
-})], f.prototype, "open", void 0), a([r()], f.prototype, "hasScroll", void 0), a([i(".content")], f.prototype, "content", void 0), f = a([s("ds-dialog-fullscreen")], f);
+})], f.prototype, "_open", void 0), a([r()], f.prototype, "_openState", void 0), a([r()], f.prototype, "hasScroll", void 0), a([i(".content")], f.prototype, "content", void 0), f = a([s("ds-dialog-fullscreen")], f);
 //#endregion

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

@@ -1,29 +1,36 @@
 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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
-import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
-import { customUiKitElement as i } from "../../decorators/customUiKitElement.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 { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { e as s } 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 { commonStyles as s, iconStyles as c } from "./styles/common.styles.js";
-import { themeConfig as l } from "./theme-config.js";
+import { commonStyles as c, iconStyles as l } from "./styles/common.styles.js";
+import { themeConfig as u } from "./theme-config.js";
 //#region src/components/ds-drawer/ds-drawer.ts
-var u = class extends r {
+var d = class extends i {
 	constructor(...e) {
-		super(...e), this.open = !1, this.handleOverlayClick = () => {
+		super(...e), this._open = void 0, this._openState = !1, this.handleOverlayClick = () => {
 			this.dispatchEvent(new Event("ds-drawer:close", {
 				bubbles: !0,
 				composed: !0
-			})), this.open = !1;
+			})), this._openState = !1, this._open = void 0;
 		}, this.handleKeyDown = (e) => {
 			(e.key === "Escape" || e.key === "Esc") && this.open && this.handleOverlayClick();
 		};
 	}
 	static {
-		this.styles = [s, c];
+		this.styles = [c, l];
+	}
+	get open() {
+		return this._open ?? this._openState;
+	}
+	set open(e) {
+		this._open = e;
 	}
 	get classes() {
 		return {
@@ -32,7 +39,7 @@ var u = class extends r {
 		};
 	}
 	getIconButtonTemplate() {
-		let e = l[this.theme]?.["icon-button-variant"];
+		let e = u[this.theme]?.["icon-button-variant"];
 		return this.componentFactory.createIconButton({
 			class: "close-button visible",
 			"data-testid": "close-button",
@@ -45,18 +52,18 @@ var u = class extends r {
 		});
 	}
 	updated(e) {
-		super.updated?.(e), e.has && e.has("open") && window.addEventListener("keydown", this.handleKeyDown);
+		super.updated?.(e), e.has && (e.has("_open") || e.has("_openState")) && window.addEventListener("keydown", this.handleKeyDown);
 	}
 	disconnectedCallback() {
 		window.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
 	}
 	render() {
 		return e`          
-            <div class=${o({
+            <div class=${s({
 			overlay: !0,
 			open: !!this.open
 		})} @click=${this.handleOverlayClick}></div>
-            <div data-testid="ds-drawer-container" class=${o(this.classes)}>
+            <div data-testid="ds-drawer-container" class=${s(this.classes)}>
                 <div class="scroll-area" tabindex="0">
                     <div class="drawer-header">
                         <slot name="header"></slot>                        
@@ -75,8 +82,9 @@ var u = class extends r {
         `;
 	}
 };
-n([t({
+r([t({
 	type: Boolean,
-	converter: a
-})], u.prototype, "open", void 0), u = n([i("ds-drawer")], u);
+	attribute: "open",
+	converter: o
+})], d.prototype, "_open", void 0), r([n()], d.prototype, "_openState", void 0), d = r([a("ds-drawer")], d);
 //#endregion

package/dist-react/esm/components/ds-icon-button/ds-icon-button.js

@@ -16,7 +16,7 @@ import { buttonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-icon-button/ds-icon-button.ts
 var p = class extends l(i) {
 	constructor(...e) {
-		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
+		super(...e), this.variant = "primary", this.baseVariant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
 	}
 	static {
 		this.styles = [f];
@@ -35,16 +35,20 @@ var p = class extends l(i) {
 		t && !t.contains(e.composedPath()[0]) && (e.stopPropagation(), t.click());
 	}
 	get classes() {
-		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport], t = this.variant === "custom" ? this.baseVariant : this.variant;
 		return {
 			button: !0,
-			custom: this.htmlTagName === "custom",
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${t}`]: !0,
+			custom: this.variant === "custom",
 			disabled: this.disabled,
 			[e]: !!e,
-			[this.mode]: !!this.mode,
-			[this.variant]: !!this.variant
+			[this.mode]: !!this.mode
 		};
 	}
+	updated(e) {
+		super.updated(e), this.variant === "custom" && this.customBackground ? this.style.setProperty("--ui-kit-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-button-custom-bg"), this.variant === "custom" && this.customColor ? this.style.setProperty("--ui-kit-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-button-custom-color");
+	}
 	get variantColorTokens() {
 		return s`
             <style>
@@ -57,11 +61,6 @@ var p = class extends l(i) {
 	}
 	render() {
 		return t`
-            <style>
-                :host {
-                    pointer-events: ${this.disabled ? "none" : "visible"};
-                }
-            </style>
             ${this.variantColorTokens}
             ${d(this.htmlTagName || "button", [
 			["button", () => t`
@@ -95,7 +94,19 @@ var p = class extends l(i) {
         `;
 	}
 };
-r([n({ type: String })], p.prototype, "variant", void 0), r([n({
+r([n({
+	type: String,
+	reflect: !0
+})], p.prototype, "variant", void 0), r([n({
+	type: String,
+	attribute: "base-variant"
+})], p.prototype, "baseVariant", void 0), r([n({
+	type: String,
+	attribute: "custom-background"
+})], p.prototype, "customBackground", void 0), r([n({
+	type: String,
+	attribute: "custom-color"
+})], p.prototype, "customColor", void 0), r([n({
 	type: String,
 	reflect: !0
 })], p.prototype, "mode", void 0), r([n({

package/dist-react/esm/components/ds-media-control/ds-media-control.js

@@ -1,20 +1,21 @@
 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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
-import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
-import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import { e as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.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 { commonStyles as o } from "./styles/common.styles.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-media-control/ds-media-control.ts
-var s = class extends r {
+var c = class extends i {
 	constructor(...e) {
-		super(...e), this.state = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
+		super(...e), this._state = void 0, this._stateValue = "pause", this.size = "medium", this.progress = 0, this.handleToggle = (e) => {
 			e.stopPropagation();
 			let t = this.state === "play" ? "pause" : "play";
-			this.state = t;
+			this._stateValue = t, this._state = void 0;
 			let n = t === "play" ? "ds-media-control:play" : "ds-media-control:pause";
 			this.dispatchEvent(new CustomEvent(n, {
 				bubbles: !0,
@@ -25,7 +26,13 @@ var s = class extends r {
 		};
 	}
 	static {
-		this.styles = [o];
+		this.styles = [s];
+	}
+	get state() {
+		return this._state ?? this._stateValue;
+	}
+	set state(e) {
+		this._state = e;
 	}
 	get normalizedProgress() {
 		let e = Number(this.progress ?? 0);
@@ -77,7 +84,7 @@ var s = class extends r {
 		return e`
             <div
                 part="container"
-                class=${a(this.classes)}
+                class=${o(this.classes)}
                 role="button"
                 tabindex="0"
                 aria-label=${`${t} media ${this.size}`}
@@ -90,14 +97,15 @@ var s = class extends r {
         `;
 	}
 };
-n([t({
+r([t({
 	type: String,
+	attribute: "state",
 	reflect: !0
-})], s.prototype, "state", void 0), n([t({
+})], c.prototype, "_state", void 0), r([n()], c.prototype, "_stateValue", void 0), r([t({
 	type: String,
 	reflect: !0
-})], s.prototype, "size", void 0), n([t({
+})], c.prototype, "size", void 0), r([t({
 	type: Number,
 	reflect: !0
-})], s.prototype, "progress", void 0), s = n([i("ds-media-control")], s);
+})], c.prototype, "progress", void 0), c = r([a("ds-media-control")], c);
 //#endregion

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

@@ -15,7 +15,7 @@ import { themeConfig as m } from "./theme-config.js";
 //#region src/components/ds-tabs/ds-tabs.ts
 var h = class extends o {
 	constructor(...e) {
-		super(...e), this.selectedTab = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
+		super(...e), this._selectedTab = void 0, this._selectedTabState = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
 			if (!(this.focusedTabIndex < 0)) switch (e.key) {
 				case "ArrowRight":
 				case "Right":
@@ -65,6 +65,12 @@ var h = class extends o {
 			f
 		];
 	}
+	get selectedTab() {
+		return this._selectedTab ?? this._selectedTabState;
+	}
+	set selectedTab(e) {
+		this._selectedTab = e;
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.tabs = Array.from(this.querySelectorAll("[slot=tab]")), this.panels = Array.from(this.querySelectorAll("[slot=panel]"));
 	}
@@ -88,7 +94,7 @@ var h = class extends o {
 		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
 	}
 	updated(e) {
-		if (super.updated(e), e.has("selectedTab") && this.selectTab(this.selectedTab), e.has("variant")) {
+		if (super.updated(e), (e.has("_selectedTab") || e.has("_selectedTabState")) && this.selectTab(this.selectedTab), e.has("variant")) {
 			let e = this.variant === "secondary" || this.variant === "primary" ? this.variant : "primary";
 			this.variant !== e && (this.variant = e);
 		}
@@ -122,7 +128,7 @@ var h = class extends o {
 			bubbles: !0,
 			composed: !0,
 			detail: { selectedTab: e }
-		})), this.selectedTab = e;
+		})), this._selectedTabState = e, this._selectedTab = void 0;
 	}
 	handleSelect(e) {
 		let t;
@@ -165,7 +171,7 @@ a([n({
 	type: Number,
 	attribute: "selected-tab",
 	reflect: !0
-})], h.prototype, "selectedTab", void 0), a([n({
+})], h.prototype, "_selectedTab", void 0), a([r()], h.prototype, "_selectedTabState", void 0), a([n({
 	type: String,
 	reflect: !0
 })], h.prototype, "mode", void 0), a([n({

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

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

package/dist-react/esm/components/ds-toggle-switch/ds-toggle-switch.js

@@ -2,28 +2,36 @@ import "../ds-theme-provider/themeContext.js";
 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 "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
-import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
-import { UiKitElement as r } from "../base/UiKitElement.js";
-import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as a } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as o } from "../../utils/htmlWithTokens.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
+import { e as c } 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 { commonStyles as c } from "./styles/common.styles.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-toggle-switch/ds-toggle-switch.ts
-var l = class extends r {
+var u = class extends i {
 	constructor(...e) {
-		super(...e), this.size = "medium", this.checked = !1, this.disabled = !1, this.mode = "light";
+		super(...e), this.size = "medium", this._checked = void 0, this._checkedState = !1, this.disabled = !1, this.mode = "light";
 	}
 	static {
-		this.styles = [c];
+		this.styles = [l];
+	}
+	get checked() {
+		return this._checked ?? this._checkedState;
+	}
+	set checked(e) {
+		this._checked = e;
 	}
 	handleClick() {
-		this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
+		let e = !this.checked;
+		this._checkedState = e, this._checked = void 0, this.dispatchEvent(new CustomEvent("change", {
 			bubbles: !0,
 			composed: !0,
-			detail: { checked: this.checked }
+			detail: { checked: e }
 		}));
 	}
 	handleClickOff(e) {
@@ -33,7 +41,7 @@ var l = class extends r {
 		e.stopPropagation(), !this.checked && this.handleClick();
 	}
 	get styleTokens() {
-		return o`
+		return s`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -54,7 +62,7 @@ var l = class extends r {
 		return e`
             ${this.styleTokens}
             <div
-                class=${s(this.labelClasses)}
+                class=${c(this.labelClasses)}
                 @click=${this.handleClick}
             >
                 <slot name="off" @click=${this.handleClickOff}></slot>
@@ -77,19 +85,20 @@ var l = class extends r {
         `;
 	}
 };
-n([t({ type: String })], l.prototype, "size", void 0), n([t({
+r([t({ type: String })], u.prototype, "size", void 0), r([t({
 	type: Boolean,
-	converter: a,
+	attribute: "checked",
+	converter: o,
 	reflect: !0
-})], l.prototype, "checked", void 0), n([t({
+})], u.prototype, "_checked", void 0), r([n()], u.prototype, "_checkedState", void 0), r([t({
 	type: Boolean,
-	converter: a,
+	converter: o,
 	reflect: !0
-})], l.prototype, "disabled", void 0), n([t({
+})], u.prototype, "disabled", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), n([t({
+})], u.prototype, "mode", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], l.prototype, "dataAriaLabel", void 0), l = n([i("ds-toggle-switch")], l);
+})], u.prototype, "dataAriaLabel", void 0), u = r([a("ds-toggle-switch")], u);
 //#endregion

package/dist-react/esm/decorators/customUiKitElement.js

@@ -15,7 +15,7 @@ function n(n, r) {
 				this.componentName = o;
 			}
 			connectedCallback() {
-				i.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.119");
+				i.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.121");
 			}
 		});
 	};

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

@@ -25,7 +25,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.119"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.121"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

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

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.119"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.121"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,