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

package/dist/esm/components/ds-toggle-switch/styles/seat.styles.js

@@ -0,0 +1,193 @@
+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-toggle-switch/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        --ui-kit-private-dot-gap: 0.1875rem;
+        cursor: pointer;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.medium {
+        min-height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.large {
+        min-height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-s-2, 2px) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled) {
+        border-radius: var(--ds-border-radius-xs);
+        background: var(--ds-switch-bg-color-pressed, rgba(195, 195, 203, 0.1));
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover {
+        --ui-kit-private-dot-gap: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='label']) {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.large ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-l, 16px);
+        line-height: var(--ds-typography-height-body-l, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.medium ::slotted([slot='label']) {
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.checked):not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked:not(.disabled) ::slotted([slot='label']) {
+        color: var(--ds-switch-text-color-label-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .track-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border-radius: var(--ds-border-radius-full, 100000px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-switch-border-color-default, #aeaeb7);
+        background: none;
+        outline: none;
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .track-container {
+        width: var(--ds-sizing-32, 32px);
+        height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large .track-container {
+        width: var(--ds-sizing-40, 40px);
+        height: var(--ds-sizing-24, 24px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked .track-container {
+        border-color: var(--ds-switch-border-color-selected, rgba(250, 250, 250, 0.3));
+        background: var(--ui-kit-toggle-switch-background, var(--ds-switch-bg-color-selected, #b2764d));
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled .track-container {
+        border-color: var(--ds-switch-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.disabled .track-container {
+        background: var(--ui-kit-toggle-switch-background-disabled, var(--ds-switch-bg-color-disabled, #34353c));
+    }
+
+    :host([data-ui-kit-theme='seat']) .track-container:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.1875rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .dot {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: var(--ds-border-radius-full, 100000px);
+        transition:
+            left 150ms ease,
+            width 150ms ease,
+            height 150ms ease;
+        left: var(--ui-kit-private-dot-gap);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked .dot {
+        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+    }
+
+    :host([data-ui-kit-theme='seat']) .medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-08, 8px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.checked.large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.medium .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).medium .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-12, 12px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.medium.checked .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).medium.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.large .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).large .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-16, 16px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container:not(.disabled):hover.large.checked .dot,
+    :host([data-ui-kit-theme='seat']) .container:active:not(.disabled).large.checked .dot {
+        --ui-kit-private-dot-size: var(--ds-sizing-20, 20px);
+        width: var(--ui-kit-private-dot-size);
+        height: var(--ui-kit-private-dot-size);
+        background: var(--ds-switch-icon-color-selected, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled .dot {
+        background: var(--ds-switch-icon-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container.disabled.checked .dot {
+        background: var(--ds-switch-icon-color-default, #c3c3cb);
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -14,8 +14,12 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 import { debounce as d } from "../../utils/debounce.js";
 import { arrow as f, computePosition as p, flip as m, offset as h, shift as g, size as _ } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
 import { commonStyles as v } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as y } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as b } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as x } from "./styles/seat-legacy.styles.js";
+import { seatStyles as S } from "./styles/seat.styles.js";
 //#region src/components/ds-tooltip/ds-tooltip.ts
-var y = class extends s {
+var C = class extends s {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.show = !1, this.disableHoverListener = !1, this.disableFocusListener = !1, this.disablePressListener = !1, this.tooltipId = `ds-tooltip-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, this.usingKeyboard = !1, this.handleKeyDown = () => {
 			this.usingKeyboard = !0;
@@ -23,6 +27,8 @@ var y = class extends s {
 			this.usingKeyboard = !1;
 		}, this.handleTooltipPointerDown = (e) => {
 			e.stopImmediatePropagation();
+		}, this.handleContainerSlotChange = () => {
+			this.requestUpdate();
 		}, this.handleResize = d({ func: () => this.requestUpdate() }), this.handleClose = () => {
 			this.show = !1;
 		}, this.handleAnchorPointerDown = (e) => {
@@ -142,11 +148,11 @@ var y = class extends s {
                 @pointerdown=${this.handleTooltipPointerDown}
             >
                 <header part="header" class=${u(this.headerClasses)}>
-                    <slot @slotchange=${this.updatePosition} name="header"></slot>
-                    <slot @slotchange=${this.updatePosition} name="close-button" @click=${this.handleClose}></slot>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="header"></slot>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="close-button" @click=${this.handleClose}></slot>
                 </header>
                 <div part="content" class=${u(this.contentClasses)}>
-                    <slot @slotchange=${this.updatePosition} name="content"></slot>
+                    <slot @slotchange=${this.handleContainerSlotChange} name="content"></slot>
                 </div>
                 <slot part="image" @slotchange=${this.updatePosition} name="image"></slot>
                 ${this.arrowTemplate}
@@ -190,29 +196,35 @@ var y = class extends s {
             ${this.tooltipTemplate}
         `;
 	}
-}, b = (y.styles = [v], y);
+}, w = (C.styles = [
+	v,
+	y,
+	S,
+	b,
+	x
+], C);
 o([n({
 	type: String,
 	reflect: !0
-})], b.prototype, "mode", void 0), o([n({
+})], w.prototype, "mode", void 0), o([n({
 	type: Boolean,
 	reflect: !0,
 	converter: l
-})], b.prototype, "show", void 0), o([n({
+})], w.prototype, "show", void 0), o([n({
 	type: Boolean,
 	reflect: !0,
 	converter: l,
 	attribute: "disable-hover-listener"
-})], b.prototype, "disableHoverListener", void 0), o([n({
+})], w.prototype, "disableHoverListener", void 0), o([n({
 	type: Boolean,
 	reflect: !0,
 	converter: l,
 	attribute: "disable-focus-listener"
-})], b.prototype, "disableFocusListener", void 0), o([n({
+})], w.prototype, "disableFocusListener", void 0), o([n({
 	type: Boolean,
 	reflect: !0,
 	converter: l,
 	attribute: "disable-press-listener"
-})], b.prototype, "disablePressListener", void 0), o([r()], b.prototype, "tooltopPlacement", void 0), o([r()], b.prototype, "tooltipId", void 0), o([i(".container")], b.prototype, "container", void 0), o([i("#button")], b.prototype, "anchorContainer", void 0), o([i("#arrow")], b.prototype, "arrow", void 0), o([a({ slot: "" })], b.prototype, "anchorElements", void 0), o([a({ slot: "header" })], b.prototype, "headerElements", void 0), o([a({ slot: "close-button" })], b.prototype, "closeButtonElements", void 0), o([a({ slot: "content" })], b.prototype, "contentElements", void 0), b = o([c("ds-tooltip")], b);
+})], w.prototype, "disablePressListener", void 0), o([r()], w.prototype, "tooltopPlacement", void 0), o([r()], w.prototype, "tooltipId", void 0), o([i(".container")], w.prototype, "container", void 0), o([i("#button")], w.prototype, "anchorContainer", void 0), o([i("#arrow")], w.prototype, "arrow", void 0), o([a({ slot: "" })], w.prototype, "anchorElements", void 0), o([a({ slot: "header" })], w.prototype, "headerElements", void 0), o([a({ slot: "close-button" })], w.prototype, "closeButtonElements", void 0), o([a({ slot: "content" })], w.prototype, "contentElements", void 0), w = o([c("ds-tooltip")], w);
 //#endregion
-export { b as DsTooltip };
+export { w as DsTooltip };

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

@@ -62,8 +62,8 @@ var t = e`
         justify-content: space-between;
     }
 
-    .header-container.hidden,
-    .content-container.hidden {
+    :host .container .header-container.hidden,
+    :host .container .content-container.hidden {
         display: none;
     }
 

package/dist/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/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/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/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/esm/components/ds-value-unit/ds-value-unit.js

@@ -8,8 +8,11 @@ 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 s = class extends r {
+var u = class extends r {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.valueWeight = "regular", this.unitWeight = "light";
 	}
@@ -34,13 +37,18 @@ var s = class extends r {
             </div>
         `;
 	}
-}, c = (s.styles = [o], s);
-n([t({ type: String })], c.prototype, "size", void 0), n([t({
+}, d = (u.styles = [
+	o,
+	s,
+	l,
+	c
+], u);
+n([t({ type: String })], d.prototype, "size", void 0), n([t({
 	type: String,
 	attribute: "value-weight"
-})], c.prototype, "valueWeight", void 0), n([t({
+})], d.prototype, "valueWeight", void 0), n([t({
 	type: String,
 	attribute: "unit-weight"
-})], c.prototype, "unitWeight", void 0), c = n([i("ds-value-unit")], c);
+})], d.prototype, "unitWeight", void 0), d = n([i("ds-value-unit")], d);
 //#endregion
-export { c as DsValueUnit };
+export { d as DsValueUnit };