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

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

@@ -1,64 +1,59 @@
-import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
+import { pubSub as e } from "../../utils/PubSub.js";
+import { html as t, nothing as n } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js";
+import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import a from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
-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 o from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { UiKitElement as s } from "../base/UiKitElement.js";
+import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import { 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 { ifDefined as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.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 "../ds-icon-button/ds-icon-button.js";
-import { commonStyles as f, navigationStyles as p, panelsStyles as m, tabsStyles as h } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as g } from "./styles/cupra-diagonal.styles.js";
-import { cupraStyles as _ } from "./styles/cupra.styles.js";
-import { seatLegacyStyles as v } from "./styles/seat-legacy.styles.js";
-import { seatStyles as y } from "./styles/seat.styles.js";
-import { themeConfig as b } from "./theme-config.js";
+import { commonStyles as m, navigationStyles as h, panelsStyles as g, tabsStyles as _ } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as v } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as y } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as b } from "./styles/seat-legacy.styles.js";
+import { seatStyles as x } from "./styles/seat.styles.js";
+import { themeConfig as S } from "./theme-config.js";
 //#region src/components/ds-tabs/ds-tabs.ts
-var x = class extends o {
+var C = class extends s {
 	constructor(...e) {
 		super(...e), this._selectedTab = void 0, this._selectedTabState = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
 			if (!(this.focusedTabIndex < 0)) switch (e.key) {
 				case "ArrowRight":
 				case "Right":
-					var t;
-					if (e.preventDefault(), this.focusedTabIndex + 1 < ((t = this.tabs) == null ? void 0 : t.length)) {
-						var n;
-						this.focusedTabIndex += 1, (n = this.tabs[this.focusedTabIndex]) == null || n.focus();
-					}
+					e.preventDefault(), this.moveFocus(u(this));
 					break;
 				case "ArrowLeft":
 				case "Left":
-					if (e.preventDefault(), this.focusedTabIndex - 1 >= 0) {
-						var r;
-						--this.focusedTabIndex, (r = this.tabs[this.focusedTabIndex]) == null || r.focus();
-					}
+					e.preventDefault(), this.moveFocus(-u(this));
 					break;
 				case "Enter":
 				case " ":
-					var i;
-					e.preventDefault(), this.focusedTabIndex >= 0 && this.focusedTabIndex < ((i = this.tabs) == null ? void 0 : i.length) && this.handleChangeSelectedTab(this.focusedTabIndex);
+					var t;
+					e.preventDefault(), this.focusedTabIndex >= 0 && this.focusedTabIndex < ((t = this.tabs) == null ? void 0 : t.length) && this.handleChangeSelectedTab(this.focusedTabIndex);
 			}
 		}, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScrollNav();
 		}), this.handleScrollNav = () => {
-			var e, t, n, r;
-			let i = ((e = this.nav) == null ? void 0 : e.scrollLeft) + ((t = this.nav) == null ? void 0 : t.clientWidth);
-			this.hasScrollLeft = ((n = this.nav) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.nav) == null ? void 0 : r.scrollWidth);
+			var e, t, n;
+			let r = Math.abs((e = this.nav) == null ? void 0 : e.scrollLeft), i = r + ((t = this.nav) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = r > 0, this.hasScrollRight = i < ((n = this.nav) == null ? void 0 : n.scrollWidth);
 		}, this.handleScrollLeft = () => {
 			this.nav.scrollBy({
-				left: -150,
+				left: -150 * u(this),
 				behavior: "smooth"
 			});
 		}, this.handleScrollRight = () => {
 			this.nav.scrollBy({
-				left: 150,
+				left: 150 * u(this),
 				behavior: "smooth"
 			});
 		}, this.handleFocus = (e) => {
@@ -79,28 +74,34 @@ var x = class extends o {
 	set selectedTab(e) {
 		this._selectedTab = e;
 	}
+	moveFocus(e) {
+		var t, n;
+		let r = this.focusedTabIndex + e;
+		r < 0 || r >= ((t = this.tabs) == null ? void 0 : t.length) || (this.focusedTabIndex = r, (n = this.tabs[r]) == null || n.focus());
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.tabs = Array.from(this.querySelectorAll("[slot=tab]")), this.panels = Array.from(this.querySelectorAll("[slot=panel]"));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav);
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), e.unsubscribe("direction", this.handleScrollNav);
 	}
-	getScrollButtonTemplate(e, n) {
+	getScrollButtonTemplate(e, t) {
 		var r;
-		if (!this.theme || e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight) return t;
-		let i = `arrow-${e}`, a = (r = b[this.theme]) == null ? void 0 : r["icon-button-variant"];
-		return l`<ds-icon-button
+		if (!this.theme || e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight) return n;
+		let i = `arrow-${e}`, a = (r = S[this.theme]) == null ? void 0 : r["icon-button-variant"];
+		return d`<ds-icon-button
             class=${`nav-arrow ${e}`}
-            data-aria-label=${`nav-arrow-${e}`}
-            @click=${n}
+            data-aria-label=${this.dataAriaLabelNavArrow || `nav-arrow-${e}`}
+            @click=${t}
             size=${this.size === "medium" ? "medium" : "large"}
             icon-name=${i}
-            mode=${d(this.mode)}
-            variant=${d(a)}
+            mirror
+            mode=${p(this.mode)}
+            variant=${p(a)}
         ></ds-icon-button>`;
 	}
 	firstUpdated() {
-		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
+		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), e.subscribe("direction", this.handleScrollNav), this.setTabsFocusable();
 	}
 	updated(e) {
 		if (super.updated(e), (e.has("_selectedTab") || e.has("_selectedTabState")) && this.selectTab(this.selectedTab), e.has("variant")) {
@@ -122,12 +123,17 @@ var x = class extends o {
 		});
 	}
 	selectTab(e) {
-		var t, n, r, i, a;
+		var t, n, r, i;
 		(t = this.tabs) == null || t.forEach((t, n) => {
 			t.removeAttribute("selected"), t.setAttribute("aria-selected", n === e ? "true" : "false");
 		}), (n = this.tabs[e]) == null || n.setAttribute("selected", ""), this.panels.forEach((e) => e.removeAttribute("selected")), (r = this.panels[e]) == null || r.setAttribute("selected", "");
-		let o = (i = this.tabs) == null ? void 0 : i[this.selectedTab];
-		this.nav.scrollLeft = (o == null ? void 0 : o.offsetLeft) - ((a = this.nav) == null ? void 0 : a.offsetWidth) / 2;
+		let a = (i = this.tabs) == null ? void 0 : i[this.selectedTab];
+		this.nav.scrollLeft = this.getCenteredScrollLeft(a);
+	}
+	getCenteredScrollLeft(e) {
+		var t;
+		let n = (e == null ? void 0 : e.offsetLeft) - ((t = this.nav) == null ? void 0 : t.offsetWidth) / 2;
+		return u(this) === 1 ? n : n - (this.nav.scrollWidth - this.nav.clientWidth);
 	}
 	setupTabAccessibility() {
 		var e;
@@ -166,9 +172,9 @@ var x = class extends o {
 		};
 	}
 	render() {
-		return e`
-            <div part="container" class=${u(this.classes)}>
-                <div class=${u(this.navContainerClasses)}>
+		return t`
+            <div part="container" class=${f(this.classes)}>
+                <div class=${f(this.navContainerClasses)}>
                     ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
                     <nav tabindex="0" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
                         <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
@@ -180,29 +186,32 @@ var x = class extends o {
             </div>
         `;
 	}
-}, S = (x.styles = [
-	f,
-	p,
-	h,
+}, w = (C.styles = [
 	m,
+	h,
+	_,
 	g,
+	v,
+	x,
 	y,
-	_,
-	v
-], x);
-a([n({
+	b
+], C);
+o([r({
+	type: String,
+	attribute: "data-aria-label-nav-arrow"
+})], w.prototype, "dataAriaLabelNavArrow", void 0), o([r({
 	type: Number,
 	attribute: "selected-tab",
 	reflect: !0
-})], S.prototype, "_selectedTab", void 0), a([r()], S.prototype, "_selectedTabState", void 0), a([n({
+})], w.prototype, "_selectedTab", void 0), o([i()], w.prototype, "_selectedTabState", void 0), o([r({
 	type: String,
 	reflect: !0
-})], S.prototype, "mode", void 0), a([n({
+})], w.prototype, "mode", void 0), o([r({
 	type: String,
 	reflect: !0
-})], S.prototype, "variant", void 0), a([n({ type: String })], S.prototype, "size", void 0), a([n({
+})], w.prototype, "variant", void 0), o([r({ type: String })], w.prototype, "size", void 0), o([r({
 	type: Boolean,
-	converter: c
-})], S.prototype, "disabled", void 0), a([r()], S.prototype, "focusedTabIndex", void 0), a([i("nav")], S.prototype, "nav", void 0), a([r()], S.prototype, "tabs", void 0), a([r()], S.prototype, "panels", void 0), a([r()], S.prototype, "hasScrollLeft", void 0), a([r()], S.prototype, "hasScrollRight", void 0), S = a([s("ds-tabs")], S);
+	converter: l
+})], w.prototype, "disabled", void 0), o([i()], w.prototype, "focusedTabIndex", void 0), o([a("nav")], w.prototype, "nav", void 0), o([i()], w.prototype, "tabs", void 0), o([i()], w.prototype, "panels", void 0), o([i()], w.prototype, "hasScrollLeft", void 0), o([i()], w.prototype, "hasScrollRight", void 0), w = o([c("ds-tabs")], w);
 //#endregion
-export { S as DsTabs };
+export { w as DsTabs };

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

@@ -34,7 +34,7 @@ var t = e`
         content: '';
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         bottom: 0;
         width: 32px;
         background: linear-gradient(to right, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
@@ -44,12 +44,20 @@ var t = e`
         content: '';
         position: absolute;
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 0;
         width: 32px;
         background: linear-gradient(to left, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
     }
 
+    :host(:dir(rtl)) .nav-container.scroll-left .scroll-fade::before {
+        background: linear-gradient(to left, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
+    }
+
+    :host(:dir(rtl)) .nav-container.scroll-right .scroll-fade::after {
+        background: linear-gradient(to right, var(--ds-color-surface-contrast-subtle) 0%, transparent 100%);
+    }
+
     .nav-arrow {
         visibility: hidden;
     }

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

@@ -16,7 +16,7 @@ var t = e`
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         background: var(--ui-kit-private-blur-background);
         -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
@@ -119,20 +119,19 @@ var t = e`
         pointer-events: none;
         z-index: 0;
         bottom: 0;
-        left: var(--ui-kit-private-tab-horizontal-padding);
-        right: var(--ui-kit-private-tab-horizontal-padding);
+        inset-inline: var(--ui-kit-private-tab-horizontal-padding);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .secondary ::slotted([slot='tab']:first-child) {
-        margin-right: 0.0625rem;
+        margin-inline-end: 0.0625rem;
         text-transform: uppercase;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .secondary ::slotted([slot='tab']:first-child)::after {
         content: '';
         position: absolute;
-        right: 0;
-        margin-right: -0.0625rem;
+        inset-inline-end: 0;
+        margin-inline-end: -0.0625rem;
         width: 0.0625rem;
         height: 2rem;
         border-radius: var(--ds-border-radius-00, 0);
@@ -153,11 +152,11 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .nav-arrow.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container {

package/dist/esm/components/ds-tabs/styles/seat.styles.js

@@ -16,7 +16,7 @@ var t = e`
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         background: var(--ui-kit-private-blur-background);
         -webkit-backdrop-filter: blur(var(--ui-kit-private-blur-size));
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
@@ -119,20 +119,19 @@ var t = e`
         pointer-events: none;
         z-index: 0;
         bottom: 0;
-        left: var(--ui-kit-private-tab-horizontal-padding);
-        right: var(--ui-kit-private-tab-horizontal-padding);
+        inset-inline: var(--ui-kit-private-tab-horizontal-padding);
     }
 
     :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child) {
-        margin-right: 0.0625rem;
+        margin-inline-end: 0.0625rem;
         text-transform: uppercase;
     }
 
     :host([data-ui-kit-theme='seat']) .secondary ::slotted([slot='tab']:first-child)::after {
         content: '';
         position: absolute;
-        right: 0;
-        margin-right: -0.0625rem;
+        inset-inline-end: 0;
+        margin-inline-end: -0.0625rem;
         width: 0.0625rem;
         height: 2rem;
         border-radius: var(--ds-border-radius-00, 0);
@@ -153,11 +152,11 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .nav-arrow.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     :host([data-ui-kit-theme='seat']) .nav-arrow.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 
     :host([data-ui-kit-theme='seat']) .container {

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

@@ -6,21 +6,20 @@ 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";
 import { ifDefined as u } 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 { when as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
-import { commonStyles as f, iconStyles as p } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as m } from "./styles/cupra-diagonal.styles.js";
-import { cupraStyles as h } from "./styles/cupra.styles.js";
-import { seatLegacyStyles as g } from "./styles/seat-legacy.styles.js";
-import { seatStyles as _ } from "./styles/seat.styles.js";
+import { commonStyles as d, iconStyles as f } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as p } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as m } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as h } from "./styles/seat-legacy.styles.js";
+import { seatStyles as g } from "./styles/seat.styles.js";
 //#region src/components/ds-tag/ds-tag.ts
-var v = class extends a {
+var _ = class extends a {
 	constructor(...e) {
 		super(...e), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left";
 	}
@@ -33,6 +32,7 @@ var v = class extends a {
 	get iconClasses() {
 		return {
 			icon: !0,
+			[`icon-${this.iconPosition}`]: !!this.iconPosition,
 			clicable: !!this.clickableIcon
 		};
 	}
@@ -50,39 +50,38 @@ var v = class extends a {
 	render() {
 		return this.show ? e`
                 <div class=${l(this.classes)}>
-                    ${d(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                     <slot></slot>
-                    ${d(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
+                    ${this.iconTemplate}
                 </div>
             ` : t;
 	}
-}, y = (v.styles = [
+}, v = (_.styles = [
+	d,
 	f,
 	p,
+	g,
 	m,
-	_,
-	h,
-	g
-], v);
+	h
+], _);
 i([n({
 	type: Boolean,
 	converter: s
-})], y.prototype, "show", void 0), i([n({
+})], v.prototype, "show", void 0), i([n({
 	type: Boolean,
 	converter: s,
 	attribute: "clickable-icon"
-})], y.prototype, "clickableIcon", void 0), i([n({
+})], v.prototype, "clickableIcon", void 0), i([n({
 	type: String,
 	attribute: "icon-name"
-})], y.prototype, "iconName", void 0), i([n({
+})], v.prototype, "iconName", void 0), i([n({
 	type: String,
 	attribute: "icon-position"
-})], y.prototype, "iconPosition", void 0), i([n({
+})], v.prototype, "iconPosition", void 0), i([n({
 	type: String,
 	attribute: "color"
-})], y.prototype, "color", void 0), i([n({
+})], v.prototype, "color", void 0), i([n({
 	type: String,
 	attribute: "variant"
-})], y.prototype, "variant", void 0), i([r()], y.prototype, "onClickHandler", void 0), y = i([o("ds-tag")], y);
+})], v.prototype, "variant", void 0), i([r()], v.prototype, "onClickHandler", void 0), v = i([o("ds-tag")], v);
 //#endregion
-export { y as DsTag };
+export { v as DsTag };

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

@@ -15,6 +15,19 @@ var t = e`
     .icon.clicable {
         cursor: pointer;
     }
+
+    .icon-start,
+    .icon-left {
+        order: -1;
+    }
+
+    :host(:dir(rtl)) .icon-left {
+        order: 0;
+    }
+
+    :host(:dir(rtl)) .icon-right {
+        order: -1;
+    }
 `;
 //#endregion
 export { t as commonStyles, n as iconStyles };

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

@@ -102,7 +102,8 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
         box-sizing: border-box;
         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);
@@ -110,7 +111,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
-        padding-left: var(--ds-spacing-s-5);
+        padding-inline-start: var(--ds-spacing-s-5);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .input-container:hover,

package/dist/esm/components/ds-textarea/styles/seat.styles.js

@@ -102,7 +102,8 @@ var t = e`
     :host([data-ui-kit-theme='seat']) .input-container {
         box-sizing: border-box;
         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);
@@ -110,7 +111,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .medium .input-container {
-        padding-left: var(--ds-spacing-s-5);
+        padding-inline-start: var(--ds-spacing-s-5);
     }
 
     :host([data-ui-kit-theme='seat']) .input-container:hover,

package/dist/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -17,6 +17,24 @@ var f = class extends a {
 	constructor(...e) {
 		super(...e), this.loadFonts = !0, this.loadStyles = !0, this.loadUnusedStyles = !0, this.cssLoaded = !1, this.loadedFonts = /* @__PURE__ */ new Set();
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.publishDocumentAttributes(), this.observeDocumentAttributes();
+	}
+	disconnectedCallback() {
+		var e;
+		super.disconnectedCallback(), (e = this.documentAttributesObserver) == null || e.disconnect(), this.documentAttributesObserver = void 0;
+	}
+	observeDocumentAttributes() {
+		typeof MutationObserver < "u" && typeof document < "u" && (this.documentAttributesObserver = new MutationObserver(() => this.publishDocumentAttributes()), this.documentAttributesObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["dir", "lang"]
+		}));
+	}
+	publishDocumentAttributes() {
+		if (typeof document > "u") return;
+		let { documentElement: e } = document;
+		n.publish("direction", e.getAttribute("dir") === "rtl" ? "rtl" : "ltr"), n.publish("lang", e.getAttribute("lang"));
+	}
 	updated(e) {
 		if (super.updated(e), e.has("theme")) {
 			var t, r;
@@ -34,26 +52,27 @@ var f = class extends a {
 			this.loadThemeFont(e);
 		});
 	}
-	async loadThemeFont({ weight: e, name: t, file: n }) {
+	async loadThemeFont({ weight: e, name: t, file: n, unicodeRange: r, display: i }) {
 		if (!this.loadFonts) return Promise.resolve();
-		let r = `${t}-${e}`;
-		if (this.loadedFonts.has(r)) return;
-		let i = new FontFace(t, `url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
+		let a = r ? `${t}-${e}-${r}` : `${t}-${e}`;
+		if (this.loadedFonts.has(a)) return;
+		let o = new FontFace(t, `url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`, {
 			style: "normal",
 			weight: e,
-			display: "optional"
+			display: i ?? (r ? "swap" : "optional"),
+			...r && { unicodeRange: r }
 		});
 		try {
-			await i.load(), document.fonts.add(i), this.loadedFonts.add(r);
+			r || await o.load(), document.fonts.add(o), this.loadedFonts.add(a);
 		} catch (n) {
 			console.error(`Error loading "${t}" font with "${e}" weight:`, n);
 		}
 	}
 	loadThemeStyles() {
-		let e = "/2.0.0-canary.237";
+		let e = "/2.0.0-canary.239";
 		return this.loadUnusedStyles && this.applyUnusedStyles(e), this.loadStyles ? new Promise((t, n) => {
 			let r = `https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) t();

package/dist/esm/components/ds-toast/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-toast/styles/common.styles.ts
 var t = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: contents;
     }
@@ -14,6 +18,37 @@ var t = e`
         pointer-events: none;
     }
 
+    .toast-container.top-end,
+    .toast-container.top-start {
+        top: 1rem;
+    }
+
+    .toast-container.top-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.top-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
+    .toast-container.bottom-end,
+    .toast-container.bottom-start {
+        flex-direction: column;
+        bottom: 1rem;
+    }
+
+    .toast-container.bottom-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.bottom-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
     .toast-container.top-right {
         top: 1rem;
         right: 1rem;
@@ -29,16 +64,15 @@ var t = e`
     .toast-container.bottom-right,
     .toast-container.bottom-left {
         flex-direction: column;
+        bottom: 1rem;
     }
 
     .toast-container.bottom-right {
-        bottom: 1rem;
         right: 1rem;
         align-items: flex-end;
     }
 
     .toast-container.bottom-left {
-        bottom: 1rem;
         left: 1rem;
         align-items: flex-start;
     }
@@ -90,7 +124,7 @@ var t = e`
         }
         to {
             opacity: 0;
-            transform: translateX(-1rem);
+            transform: translateX(calc(-1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 
@@ -101,7 +135,7 @@ var t = e`
         }
         to {
             opacity: 0;
-            transform: translateX(1rem);
+            transform: translateX(calc(1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 `;