@cupra/ui-kit 2.0.0-canary.23 → 2.0.0-canary.231

package/dist-react/esm/components/ds-tooltip/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const i = t`
+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-tooltip/styles/common.styles.ts
+var t = e`
     :host {
         position: relative;
         display: inline-block;
@@ -30,7 +29,7 @@ const i = t`
     .container {
         white-space: normal;
         box-sizing: border-box;
-        display: flex;
+        display: none;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
@@ -39,10 +38,17 @@ const i = t`
 
         z-index: var(--ds-z-index-tooltip, 1300);
 
-        position: absolute;
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        overflow: visible;
         width: max-content;
     }
 
+    .container:popover-open {
+        display: flex;
+    }
+
     ::slotted([slot='image']) {
         width: 100%;
         height: auto;
@@ -56,8 +62,8 @@ const i = t`
         justify-content: space-between;
     }
 
-    .header-container.hidden,
-    .content-container.hidden {
+    :host .container .header-container.hidden,
+    :host .container .content-container.hidden {
         display: none;
     }
 
@@ -80,11 +86,11 @@ const i = t`
     }
 
     .ds-tooltip-arrow-background {
-        fill: var(--ds-tooltip-arrow-background-color);
+        fill: var(--ui-kit-private-tooltip-arrow-background-color);
     }
 
     .ds-tooltip-arrow-border {
-        stroke: var(--ds-tooltip-arrow-border-color);
+        stroke: var(--ui-kit-private-tooltip-arrow-border-color);
     }
 
     .anchor {
@@ -125,6 +131,5 @@ const i = t`
         transform: rotate(270deg);
     }
 `;
-export {
-  i as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,50 @@
+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-tooltip/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='content']) {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-surface-default-subtlest);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-border-default-subtle);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll {
+        --ui-kit-private-tooltip-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-tooltip-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--ui-kit-private-tooltip-scrollbar-size);
+        width: var(--ui-kit-private-tooltip-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-color-text-default-subtlest);
+        border: var(--ui-kit-private-tooltip-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };

package/dist-react/esm/components/ds-tooltip/styles/cupra.styles.js

@@ -0,0 +1,49 @@
+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-tooltip/styles/cupra.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light {
+        background-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark {
+        background-color: var(--ds-color-white);
+    }
+
+    /* Nueva estructura */
+    :host([data-ui-kit-theme='cupra']) .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        margin-bottom: 0.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra']) ::slotted([slot='content']) {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.light ::slotted([slot='content']) {
+        color: var(--ds-color-off-white);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .container.dark ::slotted([slot='content']) {
+        color: var(--ds-color-grey);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .arrow.light {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-black);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-black);
+    }
+
+    :host([data-ui-kit-theme='cupra']) .arrow.dark {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-white);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-white);
+    }
+`;
+//#endregion
+export { t as cupraStyles };

package/dist-react/esm/components/ds-tooltip/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-tooltip/styles/seat-legacy.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='content']) {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: #26262c;
+        --ui-kit-private-tooltip-arrow-border-color: #fafafa;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--scrollbar-size-s);
+        width: var(--scrollbar-size-s);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-opacity-white-70);
+        border: var(--scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as seatLegacyStyles };

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

@@ -0,0 +1,50 @@
+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-tooltip/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        box-sizing: border-box;
+        box-shadow: 0 0.25rem 0.25rem var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+        gap: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        background: var(--ds-color-surface-default-subtlest, #26262c);
+        padding: var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='content']) {
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        color: var(--ds-color-text-default);
+    }
+
+    :host([data-ui-kit-theme='seat']) .arrow {
+        --ui-kit-private-tooltip-arrow-background-color: var(--ds-color-surface-default-subtlest);
+        --ui-kit-private-tooltip-arrow-border-color: var(--ds-color-border-default-subtle);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll {
+        --ui-kit-private-tooltip-scrollbar-border-width: var(--ds-spacing-s-4);
+        --ui-kit-private-tooltip-scrollbar-size: calc(2 * var(--ds-spacing-s-4) + 0.25rem);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar {
+        -webkit-appearance: none;
+        appearance: none;
+        height: var(--ui-kit-private-tooltip-scrollbar-size);
+        width: var(--ui-kit-private-tooltip-scrollbar-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-thumb {
+        border-radius: var(--ds-border-radius-full);
+        background-clip: padding-box;
+        background-color: var(--ds-color-text-default-subtlest);
+        border: var(--ui-kit-private-tooltip-scrollbar-border-width) solid transparent;
+    }
+
+    :host([data-ui-kit-theme='seat']) .ds-scroll::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+`;
+//#endregion
+export { t as seatStyles };

package/dist-react/esm/components/ds-value-unit/ds-value-unit.js

@@ -0,0 +1,54 @@
+import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
+import { property as t } 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 n from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import { classMap as a } 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 o } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as s } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as c } from "./styles/cupra.styles.js";
+import { seatStyles as l } from "./styles/seat.styles.js";
+//#region src/components/ds-value-unit/ds-value-unit.ts
+var u = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.valueWeight = "regular", this.unitWeight = "light";
+	}
+	render() {
+		let t = {
+			value: !0,
+			[`size-${this.size}`]: !0,
+			[`value-weight-${this.valueWeight}`]: !0
+		}, n = {
+			unit: !0,
+			[`size-${this.size}`]: !0,
+			[`unit-weight-${this.unitWeight}`]: !0
+		};
+		return e`
+            <div class="container" part="container">
+                <span class=${a(t)} part="value">
+                    <slot name="value"></slot>
+                </span>
+                <span class=${a(n)} part="unit">
+                    <slot name="unit"></slot>
+                </span>
+            </div>
+        `;
+	}
+}, d = (u.styles = [
+	o,
+	s,
+	l,
+	c
+], u);
+n([t({ type: String })], d.prototype, "size", void 0), n([t({
+	type: String,
+	attribute: "value-weight"
+})], d.prototype, "valueWeight", void 0), n([t({
+	type: String,
+	attribute: "unit-weight"
+})], d.prototype, "unitWeight", void 0), d = n([i("ds-value-unit")], d);
+//#endregion
+export { d as DsValueUnit };

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

@@ -0,0 +1,16 @@
+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/common.styles.ts
+var t = e`
+    :host {
+        display: inline;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: baseline;
+        overflow: clip;
+    }
+`;
+//#endregion
+export { t as commonStyles };

package/dist-react/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-react/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 };