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

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

@@ -9,10 +9,8 @@ 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";
 import { commonStyles as c } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
-import { seatStyles as u } from "./styles/seat.styles.js";
 //#region src/components/ds-list-item/ds-list-item.ts
-var d = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.variant = "selection", this.selected = !1, this.disabled = !1, this.size = "large";
 	}
@@ -35,6 +33,7 @@ var d = 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>
@@ -42,6 +41,7 @@ var d = class extends i {
             </div>
             <slot name="secondary-text"></slot>
             <slot name="input-right"></slot>
+            <slot name="input-end"></slot>
         `;
 	}
 	renderActionTemplate() {
@@ -49,12 +49,14 @@ var d = 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() {
@@ -88,23 +90,19 @@ var d = class extends i {
             ${n ? o`<ds-divider orientation="horizontal" variant="primary" role="presentation"></ds-divider>` : t}
         `;
 	}
-}, f = (d.styles = [
-	c,
-	l,
-	u
-], d);
+}, u = (l.styles = [c], l);
 r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "variant", void 0), r([n({
+})], u.prototype, "variant", void 0), r([n({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "selected", void 0), r([n({
+})], u.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "disabled", void 0), r([n({
+})], u.prototype, "disabled", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "size", void 0), f = r([a("ds-list-item")], f);
+})], u.prototype, "size", void 0), u = r([a("ds-list-item")], u);
 //#endregion
-export { f as DsListItem };
+export { u as DsListItem };

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

@@ -6,6 +6,125 @@ var t = e`
         display: block;
         width: fit-content;
     }
+
+    :host .content {
+        display: flex;
+        align-items: center;
+        padding: var(--ds-sizing-08) 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container {
+        display: flex;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container-text {
+        padding-inline-end: var(--ds-sizing-24);
+    }
+
+    :host .content.info-variant,
+    :host .content.action-variant {
+        padding: var(--ds-sizing-08);
+    }
+
+    :host ::slotted([slot='input-left']),
+    :host ::slotted([slot='input-right']),
+    :host ::slotted([slot='input-start']),
+    :host ::slotted([slot='input-end']) {
+        width: unset;
+    }
+
+    :host ::slotted([slot='primary-text']) {
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    :host ::slotted([slot='primary-subtext']),
+    :host ::slotted([slot='secondary-text']),
+    :host ::slotted([slot='description-text']) {
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    :host ::slotted([slot='description-text']) {
+        padding-top: var(--ds-sizing-08);
+    }
+
+    :host([size='large']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+
+    :host ::slotted([slot='image-wide']) {
+        -o-object-fit: cover;
+        object-fit: cover;
+    }
+
+    :host([size='large']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-96);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-64);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([size='medium']) ::slotted([slot='primary-text']),
+    :host([size='medium']) ::slotted([slot='secondary-text']),
+    :host([size='medium']) ::slotted([slot='description-text']),
+    :host([size='medium']) ::slotted([slot='primary-subtext']),
+    :host([size='medium']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large']) ::slotted([slot='primary-text']),
+    :host([size='large']) ::slotted([slot='secondary-text']),
+    :host([size='large']) ::slotted([slot='description-text']),
+    :host([size='large']) ::slotted([slot='primary-subtext']),
+    :host([size='large']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([size='small']) ::slotted([slot='primary-text']),
+    :host([size='small']) ::slotted([slot='secondary-text']),
+    :host([size='small']) ::slotted([slot='description-text']),
+    :host([size='small']) ::slotted([slot='primary-subtext']),
+    :host([size='small']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host .content:hover {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    :host .content:active {
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    :host .content:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        background-color: var(--ds-color-control-bg-hover);
+    }
+
+    :host .selected {
+        background: var(--ds-color-control-bg-default);
+        border-inline-start: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+    }
+
+    :host .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
 `;
 //#endregion
 export { t as commonStyles };

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)));
         }
     }
 `;

package/dist-react/esm/components/ds-loader-logo/ds-loader-logo.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 { ifDefined as c } 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";

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

@@ -31,10 +31,18 @@ var t = e`
         align-items: center;
     }
 
+    .container.alignment-start {
+        align-items: flex-start;
+    }
+
     .container.alignment-left {
         align-items: flex-start;
     }
 
+    :host(:dir(rtl)) .container.alignment-left {
+        align-items: flex-end;
+    }
+
     ::slotted([slot='title']) {
         margin: 0;
         font-family: var(--ds-typography-family-primary);
@@ -60,6 +68,11 @@ var t = e`
         text-align: center;
     }
 
+    .container.alignment-start ::slotted([slot='title']),
+    .container.alignment-start ::slotted([slot='subtitle']) {
+        text-align: start;
+    }
+
     .container.alignment-left ::slotted([slot='title']),
     .container.alignment-left ::slotted([slot='subtitle']) {
         text-align: left;

package/dist-react/esm/components/ds-map-pin/ds-map-pin.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";

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

@@ -25,7 +25,7 @@ var t = e`
         align-items: center;
         justify-content: center;
         top: -8px;
-        right: -6px;
+        inset-inline-end: -6px;
         width: 24px;
         height: 24px;
     }

package/dist-react/esm/components/ds-media-control/ds-media-control.js

@@ -85,7 +85,7 @@ var u = class extends t {
                 class=${s(this.classes)}
                 role="button"
                 tabindex="0"
-                aria-label=${`${t} media ${this.size}`}
+                aria-label=${this.dataAriaLabel || `${t} media ${this.size}`}
                 @click=${this.handleToggle}
                 @keydown=${this.onKeyDown}
             >
@@ -96,6 +96,9 @@ var u = class extends t {
 	}
 }, d = (u.styles = [l], u);
 i([n({
+	type: String,
+	attribute: "data-aria-label"
+})], d.prototype, "dataAriaLabel", void 0), i([n({
 	type: String,
 	attribute: "state",
 	reflect: !0