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

package/dist/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/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/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/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/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

package/dist/esm/components/ds-modal/ds-modal.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";
@@ -58,7 +58,7 @@ var y = class extends u(i) {
 	get closeButtonTemplate() {
 		return this.withCloseButton ? s`<ds-icon-button
             class="close-button"
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close-button"}
             @click=${this.handleClickCloseButton}
             size=${l(this.closeButtonSize)}
             icon-name="cross"
@@ -169,6 +169,9 @@ var y = class extends u(i) {
 	_
 ], y);
 r([n({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], b.prototype, "dataAriaLabelCloseButton", void 0), r([n({
 	type: Boolean,
 	reflect: !0,
 	converter: o

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

@@ -34,7 +34,7 @@ var n = e`
 
     .close-button {
         position: absolute;
-        right: 8px;
+        inset-inline-end: 8px;
         top: 24px;
         z-index: 1;
     }
@@ -98,7 +98,7 @@ var n = e`
         }
 
         .close-button {
-            right: 24px;
+            inset-inline-end: 24px;
             top: 24px;
         }
     }
@@ -144,7 +144,7 @@ var n = e`
         height: 100%;
         width: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         box-sizing: border-box;
     }
 
@@ -166,7 +166,7 @@ var n = e`
     .backdrop {
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         height: 100%;
         width: 100%;
         max-height: 100dvh;

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

@@ -1,14 +1,15 @@
 import { html as e } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js";
 import { LitElement as t } 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 { queryAssignedElements as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as r } 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 r from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
-import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as a } from "../../mixins/ViewportMixin.js";
-import { commonStyles as o } from "./styles/common.styles.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { ViewportMixin as o } from "../../mixins/ViewportMixin.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-navigation-controls/ds-navigation-controls.ts
-var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(t) {
+var c, l = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], u = (c = class extends o(t) {
 	constructor(...e) {
 		super(...e), this.handleSlotChange = () => {
 			this.updateIconButtonSizes();
@@ -25,7 +26,7 @@ var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(
 	}
 	findIconButtons(e) {
 		let t = [];
-		c.includes(e.tagName) && t.push(e);
+		l.includes(e.tagName) && t.push(e);
 		for (let n of e.children) t.push(...this.findIconButtons(n));
 		return t;
 	}
@@ -35,12 +36,15 @@ var s, c = ["DS-ICON-BUTTON", "DS-ICON-BUTTON-REACT"], l = (s = class extends a(
 	}
 	render() {
 		return e`
-            <div part="container" class="container" role="group" aria-label="Navigation controls">
+            <div part="container" class="container" role="group" aria-label=${this.dataAriaLabel || "Navigation controls"}>
                 <slot @slotchange=${this.handleSlotChange}></slot>
             </div>
         `;
 	}
-}, s.styles = [o], s);
-r([n({ flatten: !0 })], l.prototype, "slottedElements", void 0), l = r([i("ds-navigation-controls")], l);
+}, c.styles = [s], c);
+i([n({
+	type: String,
+	attribute: "data-aria-label"
+})], u.prototype, "dataAriaLabel", void 0), i([r({ flatten: !0 })], u.prototype, "slottedElements", void 0), u = i([a("ds-navigation-controls")], u);
 //#endregion
-export { l as DsNavigationControls };
+export { u as DsNavigationControls };

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

@@ -34,6 +34,10 @@ var t = e`
         background-position: calc(var(--ds-spacing-m-3) / 2) center;
     }
 
+    :host(:dir(rtl)) ::slotted(*:not(:first-child)) {
+        background-position: calc(100% - var(--ds-spacing-m-3) / 2) center;
+    }
+
     @media (max-width: 1439px) {
         :host {
             --ui-kit-private-navigation-controls-section-gap: var(--ds-spacing-s-4);

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

@@ -50,7 +50,14 @@ var t = e`
         gap: var(--ds-spacing-s-5);
         padding: var(--ds-spacing-s-2) var(--ds-spacing-s-5);
     }
-    .container.right {
+    :is(.container.end, .container.right) {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    :host(:dir(rtl)) .container.right {
+        flex-direction: row;
+    }
+    :host(:dir(rtl)) .container.left {
         flex-direction: row-reverse;
         justify-content: space-between;
     }

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

@@ -5,8 +5,8 @@ import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.
 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 { 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";
@@ -41,14 +41,17 @@ var l = class extends t {
 	render() {
 		let t = this.value !== void 0 && this.value >= 0 ? this.value : 0, n = Math.max(0, Math.min(5, t)).toString();
 		return e`
-            <div class=${s(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
+            <div class=${s(this.classes)} aria-label=${this.dataAriaLabel || `Rating: ${n} out of 5`} role="img">
                 <div class="stars-wrapper">${this.starsTemplate}</div>
                 ${this.hideRatingText ? "" : e`<span class="rating-text">${n}</span>`}
             </div>
         `;
 	}
 }, u = (l.styles = [c], l);
-r([n({ type: Number })], u.prototype, "value", void 0), r([n({
+r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], u.prototype, "dataAriaLabel", void 0), r([n({ type: Number })], u.prototype, "value", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0

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

@@ -7,8 +7,8 @@ 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 "../ds-icon/ds-icon.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.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 "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.js";
@@ -76,7 +76,14 @@ var v = class extends d(o) {
 	}
 	get clearIconTemplate() {
 		return e`
-            ${l`<ds-icon class="clear-icon" data-testid="clear-icon" icon-name="cross" @click=${this.handleClickClearIcon}></ds-icon>`}
+            <button
+                class="clear-button"
+                type="button"
+                aria-label=${this.dataAriaLabelClearButton || "Clear search"}
+                @click=${this.handleClickClearIcon}
+            >
+                ${l`<ds-icon class="clear-icon" data-testid="clear-icon" icon-name="cross"></ds-icon>`}
+            </button>
         `;
 	}
 	get inputTemplate() {
@@ -88,7 +95,7 @@ var v = class extends d(o) {
                 maxlength=${this.maxLength}
                 .placeholder=${this.placeholder}
                 .value=${this._value}
-                aria-label=${this._value}
+                aria-label=${this.dataAriaLabel || "Search"}
                 @focus=${this.handleFocus}
                 @blur=${this.handleBlur}
                 @input=${this.handleInput}
@@ -147,6 +154,12 @@ a([n({
 	reflect: !0,
 	attribute: "initial-value"
 })], y.prototype, "initialValue", void 0), a([n({ type: String })], y.prototype, "label", void 0), a([n({
+	type: String,
+	attribute: "data-aria-label"
+})], y.prototype, "dataAriaLabel", void 0), a([n({
+	type: String,
+	attribute: "data-aria-label-clear-button"
+})], y.prototype, "dataAriaLabelClearButton", void 0), a([n({
 	type: String,
 	attribute: "helper-text"
 })], y.prototype, "helperText", void 0), a([n({

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

@@ -11,6 +11,17 @@ var t = e`
     .helper-text {
         user-select: none;
     }
+
+    .clear-button {
+        all: unset;
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .clear-button:focus-visible {
+        outline: revert;
+    }
 `, n = e`
     .container {
         position: relative;

package/dist/esm/components/ds-search-input/ds-search-input.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";

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