@cupra/ui-kit 2.0.0-canary.131 → 2.0.0-canary.133

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

@@ -5,12 +5,12 @@ import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mod
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.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 { s as a, u as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
-import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
-import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 { s as c, u as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
 import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
 import { objectConverter as d } from "../../utils/objectConverter.js";
 import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
@@ -51,12 +51,12 @@ var m = new Set([
 		};
 	}
 	render() {
-		let t = (this.htmlTagName ?? "").toLowerCase(), n = a(m.has(t) ? t : "span");
-		return o`
+		let t = (this.htmlTagName ?? "").toLowerCase(), n = c(m.has(t) ? t : "span");
+		return l`
             <${n} 
                 part="container" 
                 data-testid="ds-text-container" 
-                class=${l(this.classes)}
+                class=${s(this.classes)}
                 style=${f({ color: this.color || "var(--ui-kit-private-text-color)" })}
             >
                 ${this.value ? this.value : e}
@@ -79,10 +79,10 @@ r([t({
 	reflect: !0
 })], h.prototype, "color", void 0), r([t({
 	type: Boolean,
-	converter: c,
+	converter: o,
 	reflect: !0
 })], h.prototype, "uppercase", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], h.prototype, "slotedNodes", void 0), h = r([s("ds-text")], h);
+})], h.prototype, "slotedNodes", void 0), h = r([a("ds-text")], h);
 //#endregion

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

@@ -5,13 +5,17 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.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 { uiKitHtml as o } from "../../utils/uiKitHtml.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 { inputStatesMixin as s } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as c } from "../../utils/validateMaxLength.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+import { o as c } 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 "../ds-icon-button/ds-icon-button.js";
+import { inputStatesMixin as l } from "../../mixins/inputStatesMixin.js";
+import { validateMaxLength as u } from "../../utils/validateMaxLength.js";
+import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-text-input/ds-text-input.ts
-var u = class extends s(i) {
+var f = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.keyboardMode = !1, this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelRemoveButton = "", this.handleClickIcon = () => {
 			this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
@@ -21,7 +25,7 @@ var u = class extends s(i) {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	get classes() {
 		return {
@@ -38,7 +42,7 @@ var u = class extends s(i) {
 	}
 	render() {
 		return t`
-            <div class=${o(this.classes)}>
+            <div class=${s(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.iconTemplate}
@@ -54,19 +58,19 @@ var u = class extends s(i) {
         `;
 	}
 	get iconTemplate() {
-		return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : this.componentFactory.createIconButton({
-			class: "icon-button",
-			"icon-name": "cross",
-			size: this.size,
-			disabled: !!this.nativeInput?.disabled,
-			variant: "naked",
-			"@click": this.handleClickIcon,
-			"data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-		});
+		return !this.nativeInput?.value?.length || this.inputStates.readonly ? e : o`<ds-icon-button
+            class="icon-button"
+            icon-name="cross"
+            size=${c(this.size)}
+            ?disabled=${!!this.nativeInput?.disabled}
+            variant="naked"
+            @click=${this.handleClickIcon}
+            data-aria-label=${this.dataAriaLabelRemoveButton || "remove button"}
+        ></ds-icon-button>`;
 	}
 	get lengthTemplate() {
 		let n = this.nativeInput?.maxLength?.toString();
-		return c(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
+		return u(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
 	}
 	get helperTextTemplate() {
 		return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? e : t`<span class="support-text helper-text">${this.helperText}</span>`;
@@ -81,21 +85,21 @@ var u = class extends s(i) {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? e : t`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
 };
-r([n({ type: String })], u.prototype, "size", void 0), r([n({
+r([n({ type: String })], f.prototype, "size", void 0), r([n({
 	type: String,
 	attribute: "helper-text"
-})], u.prototype, "helperText", void 0), r([n({
+})], f.prototype, "helperText", void 0), r([n({
 	type: String,
 	attribute: "forced-error"
-})], u.prototype, "forcedError", void 0), r([n({
+})], f.prototype, "forcedError", void 0), r([n({
 	type: String,
 	attribute: "invalid-error"
-})], u.prototype, "invalidError", void 0), r([n({
+})], f.prototype, "invalidError", void 0), r([n({
 	type: String,
 	attribute: "readonly-text"
-})], u.prototype, "readonlyText", void 0), r([n({
+})], f.prototype, "readonlyText", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], u.prototype, "dataAriaLabelRemoveButton", void 0), u = r([a("ds-text-input")], u);
+})], f.prototype, "dataAriaLabelRemoveButton", void 0), f = r([a("ds-text-input")], f);
 //#endregion
-export { u as DsTextInput };
+export { f as DsTextInput };

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.131", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
+			let n = "/2.0.0-canary.133", 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-toast/ds-toast.js

@@ -6,24 +6,28 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.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 { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { o as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
-import { toastManager as l } from "./utils/ToastManager.js";
-import { c as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { e as l } 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 u } 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 { toastManager as d } from "./utils/ToastManager.js";
+import "../ds-toast-message/ds-toast-message.js";
+import { c as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/repeat.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/repeat.js";
-import { containerStyles as d, toastStyles as f } from "./styles/common.styles.js";
+import { containerStyles as p, toastStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-toast/ds-toast.ts
-var p = class extends a {
+var h = class extends a {
 	constructor(...e) {
 		super(...e), this.position = "top-right", this.toasts = [], this.unsubscribe = null;
 	}
 	static {
-		this.styles = [d, f];
+		this.styles = [p, m];
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.unsubscribe = l.subscribe((e) => {
+		super.connectedCallback(), this.unsubscribe = d.subscribe((e) => {
 			this.toasts = e;
 		});
 	}
@@ -34,7 +38,7 @@ var p = class extends a {
 		let t = e.target;
 		if (t.classList.contains("exiting") && (e.animationName === "toast-out-left" || e.animationName === "toast-out-right")) {
 			let e = t.getAttribute("data-id");
-			e && l.removeToast(e);
+			e && d.removeToast(e);
 		}
 	}
 	getToastMessageTemplate(n) {
@@ -47,16 +51,16 @@ var p = class extends a {
 			let e = document.querySelector(`[data-id="${n.referenceId}"]`);
 			if (e) {
 				let t = e.cloneNode(!0);
-				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = c(t.outerHTML);
+				t.setAttribute("data-template", "false"), t.setAttribute("data-id", n.id), i = s(t.outerHTML);
 			}
-		} else i = this.componentFactory.createToastMessage({
-			"data-id": n.id,
-			"data-template": !1,
-			title: n.title,
-			text: n.text,
-			status: n.status
-		});
-		return t`<div class=${s(r)} data-id="${n.id}">${i}</div>`;
+		} else i = c`<ds-toast-message
+                data-id=${n.id}
+                data-template="false"
+                title=${u(n.title)}
+                text=${u(n.text)}
+                status=${u(n.status)}
+            ></ds-toast-message>`;
+		return t`<div class=${l(r)} data-id="${n.id}">${i}</div>`;
 	}
 	get containerClasses() {
 		return {
@@ -68,14 +72,14 @@ var p = class extends a {
 		return t`
             <div
                 part="toast-container"
-                class=${s(this.containerClasses)}
+                class=${l(this.containerClasses)}
                 @animationend=${this.handleAnimationEnd}
                 aria-live="polite"
             >
-                ${u(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
+                ${f(this.toasts, (e) => e.id, (e) => this.getToastMessageTemplate(e))}
             </div>
         `;
 	}
 };
-i([n({ type: String })], p.prototype, "position", void 0), i([r()], p.prototype, "toasts", void 0), p = i([o("ds-toast")], p);
+i([n({ type: String })], h.prototype, "position", void 0), i([r()], h.prototype, "toasts", void 0), h = i([o("ds-toast")], h);
 //#endregion

package/dist/esm/components/ds-toast-message/ds-toast-message.js

@@ -5,18 +5,23 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.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 "../ds-icon/ds-icon.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 { uiKitHtml as s } from "../../utils/uiKitHtml.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 { n as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { toastMessageStyles as l } from "./styles/common.styles.js";
+import { o as l } 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 { n as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { toastMessageStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-toast-message/ds-toast-message.ts
-var u = class extends i {
+var f = class extends i {
 	constructor(...e) {
 		super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	getIconName() {
 		switch (this.status) {
@@ -42,29 +47,25 @@ var u = class extends i {
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.getIconName(),
-			size: 24
-		});
+		return s`<ds-icon class="icon" icon-name=${l(this.getIconName())} size="24"></ds-icon>`;
 	}
 	get closeButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			"icon-name": "cross",
-			variant: "naked",
-			size: "medium"
-		});
+		return s`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>`;
 	}
 	render() {
 		return this.dataTemplate ? e : t`
-            <div class=${s(this.toastMessageClasses)}>
+            <div class=${c(this.toastMessageClasses)}>
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${c(this.title, () => t`<div class="title">${this.title}</div>`)}
-                        ${c(this.text, () => t`<div class="message">${this.text}</div>`)}
+                        ${u(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${u(this.text, () => t`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
@@ -73,15 +74,14 @@ var u = class extends i {
         `;
 	}
 };
-r([n({ type: String })], u.prototype, "status", void 0), r([n({
+r([n({ type: String })], f.prototype, "status", void 0), r([n({
 	type: String,
 	attribute: "data-id",
 	reflect: !0
-})], u.prototype, "dataId", void 0), r([n({ type: String })], u.prototype, "title", void 0), r([n({ type: String })], u.prototype, "text", void 0), r([n({
+})], f.prototype, "dataId", void 0), r([n({ type: String })], f.prototype, "title", void 0), r([n({ type: String })], f.prototype, "text", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "data-template",
 	reflect: !0
-})], u.prototype, "dataTemplate", void 0), u = r([a("ds-toast-message")], u);
+})], f.prototype, "dataTemplate", void 0), f = r([a("ds-toast-message")], f);
 //#endregion
-export { u as DsToastMessage };

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

@@ -11,8 +11,8 @@ import { customUiKitElement as c } from "../../decorators/customUiKitElement.js"
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
 import { e as u } 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 { debounce as d } from "../../utils/debounce.js";
-import { arrow as f, computePosition as p, flip as m, offset as h, shift as g, size as _ } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { arrow as d, computePosition as f, flip as p, offset as m, shift as h, size as g } from "../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { debounce as _ } from "../../utils/debounce.js";
 import { commonStyles as v } from "./styles/common.styles.js";
 //#region src/components/ds-tooltip/ds-tooltip.ts
 var y = class extends s {
@@ -23,7 +23,7 @@ var y = class extends s {
 			this.usingKeyboard = !1;
 		}, this.handleTooltipPointerDown = (e) => {
 			e.stopImmediatePropagation();
-		}, this.handleResize = d({ func: () => this.requestUpdate() }), this.handleClose = () => {
+		}, this.handleResize = _({ func: () => this.requestUpdate() }), this.handleClose = () => {
 			this.show = !1;
 		}, this.handleAnchorPointerDown = (e) => {
 			this.disablePressListener || e.button === 0 && (this.show = !this.show);
@@ -50,22 +50,22 @@ var y = class extends s {
 		super.disconnectedCallback(), this.container?.matches(":popover-open") && this.container.hidePopover(), window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handlePointerDown);
 	}
 	updated(e) {
-		document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handlePointerDown), this.show && this.container?.isConnected && !this.container.matches(":popover-open") ? this.container.showPopover() : !this.show && this.container?.isConnected && this.container.matches(":popover-open") && this.container.hidePopover(), this.updatePosition(), e.has("show") && (this.show ? (window.addEventListener("resize", this.handleResize), document.addEventListener("pointerdown", this.handlePressOutside)) : (window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside)));
+		super.updated(e), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handlePointerDown), this.show && this.container?.isConnected && !this.container.matches(":popover-open") ? this.container.showPopover() : !this.show && this.container?.isConnected && this.container.matches(":popover-open") && this.container.hidePopover(), this.updatePosition(), e.has("show") && (this.show ? (window.addEventListener("resize", this.handleResize), document.addEventListener("pointerdown", this.handlePressOutside)) : (window.removeEventListener("resize", this.handleResize), document.removeEventListener("pointerdown", this.handlePressOutside)));
 	}
 	updatePosition() {
 		requestAnimationFrame(() => {
-			!this.anchorContainer || !this.container || !this.show || !this.anchorElements?.[0] || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (p(this.anchorContainer, this.container, {
+			!this.anchorContainer || !this.container || !this.show || !this.anchorElements?.[0] || !(this.anchorContainer instanceof Element) || !(this.container instanceof Element) || !(this.arrow instanceof Element) || (f(this.anchorContainer, this.container, {
 				strategy: "fixed",
 				placement: "bottom-start",
 				middleware: [
-					m(),
-					g(),
-					h({
+					p(),
+					h(),
+					m({
 						mainAxis: 8,
 						crossAxis: -8
 					}),
-					f({ element: this.arrow }),
-					_({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
+					d({ element: this.arrow }),
+					g({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
 						Object.assign(n.floating.style, {
 							maxWidth: `${Math.min(240, e - 8)}px`,
 							maxHeight: `${Math.max(0, t - 8)}px`
@@ -207,4 +207,3 @@ o([n({
 	attribute: "disable-press-listener"
 })], y.prototype, "disablePressListener", void 0), o([r()], y.prototype, "tooltopPlacement", void 0), o([r()], y.prototype, "tooltipId", void 0), o([i(".container")], y.prototype, "container", void 0), o([i("#button")], y.prototype, "anchorContainer", void 0), o([i("#arrow")], y.prototype, "arrow", void 0), o([a({ slot: "" })], y.prototype, "anchorElements", void 0), o([a({ slot: "header" })], y.prototype, "headerElements", void 0), o([a({ slot: "close-button" })], y.prototype, "closeButtonElements", void 0), o([a({ slot: "content" })], y.prototype, "contentElements", void 0), y = o([c("ds-tooltip")], y);
 //#endregion
-export { y as DsTooltip };

package/dist/esm/components/index.js

@@ -1,15 +1,19 @@
+import "./ds-icon/ds-icon.js";
 import "./ds-accordion/ds-accordion.js";
 import "./ds-avatar/ds-avatar.js";
 import "./ds-badge/ds-badge.js";
 import "./ds-basic-card/ds-basic-card.js";
 import "./ds-basic-card-image/ds-basic-card-image.js";
+import "./ds-divider/ds-divider.js";
 import "./ds-basic-card-header/ds-basic-card-header.js";
 import "./ds-basic-card-section/ds-basic-card-section.js";
+import "./ds-tooltip/ds-tooltip.js";
 import "./ds-breadcrumbs-item/ds-breadcrumbs-item.js";
 import "./ds-breadcrumbs/ds-breadcrumbs.js";
 import "./ds-bullets/ds-bullets.js";
 import "./ds-button/ds-button.js";
 import "./ds-calendar-day/ds-calendar-day.js";
+import "./ds-icon-button/ds-icon-button.js";
 import "./ds-calendar/ds-calendar.js";
 import "./ds-carousel-indicator/ds-carousel-indicator.js";
 import "./ds-checkbox-group/ds-checkbox-group.js";
@@ -23,12 +27,9 @@ import "./ds-dialog-body/ds-dialog-body.js";
 import "./ds-dialog-footer/ds-dialog-footer.js";
 import "./ds-dialog-fullscreen/ds-dialog-fullscreen.js";
 import "./ds-dialog-header/ds-dialog-header.js";
-import "./ds-divider/ds-divider.js";
 import "./ds-drawer/ds-drawer.js";
 import "./ds-favourite-action/ds-favourite-action.js";
 import "./ds-hyperlink/ds-hyperlink.js";
-import "./ds-icon/ds-icon.js";
-import "./ds-icon-button/ds-icon-button.js";
 import "./ds-input/ds-input.js";
 import "./ds-interactive-card/ds-interactive-card.js";
 import "./ds-link-button/ds-link-button.js";
@@ -66,12 +67,11 @@ import "./ds-tag/ds-tag.js";
 import "./ds-text/ds-text.js";
 import "./ds-textarea/ds-textarea.js";
 import "./ds-theme-provider/ds-theme-provider.js";
-import "./ds-toast/ds-toast.js";
 import "./ds-toast-message/ds-toast-message.js";
+import "./ds-toast/ds-toast.js";
 import "./ds-inline-alert/ds-inline-alert.js";
 import "./ds-toggle-button/ds-toggle-button.js";
 import "./ds-toggle-switch/ds-toggle-switch.js";
-import "./ds-tooltip/ds-tooltip.js";
 import "./ds-value-unit/ds-value-unit.js";
 import "./ds-media-control/ds-media-control.js";
 import "./ds-list-item/ds-list-item.js";

package/dist/esm/decorators/customUiKitElement.js

@@ -1,24 +1,20 @@
-import { VERSION_TAG_SUFFIX as e } from "../utils/version.js";
-import { reactFactory as t, standardFactory as n } from "../utils/componentFactory.js";
+import "../utils/version.js";
 //#region src/decorators/customUiKitElement.ts
-function r(r, i) {
-	return function(a) {
-		if (!a?.prototype) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
-		let o = typeof __UIKIT_TARGET__ < "u" && __UIKIT_TARGET__ === "react", s = o ? `${r}${e}` : r;
-		if (globalThis?.customElements?.get(s)) return;
-		let c = i?.skipTagAsComponentName ? [] : [r];
-		Array.isArray(i?.extendComponentNames) && (c = [...i.extendComponentNames, ...c]), globalThis?.customElements?.define?.(s, class extends a {
-			constructor(...e) {
-				super(...e), this.componentFactory = o ? t : n;
-			}
+function e(e, t) {
+	return function(n) {
+		if (!n?.prototype) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
+		let r = e;
+		if (globalThis?.customElements?.get(r)) return;
+		let i = t?.skipTagAsComponentName ? [] : [e];
+		Array.isArray(t?.extendComponentNames) && (i = [...t.extendComponentNames, ...i]), globalThis?.customElements?.define?.(r, class extends n {
 			static {
-				this.componentName = c;
+				this.componentName = i;
 			}
 			connectedCallback() {
-				a.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.131");
+				n.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.133");
 			}
 		});
 	};
 }
 //#endregion
-export { r as customUiKitElement };
+export { e as customUiKitElement };

package/dist/esm/mixins/ViewportMixin.js

@@ -1,27 +1,27 @@
-import { breakpoints as e } from "../utils/breakpoints.js";
-import { debounce as t } from "../utils/debounce.js";
+import { debounce as e } from "../utils/debounce.js";
+import { breakpoints as t } from "../utils/breakpoints.js";
 //#region src/mixins/ViewportMixin.ts
 var n = (n) => class extends n {
-	constructor(...t) {
-		super(...t), this.handleResize = () => {
+	constructor(...e) {
+		super(...e), this.handleResize = () => {
 			this.updateViewportWithDebounce();
 		}, this.updateViewport = () => {
-			let t = "xs";
+			let e = "xs";
 			for (let n of [
 				"xxl",
 				"xl",
 				"l",
 				"m",
 				"s"
-			]) if (window?.innerWidth >= e[n]) {
-				t = n;
+			]) if (window?.innerWidth >= t[n]) {
+				e = n;
 				break;
 			}
-			t !== this.currentViewport && (this.currentViewport = t, this.requestUpdate("viewport", null));
+			e !== this.currentViewport && (this.currentViewport = e, this.requestUpdate("viewport", null));
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.updateViewportWithDebounce = t({ func: this.updateViewport }), this.updateViewport(), window?.addEventListener("resize", this.handleResize);
+		super.connectedCallback(), this.updateViewportWithDebounce = e({ func: this.updateViewport }), this.updateViewport(), window?.addEventListener("resize", this.handleResize);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), window?.removeEventListener("resize", this.handleResize);

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.131"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.133"), 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.131"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.133"), 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.131/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
+			let r = `https://ds-assets.cupra.com/2.0.0-canary.133/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/uiKitHtml.js

@@ -0,0 +1,9 @@
+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 "./version.js";
+//#region src/utils/uiKitHtml.ts
+function t(t, ...n) {
+	return e(t, ...n);
+}
+//#endregion
+export { t as uiKitHtml };

package/dist/esm/utils/version.js

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

package/dist/types/components/base/UiKitElement.d.ts

@@ -1,8 +1,6 @@
 import { type Theme } from '../ds-theme-provider/themeContext';
-import { ComponentFactory } from '../../utils/componentFactory.ts';
 import { LitElement, PropertyValues } from 'lit';
 export declare class UiKitElement extends LitElement {
-    protected componentFactory: ComponentFactory;
     protected contextTheme?: Theme;
     protected pubSubTheme: Theme;
     static componentName?: string;

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

@@ -1,6 +1,7 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
 import type { DsAccordionAttrs } from '../ds-accordion/ds-accordion.types';
-import { type PropertyValues } from 'lit';
+import '../ds-icon/ds-icon.ts';
+import { type PropertyValues, nothing } from 'lit';
 export declare class DsAccordion extends UiKitElement {
     static styles: import("lit").CSSResult[];
     maxHeight: DsAccordionAttrs['max-height'];
@@ -20,8 +21,8 @@ export declare class DsAccordion extends UiKitElement {
         [x: string]: boolean;
         divider: boolean;
     };
-    protected get openIconTemplate(): any;
-    protected get closeIconTemplate(): any;
+    protected get openIconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
+    protected get closeIconTemplate(): typeof nothing | import("lit").HTMLTemplateResult;
     protected get styleTokens(): import("lit").TemplateResult<1>;
     protected handleKeyDown(event: KeyboardEvent): void;
     protected handleToggle(event: ToggleEvent): void;

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

@@ -1,4 +1,5 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-icon/ds-icon.ts';
 import { DsAvatarAttrs } from './ds-avatar.types.ts';
 export declare class DsAvatar extends UiKitElement {
     static styles: import("lit").CSSResult[];
@@ -6,7 +7,7 @@ export declare class DsAvatar extends UiKitElement {
     name: DsAvatarAttrs['name'];
     disabled: boolean;
     private assignedImages?;
-    protected get iconTemplate(): any;
+    protected get iconTemplate(): import("lit").HTMLTemplateResult;
     protected get initialsTemplate(): import("lit").TemplateResult<1>;
     private getInitialsFromName;
     private get classes();

package/dist/types/components/ds-basic-card-header/ds-basic-card-header.d.ts

@@ -1,7 +1,8 @@
 import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-divider/ds-divider.ts';
 export declare class DsBasicCardHeader extends UiKitElement {
     static styles: import("lit").CSSResult[];
-    protected get dividerTemplate(): any;
+    protected get dividerTemplate(): import("lit").HTMLTemplateResult;
     private get classes();
     render(): import("lit").TemplateResult<1>;
 }