@cupra/ui-kit 2.0.0-canary.237 → 2.0.0-canary.239

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

@@ -223,7 +223,8 @@ var t = e`
         display: flex;
         width: 100%;
         box-sizing: border-box;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-m-2);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: var(--ds-spacing-m-2) var(--ds-spacing-s-5);
         align-items: flex-start;
         gap: var(--ds-spacing-s-5);
         color: var(--ds-dropdown-select-list-text-color-input-default, #fafafa);
@@ -239,9 +240,10 @@ var t = e`
             var(--ds-typography-family-primary);
     }
     :host([data-ui-kit-theme='seat']) .option.selected {
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) var(--ds-spacing-s-5) calc(var(--ds-spacing-m-2) - 0.25rem);
+        padding-block: var(--ds-spacing-s-5);
+        padding-inline: calc(var(--ds-spacing-m-2) - 0.25rem) var(--ds-spacing-s-5);
         background: var(--ds-dropdown-select-list-bg-color-default, rgba(195, 195, 203, 0.05));
-        border-left: 4px solid var(--ds-color-surface-selected);
+        border-inline-start: 4px solid var(--ds-color-surface-selected);
     }
     :host([data-ui-kit-theme='seat']) .option:last-child {
         border-bottom: none;
@@ -253,10 +255,12 @@ var t = e`
         background: var(--ds-dropdown-select-list-bg-color-hover, rgba(195, 195, 203, 0.1));
     }
     :host([data-ui-kit-theme='seat']) .primary.large .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-2, 16px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-2, 16px) 0;
     }
     :host([data-ui-kit-theme='seat']) .primary.medium .label {
-        padding: var(--ds-spacing-s-3, 4px) 0 0 var(--ds-spacing-m-1, 12px);
+        padding-block: var(--ds-spacing-s-3, 4px) 0;
+        padding-inline: var(--ds-spacing-m-1, 12px) 0;
         font: 350 var(--ds-typography-size-body-s, 12px) / var(--ds-typography-height-body-s, 16px)
             var(--ds-typography-family-primary);
     }
@@ -303,7 +307,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -327,7 +331,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -342,7 +346,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -363,7 +367,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) .large ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
             var(--ds-typography-family-primary);
-        padding-left: var(--ds-spacing-m-1, 12px);
+        padding-inline-start: var(--ds-spacing-m-1, 12px);
     }
     :host([data-ui-kit-theme='seat']) .medium ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)

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

@@ -5,8 +5,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import n from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as r } from "../base/UiKitElement.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
 import { classMap as s } 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";

package/dist-react/esm/components/ds-sidebar-navigation/ds-sidebar-navigation.js

@@ -66,7 +66,7 @@ var m = class extends i {
             icon-name=${this.open ? "cross" : "triple-dot-v"}
             @click=${this.toggleModal}
             data-testid="modal-button"
-            data-aria-label="more actions"
+            data-aria-label=${this.dataAriaLabelMoreActionsButton || "more actions"}
             variant="tertiary"
             size=${JSON.stringify({
 			xxl: "large",
@@ -114,6 +114,9 @@ var m = class extends i {
 	f
 ], m);
 r([t({
+	type: String,
+	attribute: "data-aria-label-more-actions-button"
+})], h.prototype, "dataAriaLabelMoreActionsButton", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0

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

@@ -12,7 +12,7 @@ var t = e`
 
     .nav {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 100%;
         display: flex;

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

@@ -105,7 +105,7 @@ var t = e`
         flex-direction: column;
         gap: var(--ds-spacing-layout-s, 16px);
         flex-shrink: 0;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         z-index: var(--ds-z-index-modal);
     }

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

@@ -105,7 +105,7 @@ var t = e`
         flex-direction: column;
         gap: var(--ds-spacing-layout-s, 16px);
         flex-shrink: 0;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         z-index: var(--ds-z-index-modal);
     }

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

@@ -9,28 +9,32 @@ import a from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
-import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js";
+import { getDirection as l, getDirectionSign as u } from "../../utils/getDirection/getDirection.js";
+import { uiKitHtml as d } from "../../utils/uiKitHtml.js";
+import { classMap as f } 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 { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
-import { objectConverter as f } from "../../utils/objectConverter.js";
-import { formatNumber as p } from "../../utils/formatNumber/formatNumber.js";
+import { ifDefined as p } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.js";
+import { ViewportMixin as m } from "../../mixins/ViewportMixin.js";
+import { objectConverter as h } from "../../utils/objectConverter.js";
+import { formatNumber as g } from "../../utils/formatNumber/formatNumber.js";
 import "../ds-text-input/ds-text-input.js";
-import { roundToDecimals as m } from "./utils/roundToDecimals/roundToDecimals.js";
-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 { roundToDecimals as _ } from "./utils/roundToDecimals/roundToDecimals.js";
+import { getStepValue as v } from "./utils/getStepValue/getStepValue.js";
+import { normalizeDigits as y } from "../../utils/normalizeDigits/normalizeDigits.js";
+import { live as b } 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";
+import { commonStyles as x, currentValueStyles as S, inputResetStyles as C, rangeValueStyles as w, thumbStyles as T, trackStyles as E } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as D } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as O } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as k } from "./styles/seat-legacy.styles.js";
+import { seatStyles as A } from "./styles/seat.styles.js";
 //#region src/components/ds-slider/ds-slider.ts
-var D = class extends d(o) {
+var j = class extends m(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;
-			return this.min + s * (this.max - this.min) / 100;
+			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, c = u(this) === 1 ? s : 100 - s;
+			return this.min + c * (this.max - this.min) / 100;
 		}, this.setActiveThumb = (e) => {
 			let t = this.getNewValue(e);
 			this.activeThumb = typeof this._valueMax != "number" || t <= this._valueMin ? "min" : t >= this._valueMax ? "max" : t - this._valueMin < this._valueMax - t ? "min" : "max";
@@ -61,17 +65,23 @@ var D = class extends d(o) {
 			let i = r === "min" ? this._valueMin : this._valueMax;
 			n.value = String(i ?? ""), this.keyboardMode && n.classList.add("focus-visible");
 		}, this.commitInputValue = (e, t) => {
-			let n = e.currentTarget, r = this.getRoleById(t), { stepValue: i } = this.computeStep({
-				proposedValue: Number(n.value),
+			let n = e.currentTarget, r = this.getRoleById(t), i = y(n.value).trim(), a = Number(i);
+			if (i === "" || Number.isNaN(a)) {
+				let e = r === "min" ? this._valueMin : this._valueMax;
+				n.value = String(e ?? "");
+				return;
+			}
+			let { stepValue: o } = this.computeStep({
+				proposedValue: a,
 				role: r
-			}), a = m({
-				value: i,
+			}), s = _({
+				value: o,
 				fractionDigits: this.maximumFractionDigits
 			});
 			this.handleChange({
-				value: a,
+				value: s,
 				role: r
-			}), this.isControlled(r) || (n.value = String(a));
+			}), this.isControlled(r) || (n.value = String(s));
 		}, this.onInputBlur = (e) => {
 			var t;
 			this.editingField = void 0;
@@ -80,17 +90,21 @@ var D = class extends d(o) {
 		}, this.onInputKeyDown = (e, t) => {
 			e.key === "Enter" && (e.preventDefault(), this.commitInputValue(e, t));
 		}, this.onThumbKeyDown = (e, t) => {
-			if (!this.disabled && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-				e.preventDefault();
-				let n = this.step ?? 1, r = e.key === "ArrowLeft" ? -n : n, i = this.getRoleById(t), a = i === "min" ? this._valueMin : this._valueMax, { stepValue: o } = this.computeStep({
-					proposedValue: a + r,
-					role: i
-				});
-				this.handleChange({
-					value: o,
-					role: i
-				});
-			}
+			if (this.disabled) return;
+			let n = this.getRoleById(t), r = n === "min" ? this._valueMin : this._valueMax, i = this.getProposedValueForKey({
+				key: e.key,
+				currentValue: r
+			});
+			if (i === null) return;
+			e.preventDefault();
+			let { stepValue: a } = this.computeStep({
+				proposedValue: i,
+				role: n
+			});
+			this.handleChange({
+				value: a,
+				role: n
+			});
 		};
 	}
 	get isRange() {
@@ -113,7 +127,7 @@ var D = class extends d(o) {
 		};
 	}
 	computeStep({ proposedValue: e, role: t }) {
-		return h({
+		return v({
 			step: this.step,
 			min: this.min,
 			max: this.max,
@@ -159,14 +173,14 @@ var D = class extends d(o) {
 		return t ? t.offsetWidth / 2 : 0;
 	}
 	trackPosition(e) {
-		let t = O.THUMB_RADIUS_CSS_VAR;
+		let t = M.THUMB_RADIUS_CSS_VAR;
 		return `calc(${t} + (100% - ${t} * 2) * ${e / 100})`;
 	}
 	trackWidth(e) {
-		return `calc((100% - ${O.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
+		return `calc((100% - ${M.THUMB_RADIUS_CSS_VAR} * 2) * ${e / 100})`;
 	}
 	handleChange({ value: e, role: t }) {
-		let n = m({
+		let n = _({
 			value: e,
 			fractionDigits: this.maximumFractionDigits
 		}), r = t === "min" ? "_valueMin" : "_valueMax";
@@ -194,22 +208,22 @@ var D = class extends d(o) {
 			fractionSeparator: this.fractionSeparator,
 			useGrouping: this.useGrouping
 		};
-		return p(t);
+		return g(t);
 	}
 	get rangeValuesTemplates() {
-		let { formattedNumber: n, unitSymbol: r, unitSymbolPosition: i } = this.formatNumber(this.min), a = this.unitSymbol ?? r, o = this.unitSymbolPosition ?? i ?? (a ? "right" : void 0), { formattedNumber: s } = this.formatNumber(this.max);
+		let { formattedNumber: n, unitSymbol: r, unitSymbolPosition: i } = this.formatNumber(this.min), a = this.unitSymbol ?? r, o = this.isUnitSymbolFirst(i, "right"), { formattedNumber: s } = this.formatNumber(this.max);
 		return e`
             <div class="range-value-text">
                 ${this.minLabel ? e`<span class="range-value-label">${this.minLabel}</span>` : t}
-                ${o === "left" ? e`<span>${a}</span>` : t}
-                <span>${n}</span>
-                ${o === "right" ? e`<span>${a}</span>` : t}
+                ${a && o ? e`<span>${a}</span>` : t}
+                <span><bdi>${n}</bdi></span>
+                ${a && !o ? e`<span>${a}</span>` : t}
             </div>
             <div class="range-value-text">
                 ${this.maxLabel ? e` <span class="range-value-label">${this.maxLabel}</span>` : t}
-                ${o === "left" ? e`<span>${a}</span>` : t}
-                <span>${s}</span>
-                ${o === "right" ? e`<span>${a}</span>` : t}
+                ${a && o ? e`<span>${a}</span>` : t}
+                <span><bdi>${s}</bdi></span>
+                ${a && !o ? e`<span>${a}</span>` : t}
             </div>
         `;
 	}
@@ -221,7 +235,7 @@ var D = class extends d(o) {
 		return e`
             <style>
                 .thumb${t} {
-                    left: ${this.trackPosition(o)};
+                    inset-inline-start: ${this.trackPosition(o)};
                 }
             </style>
             <div
@@ -233,10 +247,11 @@ var D = class extends d(o) {
                 role="slider"
                 tabindex=${this.disabled ? -1 : 0}
                 aria-disabled=${String(!!this.disabled)}
-                aria-label=${t === 1 ? "Minumum value" : "Maximum Value"}
+                aria-label=${(t === 1 ? this.thumbMinAriaLabel : this.thumbMaxAriaLabel) ?? (t === 1 ? "Minumum value" : "Maximum Value")}
                 aria-valuemin=${i}
                 aria-valuemax=${a}
                 aria-valuenow=${r}
+                aria-valuetext=${this.getThumbValueText(r)}
             >
                 <svg
                     class="thumb-svg"
@@ -260,27 +275,48 @@ var D = class extends d(o) {
 		return e`
             <style>
                 .track-range {
-                    left: ${n};
+                    inset-inline-start: ${n};
                     width: ${r};
                 }
             </style>
             <div class="track-range" role="presentation"></div>
         `;
 	}
+	getProposedValueForKey({ key: e, currentValue: t }) {
+		let n = this.step ?? 1;
+		switch (e) {
+			case "ArrowLeft": return t - n * u(this);
+			case "ArrowRight": return t + n * u(this);
+			case "Home": return this.min;
+			case "End": return this.max;
+			case "PageUp": return t + n * M.PAGE_STEP_COUNT;
+			case "PageDown": return t - n * M.PAGE_STEP_COUNT;
+			default: return null;
+		}
+	}
+	isUnitSymbolFirst(e, t) {
+		let n = l(this) === "rtl";
+		return this.unitSymbolPosition === "start" ? !0 : this.unitSymbolPosition === "end" ? !1 : this.unitSymbolPosition === "left" ? !n : this.unitSymbolPosition === "right" ? n : (e ?? t) === "left";
+	}
+	getThumbValueText(e) {
+		let { formattedNumber: t, unitSymbol: n, unitSymbolPosition: r } = this.formatNumber(e), i = this.unitSymbol ?? n;
+		return i ? this.isUnitSymbolFirst(r, "right") ? `${i} ${t}` : `${t} ${i}` : t;
+	}
 	getInputTemplate(e) {
-		let t = this.getRoleById(e), n = this.editingField === t, r = t === "min" ? this._valueMin : this._valueMax, { formattedNumber: i, unitSymbol: a, unitSymbolPosition: o } = this.formatNumber(r), s = this.unitSymbolPosition ?? o, c = this.unitSymbol ?? a, u = c ? s === "left" ? `${c} ${i}` : `${i} ${c}` : `${i}`, d = n ? "number" : "text", f = n ? String(r ?? "") : u, p = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, m = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", h = p ?? m;
-		return l`
+		let t = this.getRoleById(e), n = this.editingField === t, r = t === "min" ? this._valueMin : this._valueMax, { formattedNumber: i, unitSymbol: a, unitSymbolPosition: o } = this.formatNumber(r), s = this.isUnitSymbolFirst(o, "right"), c = this.unitSymbol ?? a, l = c ? s ? `${c} ${i}` : `${i} ${c}` : `${i}`, u = n ? "number" : "text", f = n ? String(r ?? "") : l, m = e === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, h = this.isRange ? e === 1 ? "Start value" : "End value" : "Value", g = m ?? h;
+		return d`
             <div class="input-wrapper">
                 <ds-text-input size=${this.sliderSizeToTextInputSize} hide-clear-button>
                     <input
                         class="input-value input-value-${e}"
-                        type=${d}
-                        .value=${g(f)}
+                        dir=${p(this.inputDir)}
+                        type=${u}
+                        .value=${b(f)}
                         step=${String(this.step ?? 1)}
                         ?disabled=${this.disabled}
                         tabindex=${this.disabled ? -1 : 0}
                         aria-disabled=${String(!!this.disabled)}
-                        aria-label=${h}
+                        aria-label=${g}
                         ?readonly=${this.disabled}
                         @focus=${(t) => this.onInputFocus(t, e)}
                         @blur=${this.onInputBlur}
@@ -301,21 +337,22 @@ var D = class extends d(o) {
         `;
 	}
 	getSecondaryInputTemplate(n) {
-		let r = this.getRoleById(n) === "min" ? this._valueMin : this._valueMax, { unitSymbol: i, unitSymbolPosition: a } = this.formatNumber(r), o = this.unitSymbol ?? i, s = this.unitSymbolPosition ?? a ?? "right", c = n === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, u = this.isRange ? n === 1 ? "Start value" : "End value" : "Value", d = c ?? u, f = o ? e`<span class="secondary-unit-text">${o}</span>` : t;
-		return l`
+		let r = this.getRoleById(n) === "min" ? this._valueMin : this._valueMax, { unitSymbol: i, unitSymbolPosition: a } = this.formatNumber(r), o = this.unitSymbol ?? i, s = this.isUnitSymbolFirst(a, "right"), c = n === 1 ? this.inputMinAriaLabel : this.inputMaxAriaLabel, l = this.isRange ? n === 1 ? "Start value" : "End value" : "Value", u = c ?? l, f = o ? e`<span class="secondary-unit-text">${o}</span>` : t;
+		return d`
             <div class="secondary-input-group">
-                ${s === "left" ? f : t}
+                ${s ? f : t}
                 <div class="secondary-input-wrapper">
                     <ds-text-input size="xlarge" hide-clear-button>
                         <input
                             class="secondary-input-value secondary-input-value-${n}"
+                            dir=${p(this.inputDir)}
                             type="number"
-                            .value=${g(String(r ?? ""))}
+                            .value=${b(String(r ?? ""))}
                             step=${String(this.step ?? 1)}
                             ?disabled=${this.disabled}
                             tabindex=${this.disabled ? -1 : 0}
                             aria-disabled=${String(!!this.disabled)}
-                            aria-label=${d}
+                            aria-label=${u}
                             ?readonly=${this.disabled}
                             @change=${(e) => this.commitInputValue(e, n)}
                             @keydown=${(e) => this.onInputKeyDown(e, n)}
@@ -323,7 +360,7 @@ var D = class extends d(o) {
                         />
                     </ds-text-input>
                 </div>
-                ${s === "right" ? f : t}
+                ${s ? t : f}
             </div>
         `;
 	}
@@ -359,7 +396,7 @@ var D = class extends d(o) {
 		let n = this.variant === "secondary";
 		return e`
             ${this.styleTokens}
-            <div class=${u(this.containerClasses)}>
+            <div class=${f(this.containerClasses)}>
                 ${n ? this.secondaryInputsTemplate : t}
                 <div @touchstart=${this.handleMouseDown} @mousedown=${this.handleMouseDown} class="track" role="presentation">
                     ${this.thumbTemplates}
@@ -370,95 +407,104 @@ var D = class extends d(o) {
             </div>
         `;
 	}
-}, O = D, k = (D.styles = [
-	_,
-	S,
+}, M = j, N = (j.styles = [
 	x,
-	v,
-	b,
-	y,
-	C,
 	E,
+	T,
+	S,
 	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({
+	C,
+	D,
+	A,
+	O,
+	k
+], j.PAGE_STEP_COUNT = 10, j.THUMB_RADIUS_CSS_VAR = "var(--ui-kit-private-slider-thumb-radius, 0px)", j);
+a([n({ type: String })], N.prototype, "variant", void 0), a([n({ type: Number })], N.prototype, "min", void 0), a([n({ type: Number })], N.prototype, "max", void 0), a([n({
 	type: String,
 	attribute: "min-label"
-})], k.prototype, "minLabel", void 0), a([n({
+})], N.prototype, "minLabel", void 0), a([n({
 	type: String,
 	attribute: "max-label"
-})], k.prototype, "maxLabel", void 0), a([n({ type: Number })], k.prototype, "step", void 0), a([n({
+})], N.prototype, "maxLabel", void 0), a([n({ type: Number })], N.prototype, "step", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-min"
-})], k.prototype, "initialValueMin", void 0), a([n({
+})], N.prototype, "initialValueMin", void 0), a([n({
 	type: Number,
 	attribute: "initial-value-max"
-})], k.prototype, "initialValueMax", void 0), a([n({
+})], N.prototype, "initialValueMax", void 0), a([n({
 	type: Number,
 	attribute: "value-min"
-})], k.prototype, "valueMin", void 0), a([n({
+})], N.prototype, "valueMin", void 0), a([n({
 	type: Number,
 	attribute: "value-max"
-})], k.prototype, "valueMax", void 0), a([n({
+})], N.prototype, "valueMax", void 0), a([n({
 	type: String,
 	reflect: !0
-})], k.prototype, "mode", void 0), a([n({
+})], N.prototype, "mode", void 0), a([n({
 	type: String,
 	attribute: "locale"
-})], k.prototype, "locale", void 0), a([n({
+})], N.prototype, "locale", void 0), a([n({
 	type: String,
 	attribute: "locale-matcher"
-})], k.prototype, "localeMatcher", void 0), a([n({
+})], N.prototype, "localeMatcher", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol"
-})], k.prototype, "unitSymbol", void 0), a([n({
+})], N.prototype, "unitSymbol", void 0), a([n({
+	type: String,
+	attribute: "input-dir"
+})], N.prototype, "inputDir", void 0), a([n({
 	type: String,
 	attribute: "unit-symbol-position"
-})], k.prototype, "unitSymbolPosition", void 0), a([n({
+})], N.prototype, "unitSymbolPosition", void 0), a([n({
 	type: String,
 	attribute: "unit-style"
-})], k.prototype, "unitStyle", void 0), a([n({
+})], N.prototype, "unitStyle", void 0), a([n({
 	type: String,
 	attribute: "currency"
-})], k.prototype, "currency", void 0), a([n({
+})], N.prototype, "currency", void 0), a([n({
 	type: String,
 	attribute: "unit"
-})], k.prototype, "unit", void 0), a([n({
+})], N.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"
-})], k.prototype, "useGrouping", void 0), a([n({
+})], N.prototype, "useGrouping", void 0), a([n({
 	type: Number,
 	attribute: "minimum-integer-digits"
-})], k.prototype, "minimumIntegerDigits", void 0), a([n({
+})], N.prototype, "minimumIntegerDigits", void 0), a([n({
 	type: Number,
 	attribute: "minimum-fraction-digits"
-})], k.prototype, "minimumFractionDigits", void 0), a([n({
+})], N.prototype, "minimumFractionDigits", void 0), a([n({
 	type: Number,
 	attribute: "maximum-fraction-digits"
-})], k.prototype, "maximumFractionDigits", void 0), a([n({
+})], N.prototype, "maximumFractionDigits", void 0), a([n({
 	type: String,
 	attribute: "thousand-separator"
-})], k.prototype, "thousandSeparator", void 0), a([n({
+})], N.prototype, "thousandSeparator", void 0), a([n({
 	type: String,
 	attribute: "fraction-separator"
-})], k.prototype, "fractionSeparator", void 0), a([n({
+})], N.prototype, "fractionSeparator", void 0), a([n({
 	type: String,
-	converter: f
-})], k.prototype, "size", void 0), a([n({
+	converter: h
+})], N.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], k.prototype, "disabled", void 0), a([n({
+})], N.prototype, "disabled", void 0), a([n({
+	type: String,
+	attribute: "thumb-min-aria-label"
+})], N.prototype, "thumbMinAriaLabel", void 0), a([n({
+	type: String,
+	attribute: "thumb-max-aria-label"
+})], N.prototype, "thumbMaxAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "input-min-aria-label"
-})], k.prototype, "inputMinAriaLabel", void 0), a([n({
+})], N.prototype, "inputMinAriaLabel", void 0), a([n({
 	type: String,
 	attribute: "input-max-aria-label"
-})], k.prototype, "inputMaxAriaLabel", void 0), a([n({
+})], N.prototype, "inputMaxAriaLabel", void 0), a([n({
 	type: Boolean,
 	attribute: "allow-thumb-overlap",
 	converter: c
-})], 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);
+})], N.prototype, "allowThumbOverlap", void 0), a([i(".track")], N.prototype, "track", void 0), a([r()], N.prototype, "_valueMin", void 0), a([r()], N.prototype, "_valueMax", void 0), a([r()], N.prototype, "editingField", void 0), N = M = a([s("ds-slider")], N);
 //#endregion
-export { k as DsSlider };
+export { N as DsSlider };

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

@@ -2,6 +2,10 @@ import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.
 import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 //#region src/components/ds-slider/styles/common.styles.ts
 var t = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: block;
     }

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

@@ -56,7 +56,7 @@ var t = e`
         height: 1.5rem;
         top: 50%;
         margin-top: -0.75rem;
-        transform: translateX(-50%);
+        transform: translateX(calc(-50% * var(--ui-kit-private-dir, 1)));
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .large .thumb {
         width: 2rem;

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

@@ -56,7 +56,7 @@ var t = e`
         height: 1.5rem;
         top: 50%;
         margin-top: -0.75rem;
-        transform: translateX(-50%);
+        transform: translateX(calc(-50% * var(--ui-kit-private-dir, 1)));
     }
     :host([data-ui-kit-theme='seat']) .large .thumb {
         width: 2rem;

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

@@ -41,18 +41,18 @@ var t = e`
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small .main {
-        padding-left: var(--ds-spacing-m-2);
-        padding-right: var(--ds-spacing-m-2);
+        padding-inline-start: var(--ds-spacing-m-2);
+        padding-inline-end: var(--ds-spacing-m-2);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.medium .main {
-        padding-left: var(--ds-spacing-m-3);
-        padding-right: var(--ds-spacing-m-3);
+        padding-inline-start: var(--ds-spacing-m-3);
+        padding-inline-end: var(--ds-spacing-m-3);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .container.large .header,
     :host([data-ui-kit-theme='cupra-diagonal']) .container.large .main {
-        padding-left: var(--ds-spacing-m-4);
-        padding-right: var(--ds-spacing-m-4);
+        padding-inline-start: var(--ds-spacing-m-4);
+        padding-inline-end: var(--ds-spacing-m-4);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container.small ::slotted([slot='main']) {
@@ -85,8 +85,8 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .container .main-wrapper::after {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 2rem;
         pointer-events: none;
         opacity: 0;