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

package/dist/cjs/components/ds-value-unit/styles/cupra.styles.cjs

@@ -0,0 +1,99 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :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);
+    }
+`;exports.cupraStyles=t;

package/dist/cjs/components/ds-value-unit/styles/seat.styles.cjs

@@ -0,0 +1,187 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :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);
+    }
+`;exports.seatStyles=t;

package/dist/cjs/decorators/customUiKitElement.cjs

@@ -1 +1 @@
-require("../utils/version.cjs");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{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)}},o.componentName=c,o))}}exports.customUiKitElement=e;
+require("../utils/version.cjs");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 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)}})}}exports.customUiKitElement=e;

package/dist/cjs/utils/IconsManager.cjs

@@ -1 +1 @@
-const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.230`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
+const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},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,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;

package/dist/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.230`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;
+var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,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,configurable:!1,enumerable:!1}));var i=r;exports.PubSub=e,exports.pubSub=i;

package/dist/cjs/utils/version.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.230`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.232`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

package/dist/esm/components/base/UiKitElement.js

@@ -2,74 +2,41 @@ import { consume as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_m
 import { themeContext as t } from "../ds-theme-provider/themeContext.js";
 import { THEME_STORAGE_KEY as n } from "../../core/theme.constants.js";
 import { pubSub as r } from "../../utils/PubSub.js";
-import { stylesRegistry as i } from "../../utils/StylesRegistry/StylesRegistry.js";
-import { adoptStyles as a, css as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js";
-import { LitElement as s } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
+import { LitElement as i } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as l } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import u from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import s from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 //#region src/components/base/UiKitElement.ts
-var d = o`:host([unresolved]){visibility:hidden}`, f = class e extends s {
-	constructor() {
-		super(), this.appliedConstructables = [], this.appliedStyleTags = [], this.handleChangeTheme = (e) => {
+var c = "data-ui-kit-theme", l = class extends i {
+	constructor(...e) {
+		super(...e), this.handleChangeTheme = (e) => {
 			this.pubSubTheme = e;
-		}, this.pubSubTheme = r.subscribe("theme", this.handleChangeTheme);
+		};
 	}
 	get theme() {
 		var e;
 		let t = typeof sessionStorage < "u" ? (e = sessionStorage) == null ? void 0 : e.getItem(n) : null;
-		return this.contextTheme ?? this.pubSubTheme ?? t;
+		return this.contextTheme ?? this.pubSubTheme ?? t ?? void 0;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.setAttribute("unresolved", "");
-		let e = this.constructor, t = Array.isArray(e.styles) ? e.styles : [e.styles].filter(Boolean);
-		a(this.shadowRoot, [...t, d]), this.applyThemeStyles();
+		super.connectedCallback(), this.pubSubTheme = r.subscribe("theme", this.handleChangeTheme), this.applyThemeAttribute();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), r.unsubscribe("theme", this.handleChangeTheme);
 	}
-	updated(e) {
-		super.updated(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeStyles();
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("contextTheme") || e.has("pubSubTheme")) && this.applyThemeAttribute();
 	}
-	getComponentNames() {
-		let t = /* @__PURE__ */ new Set(), n = this.constructor;
-		for (; n && n !== e;) Array.isArray(n.componentName) && n.componentName.forEach((e) => t.add(e)), n = Object.getPrototypeOf(n);
-		return Array.from(t).reverse();
-	}
-	supportsAdoptedSheets() {
-		var e;
-		return "adoptedStyleSheets" in (((e = ShadowRoot) == null ? void 0 : e.prototype) || {}) && "replace" in CSSStyleSheet.prototype;
-	}
-	async applyThemeStyles() {
-		let e = this.getComponentNames();
-		if (this.theme && e != null && e.length) try {
-			let t = await Promise.all(e.map((e) => i.getStyles({
-				componentName: e,
-				theme: this.theme
-			}))), n = this.supportsAdoptedSheets(), r = this.shadowRoot.adoptedStyleSheets || [], a = this.appliedConstructables ? r.filter((e) => !this.appliedConstructables.includes(e)) : r;
-			this.appliedConstructables = [], this.appliedStyleTags.forEach((e) => e.remove()), this.appliedStyleTags = [], t.forEach((e) => {
-				if (e) {
-					if (n) {
-						let t = new CSSStyleSheet();
-						t.replaceSync(e), this.appliedConstructables.push(t);
-					} else {
-						let t = document.createElement("style");
-						t.textContent = e, this.shadowRoot.appendChild(t), this.appliedStyleTags.push(t);
-					}
-				}
-			}), n && (this.shadowRoot.adoptedStyleSheets = [...a, ...this.appliedConstructables]);
-		} catch (e) {
-			console.error(e);
-		} finally {
-			this.removeAttribute("unresolved"), this.requestUpdate();
-		}
+	applyThemeAttribute() {
+		let e = this.theme;
+		e ? this.setAttribute(c, e) : this.removeAttribute(c);
 	}
 };
-u([c({ attribute: !1 }), e({
+s([a({ attribute: !1 }), e({
 	context: t,
 	subscribe: !0
-})], f.prototype, "contextTheme", void 0), u([l()], f.prototype, "pubSubTheme", void 0);
+})], l.prototype, "contextTheme", void 0), s([o()], l.prototype, "pubSubTheme", void 0);
 //#endregion
-export { f as UiKitElement };
+export { c as THEME_ATTRIBUTE, l as UiKitElement };

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

@@ -9,14 +9,18 @@ import { commonStyles as o } from "./styles/common.styles.js";
 import { themeConfig as s } from "./theme-config.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.js";
-import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
-import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as u } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as d } from "./styles/seat-legacy.styles.js";
+import { seatStyles as f } from "./styles/seat.styles.js";
+import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import { uiKitHtml as m } from "../../utils/uiKitHtml.js";
+import { classMap as h } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
-import { ifDefined as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import { ifDefined as g } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 //#region src/components/ds-accordion/ds-accordion.ts
-var p = class extends a {
+var _ = class extends a {
 	constructor(...e) {
 		super(...e), this.maxHeight = 300, this.open = !1, this.mode = "light", this.size = "large", this.disabled = !1, this.showDivider = !0, this._open = !1;
 	}
@@ -42,13 +46,13 @@ var p = class extends a {
 		var e;
 		if (!this.theme) return t;
 		let n = (e = s[this.theme]) == null ? void 0 : e["icon-names"], r = this.expandedIconName || (n == null ? void 0 : n.open) || "minus";
-		return u`<ds-icon class="icon open-icon" role="presentation" icon-name=${f(r)}></ds-icon>`;
+		return m`<ds-icon class="icon open-icon" role="presentation" icon-name=${g(r)}></ds-icon>`;
 	}
 	get closeIconTemplate() {
 		var e;
 		if (!this.theme) return t;
 		let n = (e = s[this.theme]) == null ? void 0 : e["icon-names"], r = this.collapseIconName || (n == null ? void 0 : n.close) || "plus";
-		return u`<ds-icon class="icon close-icon" role="presentation" icon-name=${f(r)}></ds-icon>`;
+		return m`<ds-icon class="icon close-icon" role="presentation" icon-name=${g(r)}></ds-icon>`;
 	}
 	get styleTokens() {
 		return e`
@@ -71,7 +75,7 @@ var p = class extends a {
             ${this.styleTokens}
 
             <details
-                class=${d(this.containerClasses)}
+                class=${h(this.containerClasses)}
                 aria-disabled=${!!this.disabled}
                 ?open=${this.open}
                 @keydown=${this.handleKeyDown}
@@ -84,33 +88,39 @@ var p = class extends a {
                 </summary>
                 <slot name="content"></slot>
             </details>
-            ${this.showDivider ? e`<div class=${d(this.dividerClasses)}></div>` : t}
+            ${this.showDivider ? e`<div class=${h(this.dividerClasses)}></div>` : t}
         `;
 	}
-}, m = (p.styles = [o], p);
+}, v = (_.styles = [
+	o,
+	l,
+	f,
+	u,
+	d
+], _);
 i([n({
 	type: Number,
 	attribute: "max-height"
-})], m.prototype, "maxHeight", void 0), i([n({
+})], v.prototype, "maxHeight", void 0), i([n({
 	type: Boolean,
-	converter: l,
+	converter: p,
 	reflect: !0
-})], m.prototype, "open", void 0), i([n({
+})], v.prototype, "open", void 0), i([n({
 	type: String,
 	reflect: !0
-})], m.prototype, "mode", void 0), i([n({ type: String })], m.prototype, "size", void 0), i([n({
+})], v.prototype, "mode", void 0), i([n({ type: String })], v.prototype, "size", void 0), i([n({
 	type: Boolean,
-	converter: l
-})], m.prototype, "disabled", void 0), i([n({
+	converter: p
+})], v.prototype, "disabled", void 0), i([n({
 	type: Boolean,
 	attribute: "show-divider",
-	converter: l
-})], m.prototype, "showDivider", void 0), i([n({
+	converter: p
+})], v.prototype, "showDivider", void 0), i([n({
 	type: String,
 	attribute: "collapse-icon-name"
-})], m.prototype, "collapseIconName", void 0), i([n({
+})], v.prototype, "collapseIconName", void 0), i([n({
 	type: String,
 	attribute: "expanded-icon-name"
-})], m.prototype, "expandedIconName", void 0), i([r()], m.prototype, "_open", void 0), m = i([c("ds-accordion")], m);
+})], v.prototype, "expandedIconName", void 0), i([r()], v.prototype, "_open", void 0), v = i([c("ds-accordion")], v);
 //#endregion
-export { m as DsAccordion };
+export { v as DsAccordion };

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

@@ -0,0 +1,72 @@
+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-accordion/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .divider {
+        height: 0.0625rem;
+        background-image: linear-gradient(
+            to left,
+            var(--ds-color-border-default-faint) 0%,
+            var(--ds-color-border-default-subtle) 30%
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted([slot='content']) {
+        padding: var(--ds-spacing-m-1) var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted([slot='content']) {
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .title:focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring);
+        color: var(--ds-color-control-text-pressed);
+        background-color: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .title {
+        outline: none;
+        color: var(--ds-field-text-color-placeholder-disabled);
+        background-color: transparent;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .title {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-l) /
+            var(--ds-typography-height-body-l) var(--ds-typography-family-primary);
+        padding: var(--ds-spacing-m-1) var(--ds-spacing-m-2);
+        gap: var(--ds-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .title {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        padding: var(--ds-spacing-s-5);
+        gap: var(--ds-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .title {
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+        border-radius: var(--ds-border-radius-xxs);
+        color: var(--ds-color-control-text-default);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) :hover .title {
+        color: var(--ds-color-control-text-pressed);
+        background-color: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-default);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) :hover .icon {
+        --ui-kit-icon-color: var(--ds-color-control-icon-default);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) :focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-disabled);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .icon {
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist/esm/components/ds-accordion/styles/cupra.styles.js

@@ -0,0 +1,66 @@
+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-accordion/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .divider {
+        height: 0.0625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.light {
+        background-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.dark {
+        background-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='content']) {
+        font: var(--ds-font-cupra-light-20-paragraph);
+        padding: 0.5rem 0 2rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light ::slotted([slot='content']) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark ::slotted([slot='content']) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .large .title {
+        font: var(--ds-font-cupra-regular-50);
+        padding: 1.3125rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .medium .title {
+        font: var(--ds-font-cupra-regular-40);
+        padding: 1.4375rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .small .title {
+        font: var(--ds-font-cupra-regular-30-title);
+        padding: 1.0625rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .title {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .title {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) :hover.light .title {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) :hover.dark .title {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .icon {
+        --ui-kit-icon-height: 1.875rem;
+        --ui-kit-icon-width: 1.875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) :hover.light .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) :hover.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };