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

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

@@ -37,11 +37,11 @@ var t = e`
     }
 
     .scroll-button.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .scroll-button.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 `;
 //#endregion

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

@@ -29,14 +29,16 @@ var p = class extends i {
 			minimumFractionDigits: this.minimumFractionDigits,
 			maximumFractionDigits: this.maximumFractionDigits,
 			currencyDisplay: this.currencyDisplay,
-			symbolOverrides: this.symbolOverrides
+			symbolOverrides: this.symbolOverrides,
+			thousandSeparator: this.thousandSeparator,
+			fractionSeparator: this.fractionSeparator
 		}), n = this.valueText || t, r = {
 			amount: !0,
 			text: !0,
 			[`size-${this.amountSize}`]: !0,
 			[`weight-${this.amountWeight}`]: !0
 		};
-		return e`<span class=${o(r)}>${n}</span>`;
+		return e`<span class=${o(r)}><bdi>${n}</bdi></span>`;
 	}
 	get periodTemplate() {
 		if (!this.period) return t;

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

@@ -15,8 +15,8 @@ var t = e`
     .strikethrough-line {
         position: absolute;
         height: 1px;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         top: 50%;
     }
 `;

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

@@ -103,7 +103,8 @@ var t = e`
         justify-content: space-between;
         align-items: flex-end;
         width: 100%;
-        padding: var(--ds-spacing-s-5) var(--ds-spacing-s-5) 0 var(--ds-spacing-m-1);
+        padding-block: var(--ds-spacing-s-5) 0;
+        padding-inline: var(--ds-spacing-m-1) var(--ds-spacing-s-5);
         background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
         border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
             var(--ds-border-radius-none);
@@ -111,7 +112,7 @@ var t = e`
     }
 
     :host .medium .input-container {
-        padding-left: var(--ds-spacing-s-5);
+        padding-inline-start: var(--ds-spacing-s-5);
     }
 
     :host .input-container > div {
@@ -201,7 +202,7 @@ var t = e`
     :host .calendar-dropdown {
         position: absolute;
         top: 100%;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 10;
         margin-top: var(--ds-spacing-s-3, 4px);
     }

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

@@ -35,7 +35,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .content {

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

@@ -35,7 +35,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .with-scroll .content {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='seat']) .content {

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

@@ -15,7 +15,7 @@ var n = e`
     .container-fullscreen {
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         padding: 0;
         width: 100dvw;
         height: 100dvh;

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

@@ -33,7 +33,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content-fullscreen {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .content-fullscreen {
@@ -46,7 +46,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='close-button']) {
         position: absolute;
         top: var(--ds-spacing-m-2);
-        right: var(--ds-spacing-m-2);
+        inset-inline-end: var(--ds-spacing-m-2);
     }
 `;
 //#endregion

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

@@ -33,7 +33,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .with-scroll .content-fullscreen {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='seat']) .content-fullscreen {
@@ -46,7 +46,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) ::slotted([slot='close-button']) {
         position: absolute;
         top: var(--ds-spacing-m-2);
-        right: var(--ds-spacing-m-2);
+        inset-inline-end: var(--ds-spacing-m-2);
     }
 `;
 //#endregion

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

@@ -48,7 +48,7 @@ var g = class extends i {
 		return s`<ds-icon-button
             class="close-button visible"
             data-testid="close-button"
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close-button"}
             @click=${this.handleOverlayClick}
             size="medium"
             icon-name="cross"
@@ -95,6 +95,9 @@ var g = class extends i {
 	p
 ], g);
 r([t({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], _.prototype, "dataAriaLabelCloseButton", void 0), r([t({
 	type: Boolean,
 	attribute: "open",
 	converter: o

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

@@ -3,6 +3,10 @@ import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 import { cssQueries as t } from "../../../utils/cssQueries.js";
 //#region src/components/ds-drawer/styles/common.styles.ts
 var n = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: block;
     }
@@ -33,12 +37,12 @@ var n = e`
         height: 100vh;
         width: 100%;
         bottom: 0;
-        right: 0;
+        inset-inline-end: 0;
         transform: translateY(100%);
 
         ${t.m} {
             top: 0;
-            transform: translateX(100%);
+            transform: translateX(calc(100% * var(--ui-kit-private-dir, 1)));
             width: 491px;
         }
 

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

@@ -15,15 +15,18 @@ var t = e`
 
     @media (min-width: 768px) {
         :host([data-ui-kit-theme='cupra-diagonal']) .container {
-            border-radius: var(--ds-border-radius-m) 0px 0px var(--ds-border-radius-m);
+            border-start-start-radius: var(--ds-border-radius-m);
+            border-end-start-radius: var(--ds-border-radius-m);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header,
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-content,
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
-        padding-left: var(--ds-layout-margin);
-        padding-right: var(--ds-layout-margin);
+        padding-inline-start: var(--ds-layout-margin);
+        padding-inline-end: var(--ds-layout-margin);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
@@ -48,7 +51,7 @@ var t = e`
 
     :host([data-ui-kit-theme='cupra-diagonal']) .close-button {
         top: calc(var(--ds-spacing-layout-s) - 0.125rem);
-        right: var(--ds-spacing-layout-xl);
+        inset-inline-end: var(--ds-spacing-layout-xl);
     }
 `;
 //#endregion

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

@@ -15,15 +15,18 @@ var t = e`
 
     @media (min-width: 768px) {
         :host([data-ui-kit-theme='seat']) .container {
-            border-radius: var(--ds-border-radius-m) 0px 0px var(--ds-border-radius-m);
+            border-start-start-radius: var(--ds-border-radius-m);
+            border-end-start-radius: var(--ds-border-radius-m);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
     }
 
     :host([data-ui-kit-theme='seat']) .drawer-header,
     :host([data-ui-kit-theme='seat']) .drawer-content,
     :host([data-ui-kit-theme='seat']) .drawer-footer {
-        padding-left: var(--ds-layout-margin);
-        padding-right: var(--ds-layout-margin);
+        padding-inline-start: var(--ds-layout-margin);
+        padding-inline-end: var(--ds-layout-margin);
     }
 
     :host([data-ui-kit-theme='seat']) .drawer-header {
@@ -48,7 +51,7 @@ var t = e`
 
     :host([data-ui-kit-theme='seat']) .close-button {
         top: calc(var(--ds-spacing-layout-s) - 0.125rem);
-        right: var(--ds-spacing-layout-xl);
+        inset-inline-end: var(--ds-spacing-layout-xl);
     }
 `;
 //#endregion

package/dist-react/esm/components/ds-favourite-action/ds-favourite-action.js

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

@@ -9,20 +9,30 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import o from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { iconsManager as c } from "../../utils/IconsManager.js";
-import { unsafeHTML as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { getDirection as u } from "../../utils/getDirection/getDirection.js";
+import { unsafeHTML as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/unsafe-html.js";
-import u from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldInitSpec.js";
-import d from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldSet2.js";
-import f from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldGet2.js";
+import f from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldInitSpec.js";
+import p from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldSet2.js";
+import m from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/classPrivateFieldGet2.js";
 //#region src/components/ds-icon/ds-icon.ts
-var p = /* @__PURE__ */ new WeakMap(), m = class extends r {
+var h = /* @__PURE__ */ new WeakMap(), g = class extends r {
 	constructor() {
-		super(), u(this, p, void 0), this.iconHtml = "", d(p, this, 0), this.getIcon = async () => {
+		super(), f(this, h, void 0), this.mirror = !1, this.iconHtml = "", p(h, this, 0), this.handleDirectionChange = () => {
+			this.requestUpdate();
+		}, this.getIcon = async () => {
 			var e;
-			let t = d(p, this, (e = f(p, this), ++e)), n = await c.fetchIcon(this.iconName);
-			t === f(p, this) && (this.iconHtml = n);
+			let t = p(h, this, (e = m(h, this), ++e)), n = await c.fetchIcon(this.iconName);
+			t === m(h, this) && (this.iconHtml = n);
 		}, e.subscribe("theme", this.getIcon);
 	}
+	connectedCallback() {
+		super.connectedCallback(), e.subscribe("direction", this.handleDirectionChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), e.unsubscribe("direction", this.handleDirectionChange);
+	}
 	async updated(e) {
 		super.updated(e), (e.has("iconName") || !this.iconHtml) && await this.getIcon();
 	}
@@ -30,13 +40,14 @@ var p = /* @__PURE__ */ new WeakMap(), m = class extends r {
 		return e ? `${e}px` : t ? "auto" : this.size ? `${this.size}px` : n;
 	}
 	get styleTokens() {
-		let e = this.getDimension(this.width, this.height, "var(--ui-kit-icon-width, 20px)"), t = this.getDimension(this.height, this.width, "var(--ui-kit-icon-height, 20px)"), r = this.color ? this.color : "var(--ui-kit-icon-color, black)";
+		let e = this.getDimension(this.width, this.height, "var(--ui-kit-icon-width, 20px)"), t = this.getDimension(this.height, this.width, "var(--ui-kit-icon-height, 20px)"), r = this.color ? this.color : "var(--ui-kit-icon-color, black)", i = this.mirror && u(this) === "rtl" ? "scaleX(-1)" : "none";
 		return n`
             <style>
                 .ds-icon {
                     display: inline-block;
                     width: ${e};
                     height: ${t};
+                    transform: ${i};
                 }
 
                 .ds-icon-color {
@@ -52,24 +63,27 @@ var p = /* @__PURE__ */ new WeakMap(), m = class extends r {
 	render() {
 		return n`
             ${this.styleTokens}
-            ${this.iconHtml ? l(this.iconHtml) : n`<svg class="ds-icon">x</svg>`}
+            ${this.iconHtml ? d(this.iconHtml) : n`<svg class="ds-icon">x</svg>`}
         `;
 	}
-}, h = (m.styles = t`
+}, _ = (g.styles = t`
         :host {
             line-height: 0;
             display: inline-block;
         }
-    `, m);
+    `, g);
 o([i({
 	type: String,
 	attribute: "icon-name"
-})], h.prototype, "iconName", void 0), o([i({
+})], _.prototype, "iconName", void 0), o([i({
 	type: String,
 	attribute: "color"
-})], h.prototype, "color", void 0), o([i({ type: Number })], h.prototype, "width", void 0), o([i({ type: Number })], h.prototype, "height", void 0), o([i({
+})], _.prototype, "color", void 0), o([i({ type: Number })], _.prototype, "width", void 0), o([i({ type: Number })], _.prototype, "height", void 0), o([i({
 	type: Number,
 	attribute: "size"
-})], h.prototype, "size", void 0), o([a()], h.prototype, "iconHtml", void 0), h = o([s("ds-icon")], h);
+})], _.prototype, "size", void 0), o([i({
+	type: Boolean,
+	converter: l
+})], _.prototype, "mirror", void 0), o([a()], _.prototype, "iconHtml", void 0), _ = o([s("ds-icon")], _);
 //#endregion
-export { h as DsIcon };
+export { _ as DsIcon };

package/dist-react/esm/components/ds-icon-button/ds-icon-button.js

@@ -5,8 +5,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import r from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
 import { classMap as c } 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";
@@ -23,10 +23,10 @@ import { seatStyles as _ } from "./styles/seat.styles.js";
 //#region src/components/ds-icon-button/ds-icon-button.ts
 var v = class extends u(i) {
 	constructor(...e) {
-		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.mirror = !1, this.htmlTagName = "button";
 	}
 	get iconTemplate() {
-		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : t;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)} ?mirror=${this.mirror}></ds-icon>` : t;
 	}
 	handleClick(e) {
 		this.href || e.preventDefault();
@@ -125,6 +125,9 @@ r([n({
 	type: String,
 	attribute: "icon-name"
 })], y.prototype, "iconName", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], y.prototype, "mirror", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
 })], y.prototype, "htmlTagName", void 0), r([n({

package/dist-react/esm/components/ds-inline-alert/ds-inline-alert.js

@@ -6,8 +6,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import i from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
 import { classMap as l } 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";
@@ -58,7 +58,7 @@ var g = class extends a {
 	}
 	get closeButtonTemplate() {
 		return this.showClose ? c`<ds-icon-button
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close-button"}
             @click=${this.handleClickCloseButton}
             icon-name="cross"
             variant="naked"
@@ -86,7 +86,10 @@ var g = class extends a {
 	h,
 	m
 ], g);
-i([n({ type: String })], _.prototype, "status", void 0), i([n({ type: String })], _.prototype, "title", void 0), i([n({ type: String })], _.prototype, "text", void 0), i([n({
+i([n({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], _.prototype, "dataAriaLabelCloseButton", void 0), i([n({ type: String })], _.prototype, "status", void 0), i([n({ type: String })], _.prototype, "title", void 0), i([n({ type: String })], _.prototype, "text", void 0), i([n({
 	attribute: "show-close",
 	type: Boolean,
 	converter: s,

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

@@ -5,8 +5,8 @@ import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import i from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
 import { classMap as c } 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";
@@ -58,7 +58,7 @@ var u = class extends n {
 	get closeButtonTemplate() {
 		return this.showClose ? s`<ds-icon-button
             class="close-button"
-            data-aria-label="Close"
+            data-aria-label=${this.dataAriaLabelCloseButton || "Close"}
             @click=${this.handleCloseButtonClick}
             icon-name="cross"
             variant="naked"
@@ -101,7 +101,10 @@ var u = class extends n {
         `;
 	}
 }, d = (u.styles = [l], u);
-i([r({ type: String })], d.prototype, "size", void 0), i([r({
+i([r({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], d.prototype, "dataAriaLabelCloseButton", void 0), i([r({ type: String })], d.prototype, "size", void 0), i([r({
 	type: Boolean,
 	converter: o
 })], d.prototype, "selected", void 0), i([r({

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

@@ -217,12 +217,12 @@ var t = e`
     .close-button {
         position: absolute;
         top: var(--ds-spacing-s-5);
-        right: var(--ds-spacing-s-5);
+        inset-inline-end: var(--ds-spacing-s-5);
     }
 
     .has-close .header-main {
         box-sizing: border-box;
-        padding-right: var(--ds-spacing-l-2);
+        padding-inline-end: var(--ds-spacing-l-2);
     }
 `;
 //#endregion

package/dist-react/esm/components/ds-link-button/ds-link-button.js

@@ -5,8 +5,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
 import r from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
 import { classMap as c } 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";
@@ -26,7 +26,7 @@ var v = class extends u(i) {
 		super(...e), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
 	}
 	get iconTemplate() {
-		return this.iconName === "none" ? t : s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>`;
+		return this.iconName === "none" ? t : s`<ds-icon class="icon" icon-name=${l(this.iconName)} ?mirror=${this.iconName === "arrow-right" || this.iconName === "arrow-left"}></ds-icon>`;
 	}
 	get classes() {
 		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
@@ -36,7 +36,7 @@ var v = class extends u(i) {
 			underline: !!this.underline,
 			[e]: !!e,
 			[this.mode]: !!this.mode,
-			"icon-left": this.iconPosition === "left"
+			[`icon-${this.iconPosition}`]: !!this.iconPosition
 		};
 	}
 	handleClick(e) {

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

@@ -18,7 +18,13 @@ var t = e`
         cursor: pointer;
     }
 
-    .link-button.icon-left .icon {
+    :is(.link-button.icon-start, .link-button.icon-left) .icon {
+        order: -1;
+    }
+    :host(:dir(rtl)) .link-button.icon-left .icon {
+        order: 0;
+    }
+    :host(:dir(rtl)) .link-button.icon-right .icon {
         order: -1;
     }
 `;

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

@@ -4,7 +4,7 @@ import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .link-button {
         letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
-        text-align: left;
+        text-align: start;
         text-decoration: none;
         border-radius: var(--ds-border-radius-xs, 6px);
         color: var(--ui-kit-link-button-color, var(--ui-kit-private-link-button-color));
@@ -37,8 +37,8 @@ var t = e`
         content: '';
         position: absolute;
         bottom: 0.1em;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 0.09em;
         background-color: currentColor;
     }

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

@@ -4,7 +4,7 @@ import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 var t = e`
     :host([data-ui-kit-theme='seat']) .link-button {
         letter-spacing: var(--ds-typography-letter-spacing-m, 0.5px);
-        text-align: left;
+        text-align: start;
         text-decoration: none;
         border-radius: var(--ds-border-radius-xs, 6px);
         color: var(--ui-kit-link-button-color, var(--ui-kit-private-link-button-color));
@@ -37,8 +37,8 @@ var t = e`
         content: '';
         position: absolute;
         bottom: 0.1em;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: 0.09em;
         background-color: currentColor;
     }

package/dist-react/esm/components/ds-list-item/ds-list-item.js

@@ -33,6 +33,7 @@ var l = class extends i {
 	renderSelectionTemplate() {
 		return e`
             <slot name="input-left"></slot>
+            <slot name="input-start"></slot>
             <slot name="icon"></slot>
             <div class="container-text">
                 <slot name="primary-text"></slot>
@@ -40,6 +41,7 @@ var l = class extends i {
             </div>
             <slot name="secondary-text"></slot>
             <slot name="input-right"></slot>
+            <slot name="input-end"></slot>
         `;
 	}
 	renderActionTemplate() {
@@ -47,12 +49,14 @@ var l = class extends i {
             <slot name="image-square"></slot>
             <slot name="image-wide"></slot>
             <slot name="icon-left"></slot>
+            <slot name="icon-start"></slot>
             <div class="container-text">
                 <slot name="primary-text"></slot>
                 <slot name="description-text"></slot>
             </div>
             <slot name="secondary-text"></slot>
             <slot name="icon-right"></slot>
+            <slot name="icon-end"></slot>
         `;
 	}
 	renderInfoTemplate() {

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

@@ -22,7 +22,7 @@ var t = e`
     }
 
     :host .container-text {
-        padding-right: var(--ds-sizing-24);
+        padding-inline-end: var(--ds-sizing-24);
     }
 
     :host .content.info-variant,
@@ -31,7 +31,9 @@ var t = e`
     }
 
     :host ::slotted([slot='input-left']),
-    :host ::slotted([slot='input-right']) {
+    :host ::slotted([slot='input-right']),
+    :host ::slotted([slot='input-start']),
+    :host ::slotted([slot='input-end']) {
         width: unset;
     }
 
@@ -116,7 +118,7 @@ var t = e`
 
     :host .selected {
         background: var(--ds-color-control-bg-default);
-        border-left: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+        border-inline-start: var(--ds-sizing-04) solid var(--ds-color-border-selected);
     }
 
     :host .disabled {

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

@@ -2,18 +2,22 @@ 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-loader-bar/styles/common.styles.ts
 var t = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     .fill {
         width: 33%;
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% * var(--ui-kit-private-dir, 1)));
         animation: loader 1.4s linear infinite;
     }
 
     @keyframes loader {
         0% {
-            transform: translateX(-100%);
+            transform: translateX(calc(-100% * var(--ui-kit-private-dir, 1)));
         }
         100% {
-            transform: translateX(300%);
+            transform: translateX(calc(300% * var(--ui-kit-private-dir, 1)));
         }
     }
 `;