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

package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -1,30 +1,31 @@
-import { html as e, nothing as t } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
-import { LitElement as n } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.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 { LitElement as r } from "../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
-import { property as 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 { queryAssignedElements as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { property as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as s } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.js";
-import s from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
-import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import c from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.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 { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { classMap as d } 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 { ViewportMixin as f } from "../../mixins/ViewportMixin.js";
 import "../ds-icon-button/ds-icon-button.js";
 import "../ds-button/ds-button.js";
-import { commonStyles as f } from "./styles/common.styles.js";
+import { commonStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
-var p = class extends d(n) {
+var m = class extends f(r) {
 	constructor(...e) {
 		super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.actionsCount = 0, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScroll();
 		}), this.handleScroll = () => {
-			var e, t, n, r;
-			let i = ((e = this.itemsContainer) == null ? void 0 : e.scrollLeft) + ((t = this.itemsContainer) == null ? void 0 : t.clientWidth);
-			this.hasScrollLeft = ((n = this.itemsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.itemsContainer) == null ? void 0 : r.scrollWidth);
+			var e, t, n;
+			let r = Math.abs((e = this.itemsContainer) == null ? void 0 : e.scrollLeft), i = r + ((t = this.itemsContainer) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = r > 0, this.hasScrollRight = i < ((n = this.itemsContainer) == null ? void 0 : n.scrollWidth);
 		};
 	}
 	static resolveResponsive(e, t, n) {
@@ -35,28 +36,28 @@ var p = class extends d(n) {
 			return e;
 		}
 		if (typeof r != "object" || !r || Array.isArray(r)) return e;
-		let i = r, a = m.VIEWPORT_ORDER.indexOf(t);
+		let i = r, a = h.VIEWPORT_ORDER.indexOf(t);
 		for (let e = a; e >= 0; e--) {
-			let t = m.VIEWPORT_ORDER[e];
+			let t = h.VIEWPORT_ORDER[e];
 			if (t in i) return i[t];
 		}
 		return n;
 	}
 	get resolvedItemsMode() {
-		return m.resolveResponsive(this.itemsMode, this.viewport, "auto");
+		return h.resolveResponsive(this.itemsMode, this.viewport, "auto");
 	}
 	get resolvedActionsMode() {
-		return m.resolveResponsive(this.actionsMode, this.viewport, "auto");
+		return h.resolveResponsive(this.actionsMode, this.viewport, "auto");
 	}
 	updated(e) {
 		super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
 	}
-	firstUpdated(e) {
-		var t;
-		super.firstUpdated(e), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
+	firstUpdated(t) {
+		var n;
+		super.firstUpdated(t), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (n = this.itemsContainer) == null || n.addEventListener("scroll", this.handleScroll), e.subscribe("direction", this.handleScroll);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll), e.unsubscribe("direction", this.handleScroll);
 	}
 	get selectedItemText() {
 		var e;
@@ -152,10 +153,10 @@ var p = class extends d(n) {
 		].includes(this.viewport) && this.actionsCount > 1;
 	}
 	render() {
-		return e`
+		return t`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${u(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${d(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
@@ -167,47 +168,47 @@ var p = class extends d(n) {
         `;
 	}
 	get itemsTemplate() {
-		return this.shouldShowItemsInline ? e`
+		return this.shouldShowItemsInline ? t`
             <div class="items-container">
                 <div>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : t;
+        ` : n;
 	}
 	get actionsTemplate() {
-		return this.shouldShowActionsInline ? e`
+		return this.shouldShowActionsInline ? t`
             <div class="actions-container">
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
-        ` : t;
+        ` : n;
 	}
 	get iconTemplate() {
-		return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
+		return u`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
 	}
 	get itemsDropdownButtonTemplate() {
-		return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? l`<ds-icon-button
+		return this.shouldShowItemsDropdownButton ? this.resolvedItemsMode === "icon-button" ? u`<ds-icon-button
                 class="items-list-button"
-                data-aria-label="open items dropdown"
+                data-aria-label=${this.dataAriaLabelItemsDropdown || "open items dropdown"}
                 @click=${this.toggleItemsDropdown}
-                size=${m.RESPONSIVE_BUTTON_SIZE}
+                size=${h.RESPONSIVE_BUTTON_SIZE}
                 variant="secondary"
                 icon-name="list-line"
-            ></ds-icon-button>` : l`<ds-button
+            ></ds-icon-button>` : u`<ds-button
             class="items-dropdown-button"
             variant="secondary"
-            size=${m.RESPONSIVE_BUTTON_SIZE}
+            size=${h.RESPONSIVE_BUTTON_SIZE}
             icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
-            icon-position="right"
+            icon-position="end"
             @click=${this.toggleItemsDropdown}
             aria-expanded=${this.openItems}
             aria-haspopup="true"
-        ><span>${this.selectedItemText}</span></ds-button>` : t;
+        ><span>${this.selectedItemText}</span></ds-button>` : n;
 	}
 	get itemsDropdownTemplate() {
-		return this.shouldShowItemsDropdownButton ? e`
+		return this.shouldShowItemsDropdownButton ? t`
             <div
-                class=${u({
+                class=${d({
 			gutter: !0,
 			"dropdown-container": !0,
 			"items-dropdown": !0,
@@ -221,21 +222,21 @@ var p = class extends d(n) {
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
-        ` : t;
+        ` : n;
 	}
 	get actionsDropdownButtonTemplate() {
-		return this.shouldShowActionsDropdownButton ? l`<ds-icon-button
+		return this.shouldShowActionsDropdownButton ? u`<ds-icon-button
             class="nav-arrow"
-            data-aria-label="open actions dropdown"
+            data-aria-label=${this.dataAriaLabelActionsDropdown || "open actions dropdown"}
             @click=${this.toggleActionsDropdown}
-            size=${m.RESPONSIVE_BUTTON_SIZE}
+            size=${h.RESPONSIVE_BUTTON_SIZE}
             icon-name="triple-dot-v"
-        ></ds-icon-button>` : t;
+        ></ds-icon-button>` : n;
 	}
 	get actionsDropdownTemplate() {
-		return this.shouldShowActionsDropdownButton ? e`
+		return this.shouldShowActionsDropdownButton ? t`
             <div
-                class=${u({
+                class=${d({
 			gutter: !0,
 			"dropdown-container": !0,
 			"actions-dropdown": !0,
@@ -249,41 +250,47 @@ var p = class extends d(n) {
                     <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
                 </div>
             </div>
-        ` : t;
+        ` : n;
 	}
 	get backdropTemplate() {
-		return !this.openItems && !this.openCtas ? t : e`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
+		return !this.openItems && !this.openCtas ? n : t`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
 	}
-}, m = p, h = (p.styles = [f], p.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
+}, h = m, g = (m.styles = [p], m.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
 	xs: "medium",
 	s: "medium",
 	m: "medium",
 	l: "medium",
 	xl: "large",
 	xxl: "large"
-}), p.VIEWPORT_ORDER = [
+}), m.VIEWPORT_ORDER = [
 	"xs",
 	"s",
 	"m",
 	"l",
 	"xl",
 	"xxl"
-], p);
-s([r({
+], m);
+c([i({
+	type: String,
+	attribute: "data-aria-label-items-dropdown"
+})], g.prototype, "dataAriaLabelItemsDropdown", void 0), c([i({
+	type: String,
+	attribute: "data-aria-label-actions-dropdown"
+})], g.prototype, "dataAriaLabelActionsDropdown", void 0), c([i({
 	type: String,
 	attribute: "dropdown-button-text"
-})], h.prototype, "dropdownButtonText", void 0), s([r({
+})], g.prototype, "dropdownButtonText", void 0), c([i({
 	type: Number,
 	attribute: "selected-index"
-})], h.prototype, "selectedIndex", void 0), s([r({
+})], g.prototype, "selectedIndex", void 0), c([i({
 	type: Boolean,
 	attribute: "keep-dropdown-button-text"
-})], h.prototype, "keepDropdownButtonText", void 0), s([r({
+})], g.prototype, "keepDropdownButtonText", void 0), c([i({
 	type: String,
 	attribute: "items-mode"
-})], h.prototype, "itemsMode", void 0), s([r({
+})], g.prototype, "itemsMode", void 0), c([i({
 	type: String,
 	attribute: "actions-mode"
-})], h.prototype, "actionsMode", void 0), s([i()], h.prototype, "openItems", void 0), s([i()], h.prototype, "openCtas", void 0), s([i()], h.prototype, "hasScrollLeft", void 0), s([i()], h.prototype, "hasScrollRight", void 0), s([i()], h.prototype, "actionsCount", void 0), s([o({ slot: "items" })], h.prototype, "items", void 0), s([o({ slot: "actions" })], h.prototype, "ctas", void 0), s([a(".items-container")], h.prototype, "itemsContainer", void 0), h = m = s([c("ds-secondary-navigation")], h);
+})], g.prototype, "actionsMode", void 0), c([a()], g.prototype, "openItems", void 0), c([a()], g.prototype, "openCtas", void 0), c([a()], g.prototype, "hasScrollLeft", void 0), c([a()], g.prototype, "hasScrollRight", void 0), c([a()], g.prototype, "actionsCount", void 0), c([s({ slot: "items" })], g.prototype, "items", void 0), c([s({ slot: "actions" })], g.prototype, "ctas", void 0), c([o(".items-container")], g.prototype, "itemsContainer", void 0), g = h = c([l("ds-secondary-navigation")], g);
 //#endregion
-export { h as DsSecondaryNavigation };
+export { g as DsSecondaryNavigation };

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

@@ -20,7 +20,7 @@ var t = e`
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         background: var(--ui-kit-private-blur-background);
         backdrop-filter: blur(var(--ui-kit-private-blur-size));
         border-radius: var(--ui-kit-private-blur-border-radius, inherit);
@@ -137,6 +137,26 @@ var t = e`
         );
     }
 
+    :host(:dir(rtl)) .scroll-left .items-container {
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    :host(:dir(rtl)) .scroll-right .items-container {
+        mask-image: linear-gradient(
+            to left,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0.5) 95%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
     .scroll-left.scroll-right .items-container {
         mask-image: linear-gradient(
             to right,
@@ -234,7 +254,7 @@ var t = e`
         box-sizing: border-box;
         width: 100%;
         z-index: var(--ds-z-index-context-menu);
-        left: 0;
+        inset-inline-start: 0;
         bottom: calc(var(--ui-kit-private-secondary-navigation-container-height) + var(--ds-spacing-s-5));
     }
 
@@ -276,8 +296,8 @@ var t = e`
     .dropdown-backdrop {
         position: fixed;
         top: 0;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         bottom: 0;
     }
 

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

@@ -9,8 +9,8 @@ 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 { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import "../ds-icon/ds-icon.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import "../ds-icon/ds-icon.js";
 import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
 import { classMap as d } 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/esm/components/ds-select/styles/cupra-diagonal.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='cupra-diagonal']) .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);
         --ui-kit-icon-color: var(--ds-color-icon-selected, #b2764d);
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .option:last-child {
@@ -256,10 +258,12 @@ var t = e`
         background: var(--ds-dropdown-select-list-bg-color-hover, rgba(195, 195, 203, 0.1));
     }
     :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .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);
     }
@@ -306,7 +310,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .medium ::slotted([slot='helper-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -330,7 +334,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .medium ::slotted([slot='readonly-text']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -345,7 +349,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .medium ::slotted([slot='forced-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
@@ -366,7 +370,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) .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='cupra-diagonal']) .medium ::slotted([slot='invalid-error']) {
         font: 350 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)

package/dist/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/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/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/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/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/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);
     }