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

package/dist/esm/components/ds-list-item/styles/common.styles.js

@@ -6,6 +6,125 @@ var t = e`
         display: block;
         width: fit-content;
     }
+
+    :host .content {
+        display: flex;
+        align-items: center;
+        padding: var(--ds-sizing-08) 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container {
+        display: flex;
+        gap: var(--ds-sizing-08);
+    }
+
+    :host .container-text {
+        padding-inline-end: var(--ds-sizing-24);
+    }
+
+    :host .content.info-variant,
+    :host .content.action-variant {
+        padding: var(--ds-sizing-08);
+    }
+
+    :host ::slotted([slot='input-left']),
+    :host ::slotted([slot='input-right']),
+    :host ::slotted([slot='input-start']),
+    :host ::slotted([slot='input-end']) {
+        width: unset;
+    }
+
+    :host ::slotted([slot='primary-text']) {
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    :host ::slotted([slot='primary-subtext']),
+    :host ::slotted([slot='secondary-text']),
+    :host ::slotted([slot='description-text']) {
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    :host ::slotted([slot='description-text']) {
+        padding-top: var(--ds-sizing-08);
+    }
+
+    :host([size='large']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-square']) {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+
+    :host ::slotted([slot='image-wide']) {
+        -o-object-fit: cover;
+        object-fit: cover;
+    }
+
+    :host([size='large']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-96);
+        height: var(--ds-sizing-48);
+    }
+
+    :host([size='medium']) ::slotted([slot='image-wide']) {
+        width: var(--ds-sizing-64);
+        height: var(--ds-sizing-32);
+    }
+
+    :host([size='medium']) ::slotted([slot='primary-text']),
+    :host([size='medium']) ::slotted([slot='secondary-text']),
+    :host([size='medium']) ::slotted([slot='description-text']),
+    :host([size='medium']) ::slotted([slot='primary-subtext']),
+    :host([size='medium']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large']) ::slotted([slot='primary-text']),
+    :host([size='large']) ::slotted([slot='secondary-text']),
+    :host([size='large']) ::slotted([slot='description-text']),
+    :host([size='large']) ::slotted([slot='primary-subtext']),
+    :host([size='large']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([size='small']) ::slotted([slot='primary-text']),
+    :host([size='small']) ::slotted([slot='secondary-text']),
+    :host([size='small']) ::slotted([slot='description-text']),
+    :host([size='small']) ::slotted([slot='primary-subtext']),
+    :host([size='small']) ::slotted([slot='aside']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host .content:hover {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    :host .content:active {
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    :host .content:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        background-color: var(--ds-color-control-bg-hover);
+    }
+
+    :host .selected {
+        background: var(--ds-color-control-bg-default);
+        border-inline-start: var(--ds-sizing-04) solid var(--ds-color-border-selected);
+    }
+
+    :host .disabled {
+        opacity: 0.25;
+        pointer-events: none;
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-loader-bar/styles/common.styles.js

@@ -2,18 +2,22 @@ import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.
 import "../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.js";
 //#region src/components/ds-loader-bar/styles/common.styles.ts
 var t = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     .fill {
         width: 33%;
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% * var(--ui-kit-private-dir, 1)));
         animation: loader 1.4s linear infinite;
     }
 
     @keyframes loader {
         0% {
-            transform: translateX(-100%);
+            transform: translateX(calc(-100% * var(--ui-kit-private-dir, 1)));
         }
         100% {
-            transform: translateX(300%);
+            transform: translateX(calc(300% * var(--ui-kit-private-dir, 1)));
         }
     }
 `;

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