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

package/dist-react/cjs/utils/cssWithTokens.cjs

@@ -1 +1 @@
-const e=require(`../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);function t(t,...n){return e.i`${e.r(String.raw({raw:t},...n).replace(/(--private-[\w-]+)(?=\s*[):,])/g,`$1-v2-0-0-canary-119`))}`}exports.cssWithTokens=t;
+const e=require(`../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);function t(t,...n){return e.i`${e.r(String.raw({raw:t},...n).replace(/(--private-[\w-]+)(?=\s*[):,])/g,`$1-v2-0-0-canary-120`))}`}exports.cssWithTokens=t;

package/dist-react/cjs/utils/htmlWithTokens.cjs

@@ -1 +1 @@
-const e=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.cjs`);function n(n,...r){return e.x`${t.o(String.raw({raw:n},...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g,`$1-v2-0-0-canary-119`))}`}exports.htmlWithTokens=n;
+const e=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.cjs`);require(`../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.cjs`);function n(n,...r){return e.x`${t.o(String.raw({raw:n},...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g,`$1-v2-0-0-canary-120`))}`}exports.htmlWithTokens=n;

package/dist-react/cjs/utils/version.cjs

@@ -1 +1 @@
-var e=`2.0.0-canary.119`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+var e=`2.0.0-canary.120`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

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-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.120", 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.120");
 			}
 		});
 	};

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.120"), 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.120"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

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

@@ -4,7 +4,7 @@ var t = e(20), n = class e {
 	constructor() {
 		this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
 			if (!n || !e) return;
-			let r = `https://ds-assets.cupra.com/2.0.0-canary.119/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
+			let r = `https://ds-assets.cupra.com/2.0.0-canary.120/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
 			if (i) return i;
 			let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
 			return this.stylePromises.set(r, a), this.stylePromises.get(r);

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

@@ -2,7 +2,7 @@ import { i as e, r as t } from "../node_modules/.pnpm/@lit_reactive-element@2.1.
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/utils/cssWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-119"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-120"))}`;
 }
 //#endregion
 export { n as cssWithTokens };

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

@@ -4,7 +4,7 @@ import { o as t } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-ht
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
 //#region src/utils/htmlWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-119"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-120"))}`;
 }
 //#endregion
 export { n as htmlWithTokens };

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

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.119", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.120", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

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

@@ -6,7 +6,10 @@ export declare class DsCheckbox extends DsCheckbox_base {
     name: DsCheckboxAttrs['name'];
     value: DsCheckboxAttrs['value'];
     inputPlacement: DsCheckboxAttrs['input-placement'];
-    checked: DsCheckboxAttrs['checked'];
+    _checked: DsCheckboxAttrs['checked'];
+    private _checkedState;
+    get checked(): boolean;
+    set checked(value: boolean | undefined);
     required: DsCheckboxAttrs['required'];
     _disabled: DsCheckboxAttrs['disabled'];
     mode: DsCheckboxAttrs['mode'];

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

@@ -7,7 +7,10 @@ export declare class DsDialog extends UiKitElement {
     protected componentFactory: ComponentFactory;
     lockClose: DsDialogAttrs['lock-close'];
     lockScroll: DsDialogAttrs['lock-scroll'];
-    open: DsDialogAttrs['open'];
+    _open: DsDialogAttrs['open'];
+    private _openState;
+    get open(): boolean;
+    set open(value: DsDialogAttrs['open']);
     size: DsDialogAttrs['size'];
     dataAriaLabel: DsDialogAttrs['data-aria-label'];
     dataAriaDescription: DsDialogAttrs['data-aria-description'];

package/dist-react/types/components/ds-dialog-fullscreen/ds-dialog-fullscreen.d.ts

@@ -5,7 +5,10 @@ export declare class DsDialogFullscreen extends UiKitElement {
     static styles: import("lit").CSSResult[];
     lockClose: DsDialogFullscreenAttrs['lock-close'];
     lockScroll: DsDialogFullscreenAttrs['lock-scroll'];
-    open: DsDialogFullscreenAttrs['open'];
+    _open: DsDialogFullscreenAttrs['open'];
+    private _openState;
+    get open(): boolean;
+    set open(value: DsDialogFullscreenAttrs['open']);
     hasScroll: boolean;
     private hasBeenOpened;
     protected content: HTMLInputElement;

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

@@ -3,7 +3,10 @@ import { PropertyValues } from 'lit';
 import type { DsDrawerAttrs } from './ds-drawer.types.ts';
 export declare class DsDrawer extends UiKitElement {
     static styles: import("lit").CSSResult[];
-    open: DsDrawerAttrs['open'];
+    _open: DsDrawerAttrs['open'];
+    private _openState;
+    get open(): boolean;
+    set open(value: DsDrawerAttrs['open']);
     private get classes();
     private handleOverlayClick;
     private handleKeyDown;

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

@@ -1,4 +1,4 @@
 import { CommonAttrs } from '../../types/types';
 export interface DsDrawerAttrs extends CommonAttrs {
-    open: boolean;
+    open?: boolean;
 }

package/dist-react/types/components/ds-media-control/ds-media-control.d.ts

@@ -2,7 +2,10 @@ import { UiKitElement } from '../base/UiKitElement.ts';
 import type { DsMediaControlAttrs } from './ds-media-control.types.ts';
 export declare class DsMediaControl extends UiKitElement {
     static styles: import("lit").CSSResult[];
-    state: DsMediaControlAttrs['state'];
+    _state: DsMediaControlAttrs['state'];
+    private _stateValue;
+    get state(): DsMediaControlAttrs['state'];
+    set state(value: DsMediaControlAttrs['state']);
     size: DsMediaControlAttrs['size'];
     progress: DsMediaControlAttrs['progress'];
     private get normalizedProgress();

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

@@ -3,7 +3,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 import type { DsTabsAttrs } from './ds-tabs.types';
 export declare class DsTabs extends UiKitElement {
     static styles: import("lit").CSSResult[];
-    selectedTab: DsTabsAttrs['selected-tab'];
+    _selectedTab: DsTabsAttrs['selected-tab'];
+    private _selectedTabState;
+    get selectedTab(): number;
+    set selectedTab(value: DsTabsAttrs['selected-tab']);
     mode: DsTabsAttrs['mode'];
     variant: string;
     size: DsTabsAttrs['size'];