@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.232

package/dist/esm/components/ds-value-unit/styles/cupra-diagonal.styles.js

@@ -0,0 +1,192 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-value-unit/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit {
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Container gap per size                                             */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-colossal) {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-huge) {
+        gap: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-big),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-large) {
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-medium),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-small),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-micro),
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:has(.size-nano) {
+        gap: var(--ds-spacing-s-2);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font sizes                                                   */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-colossal {
+        font-size: var(--ds-typography-size-currency-colossal);
+        line-height: var(--ds-typography-height-currency-colossal);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-huge {
+        font-size: var(--ds-typography-size-currency-huge);
+        line-height: var(--ds-typography-height-currency-huge);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-big {
+        font-size: var(--ds-typography-size-currency-big);
+        line-height: var(--ds-typography-height-currency-big);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-large {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-medium {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-small {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-micro {
+        font-size: var(--ds-typography-size-currency-micro);
+        line-height: var(--ds-typography-height-currency-micro);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font weights                                                 */
+    /* ------------------------------------------------------------------ */
+
+    /* value-weight="regular": uses "regular" weight (400 in Cupra) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* value-weight="light": uses "light" weight (300) for most sizes */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-colossal,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-huge,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-large,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-medium,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-small {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* value-weight="light" micro/nano: uses "book" weight (350 in Cupra) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .value.value-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font sizes                                                    */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-colossal {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-huge {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-large {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-medium {
+        font-size: var(--ds-typography-size-currency-tiny);
+        line-height: var(--ds-typography-height-currency-tiny);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-small,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font weights                                                  */
+    /* ------------------------------------------------------------------ */
+
+    /* unit-weight="light": uses "light" for large sizes (colossal-large) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-colossal,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-huge,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-large {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* unit-weight="light": uses "book" for small sizes (medium-nano) */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-medium,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-small,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-micro,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* unit-weight="regular": uses "regular" for all sizes */
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit bottom padding (baseline alignment) — unit-weight="light"     */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-colossal {
+        padding-bottom: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-huge {
+        padding-bottom: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-large {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-medium {
+        padding-bottom: var(--ds-spacing-s-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .unit.unit-weight-light.size-small {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-value-unit/styles/cupra.styles.js

@@ -0,0 +1,104 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-value-unit/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        gap: var(--ds-spacing-s-2);
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value,
+    :host([data-ui-kit-theme='cupra']) .unit {
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    /* Value styles - Regular weight */
+    :host([data-ui-kit-theme='cupra']) .value.weight-regular {
+        font-weight: var(--ds-typography-weight-currency-secondary);
+    }
+
+    /* Value styles - Light weight */
+    :host([data-ui-kit-theme='cupra']) .value.weight-light {
+        font-weight: var(--ds-typography-weight-currency-quaternary);
+    }
+
+    /* Value sizes */
+    :host([data-ui-kit-theme='cupra']) .value.size-colossal {
+        font-size: var(--ds-typography-size-currency-colossal);
+        line-height: var(--ds-typography-height-currency-colossal);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value.size-huge {
+        font-size: var(--ds-typography-size-currency-huge);
+        line-height: var(--ds-typography-height-currency-huge);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value.size-big {
+        font-size: var(--ds-typography-size-currency-big);
+        line-height: var(--ds-typography-height-currency-big);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value.size-large {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value.size-medium {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .value.size-small {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    /* Unit styles - Light weight for colossal, huge, big, large */
+    :host([data-ui-kit-theme='cupra']) .unit.size-colossal,
+    :host([data-ui-kit-theme='cupra']) .unit.size-huge,
+    :host([data-ui-kit-theme='cupra']) .unit.size-big,
+    :host([data-ui-kit-theme='cupra']) .unit.size-large {
+        font-weight: var(--ds-typography-weight-currency-quaternary);
+    }
+
+    /* Unit styles - Book weight for medium, small */
+    :host([data-ui-kit-theme='cupra']) .unit.size-medium,
+    :host([data-ui-kit-theme='cupra']) .unit.size-small {
+        font-weight: var(--ds-typography-weight-currency-tertiary);
+    }
+
+    /* Unit sizes - mapped to smaller typography tokens */
+    :host([data-ui-kit-theme='cupra']) .unit.size-colossal {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .unit.size-huge {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .unit.size-big {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .unit.size-large {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .unit.size-medium {
+        font-size: var(--ds-typography-size-currency-tiny);
+        line-height: var(--ds-typography-height-currency-tiny);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .unit.size-small {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist/esm/components/ds-value-unit/styles/seat.styles.js

@@ -0,0 +1,192 @@
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+//#region src/components/ds-value-unit/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value,
+    :host([data-ui-kit-theme='seat']) .unit {
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Container gap per size                                             */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='seat']) .container:has(.size-colossal) {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:has(.size-huge) {
+        gap: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:has(.size-big),
+    :host([data-ui-kit-theme='seat']) .container:has(.size-large) {
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:has(.size-medium),
+    :host([data-ui-kit-theme='seat']) .container:has(.size-small),
+    :host([data-ui-kit-theme='seat']) .container:has(.size-micro),
+    :host([data-ui-kit-theme='seat']) .container:has(.size-nano) {
+        gap: var(--ds-spacing-s-2);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font sizes                                                   */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='seat']) .value.size-colossal {
+        font-size: var(--ds-typography-size-currency-colossal);
+        line-height: var(--ds-typography-height-currency-colossal);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-huge {
+        font-size: var(--ds-typography-size-currency-huge);
+        line-height: var(--ds-typography-height-currency-huge);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-big {
+        font-size: var(--ds-typography-size-currency-big);
+        line-height: var(--ds-typography-height-currency-big);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-large {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-medium {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-small {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-micro {
+        font-size: var(--ds-typography-size-currency-micro);
+        line-height: var(--ds-typography-height-currency-micro);
+    }
+
+    :host([data-ui-kit-theme='seat']) .value.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Value font weights                                                 */
+    /* ------------------------------------------------------------------ */
+
+    /* value-weight="regular": uses "regular" weight (400 in Cupra) */
+    :host([data-ui-kit-theme='seat']) .value.value-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* value-weight="light": uses "light" weight (300) for most sizes */
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-colossal,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-huge,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-big,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-large,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-medium,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-small {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* value-weight="light" micro/nano: uses "book" weight (350 in Cupra) */
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-micro,
+    :host([data-ui-kit-theme='seat']) .value.value-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font sizes                                                    */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='seat']) .unit.size-colossal {
+        font-size: var(--ds-typography-size-currency-large);
+        line-height: var(--ds-typography-height-currency-large);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.size-huge {
+        font-size: var(--ds-typography-size-currency-medium);
+        line-height: var(--ds-typography-height-currency-medium);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.size-big,
+    :host([data-ui-kit-theme='seat']) .unit.size-large {
+        font-size: var(--ds-typography-size-currency-small);
+        line-height: var(--ds-typography-height-currency-small);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.size-medium {
+        font-size: var(--ds-typography-size-currency-tiny);
+        line-height: var(--ds-typography-height-currency-tiny);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.size-small,
+    :host([data-ui-kit-theme='seat']) .unit.size-micro,
+    :host([data-ui-kit-theme='seat']) .unit.size-nano {
+        font-size: var(--ds-typography-size-currency-nano);
+        line-height: var(--ds-typography-height-currency-nano);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit font weights                                                  */
+    /* ------------------------------------------------------------------ */
+
+    /* unit-weight="light": uses "light" for large sizes (colossal-large) */
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-colossal,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-huge,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-large {
+        font-weight: var(--ds-typography-weight-currency-display-primary);
+    }
+
+    /* unit-weight="light": uses "book" for small sizes (medium-nano) */
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-medium,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-small,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-micro,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-nano {
+        font-weight: var(--ds-typography-weight-currency-data-secondary);
+    }
+
+    /* unit-weight="regular": uses "regular" for all sizes */
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-regular {
+        font-weight: var(--ds-typography-weight-currency-data-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Unit bottom padding (baseline alignment) — unit-weight="light"     */
+    /* ------------------------------------------------------------------ */
+
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-colossal {
+        padding-bottom: var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-huge {
+        padding-bottom: var(--ds-spacing-s-4);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-big,
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-large {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-medium {
+        padding-bottom: var(--ds-spacing-s-2);
+    }
+
+    :host([data-ui-kit-theme='seat']) .unit.unit-weight-light.size-small {
+        padding-bottom: var(--ds-spacing-s-3);
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist/esm/decorators/customUiKitElement.js

@@ -1,18 +1,16 @@
 import "../utils/version.js";
 //#region src/decorators/customUiKitElement.ts
-function e(e, t) {
-	return function(n) {
-		var r, i, a, o;
-		if (!(n != null && n.prototype)) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
-		let s = e;
-		if ((r = globalThis) != null && (r = r.customElements) != null && r.get(s)) return;
-		let c = t != null && t.skipTagAsComponentName ? [] : [e];
-		Array.isArray(t == null ? void 0 : t.extendComponentNames) && (c = [...t.extendComponentNames, ...c]), (i = globalThis) == null || (i = i.customElements) == null || (a = i.define) == null || a.call(i, s, (o = class extends n {
+function e(e) {
+	return function(t) {
+		var n, r, i;
+		if (!(t != null && t.prototype)) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
+		let a = e;
+		(n = globalThis) != null && (n = n.customElements) != null && n.get(a) || (r = globalThis) == null || (r = r.customElements) == null || (i = r.define) == null || i.call(r, a, class extends t {
 			connectedCallback() {
-				var t;
-				(t = n.prototype.connectedCallback) == null || t.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.230"), this.setAttribute("data-ui-kit-component-name", e);
+				var n;
+				(n = t.prototype.connectedCallback) == null || n.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.232"), this.setAttribute("data-ui-kit-component-name", e);
 			}
-		}, o.componentName = c, o));
+		});
 	};
 }
 //#endregion

package/dist/esm/utils/IconsManager.js

@@ -26,7 +26,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.230"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.232"), 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.230"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.232"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

package/dist/esm/utils/version.js

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

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

@@ -1,18 +1,13 @@
 import { type Theme } from '../ds-theme-provider/themeContext';
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+export declare const THEME_ATTRIBUTE = "data-ui-kit-theme";
 export declare class UiKitElement extends LitElement {
     protected contextTheme?: Theme;
-    protected pubSubTheme: Theme;
-    static componentName?: string;
-    private appliedConstructables?;
-    private appliedStyleTags?;
-    constructor();
+    protected pubSubTheme?: Theme;
     protected get theme(): Theme | undefined;
     private handleChangeTheme;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    protected getComponentNames(): string[];
-    private supportsAdoptedSheets;
-    private applyThemeStyles;
+    protected willUpdate(changed: PropertyValues): void;
+    private applyThemeAttribute;
 }

package/dist/types/components/ds-accordion/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const cupraStyles: import("lit").CSSResult;

package/dist/types/components/ds-accordion/styles/seat-legacy.styles.d.ts

@@ -0,0 +1 @@
+export declare const seatLegacyStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const seatStyles: import("lit").CSSResult;

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

@@ -1,7 +1,7 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
 import '../ds-icon/ds-icon.ts';
+import { LitElement } from 'lit';
 import type { DsAvatarAttrs } from './ds-avatar.types.ts';
-export declare class DsAvatar extends UiKitElement {
+export declare class DsAvatar extends LitElement {
     static styles: import("lit").CSSResult[];
     size: DsAvatarAttrs['size'];
     name: DsAvatarAttrs['name'];

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

@@ -1,7 +1,6 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
-import { nothing } from 'lit';
+import { LitElement, nothing } from 'lit';
 import type { DsBadgeAttrs } from './ds-badge.types.js';
-export declare class DsBadge extends UiKitElement {
+export declare class DsBadge extends LitElement {
     static styles: import("lit").CSSResult[];
     number: DsBadgeAttrs['number'];
     variant: DsBadgeAttrs['variant'];

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

@@ -1,8 +1,7 @@
-import { UiKitElement } from '../base/UiKitElement.ts';
 import '../ds-icon-button/ds-icon-button.ts';
-import { nothing } from 'lit';
+import { LitElement, nothing } from 'lit';
 import type { DsBannerAttrs } from './ds-banner.types.js';
-export declare class DsBanner extends UiKitElement {
+export declare class DsBanner extends LitElement {
     static styles: import("lit").CSSResult[];
     orientation: DsBannerAttrs['orientation'];
     showClose: DsBannerAttrs['show-close'];

package/dist/types/components/ds-basic-card/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist/types/components/ds-basic-card/styles/seat-legacy.styles.d.ts

@@ -0,0 +1 @@
+export declare const seatLegacyStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const seatStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const seatLegacyStyles: import("lit").CSSResult;

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

@@ -0,0 +1 @@
+export declare const seatStyles: import("lit").CSSResult;

package/dist/types/components/ds-basic-card-image/styles/seat-legacy.styles.d.ts

@@ -0,0 +1 @@
+export declare const seatLegacyStyles: import("lit").CSSResult;

package/dist/types/components/ds-basic-card-section/styles/cupra-diagonal.styles.d.ts

@@ -0,0 +1 @@
+export declare const cupraDiagonalStyles: import("lit").CSSResult;

package/dist/types/components/ds-basic-card-section/styles/seat-legacy.styles.d.ts

@@ -0,0 +1 @@
+export declare const seatLegacyStyles: import("lit").CSSResult;

package/dist/types/components/ds-basic-card-section/styles/seat.styles.d.ts

@@ -0,0 +1 @@
+export declare const seatStyles: import("lit").CSSResult;