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

package/dist/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/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/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/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/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/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/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/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/esm/decorators/customUiKitElement.js

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

package/dist/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/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,

package/dist/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.121/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/esm/utils/componentFactory.js

@@ -55,6 +55,9 @@ var a = n(`ds-icon${i}`), o = n(`ds-calendar-day${i}`), s = n(`ds-button${i}`),
                 rel=${n?.rel}
                 target=${n?.target}
                 data-testid=${n?.["data-testid"]}
+                base-variant=${t(n?.["base-variant"])}
+                custom-background=${t(n?.["custom-background"])}
+                custom-color=${t(n?.["custom-color"])}
             >
                 ${n.children}
             </ds-button>
@@ -83,6 +86,9 @@ var a = n(`ds-icon${i}`), o = n(`ds-calendar-day${i}`), s = n(`ds-button${i}`),
                 target=${n?.target}
                 data-testid=${n?.["data-testid"]}
                 data-aria-label=${n?.["data-aria-label"]}
+                base-variant=${t(n?.["base-variant"])}
+                custom-background=${t(n?.["custom-background"])}
+                custom-color=${t(n?.["custom-color"])}
             >
                 ${n.children}
             </ds-icon-button>
@@ -183,6 +189,9 @@ var a = n(`ds-icon${i}`), o = n(`ds-calendar-day${i}`), s = n(`ds-button${i}`),
                 rel=${e?.rel}
                 target=${e?.target}
                 data-testid=${e?.["data-testid"]}
+                base-variant=${t(e?.["base-variant"])}
+                custom-background=${t(e?.["custom-background"])}
+                custom-color=${t(e?.["custom-color"])}
             >
                 ${e.children}
             </${s}>
@@ -211,6 +220,9 @@ var a = n(`ds-icon${i}`), o = n(`ds-calendar-day${i}`), s = n(`ds-button${i}`),
                 target=${e?.target}
                 data-testid=${e?.["data-testid"]}
                 data-aria-label=${e?.["data-aria-label"]}
+                base-variant=${t(e?.["base-variant"])}
+                custom-background=${t(e?.["custom-background"])}
+                custom-color=${t(e?.["custom-color"])}
             >
                 ${e.children}
             </${l}>

package/dist/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-121"))}`;
 }
 //#endregion
 export { n as cssWithTokens };

package/dist/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-121"))}`;
 }
 //#endregion
 export { n as htmlWithTokens };

package/dist/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.121", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist/types/components/ds-button/ds-button.d.ts

@@ -1,5 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
-import { nothing } from 'lit';
+import { type PropertyValues, nothing } from 'lit';
 import type { DsButtonAttrs } from './ds-button.types';
 declare const DsButton_base: (new (...args: any[]) => import("../../mixins/ViewportMixin").ViewportInterface) & typeof UiKitElement;
 export declare class DsButton extends DsButton_base {
@@ -19,6 +19,9 @@ export declare class DsButton extends DsButton_base {
     fullWidth: DsButtonAttrs['full-width'];
     loading: DsButtonAttrs['loading'];
     textLoading: DsButtonAttrs['text-loading'];
+    baseVariant: DsButtonAttrs['base-variant'];
+    customBackground: DsButtonAttrs['custom-background'];
+    customColor: DsButtonAttrs['custom-color'];
     private closestForm;
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
@@ -36,6 +39,7 @@ export declare class DsButton extends DsButton_base {
     protected get iconTemplate(): any;
     protected get loadingTemplate(): typeof nothing | import("lit").TemplateResult<1>;
     protected get contentTemplate(): import("lit").TemplateResult<1>;
+    updated(changedProperties: PropertyValues): void;
     protected get cssTokens(): import("lit").HTMLTemplateResult;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/types/components/ds-button/ds-button.types.d.ts

@@ -23,8 +23,7 @@ type CustomElement = {
     target?: never;
 };
 type HtmlElement = Link | Button | CustomElement;
-export type DsButtonAttrs = {
-    variant?: string;
+type SharedButtonAttrs = {
     mode?: 'dark' | 'light';
     disabled?: boolean;
     destructive?: boolean;
@@ -37,5 +36,19 @@ export type DsButtonAttrs = {
     'full-width'?: boolean;
     loading?: boolean;
     'text-loading'?: string;
-} & HtmlElement & CommonAttrs;
+};
+export type DsButtonStandardVariant = 'primary' | 'secondary' | 'tertiary' | 'naked';
+type StandardVariantAttrs = {
+    variant?: DsButtonStandardVariant;
+    'base-variant'?: never;
+    'custom-background'?: never;
+    'custom-color'?: never;
+};
+type CustomVariantAttrs = {
+    variant: 'custom';
+    'base-variant'?: DsButtonStandardVariant;
+    'custom-background'?: string;
+    'custom-color'?: string;
+};
+export type DsButtonAttrs = (StandardVariantAttrs | CustomVariantAttrs) & SharedButtonAttrs & HtmlElement & CommonAttrs;
 export {};