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

package/dist-react/esm/components/ds-accordion/styles/seat-legacy.styles.js

@@ -0,0 +1,80 @@
+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/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .divider {
+        height: 0;
+        border-bottom: 1px solid;
+        -o-border-image: linear-gradient(
+                to left,
+                var(--ds-color-border-default-faint) 0%,
+                var(--ds-color-border-default-subtle) 30%
+            )
+            1;
+        border-image: linear-gradient(
+                to left,
+                var(--ds-color-border-default-faint) 0%,
+                var(--ds-color-border-default-subtle) 30%
+            )
+            1;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium ::slotted([slot='content']) {
+        padding: var(--ds-spacing-m-1) var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .small ::slotted([slot='content']) {
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .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='seat-legacy']) .disabled .title {
+        outline: none;
+        color: var(--ds-field-text-color-placeholder-disabled);
+        background-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium .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='seat-legacy']) .small .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='seat-legacy']) .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='seat-legacy']) :hover .title {
+        color: var(--ds-color-control-text-pressed);
+        background-color: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) :hover .icon {
+        --ui-kit-icon-color: var(--ds-color-control-icon-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) :focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .disabled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-disabled);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .medium .icon {
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .small .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-accordion/styles/seat.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/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .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='seat']) .large ::slotted([slot='content']) {
+        padding: var(--ds-spacing-m-1) var(--ds-spacing-m-4);
+    }
+    :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='content']) {
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+    }
+    :host([data-ui-kit-theme='seat']) .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='seat']) .disabled .title {
+        outline: none;
+        color: var(--ds-field-text-color-placeholder-disabled);
+        background-color: transparent;
+    }
+    :host([data-ui-kit-theme='seat']) .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='seat']) .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='seat']) .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='seat']) :hover .title {
+        color: var(--ds-color-control-text-pressed);
+        background-color: var(--ds-color-surface-container-hover);
+    }
+    :host([data-ui-kit-theme='seat']) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-default);
+    }
+    :host([data-ui-kit-theme='seat']) :hover .icon {
+        --ui-kit-icon-color: var(--ds-color-control-icon-default);
+    }
+    :host([data-ui-kit-theme='seat']) :focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+    :host([data-ui-kit-theme='seat']) .disabled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-disabled);
+    }
+    :host([data-ui-kit-theme='seat']) .large .icon {
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+    :host([data-ui-kit-theme='seat']) .medium .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-avatar/ds-avatar.js

@@ -1,10 +1,10 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as a } from "../base/UiKitElement.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
@@ -15,7 +15,7 @@ import { ifDefined as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_mod
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-avatar/ds-avatar.ts
-var f = class extends a {
+var f = class extends n {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.disabled = !1;
 	}
@@ -78,13 +78,13 @@ var f = class extends a {
         `;
 	}
 }, p = (f.styles = [d], f);
-i([n({ type: String })], p.prototype, "size", void 0), i([n({ type: String })], p.prototype, "name", void 0), i([n({
+a([r({ type: String })], p.prototype, "size", void 0), a([r({ type: String })], p.prototype, "name", void 0), a([r({
 	type: Boolean,
 	converter: s,
 	reflect: !0
-})], p.prototype, "disabled", void 0), i([r({
+})], p.prototype, "disabled", void 0), a([i({
 	slot: "media",
 	selector: "img"
-})], p.prototype, "assignedImages", void 0), p = i([o("ds-avatar")], p);
+})], p.prototype, "assignedImages", void 0), p = a([o("ds-avatar")], p);
 //#endregion
 export { p as DsAvatar };

package/dist-react/esm/components/ds-badge/ds-badge.js

@@ -1,9 +1,9 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as i } from "../base/UiKitElement.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { classMap as o } 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";
@@ -11,7 +11,7 @@ import { ifDefined as s } from "../../node_modules/.pnpm/lit-html@3.3.3/node_mod
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
 import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-badge/ds-badge.ts
-var l = class extends i {
+var l = class extends n {
 	constructor(...e) {
 		super(...e), this.variant = "base", this.size = "large";
 	}
@@ -37,6 +37,6 @@ var l = class extends i {
 		return e` <div class=${o(this.classes)} aria-label=${s(this.badgeAriaLabel)}>${this.contentTemplate}</div> `;
 	}
 }, u = (l.styles = [c], l);
-r([n({ type: Number })], u.prototype, "number", void 0), r([n({ type: String })], u.prototype, "variant", void 0), r([n({ type: String })], u.prototype, "size", void 0), u = r([a("ds-badge")], u);
+i([r({ type: Number })], u.prototype, "number", void 0), i([r({ type: String })], u.prototype, "variant", void 0), i([r({ type: String })], u.prototype, "size", void 0), u = i([a("ds-badge")], u);
 //#endregion
 export { u as DsBadge };

package/dist-react/esm/components/ds-banner/ds-banner.js

@@ -1,10 +1,10 @@
 import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as n } 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 n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as i } 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 i from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
-import { UiKitElement as a } from "../base/UiKitElement.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
 import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
@@ -13,7 +13,7 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 import "../ds-icon-button/ds-icon-button.js";
 import { bannerStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-banner/ds-banner.ts
-var d = class extends a {
+var d = class extends n {
 	constructor(...e) {
 		super(...e), this.orientation = "horizontal", this.showClose = !0, this._show = void 0, this._showState = !0;
 	}
@@ -61,15 +61,15 @@ var d = class extends a {
         ` : t;
 	}
 }, f = (d.styles = [u], d);
-i([n({ type: String })], f.prototype, "orientation", void 0), i([n({
+a([r({ type: String })], f.prototype, "orientation", void 0), a([r({
 	attribute: "show-close",
 	type: Boolean,
 	converter: s,
 	reflect: !0
-})], f.prototype, "showClose", void 0), i([n({
+})], f.prototype, "showClose", void 0), a([r({
 	type: Boolean,
 	attribute: "show",
 	converter: s
-})], f.prototype, "_show", void 0), i([r()], f.prototype, "_showState", void 0), f = i([o("ds-banner")], f);
+})], f.prototype, "_show", void 0), a([i()], f.prototype, "_showState", void 0), f = a([o("ds-banner")], f);
 //#endregion
 export { f as DsBanner };

package/dist-react/esm/components/ds-basic-card/ds-basic-card.js

@@ -8,8 +8,11 @@ import { customUiKitElement as a } from "../../decorators/customUiKitElement.js"
 import { classMap as o } 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 { commonStyles as s } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as c } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as l } from "./styles/seat-legacy.styles.js";
+import { seatStyles as u } from "./styles/seat.styles.js";
 //#region src/components/ds-basic-card/ds-basic-card.ts
-var c = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.variant = "default";
 	}
@@ -39,7 +42,12 @@ var c = class extends i {
             </article>
         `;
 	}
-}, l = (c.styles = [s], c);
-r([n({ type: String })], l.prototype, "variant", void 0), l = r([a("ds-basic-card")], l);
+}, f = (d.styles = [
+	s,
+	c,
+	u,
+	l
+], d);
+r([n({ type: String })], f.prototype, "variant", void 0), f = r([a("ds-basic-card")], f);
 //#endregion
-export { l as DsBasicCard };
+export { f as DsBasicCard };

package/dist-react/esm/components/ds-basic-card/styles/cupra-diagonal.styles.js

@@ -0,0 +1,74 @@
+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-basic-card/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        border-radius: var(--ds-border-radius-m, 12px);
+        background: var(
+            --ds-card-bg-color-default,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-15, rgba(250, 250, 250, 0.15)) 0.73%,
+                var(--ds-opacity-grey-05, rgba(195, 195, 203, 0.05)) 84.63%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 99.44%
+            )
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:focus {
+        outline: var(--ds-spacing-s-2, 2px) solid var(--ds-color-enceladus-80, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.featured {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-copper-80, #b2764d);
+        outline-offset: -0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:hover {
+        background: var(
+            --ds-card-bg-color-hover,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-20, rgba(250, 250, 250, 0.2)) 0.73%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 84.63%,
+                var(--ds-opacity-grey-15, rgba(195, 195, 203, 0.15)) 99.44%
+            )
+        );
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container:active {
+        background: var(--ds-card-bg-color-pressed);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='featured-text']) {
+        padding: var(--ds-spacing-s-5, 8px) var(--ds-spacing-m-2, 16px);
+        background: var(
+            --ds-indicator-bg-color-active-primary,
+            linear-gradient(
+                47deg,
+                var(--ds-color-copper-80, #b2764d) 0%,
+                var(--ds-color-copper-90, #885a3b) 62.52%,
+                var(--ds-color-copper-100, #6c472f) 96.18%
+            )
+        );
+        border-radius: var(--ds-border-radius-m, 12px) var(--ds-border-radius-m, 12px) 0 0;
+
+        overflow: hidden;
+        color: var(--ds-color-text-default-static, #fafafa);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+        font-size: var(--ds-typography-size-body-l, 16px);
+        font-style: normal;
+        font-weight: 350;
+        line-height: var(--ds-typography-height-body-l, 24px); /* 150% */
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='featured-text']) {
+            padding: var(--ds-spacing-s-5, 8px) var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-basic-card/styles/seat-legacy.styles.js

@@ -0,0 +1,21 @@
+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-basic-card/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        border: 1px solid var(--Interface-06, #e1d7cd);
+        background: var(--Background-02-Neutrals-07, #f9f8f6);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='featured-text']) {
+        padding: var(--dg-spacing-s-5, 8px) var(--dg-spacing-m-2, 16px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='featured-text']) {
+            padding: var(--dg-spacing-s-5, 8px) var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-basic-card/styles/seat.styles.js

@@ -0,0 +1,74 @@
+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-basic-card/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        border-radius: var(--ds-border-radius-m, 12px);
+        background: var(
+            --ds-card-bg-color-default,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-15, rgba(250, 250, 250, 0.15)) 0.73%,
+                var(--ds-opacity-grey-05, rgba(195, 195, 203, 0.05)) 84.63%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 99.44%
+            )
+        );
+    }
+    :host([data-ui-kit-theme='seat']) .container:focus {
+        outline: var(--ds-spacing-s-2, 2px) solid var(--ds-color-enceladus-80, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.featured {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-copper-80, #b2764d);
+        outline-offset: -0.125rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:hover {
+        background: var(
+            --ds-card-bg-color-hover,
+            linear-gradient(
+                179deg,
+                var(--ds-opacity-white-20, rgba(250, 250, 250, 0.2)) 0.73%,
+                var(--ds-opacity-grey-10, rgba(195, 195, 203, 0.1)) 84.63%,
+                var(--ds-opacity-grey-15, rgba(195, 195, 203, 0.15)) 99.44%
+            )
+        );
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:active {
+        background: var(--ds-card-bg-color-pressed);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='featured-text']) {
+        padding: var(--ds-spacing-s-5, 8px) var(--ds-spacing-m-2, 16px);
+        background: var(
+            --ds-indicator-bg-color-active-primary,
+            linear-gradient(
+                47deg,
+                var(--ds-color-copper-80, #b2764d) 0%,
+                var(--ds-color-copper-90, #885a3b) 62.52%,
+                var(--ds-color-copper-100, #6c472f) 96.18%
+            )
+        );
+        border-radius: var(--ds-border-radius-m, 12px) var(--ds-border-radius-m, 12px) 0 0;
+
+        overflow: hidden;
+        color: var(--ds-color-text-default-static, #fafafa);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+        font-size: var(--ds-typography-size-body-l, 16px);
+        font-style: normal;
+        font-weight: 350;
+        line-height: var(--ds-typography-height-body-l, 24px); /* 150% */
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='featured-text']) {
+            padding: var(--ds-spacing-s-5, 8px) var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-basic-card-header/ds-basic-card-header.js

@@ -8,8 +8,11 @@ import { classMap as a } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
 import "../ds-divider/ds-divider.js";
 import { commonStyles as o } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as s } from "./styles/cupra-diagonal.styles.js";
+import { seatLegacyStyles as c } from "./styles/seat-legacy.styles.js";
+import { seatStyles as l } from "./styles/seat.styles.js";
 //#region src/components/ds-basic-card-header/ds-basic-card-header.ts
-var s = class extends n {
+var u = class extends n {
 	get dividerTemplate() {
 		return i`<ds-divider class="divider" variant="secondary"></ds-divider>`;
 	}
@@ -35,7 +38,12 @@ var s = class extends n {
             </header>
         `;
 	}
-}, c = (s.styles = [o], s);
-c = t([r("ds-basic-card-header")], c);
+}, d = (u.styles = [
+	o,
+	s,
+	l,
+	c
+], u);
+d = t([r("ds-basic-card-header")], d);
 //#endregion
-export { c as DsBasicCardHeader };
+export { d as DsBasicCardHeader };

package/dist-react/esm/components/ds-basic-card-header/styles/cupra-diagonal.styles.js

@@ -0,0 +1,51 @@
+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-basic-card-header/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) {
+        padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-2, 16px) 0 var(--ds-spacing-m-2, 16px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .header-wrapper {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .header-content {
+        gap: var(--ds-spacing-m-1, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .title-wrapper {
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='sub-header']) {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='title']) {
+        text-transform: uppercase;
+
+        color: var(--ds-color-text-default, #fafafa);
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+        font-size: var(--ds-typography-size-headline-xs, 18px);
+        font-style: normal;
+        font-weight: var(--ds-typography-weight-headline-secondary, 400);
+        line-height: var(--ds-typography-height-headline-xs, 26px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='description']) {
+        color: var(--ds-color-text-default);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) {
+            padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-4, 24px) 0 var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-basic-card-header/styles/seat-legacy.styles.js

@@ -0,0 +1,45 @@
+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-basic-card-header/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) {
+        padding: var(--dg-spacing-m-2, 16px) var(--dg-spacing-m-2, 16px) 0 var(--dg-spacing-m-2, 16px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .header-wrapper {
+        gap: var(--dg-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .header-content {
+        gap: var(--dg-spacing-m-1, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .title-wrapper {
+        gap: var(--dg-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='sub-header']) {
+        gap: var(--dg-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='title']) {
+        color: var(--dg-global-color-black-100);
+        font: 700 var(--dg-typeface-font-size-24) / var(--dg-typeface-line-height-26)
+            var(--dg-typeface-font-family-seat);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='description']) {
+        color: var(--dg-global-color-gray-85);
+        font: 400 var(--dg-typeface-font-size-12) / var(--dg-typeface-line-height-16)
+            var(--dg-typeface-font-family-seat);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) {
+            padding: var(--dg-spacing-m-2, 16px) var(--dg-spacing-m-4, 24px) 0 var(--dg-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

package/dist-react/esm/components/ds-basic-card-header/styles/seat.styles.js

@@ -0,0 +1,51 @@
+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-basic-card-header/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) {
+        padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-2, 16px) 0 var(--ds-spacing-m-2, 16px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .header-wrapper {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .header-content {
+        gap: var(--ds-spacing-m-1, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .title-wrapper {
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='sub-header']) {
+        gap: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='title']) {
+        text-transform: uppercase;
+
+        color: var(--ds-color-text-default, #fafafa);
+        font-family: var(--ds-typography-family-primary, 'cupra-screen');
+        font-size: var(--ds-typography-size-headline-xs, 18px);
+        font-style: normal;
+        font-weight: var(--ds-typography-weight-headline-secondary, 400);
+        line-height: var(--ds-typography-height-headline-xs, 26px);
+        letter-spacing: var(--ds-typography-letter-spacing-base, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='description']) {
+        color: var(--ds-color-text-default);
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) {
+            padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-4, 24px) 0 var(--ds-spacing-m-4, 24px);
+        }
+    }
+`;
+//#endregion
+export { t as seatStyles };