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

package/dist/esm/components/ds-sidebar-navigation/styles/seat.styles.js

@@ -0,0 +1,269 @@
+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-sidebar-navigation/styles/seat.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='seat']) {
+        --ui-kit-private-sidebar-navigation-nav-height: 5.5rem;
+    }
+
+    :host([data-ui-kit-theme='seat']) .nav {
+        padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5, 8px);
+        background: var(--ds-color-surface-container-hover, rgba(250, 250, 250, 0.1));
+        -webkit-backdrop-filter: blur(3.75rem);
+        backdrop-filter: blur(3.75rem);
+
+        height: var(--ui-kit-private-sidebar-navigation-nav-height, 88px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        align-items: center;
+        justify-content: center;
+        gap: var(--ds-spacing-m-2, 16px);
+        flex: 1 1 auto;
+
+        font-family: var(--ds-typography-family-primary, 'cupra-screen'), sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-font-letter-spacing-0-5, 0.5px);
+
+        /* ellipsis styles */
+        overflow: hidden;
+        width: 100%;
+    }
+
+    :host([data-ui-kit-theme='seat']) .helper-text-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        flex: 1 1 auto;
+
+        /* ellipsis styles */
+        min-width: 0;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+        color: var(--ds-color-text-default, #fafafa);
+
+        font-size: var(--ds-font-size-14, 14px);
+        line-height: var(--ds-font-line-height-20, 20px);
+        flex: 0 0 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+        color: var(--ds-button-text-color-link-default, #fafafa);
+
+        font-size: var(--ds-typography-size-body-m, 14px);
+        line-height: var(--ds-typography-height-body-m, 20px);
+        /* ellipsis styles */
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+        flex: 0 0 auto;
+        --ui-kit-icon-color: var(--ds-button-text-color-link-default, #fafafa);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+    }
+
+    :host([data-ui-kit-theme='seat']) .actions-container {
+        display: flex;
+        padding: var(--ds-spacing-s-1, 0);
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+        align-self: stretch;
+    }
+
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='seat']) .modal {
+        visibility: hidden;
+        box-sizing: border-box;
+
+        -webkit-backdrop-filter: blur(0.75rem);
+
+        backdrop-filter: blur(0.75rem);
+        background: var(--ds-color-bg-overlay, rgba(9, 9, 11, 0.8));
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        position: absolute;
+        width: 100%;
+        height: calc(100% - var(--ui-kit-private-sidebar-navigation-nav-height));
+        padding: var(--ds-spacing-m-2, 16px);
+        flex-direction: column;
+        gap: var(--ds-spacing-layout-s, 16px);
+        flex-shrink: 0;
+        left: 0;
+        top: 0;
+        z-index: var(--ds-z-index-modal);
+    }
+
+    :host([data-ui-kit-theme='seat']) .open .modal {
+        visibility: visible;
+    }
+
+    @media (min-width: 480px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 5.875rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-2, 16px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 6.125rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: column;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-2, 16px);
+            align-items: flex-start;
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-18, 18px);
+            line-height: var(--ds-font-line-height-26, 26px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-m, 14px);
+            line-height: var(--ds-typography-height-body-m, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+            --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 1 1 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 1 1 auto;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 7rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-icon']) {
+            --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+            --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            gap: var(--ds-spacing-s-5, 8px);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        :host([data-ui-kit-theme='seat']) {
+            --ui-kit-private-sidebar-navigation-nav-height: 4.5rem;
+        }
+
+        :host([data-ui-kit-theme='seat']) .nav {
+            flex-direction: row;
+            padding: var(--ds-spacing-m-1, 12px) var(--ds-spacing-m-4, 24px);
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-text']) {
+            font-size: var(--ds-font-size-24, 24px);
+            line-height: var(--ds-font-line-height-32, 32px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .aside ::slotted([slot='aside-helper-text']) {
+            font-size: var(--ds-typography-size-body-l, 16px);
+            line-height: var(--ds-typography-height-body-l, 24px);
+        }
+
+        :host([data-ui-kit-theme='seat']) .actions-container {
+            flex: 0 0 auto;
+            gap: var(--ds-spacing-m-2, 16px);
+        }
+
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='main-cta']) {
+            flex: 0 0 auto;
+        }
+    }
+`;
+//#endregion
+export { t as seatStyles };

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

@@ -1,9 +1,9 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { LitElement as t } 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 t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { property as n } 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 r from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.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";
@@ -11,7 +11,7 @@ import { styleMap as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modu
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/style-map.js";
 import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-skeleton/ds-skeleton.ts
-var c = class extends r {
+var c = class extends t {
 	constructor(...e) {
 		super(...e), this.variant = "text", this.animation = "shimmer";
 	}
@@ -39,6 +39,6 @@ var c = class extends r {
         `;
 	}
 }, l = (c.styles = [s], c);
-n([t({ type: String })], l.prototype, "variant", void 0), n([t({ type: String })], l.prototype, "width", void 0), n([t({ type: String })], l.prototype, "height", void 0), n([t({ type: String })], l.prototype, "animation", void 0), l = n([i("ds-skeleton")], l);
+r([n({ type: String })], l.prototype, "variant", void 0), r([n({ type: String })], l.prototype, "width", void 0), r([n({ type: String })], l.prototype, "height", void 0), r([n({ type: String })], l.prototype, "animation", void 0), l = r([i("ds-skeleton")], l);
 //#endregion
 export { l as DsSkeleton };

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

@@ -21,8 +21,12 @@ import { getStepValue as h } from "./utils/getStepValue/getStepValue.js";
 import { live as g } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/live.js";
 import { commonStyles as _, currentValueStyles as v, inputResetStyles as y, rangeValueStyles as b, thumbStyles as x, trackStyles as S } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as C } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as w } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as T } from "./styles/seat-legacy.styles.js";
+import { seatStyles as E } from "./styles/seat.styles.js";
 //#region src/components/ds-slider/ds-slider.ts
-var C = class extends d(o) {
+var D = class extends d(o) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.min = 0, this.max = 100, this.minLabel = "", this.maxLabel = "", this.step = 1, this.initialValueMin = 0, this.mode = "light", this.locale = void 0, this.localeMatcher = "lookup", this.useGrouping = !0, this.minimumIntegerDigits = 1, this.minimumFractionDigits = 0, this.maximumFractionDigits = 3, this.size = "medium", this.disabled = !1, this.allowThumbOverlap = !1, this.keyboardMode = !1, this._initialValuesApplied = !1, this.getNewValue = (e) => {
 			let { width: t, left: n } = this.track.getBoundingClientRect(), r = this.thumbRadius, i = e.type.indexOf("mouse") === -1 ? e.touches[0].clientX : e.clientX, a = t - r * 2, o = Math.min(Math.max(0, i - n - r), a), s = a > 0 ? o * 100 / a : 0;
@@ -155,11 +159,11 @@ var C = class extends d(o) {
 		return t ? t.offsetWidth / 2 : 0;
 	}
 	trackPosition(e) {
-		let t = w.THUMB_RADIUS_CSS_VAR;
+		let t = O.THUMB_RADIUS_CSS_VAR;
 		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
 	}
 	trackWidth(e) {
-		return `calc((100% - ${w.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
+		return `calc((100% - ${O.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
 	}
 	handleChange({ value: e, role: t }) {
 		let n = m({
@@ -366,91 +370,95 @@ var C = class extends d(o) {
             </div>
         `;
 	}
-}, w = C, T = (C.styles = [
+}, O = D, k = (D.styles = [
 	_,
 	S,
 	x,
 	v,
 	b,
-	y
-], C.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)", C);
-a([n({ type: String })], T.prototype, "variant", void 0), a([n({ type: Number })], T.prototype, "min", void 0), a([n({ type: Number })], T.prototype, "max", void 0), a([n({
+	y,
+	C,
+	E,
+	w,
+	T
+], D.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)", D);
+a([n({ type: String })], k.prototype, "variant", void 0), a([n({ type: Number })], k.prototype, "min", void 0), a([n({ type: Number })], k.prototype, "max", void 0), a([n({
 	type: String,
 	attribute: "min-label"
-})], T.prototype, "minLabel", void 0), a([n({
+})], k.prototype, "minLabel", void 0), a([n({
 	type: String,
 	attribute: "max-label"
-})], T.prototype, "maxLabel", void 0), a([n({ type: Number })], T.prototype, "step", void 0), a([n({
+})], k.prototype, "maxLabel", void 0), a([n({ type: Number })], k.prototype, "step", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-min"
-})], T.prototype, "initialValueMin", void 0), a([n({
+})], k.prototype, "initialValueMin", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-max"
-})], T.prototype, "initialValueMax", void 0), a([n({
+})], k.prototype, "initialValueMax", void 0), a([n({
 	type: Number,
 	attribute: "value-min"
-})], T.prototype, "valueMin", void 0), a([n({
+})], k.prototype, "valueMin", void 0), a([n({
 	type: Number,
 	attribute: "value-max"
-})], T.prototype, "valueMax", void 0), a([n({
+})], k.prototype, "valueMax", void 0), a([n({
 	type: String,
 	reflect: !0
-})], T.prototype, "mode", void 0), a([n({
+})], k.prototype, "mode", void 0), a([n({
 	type: String,
 	attribute: "locale"
-})], T.prototype, "locale", void 0), a([n({
+})], k.prototype, "locale", void 0), a([n({
 	type: String,
 	attribute: "locale-matcher"
-})], T.prototype, "localeMatcher", void 0), a([n({
+})], k.prototype, "localeMatcher", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol"
-})], T.prototype, "unitSymbol", void 0), a([n({
+})], k.prototype, "unitSymbol", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol-position"
-})], T.prototype, "unitSymbolPosition", void 0), a([n({
+})], k.prototype, "unitSymbolPosition", void 0), a([n({
 	type: String,
 	attribute: "unit-style"
-})], T.prototype, "unitStyle", void 0), a([n({
+})], k.prototype, "unitStyle", void 0), a([n({
 	type: String,
 	attribute: "currency"
-})], T.prototype, "currency", void 0), a([n({
+})], k.prototype, "currency", void 0), a([n({
 	type: String,
 	attribute: "unit"
-})], T.prototype, "unit", void 0), a([n({
+})], k.prototype, "unit", void 0), a([n({
 	type: String,
 	attribute: "use-grouping",
 	converter: (e) => e === "auto" ? "auto" : typeof e == "boolean" ? e : e === "true" || e === "" || e !== "false"
-})], T.prototype, "useGrouping", void 0), a([n({
+})], k.prototype, "useGrouping", void 0), a([n({
 	type: Number,
 	attribute: "minimum-integer-digits"
-})], T.prototype, "minimumIntegerDigits", void 0), a([n({
+})], k.prototype, "minimumIntegerDigits", void 0), a([n({
 	type: Number,
 	attribute: "minimum-fraction-digits"
-})], T.prototype, "minimumFractionDigits", void 0), a([n({
+})], k.prototype, "minimumFractionDigits", void 0), a([n({
 	type: Number,
 	attribute: "maximum-fraction-digits"
-})], T.prototype, "maximumFractionDigits", void 0), a([n({
+})], k.prototype, "maximumFractionDigits", void 0), a([n({
 	type: String,
 	attribute: "thousand-separator"
-})], T.prototype, "thousandSeparator", void 0), a([n({
+})], k.prototype, "thousandSeparator", void 0), a([n({
 	type: String,
 	attribute: "fraction-separator"
-})], T.prototype, "fractionSeparator", void 0), a([n({
+})], k.prototype, "fractionSeparator", void 0), a([n({
 	type: String,
 	converter: f
-})], T.prototype, "size", void 0), a([n({
+})], k.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], T.prototype, "disabled", void 0), a([n({
+})], k.prototype, "disabled", void 0), a([n({
 	type: String,
 	attribute: "input-min-aria-label"
-})], T.prototype, "inputMinAriaLabel", void 0), a([n({
+})], k.prototype, "inputMinAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "input-max-aria-label"
-})], T.prototype, "inputMaxAriaLabel", void 0), a([n({
+})], k.prototype, "inputMaxAriaLabel", void 0), a([n({
 	type: Boolean,
 	attribute: "allow-thumb-overlap",
 	converter: c
-})], T.prototype, "allowThumbOverlap", void 0), a([i(".track")], T.prototype, "track", void 0), a([r()], T.prototype, "_valueMin", void 0), a([r()], T.prototype, "_valueMax", void 0), a([r()], T.prototype, "editingField", void 0), T = w = a([s("ds-slider")], T);
+})], k.prototype, "allowThumbOverlap", void 0), a([i(".track")], k.prototype, "track", void 0), a([r()], k.prototype, "_valueMin", void 0), a([r()], k.prototype, "_valueMax", void 0), a([r()], k.prototype, "editingField", void 0), k = O = a([s("ds-slider")], k);
 //#endregion
-export { T as DsSlider };
+export { k as DsSlider };

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

@@ -0,0 +1,167 @@
+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-slider/styles/cupra-diagonal.styles.ts
+var t = e`
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium {
+        --ui-kit-private-slider-thumb-radius: 0.75rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large {
+        --ui-kit-private-slider-thumb-radius: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .range-value-text {
+        gap: var(--ds-spacing-s-2, 2px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        font: 400 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
+            var(--ds-typography-family-primary, 'cupra-screen');
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .range-value-text {
+        font: 400 var(--ds-typography-size-body-m, 14px) / var(--ds-typography-height-body-m, 20px)
+            var(--ds-typography-family-primary, 'cupra-screen');
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track {
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        background: var(--ui-kit-slider-track-background, var(--ds-color-surface-default-minimal, #343844));
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track {
+        background: var(--ui-kit-slider-track-background-disabled, var(--ds-color-surface-disabled, #5a5c67));
+        cursor: not-allowed;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .track {
+        margin: 1.125rem 0;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .track {
+        margin: 1.375rem 0;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .track-range {
+        height: 0.25rem;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        background: var(
+            --ui-kit-slider-track-range-background,
+            var(
+                --ds-indicator-bg-color-active-primary,
+                linear-gradient(47deg, #b77f58 0%, #9b613b 62.52%, #804620 96.18%)
+            )
+        );
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .track-range {
+        background: var(--ui-kit-slider-track-range-background-disabled, var(--ds-color-surface-disabled, #5a5c67));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb {
+        width: 1.5rem;
+        height: 1.5rem;
+        top: 50%;
+        margin-top: -0.75rem;
+        transform: translateX(-50%);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .thumb {
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb .thumb-svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb .thumb-circle {
+        fill: var(--ds-color-icon-default, #fafafa);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:hover .thumb-circle {
+        fill: var(--ds-color-control-icon-default, #ffffff);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .track:active .thumb .thumb-circle {
+        fill: var(--ds-color-icon-default, #fafafa);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:focus-visible .thumb-circle {
+        fill: var(--ds-color-control-icon-default, #ffffff);
+        stroke: var(--ds-color-border-default-subtle, rgba(250, 250, 250, 0.3));
+        stroke-width: 0.125rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .thumb:focus-visible {
+        outline: var(--ds-border-width-l, 2px) solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.4375rem;
+        border-radius: var(--ds-border-radius-full, 100000px);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .thumb .thumb-circle {
+        fill: var(--ds-color-icon-disabled, #8b8d97);
+        stroke: var(--ds-color-border-default, #8b8d97);
+        stroke-width: 0.0625rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .inputs-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--ds-spacing-m-2, 16px);
+        gap: 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-wrapper {
+        width: 100%;
+        max-width: var(--ui-kit-slider-input-width, 184px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.variant-secondary {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-spacing-s-3, 4px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-inputs-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-group {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-wrapper {
+        --ui-kit-text-input-width: fit-content;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-input-value {
+        field-sizing: content;
+        min-width: 1ch;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-unit-text {
+        font: var(
+            --ds-font-currencies-figures-small-light,
+            300 var(--ds-typography-size-currency-small, 18px) / var(--ds-typography-height-currency-small, 26px)
+                var(--ds-typography-family-primary, 'cupra-screen')
+        );
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled.variant-secondary .secondary-unit-text {
+        color: var(--ds-color-text-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .variant-secondary .secondary-inputs-separator {
+        font: var(
+            --ds-font-currencies-figures-small-light,
+            300 var(--ds-typography-size-currency-small, 18px) / var(--ds-typography-height-currency-small, 26px)
+                var(--ds-typography-family-primary, 'cupra-screen')
+        );
+        letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
+        color: var(--ds-color-text-default-subtle, #aeaeb7);
+        padding: 0 var(--ds-spacing-s-5, 8px);
+    }
+`;
+//#endregion
+export { t as cupraDiagonalStyles };