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

package/dist-react/esm/components/ds-button/ds-button.js

@@ -5,22 +5,21 @@ 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";
 import { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
 import { objectConverter as u } from "../../utils/objectConverter.js";
 import { choose as d } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/choose.js";
-import { when as f } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
-import { buttonStyles as p, loadingDotsStyles as m, textStyles 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 { buttonStyles as f, loadingDotsStyles as p, textStyles 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";
 //#region src/components/ds-button/ds-button.ts
-var b = class extends l(i) {
+var y = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1, this.contentObserver = new MutationObserver(() => this.requestUpdate());
 	}
@@ -64,7 +63,7 @@ var b = class extends l(i) {
 		r && !r.contains(e.composedPath()[0]) && (e.stopPropagation(), r.click());
 	}
 	get iconTemplate() {
-		return this.iconName ? s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>` : t;
+		return this.iconName ? s`<ds-icon class="icon icon-${this.iconPosition}" icon-name=${this.iconName}></ds-icon>` : t;
 	}
 	get loadingTemplate() {
 		return this.loading ? e`
@@ -105,12 +104,11 @@ var b = class extends l(i) {
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${f(this.iconPosition === "left", () => e` ${this.iconTemplate} `)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${f(this.iconPosition === "right", () => e` ${this.iconTemplate} `)}
+                            ${this.iconTemplate}
                         </button>
                     `;
 			}],
@@ -125,80 +123,78 @@ var b = class extends l(i) {
                             target=${this.target}
                             @click=${this.handleClick}
                         >
-                            ${f(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${f(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
+                            ${this.iconTemplate}
                         </a>
                     `;
 			}],
 			["custom", () => e`
                         <div class=${c(this.classes)} @click=${this.handleCustomClick}>
-                            ${f(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                             ${this.loading && this.textLoading ? e`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : e`<slot></slot>${this.loadingTemplate}`}
-                            ${f(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
+                            ${this.iconTemplate}
                         </div>
                     `]
 		])}
         `;
 	}
-}, x = (b.styles = [
+}, b = (y.styles = [
+	f,
+	m,
 	p,
 	h,
-	m,
+	v,
 	g,
-	y,
-	_,
-	v
-], b);
+	_
+], y);
 r([n({
 	type: String,
 	reflect: !0
-})], x.prototype, "variant", void 0), r([n({
+})], b.prototype, "variant", void 0), r([n({
 	type: String,
 	reflect: !0
-})], x.prototype, "mode", void 0), r([n({
+})], b.prototype, "mode", void 0), r([n({
 	type: String,
 	converter: u
-})], x.prototype, "size", void 0), r([n({
+})], b.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], x.prototype, "disabled", void 0), r([n({
+})], b.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], x.prototype, "destructive", void 0), r([n({
+})], b.prototype, "destructive", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], x.prototype, "iconName", void 0), r([n({
+})], b.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], x.prototype, "htmlTagName", void 0), r([n({
+})], b.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], x.prototype, "href", void 0), r([n({
+})], b.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], x.prototype, "rel", void 0), r([n({
+})], b.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], x.prototype, "target", void 0), r([n({ type: String })], x.prototype, "type", void 0), r([n({
+})], b.prototype, "target", void 0), r([n({ type: String })], b.prototype, "type", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], x.prototype, "iconPosition", void 0), r([n({
+})], b.prototype, "iconPosition", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], x.prototype, "rounded", void 0), r([n({
+})], b.prototype, "rounded", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], x.prototype, "fullWidth", void 0), r([n({
+})], b.prototype, "fullWidth", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], x.prototype, "loading", void 0), r([n({
+})], b.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "text-loading"
-})], x.prototype, "textLoading", void 0), x = r([a("ds-button")], x);
+})], b.prototype, "textLoading", void 0), b = r([a("ds-button")], b);
 //#endregion
-export { x as DsButton };
+export { b as DsButton };

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

@@ -62,6 +62,19 @@ var t = e`
     .tag-custom ::slotted(*:focus-visible) {
         outline: none;
     }
+
+    .icon-start,
+    .icon-left {
+        order: -1;
+    }
+
+    :host(:dir(rtl)) .icon-left {
+        order: 0;
+    }
+
+    :host(:dir(rtl)) .icon-right {
+        order: -1;
+    }
 `, n = e`
     .naked.container {
         display: inline-flex;

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