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

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

@@ -1,24 +1,30 @@
-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 { pubSub as e } from "../../utils/PubSub.js";
+import { html 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 "../../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 { 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 "../../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 { 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 a from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import { getDirectionSign as s } from "../../utils/getDirection/getDirection.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 c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.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 "../ds-icon-button/ds-icon-button.js";
 import "../ds-calendar-day/ds-calendar-day.js";
-import { numberArrayConverter as l, stringArrayConverter as u } from "../../utils/arrayConverter.js";
-import { commonStyles as d } from "./styles/common.styles.js";
+import { numberArrayConverter as d, stringArrayConverter as f } from "../../utils/arrayConverter.js";
+import { resolveLang as p } from "../../utils/resolveLang/resolveLang.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+import { getTargetDayIndex as h } from "./utils/getTargetDayIndex/getTargetDayIndex.js";
 //#region src/components/ds-calendar/ds-calendar.ts
-var f = class extends t {
+var g = class extends n {
 	constructor(...e) {
-		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1;
+		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.weekdayFormat = "two-letters", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1, this.handleLangChange = () => {
+			this.locale === "auto" && this.requestUpdate();
+		};
 	}
 	get selectedDate() {
 		if (this.value) {
@@ -30,8 +36,11 @@ var f = class extends t {
 	get viewDate() {
 		return this._viewDate;
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), e.unsubscribe("lang", this.handleLangChange);
+	}
 	connectedCallback() {
-		super.connectedCallback(), this.applyInitialValue();
+		super.connectedCallback(), e.subscribe("lang", this.handleLangChange), this.applyInitialValue();
 	}
 	willUpdate(e) {
 		super.willUpdate(e), (!this._viewDateInitialized || e.has("value") || e.has("viewDateAttr")) && (this._viewDateInitialized = !0, this.initializeViewDate());
@@ -66,21 +75,30 @@ var f = class extends t {
 			[this.size]: !0
 		};
 	}
+	get resolvedLocale() {
+		return this.locale === "auto" ? p(this) : this.locale;
+	}
+	formatWeekday(e, t) {
+		let n = e.format(t);
+		return this.weekdayFormat === "two-letters" ? n.slice(0, 2) : n;
+	}
 	get weekdayNames() {
-		let e = new Intl.DateTimeFormat(this.locale, { weekday: "short" }), t = [], n = new Date(2024, 0, 1);
+		let e = new Intl.DateTimeFormat(this.resolvedLocale, {
+			weekday: this.weekdayFormat === "narrow" ? "narrow" : "short",
+			calendar: "gregory"
+		}), t = [], n = new Date(2024, 0, 1);
 		for (; n.getDay() !== this.firstDayOfWeek;) n.setDate(n.getDate() + 1);
 		for (let r = 0; r < 7; r++) {
 			let i = new Date(n);
-			i.setDate(n.getDate() + r);
-			let a = e.format(i);
-			t.push(a.slice(0, 2));
+			i.setDate(n.getDate() + r), t.push(this.formatWeekday(e, i));
 		}
 		return t;
 	}
 	get monthYearLabel() {
-		return new Intl.DateTimeFormat(this.locale, {
+		return new Intl.DateTimeFormat(this.resolvedLocale, {
 			month: "long",
-			year: "numeric"
+			year: "numeric",
+			calendar: "gregory"
 		}).format(this._viewDate);
 	}
 	getDaysInMonth(e, t) {
@@ -151,6 +169,42 @@ var f = class extends t {
 		let e = new Date(this._viewDate);
 		e.setMonth(e.getMonth() + 1), this._viewDate = e;
 	}
+	get tabStopIndex() {
+		let e = this.calendarDays, t = e.findIndex((e) => e.isSelected && !e.isDisabled);
+		return t === -1 ? e.findIndex((e) => !e.isDisabled) : t;
+	}
+	focusDayAt(e) {
+		var t, n;
+		let r = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("ds-calendar-day"), i = r == null ? void 0 : r[e];
+		i == null || (n = i.shadowRoot) == null || (n = n.querySelector("button")) == null || n.focus();
+	}
+	changeMonthKeepingDay(e) {
+		let t = this._viewDate.getDate(), n = new Date(this._viewDate.getFullYear(), this._viewDate.getMonth() + e, 1), r = this.getDaysInMonth(n.getFullYear(), n.getMonth());
+		n.setDate(Math.min(t, r)), this._viewDate = n;
+	}
+	async moveFocusToViewDate() {
+		await this.updateComplete;
+		let e = this.calendarDays.findIndex((e) => e.isCurrentMonth && e.day === this._viewDate.getDate());
+		this.focusDayAt(e);
+	}
+	handleGridKeyDown(e) {
+		var t;
+		if (e.key === "PageUp" || e.key === "PageDown") {
+			e.preventDefault(), this.changeMonthKeepingDay(e.key === "PageUp" ? -1 : 1), this.moveFocusToViewDate();
+			return;
+		}
+		let n = Array.from(((t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("ds-calendar-day")) ?? []).indexOf(e.target);
+		if (n === -1) return;
+		let r = h({
+			key: e.key,
+			currentIndex: n,
+			directionSign: s(this)
+		});
+		if (r === null) return;
+		e.preventDefault();
+		let i = this.calendarDays[r];
+		i && !i.isDisabled && this.focusDayAt(r);
+	}
 	handleDayChange(e) {
 		var t;
 		e.stopPropagation();
@@ -175,46 +229,54 @@ var f = class extends t {
 		return this.size === "medium" ? "small" : "medium";
 	}
 	get prevButtonTemplate() {
-		return o`<ds-icon-button
+		return c`<ds-icon-button
             class="nav-button"
             icon-name="arrow-left"
-            data-aria-label="Previous month"
+            mirror
+            data-aria-label=${this.dataAriaLabelPreviousMonth || "Previous month"}
             @click=${this.handlePrevMonth}
             variant="naked"
-            size=${c(this.navButtonSize)}
+            size=${u(this.navButtonSize)}
         ></ds-icon-button>`;
 	}
 	get nextButtonTemplate() {
-		return o`<ds-icon-button
+		return c`<ds-icon-button
             class="nav-button"
             icon-name="arrow-right"
-            data-aria-label="Next month"
+            mirror
+            data-aria-label=${this.dataAriaLabelNextMonth || "Next month"}
             @click=${this.handleNextMonth}
             variant="naked"
-            size=${c(this.navButtonSize)}
+            size=${u(this.navButtonSize)}
         ></ds-icon-button>`;
 	}
 	get weekdaysTemplate() {
-		return e`
+		return t`
             <div class="weekdays">
-                ${this.weekdayNames.map((t) => e`<div class="weekday">${t}</div>`)}
+                ${this.weekdayNames.map((e) => t`<div class="weekday">${e}</div>`)}
             </div>
         `;
 	}
 	get daysTemplate() {
-		let t = this.calendarDays, n = [];
-		for (let e = 0; e < t.length; e += 7) n.push(t.slice(e, e + 7));
-		return e`
-            <div class="days-grid" role="grid" @ds-calendar-day-change=${this.handleDayChange}>
-                ${n.map((t) => e`
+		let e = this.calendarDays, n = this.tabStopIndex, r = [];
+		for (let t = 0; t < e.length; t += 7) r.push(e.slice(t, t + 7));
+		return t`
+            <div
+                class="days-grid"
+                role="grid"
+                @ds-calendar-day-change=${this.handleDayChange}
+                @keydown=${this.handleGridKeyDown}
+            >
+                ${r.map((r) => t`
                         <div class="days-row" role="row">
-                            ${t.map((e) => o`<ds-calendar-day
-                                    day=${e.day}
-                                    size=${c(this.size)}
-                                    ?disabled=${e.isDisabled}
-                                    ?selected=${e.isSelected}
-                                    ?today=${e.isToday}
-                                    ?outside-month=${!e.isCurrentMonth}
+                            ${r.map((t) => c`<ds-calendar-day
+                                    .tabStop=${e.indexOf(t) === n}
+                                    day=${t.day}
+                                    size=${u(this.size)}
+                                    ?disabled=${t.isDisabled}
+                                    ?selected=${t.isSelected}
+                                    ?today=${t.isToday}
+                                    ?outside-month=${!t.isCurrentMonth}
                                 ></ds-calendar-day>`)}
                         </div>
                     `)}
@@ -222,8 +284,8 @@ var f = class extends t {
         `;
 	}
 	render() {
-		return e`
-            <div class=${s(this.calendarClasses)} role="application" aria-label="Calendar">
+		return t`
+            <div class=${l(this.calendarClasses)} role="application" aria-label=${this.dataAriaLabel || "Calendar"}>
                 <div class="header">
                     ${this.prevButtonTemplate}
                     <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
@@ -233,44 +295,57 @@ var f = class extends t {
             </div>
         `;
 	}
-}, p = (f.styles = [d], f);
-i([n({
+}, _ = (g.styles = [m], g);
+a([r({
+	type: String,
+	attribute: "data-aria-label-previous-month"
+})], _.prototype, "dataAriaLabelPreviousMonth", void 0), a([r({
+	type: String,
+	attribute: "data-aria-label-next-month"
+})], _.prototype, "dataAriaLabelNextMonth", void 0), a([r({
+	type: String,
+	attribute: "data-aria-label"
+})], _.prototype, "dataAriaLabel", void 0), a([r({
 	type: String,
 	reflect: !0
-})], p.prototype, "value", void 0), i([n({
+})], _.prototype, "value", void 0), a([r({
 	type: String,
 	reflect: !0
-})], p.prototype, "variant", void 0), i([n({
+})], _.prototype, "variant", void 0), a([r({
 	type: String,
 	reflect: !0
-})], p.prototype, "size", void 0), i([n({
+})], _.prototype, "size", void 0), a([r({
 	type: String,
 	reflect: !0
-})], p.prototype, "locale", void 0), i([n({
+})], _.prototype, "locale", void 0), a([r({
+	type: String,
+	reflect: !0,
+	attribute: "weekday-format"
+})], _.prototype, "weekdayFormat", void 0), a([r({
 	type: Number,
 	reflect: !0,
 	attribute: "first-day-of-week"
-})], p.prototype, "firstDayOfWeek", void 0), i([n({
+})], _.prototype, "firstDayOfWeek", void 0), a([r({
 	type: String,
 	reflect: !0,
 	attribute: "min-date"
-})], p.prototype, "minDate", void 0), i([n({
+})], _.prototype, "minDate", void 0), a([r({
 	type: String,
 	reflect: !0,
 	attribute: "max-date"
-})], p.prototype, "maxDate", void 0), i([n({
+})], _.prototype, "maxDate", void 0), a([r({
 	attribute: "disabled-dates",
-	converter: u
-})], p.prototype, "disabledDates", void 0), i([n({
+	converter: f
+})], _.prototype, "disabledDates", void 0), a([r({
 	attribute: "disabled-weekdays",
-	converter: l
-})], p.prototype, "disabledWeekdays", void 0), i([n({
+	converter: d
+})], _.prototype, "disabledWeekdays", void 0), a([r({
 	type: String,
 	reflect: !0,
 	attribute: "view-date"
-})], p.prototype, "viewDateAttr", void 0), i([n({
+})], _.prototype, "viewDateAttr", void 0), a([r({
 	type: String,
 	attribute: "initial-value"
-})], p.prototype, "initialValue", void 0), i([r()], p.prototype, "_viewDate", void 0), i([r()], p.prototype, "_value", void 0), p = i([a("ds-calendar")], p);
+})], _.prototype, "initialValue", void 0), a([i()], _.prototype, "_viewDate", void 0), a([i()], _.prototype, "_value", void 0), _ = a([o("ds-calendar")], _);
 //#endregion
-export { p as DsCalendar };
+export { _ as DsCalendar };

package/dist/esm/components/ds-calendar/utils/getTargetDayIndex/getTargetDayIndex.js

@@ -0,0 +1,14 @@
+function e({ key: e, currentIndex: t, directionSign: n }) {
+	let r = t - t % 7;
+	switch (e) {
+		case "ArrowRight": return t + n;
+		case "ArrowLeft": return t - n;
+		case "ArrowDown": return t + 7;
+		case "ArrowUp": return t - 7;
+		case "Home": return r;
+		case "End": return r + 7 - 1;
+		default: return null;
+	}
+}
+//#endregion
+export { e as getTargetDayIndex };

package/dist/esm/components/ds-calendar-day/ds-calendar-day.js

@@ -12,7 +12,7 @@ import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-calendar-day/ds-calendar-day.ts
 var c = class extends t {
 	constructor(...e) {
-		super(...e), this.size = "large", this.disabled = !1, this.selected = !1, this.today = !1, this.outsideMonth = !1;
+		super(...e), this.size = "large", this.disabled = !1, this.selected = !1, this.today = !1, this.tabStop = !0, this.outsideMonth = !1;
 	}
 	get classes() {
 		return {
@@ -43,11 +43,11 @@ var c = class extends t {
             <button
                 class=${o(this.classes)}
                 ?disabled=${this.disabled}
-                aria-label=${this.day ? `Day ${this.day}` : ""}
+                aria-label=${this.dataAriaLabel || (this.day ? `Day ${this.day}` : "")}
                 role="gridcell"
                 aria-selected=${this.selected}
                 aria-current=${this.today ? "date" : "false"}
-                tabindex=${this.disabled ? -1 : 0}
+                tabindex=${this.disabled || !this.tabStop ? -1 : 0}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
@@ -57,6 +57,9 @@ var c = class extends t {
 	}
 }, l = (c.styles = [s], c);
 r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], l.prototype, "dataAriaLabel", void 0), r([n({
 	type: Number,
 	reflect: !0
 })], l.prototype, "day", void 0), r([n({
@@ -75,6 +78,11 @@ r([n({
 	converter: a,
 	reflect: !0
 })], l.prototype, "today", void 0), r([n({
+	type: Boolean,
+	converter: a,
+	reflect: !0,
+	attribute: "tab-stop"
+})], l.prototype, "tabStop", void 0), r([n({
 	type: Boolean,
 	converter: a,
 	reflect: !0,

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

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

@@ -19,7 +19,7 @@ var t = e`
         width: 100%;
         height: 100%;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         margin: 0;
         padding: 0;
         z-index: 1;

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

@@ -89,7 +89,14 @@ var t = e`
         display: flex;
         gap: var(--ds-spacing-s-5);
     }
-    :host([data-ui-kit-theme='cupra-diagonal']) .right label {
+    :host([data-ui-kit-theme='cupra-diagonal']) :is(.end, .right) label {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']:dir(rtl)) .right label {
+        flex-direction: row;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']:dir(rtl)) .left label {
         flex-direction: row-reverse;
         justify-content: space-between;
     }

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

@@ -89,7 +89,14 @@ var t = e`
         display: flex;
         gap: var(--ds-spacing-s-5);
     }
-    :host([data-ui-kit-theme='seat']) .right label {
+    :host([data-ui-kit-theme='seat']) :is(.end, .right) label {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    :host([data-ui-kit-theme='seat']:dir(rtl)) .right label {
+        flex-direction: row;
+    }
+    :host([data-ui-kit-theme='seat']:dir(rtl)) .left label {
         flex-direction: row-reverse;
         justify-content: space-between;
     }

package/dist/esm/components/ds-chip/ds-chip.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";
@@ -79,7 +79,7 @@ var h = class extends i {
             @click=${this.handleClickIcon}
             @keydown=${this.handleKeyDownIcon}
             role="button"
-            aria-label=${`deselect ${this.slottedText}`}
+            aria-label=${this.dataAriaLabelDeselectButton || `deselect ${this.slottedText}`}
             tabindex="0"
         ></ds-icon>`;
 	}
@@ -88,7 +88,7 @@ var h = class extends i {
             ${this.styleTokens}
             <div
                 role="button"
-                aria-label=${`chip ${this.slottedText}`}
+                aria-label=${this.dataAriaLabel || `chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
                 class=${c(this.classes)}
@@ -108,7 +108,13 @@ var h = class extends i {
 	f,
 	p
 ], h);
-r([n({ type: String })], g.prototype, "value", void 0), r([n({
+r([n({
+	type: String,
+	attribute: "data-aria-label-deselect-button"
+})], g.prototype, "dataAriaLabelDeselectButton", void 0), r([n({
+	type: String,
+	attribute: "data-aria-label"
+})], g.prototype, "dataAriaLabel", void 0), r([n({ type: String })], g.prototype, "value", void 0), r([n({
 	type: String,
 	reflect: !0
 })], g.prototype, "mode", void 0), r([n({

package/dist/esm/components/ds-chip/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));

package/dist/esm/components/ds-chip/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));

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

@@ -1,65 +1,68 @@
-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 { queryAssignedElements as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.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 "../../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 { booleanConverter as l } from "../../utils/booleanConverter.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 s from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as l } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as u } from "../../utils/booleanConverter.js";
+import { getDirectionSign as d } from "../../utils/getDirection/getDirection.js";
+import { uiKitHtml as f } from "../../utils/uiKitHtml.js";
+import { classMap as p } 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 f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import { ifDefined as m } 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 { stringArrayConverter as p } from "../../utils/arrayConverter.js";
-import { commonStyles as m } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as h } from "./styles/cupra-diagonal.styles.js";
-import { cupraStyles as g } from "./styles/cupra.styles.js";
-import { seatLegacyStyles as _ } from "./styles/seat-legacy.styles.js";
-import { seatStyles as v } from "./styles/seat.styles.js";
+import { stringArrayConverter as h } from "../../utils/arrayConverter.js";
+import { commonStyles as g } from "./styles/common.styles.js";
+import { cupraDiagonalStyles as _ } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as v } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as y } from "./styles/seat-legacy.styles.js";
+import { seatStyles as b } from "./styles/seat.styles.js";
 //#region src/components/ds-chips/ds-chips.ts
-var y = class extends s {
+var x = class extends c {
 	constructor(...e) {
 		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScrollNav();
 		}), this.handleScrollNav = () => {
-			var e, t, n, r;
-			let i = ((e = this.chipsContainer) == null ? void 0 : e.scrollLeft) + ((t = this.chipsContainer) == null ? void 0 : t.clientWidth);
-			this.hasScrollLeft = ((n = this.chipsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.chipsContainer) == null ? void 0 : r.scrollWidth);
+			var e, t, n;
+			let r = Math.abs((e = this.chipsContainer) == null ? void 0 : e.scrollLeft), i = r + ((t = this.chipsContainer) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = r > 0, this.hasScrollRight = i < ((n = this.chipsContainer) == null ? void 0 : n.scrollWidth);
 		}, this.handleScrollLeft = () => {
 			this.chipsContainer.scrollBy({
-				left: -150,
+				left: -150 * d(this),
 				behavior: "smooth"
 			});
 		}, this.handleScrollRight = () => {
 			this.chipsContainer.scrollBy({
-				left: 150,
+				left: 150 * d(this),
 				behavior: "smooth"
 			});
 		};
 	}
 	firstUpdated() {
-		this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
+		this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav), e.subscribe("direction", this.handleScrollNav);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav);
+		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScrollNav), this.chipsContainer.removeEventListener("scroll", this.handleScrollNav), e.unsubscribe("direction", this.handleScrollNav);
 	}
-	getScrollButtonTemplate(e, n) {
-		if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight) return t;
+	getScrollButtonTemplate(e, t) {
+		if (e === "left" && !this.hasScrollLeft || e === "right" && !this.hasScrollRight) return n;
 		let r = `arrow-${e}`;
-		return u`<ds-icon-button
+		return f`<ds-icon-button
             class=${`scroll-button ${e}`}
             data-testid=${`scroll-button-${e}`}
-            data-aria-label=${`scroll-button-${e}`}
-            @click=${n}
+            data-aria-label=${this.dataAriaLabelScrollButton || `scroll-button-${e}`}
+            @click=${t}
             size=${this.size || "large"}
             icon-name=${r}
+            mirror
             variant="rounded"
-            mode=${f(this.mode)}
+            mode=${m(this.mode)}
         ></ds-icon-button>`;
 	}
 	updated(e) {
@@ -97,7 +100,7 @@ var y = class extends s {
 		}));
 	}
 	render() {
-		return e`
+		return t`
             <div
                 class="container"
                 data-testid="ds-chips-container"
@@ -105,32 +108,35 @@ var y = class extends s {
                 @deselect=${this.handleDeselect}
             >
                 ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${d(this.chipsContainerClasses)}>
+                <nav tabindex="0" class=${p(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
                 ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
             </div>
         `;
 	}
-}, b = (y.styles = [
-	m,
-	h,
-	v,
+}, S = (x.styles = [
 	g,
-	_
-], y);
-o([n({
+	_,
+	b,
+	v,
+	y
+], x);
+s([r({
+	type: String,
+	attribute: "data-aria-label-scroll-button"
+})], S.prototype, "dataAriaLabelScrollButton", void 0), s([r({
 	type: Array,
 	attribute: "selected-chips",
-	converter: p,
+	converter: h,
 	reflect: !0
-})], b.prototype, "selectedChips", void 0), o([n({
+})], S.prototype, "selectedChips", void 0), s([r({
 	type: Boolean,
 	attribute: "multi-choice",
-	converter: l
-})], b.prototype, "multiChoice", void 0), o([n({ type: String })], b.prototype, "size", void 0), o([n({
+	converter: u
+})], S.prototype, "multiChoice", void 0), s([r({ type: String })], S.prototype, "size", void 0), s([r({
 	type: String,
 	reflect: !0
-})], b.prototype, "mode", void 0), o([r()], b.prototype, "hasScrollLeft", void 0), o([r()], b.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], b.prototype, "chips", void 0), o([i(".chips-container")], b.prototype, "chipsContainer", void 0), b = o([c("ds-chips")], b);
+})], S.prototype, "mode", void 0), s([i()], S.prototype, "hasScrollLeft", void 0), s([i()], S.prototype, "hasScrollRight", void 0), s([o({ slot: "" })], S.prototype, "chips", void 0), s([a(".chips-container")], S.prototype, "chipsContainer", void 0), S = s([l("ds-chips")], S);
 //#endregion
-export { b as DsChips };
+export { S as DsChips };