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

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

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

@@ -37,11 +37,11 @@ var t = e`
     }
 
     .scroll-button.left {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .scroll-button.right {
-        right: 0;
+        inset-inline-end: 0;
     }
 `;
 //#endregion

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

@@ -29,14 +29,16 @@ var p = class extends i {
 			minimumFractionDigits: this.minimumFractionDigits,
 			maximumFractionDigits: this.maximumFractionDigits,
 			currencyDisplay: this.currencyDisplay,
-			symbolOverrides: this.symbolOverrides
+			symbolOverrides: this.symbolOverrides,
+			thousandSeparator: this.thousandSeparator,
+			fractionSeparator: this.fractionSeparator
 		}), n = this.valueText || t, r = {
 			amount: !0,
 			text: !0,
 			[`size-${this.amountSize}`]: !0,
 			[`weight-${this.amountWeight}`]: !0
 		};
-		return e`<span class=${o(r)}>${n}</span>`;
+		return e`<span class=${o(r)}><bdi>${n}</bdi></span>`;
 	}
 	get periodTemplate() {
 		if (!this.period) return t;

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

@@ -15,8 +15,8 @@ var t = e`
     .strikethrough-line {
         position: absolute;
         height: 1px;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         top: 50%;
     }
 `;

package/dist-react/esm/components/ds-date-picker/ds-date-picker.js

@@ -14,10 +14,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-define
 import "../ds-icon-button/ds-icon-button.js";
 import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
 import { commonStyles as d } from "./styles/common.styles.js";
-import { cupraDiagonalStyles as f } from "./styles/cupra-diagonal.styles.js";
-import { seatStyles as p } from "./styles/seat.styles.js";
 //#region src/components/ds-date-picker/ds-date-picker.ts
-var m = class extends u(a) {
+var f = class extends u(a) {
 	constructor(...e) {
 		super(...e), this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelCalendarButton = "", this.isExpanded = !1, this.syncCalendarValue = () => {
 			let e = this.calendarElement;
@@ -42,11 +40,11 @@ var m = class extends u(a) {
 		this.syncCalendarValue(), e.addEventListener("input", this.syncCalendarValue);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), h.injectNativeInputStyles();
+		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), p.injectNativeInputStyles();
 	}
 	static injectNativeInputStyles() {
-		if (h.nativeStylesInjected) return;
-		h.nativeStylesInjected = !0;
+		if (p.nativeStylesInjected) return;
+		p.nativeStylesInjected = !0;
 		let e = document.createElement("style");
 		e.textContent = [".ds-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator { display: none !important; }", ".ds-date-picker input[type=\"date\"]::-webkit-inner-spin-button { display: none !important; }"].join("\n"), document.head.appendChild(e);
 	}
@@ -77,9 +75,7 @@ var m = class extends u(a) {
                 </div>
                 ${this.calendarDropdownTemplate}
                 <div class="footer">
-                    ${this.readonlyTextTemplate}
-                    ${this.helperTextTemplate}
-                    ${this.forcedErrorTemplate}
+                    ${this.readonlyTextTemplate} ${this.helperTextTemplate} ${this.forcedErrorTemplate}
                     ${this.invalidErrorTemplate}
                 </div>
             </div>
@@ -116,26 +112,22 @@ var m = class extends u(a) {
 	get invalidErrorTemplate() {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? t : e`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
-}, h = m, g = (m.styles = [
-	d,
-	f,
-	p
-], m.nativeStylesInjected = !1, m);
-i([n({ type: String })], g.prototype, "size", void 0), i([n({
+}, p = f, m = (f.styles = [d], f.nativeStylesInjected = !1, f);
+i([n({ type: String })], m.prototype, "size", void 0), i([n({
 	type: String,
 	attribute: "helper-text"
-})], g.prototype, "helperText", void 0), i([n({
+})], m.prototype, "helperText", void 0), i([n({
 	type: String,
 	attribute: "forced-error"
-})], g.prototype, "forcedError", void 0), i([n({
+})], m.prototype, "forcedError", void 0), i([n({
 	type: String,
 	attribute: "invalid-error"
-})], g.prototype, "invalidError", void 0), i([n({
+})], m.prototype, "invalidError", void 0), i([n({
 	type: String,
 	attribute: "readonly-text"
-})], g.prototype, "readonlyText", void 0), i([n({
+})], m.prototype, "readonlyText", void 0), i([n({
 	type: String,
 	attribute: "data-aria-label-calendar-button"
-})], g.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], g.prototype, "isExpanded", void 0), g = h = i([o("ds-date-picker")], g);
+})], m.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], m.prototype, "isExpanded", void 0), m = p = i([o("ds-date-picker")], m);
 //#endregion
-export { g as DsDatePicker };
+export { m as DsDatePicker };

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

@@ -5,6 +5,207 @@ var t = e`
     :host {
         display: contents;
     }
+
+    :host:has(.disabled),
+    :host:has(.readonly) {
+        pointer-events: none;
+    }
+
+    :host .container {
+        position: relative;
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host .large ::slotted(label) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host .medium ::slotted(label) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host .disabled ::slotted(label) {
+        color: var(--ds-field-text-color-label-disabled, #5a5c67);
+    }
+
+    :host .readonly ::slotted(label) {
+        color: var(--ds-field-text-color-label-default, #c3c3cb);
+    }
+
+    :host ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        cursor: text;
+    }
+
+    :host .focus:not(.filled) ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host .readonly ::slotted(input) {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host .large ::slotted(input) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        height: var(--ds-sizing-48, 48px);
+        padding: var(--ds-spacing-m-1) 0;
+    }
+
+    :host .medium ::slotted(input) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        height: var(--ds-sizing-40, 40px);
+        padding: var(--ds-spacing-s-5) 0;
+    }
+
+    :host .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        width: 100%;
+        padding-block: var(--ds-spacing-s-5) 0;
+        padding-inline: var(--ds-spacing-m-1) var(--ds-spacing-s-5);
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
+            var(--ds-border-radius-none);
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host .medium .input-container {
+        padding-inline-start: var(--ds-spacing-s-5);
+    }
+
+    :host .input-container > div {
+        flex: 1 1 auto;
+    }
+
+    :host .input-container:hover,
+    :host .focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host .focus:not(.focus-visible) .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host .filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host .container.error .input-container,
+    :host .container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host .disabled .input-container,
+    :host .disabled.error .input-container,
+    :host .disabled.invalid .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host .readonly .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host .footer {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: var(--ds-spacing-s-5, 8px);
+        overflow: hidden;
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    :host .large .footer {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px) var(--ds-spacing-s-1, 0)
+            var(--ds-spacing-m-1, 12px);
+    }
+
+    :host .medium .footer {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+        padding: var(--ds-spacing-s-1, 0) var(--ds-spacing-s-5, 8px);
+    }
+
+    :host .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host .helper-text,
+    :host .readonly-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host .disabled .support-text {
+        color: var(--ds-field-text-color-caption-disabled, #5a5c67);
+    }
+
+    :host .readonly .support-text {
+        color: var(--ds-field-text-color-caption-default, #c3c3cb);
+    }
+
+    :host .calendar-dropdown {
+        position: absolute;
+        top: 100%;
+        inset-inline-start: 0;
+        z-index: 10;
+        margin-top: var(--ds-spacing-s-3, 4px);
+    }
 `;
 //#endregion
 export { t as commonStyles };

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

@@ -35,7 +35,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .content {

package/dist-react/esm/components/ds-dialog/styles/seat.styles.js

@@ -35,7 +35,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .with-scroll .content {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='seat']) .content {

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

@@ -15,7 +15,7 @@ var n = e`
     .container-fullscreen {
         position: fixed;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         padding: 0;
         width: 100dvw;
         height: 100dvh;

package/dist-react/esm/components/ds-dialog-fullscreen/styles/cupra-diagonal.styles.js

@@ -33,7 +33,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .with-scroll .content-fullscreen {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .content-fullscreen {
@@ -46,7 +46,7 @@ var t = e`
     :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='close-button']) {
         position: absolute;
         top: var(--ds-spacing-m-2);
-        right: var(--ds-spacing-m-2);
+        inset-inline-end: var(--ds-spacing-m-2);
     }
 `;
 //#endregion

package/dist-react/esm/components/ds-dialog-fullscreen/styles/seat.styles.js

@@ -33,7 +33,7 @@ var t = e`
     }
 
     :host([data-ui-kit-theme='seat']) .with-scroll .content-fullscreen {
-        padding-right: var(--ds-spacing-layout-s);
+        padding-inline-end: var(--ds-spacing-layout-s);
     }
 
     :host([data-ui-kit-theme='seat']) .content-fullscreen {
@@ -46,7 +46,7 @@ var t = e`
     :host([data-ui-kit-theme='seat']) ::slotted([slot='close-button']) {
         position: absolute;
         top: var(--ds-spacing-m-2);
-        right: var(--ds-spacing-m-2);
+        inset-inline-end: var(--ds-spacing-m-2);
     }
 `;
 //#endregion

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

@@ -48,7 +48,7 @@ var g = class extends i {
 		return s`<ds-icon-button
             class="close-button visible"
             data-testid="close-button"
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close-button"}
             @click=${this.handleOverlayClick}
             size="medium"
             icon-name="cross"
@@ -95,6 +95,9 @@ var g = class extends i {
 	p
 ], g);
 r([t({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], _.prototype, "dataAriaLabelCloseButton", void 0), r([t({
 	type: Boolean,
 	attribute: "open",
 	converter: o

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

@@ -3,6 +3,10 @@ import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 import { cssQueries as t } from "../../../utils/cssQueries.js";
 //#region src/components/ds-drawer/styles/common.styles.ts
 var n = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: block;
     }
@@ -33,12 +37,12 @@ var n = e`
         height: 100vh;
         width: 100%;
         bottom: 0;
-        right: 0;
+        inset-inline-end: 0;
         transform: translateY(100%);
 
         ${t.m} {
             top: 0;
-            transform: translateX(100%);
+            transform: translateX(calc(100% * var(--ui-kit-private-dir, 1)));
             width: 491px;
         }
 

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

@@ -15,15 +15,18 @@ var t = e`
 
     @media (min-width: 768px) {
         :host([data-ui-kit-theme='cupra-diagonal']) .container {
-            border-radius: var(--ds-border-radius-m) 0px 0px var(--ds-border-radius-m);
+            border-start-start-radius: var(--ds-border-radius-m);
+            border-end-start-radius: var(--ds-border-radius-m);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header,
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-content,
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
-        padding-left: var(--ds-layout-margin);
-        padding-right: var(--ds-layout-margin);
+        padding-inline-start: var(--ds-layout-margin);
+        padding-inline-end: var(--ds-layout-margin);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
@@ -48,7 +51,7 @@ var t = e`
 
     :host([data-ui-kit-theme='cupra-diagonal']) .close-button {
         top: calc(var(--ds-spacing-layout-s) - 0.125rem);
-        right: var(--ds-spacing-layout-xl);
+        inset-inline-end: var(--ds-spacing-layout-xl);
     }
 `;
 //#endregion