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

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

@@ -6,8 +6,8 @@ import { queryAssignedElements as i } from "../../node_modules/.pnpm/@lit_reacti
 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 { 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";
@@ -27,7 +27,7 @@ var f = class extends n {
 		return e`<span class="initials" aria-hidden="true">${t}</span>`;
 	}
 	getInitialsFromName(e) {
-		return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0]).join("").toUpperCase() : "";
+		return e ? e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((e) => Array.from(e)[0]).join("").toUpperCase() : "";
 	}
 	get classes() {
 		return {
@@ -45,7 +45,7 @@ var f = class extends n {
 		return this.hasImage ? "media" : (e = this.name) != null && e.trim() ? "text" : "icon";
 	}
 	get accessibleName() {
-		let e = `Open ${this.name ? this.name + "'s " : ""}profile menu`;
+		let e = this.dataAriaLabel || `Open ${this.name ? this.name + "'s " : ""}profile menu`;
 		return this.mode === "text" ? `${this.getInitialsFromName(this.name)}, ${e}` : e;
 	}
 	handleSlotChange() {
@@ -82,7 +82,10 @@ var f = class extends n {
         `;
 	}
 }, p = (f.styles = [d], f);
-a([r({ type: String })], p.prototype, "size", void 0), a([r({ type: String })], p.prototype, "name", void 0), a([r({
+a([r({
+	type: String,
+	attribute: "data-aria-label"
+})], p.prototype, "dataAriaLabel", void 0), a([r({ type: String })], p.prototype, "size", void 0), a([r({ type: String })], p.prototype, "name", void 0), a([r({
 	type: Boolean,
 	converter: s,
 	reflect: !0

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

@@ -28,7 +28,7 @@ var l = class extends n {
 		};
 	}
 	get badgeAriaLabel() {
-		return this.hasNumber ? `${this.number} notifications` : void 0;
+		return this.hasNumber ? this.dataAriaLabel || `${this.number} notifications` : void 0;
 	}
 	get contentTemplate() {
 		return this.hasNumber ? e`${this.number}` : t;
@@ -37,6 +37,9 @@ var l = class extends n {
 		return e` <div class=${o(this.classes)} aria-label=${s(this.badgeAriaLabel)}>${this.contentTemplate}</div> `;
 	}
 }, u = (l.styles = [c], l);
-i([r({ type: Number })], u.prototype, "number", void 0), i([r({ type: String })], u.prototype, "variant", void 0), i([r({ type: String })], u.prototype, "size", void 0), u = i([a("ds-badge")], u);
+i([r({
+	type: String,
+	attribute: "data-aria-label"
+})], u.prototype, "dataAriaLabel", void 0), i([r({ type: Number })], u.prototype, "number", void 0), i([r({ type: String })], u.prototype, "variant", void 0), i([r({ type: String })], u.prototype, "size", void 0), u = i([a("ds-badge")], u);
 //#endregion
 export { u as DsBadge };

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

@@ -39,7 +39,7 @@ var d = class extends n {
 	get closeButtonTemplate() {
 		return this.showClose ? c`<ds-icon-button
             class="close-button"
-            data-aria-label="close"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close"}
             @click=${this.handleClose}
             icon-name="cross"
             variant="tertiary"
@@ -61,7 +61,10 @@ var d = class extends n {
         ` : t;
 	}
 }, f = (d.styles = [u], d);
-a([r({ type: String })], f.prototype, "orientation", void 0), a([r({
+a([r({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], f.prototype, "dataAriaLabelCloseButton", void 0), a([r({ type: String })], f.prototype, "orientation", void 0), a([r({
 	attribute: "show-close",
 	type: Boolean,
 	converter: s,

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

@@ -1,31 +1,32 @@
 import { nothing 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 { state as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.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 "../../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 i from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import "../ds-icon/ds-icon.js";
-import { uiKitHtml as a } from "../../utils/uiKitHtml.js";
-import { ifDefined as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { ifDefined as s } 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-tooltip/ds-tooltip.js";
-import { html as s, unsafeStatic as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/static.js";
+import { html as c, unsafeStatic as l } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/static.js";
 import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/static-html.js";
 import "../ds-breadcrumbs-item/ds-breadcrumbs-item.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-breadcrumbs/ds-breadcrumbs.ts
-var u, d = [{
+var d, f = [{
 	below: 768,
 	maxItems: 3
 }, {
 	below: 1024,
 	maxItems: 4
-}], f = 5, p = (u = class extends t {
+}], p = 5, m = (d = class extends t {
 	constructor(...e) {
-		super(...e), this.items = [], this.maxItems = f, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
-			let e = d.find(({ below: e }) => window.innerWidth < e);
-			this.maxItems = (e == null ? void 0 : e.maxItems) ?? f;
+		super(...e), this.items = [], this.maxItems = p, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
+			let e = f.find(({ below: e }) => window.innerWidth < e);
+			this.maxItems = (e == null ? void 0 : e.maxItems) ?? p;
 		};
 	}
 	async firstUpdated(e) {
@@ -51,11 +52,11 @@ var u, d = [{
 		});
 	}
 	get separatorIcon() {
-		return a`<ds-icon class="separator-icon" icon-name="arrow-right" size="24"></ds-icon>`;
+		return o`<ds-icon class="separator-icon" icon-name="arrow-right" size="24" mirror></ds-icon>`;
 	}
 	itemTemplate(t, n) {
-		let r = t.selected, i = c(this.itemTag), a = r || t.disabled || !t.href ? s`<span slot="item">${t.label}</span>` : s`<a href=${t.href} slot="item">${t.label}</a>`;
-		return s`<li class="breadcrumb-list-item">
+		let r = t.selected, i = l(this.itemTag), a = r || t.disabled || !t.href ? c`<span slot="item">${t.label}</span>` : c`<a href=${t.href} slot="item">${t.label}</a>`;
+		return c`<li class="breadcrumb-list-item">
             <${i}
                 ?selected=${r}
                 ?disabled=${t.disabled}
@@ -67,25 +68,29 @@ var u, d = [{
         </li>`;
 	}
 	get slotTemplate() {
-		return s`<slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>`;
+		return c`<slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>`;
 	}
 	get overflowMenuTemplate() {
 		let e = this.items.slice(1, this.items.length - (this.maxItems - 2));
-		return s`<ul class="overflow-menu" role="menu">
-            ${e.map((e) => s`
+		return c`<ul class="overflow-menu" role="menu">
+            ${e.map((e) => c`
                     <li class="overflow-menu-item" role="none">
-                        <a href=${o(e.href)} class="overflow-menu-link" role="menuitem">${e.label}</a>
+                        <a href=${s(e.href)} class="overflow-menu-link" role="menuitem">${e.label}</a>
                     </li>
                 `)}
         </ul>`;
 	}
 	get overflowTriggerTemplate() {
-		return s`<button class="overflow-trigger">
+		return c`<button
+            class="overflow-trigger"
+            aria-label=${this.dataAriaLabelShowMoreButton || "Show more"}
+            aria-haspopup="menu"
+        >
             <span class="overflow-label">...</span>
         </button>`;
 	}
 	get tooltipTemplate() {
-		return a`<ds-tooltip class="breadcrumbs-tooltip">
+		return o`<ds-tooltip class="breadcrumbs-tooltip">
             ${this.overflowTriggerTemplate}
             <div slot="content">${this.overflowMenuTemplate}</div>
         </ds-tooltip>`;
@@ -94,7 +99,7 @@ var u, d = [{
 		let { items: e, maxItems: t } = this;
 		if (e.length <= t) return e.map((t, n) => this.itemTemplate(t, n === e.length - 1));
 		let n = e.slice(e.length - (t - 2));
-		return s`
+		return c`
             ${this.itemTemplate(e[0], !1)}
             <li class="breadcrumb-list-item">
                 <div class="overflow-item-wrapper">
@@ -106,16 +111,22 @@ var u, d = [{
         `;
 	}
 	render() {
-		return s`
+		return c`
             ${this.slotTemplate}
-            <nav class="container" aria-label="Breadcrumb">
+            <nav class="container" aria-label=${this.dataAriaLabel || "Breadcrumb"}>
                 <ol class="breadcrumb-list">
                     ${this.listTemplate}
                 </ol>
             </nav>
         `;
 	}
-}, u.styles = [l], u);
-r([n()], p.prototype, "items", void 0), r([n()], p.prototype, "maxItems", void 0), r([n()], p.prototype, "itemTag", void 0), p = r([i("ds-breadcrumbs")], p);
+}, d.styles = [u], d);
+i([n({
+	type: String,
+	attribute: "data-aria-label"
+})], m.prototype, "dataAriaLabel", void 0), i([n({
+	type: String,
+	attribute: "data-aria-label-show-more-button"
+})], m.prototype, "dataAriaLabelShowMoreButton", void 0), i([r()], m.prototype, "items", void 0), i([r()], m.prototype, "maxItems", void 0), i([r()], m.prototype, "itemTag", void 0), m = i([a("ds-breadcrumbs")], m);
 //#endregion
-export { p as DsBreadcrumbs };
+export { m as DsBreadcrumbs };

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;