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

package/dist/cjs/utils/formatNumber/formatNumber.cjs

@@ -1 +1 @@
-function e(e){if(typeof e!=`string`)return e;try{return JSON.parse(e)}catch{return}}function t(t,n,r){var i;if(!t||!n)return;let a=(i=e(t))==null?void 0:i[n];if(typeof a==`string`)return a;if(a&&r)return a[r]}function n({value:e,locale:n,style:r,unit:i,currency:a,localeMatcher:o=`lookup`,minimumIntegerDigits:s=1,minimumFractionDigits:c=0,maximumFractionDigits:l=20,thousandSeparator:u,fractionSeparator:d,useGrouping:f=`auto`,currencyDisplay:p=`symbol`,symbolOverrides:m}){let h=``,g=``,_,v,y=t(m,a??i,n),b=new Intl.NumberFormat(n,{...r&&{style:r},...i&&{unit:i},...a&&{currency:a},currencyDisplay:p,localeMatcher:o,minimumIntegerDigits:s,minimumFractionDigits:c,maximumFractionDigits:l,useGrouping:f}).formatToParts(e??0);return b.forEach((e,t)=>{switch(e.type){case`unit`:case`currency`:case`percentSign`:{let n=y??e.value;_=n,v=t===0||(b[0].type===`minusSign`||b[0].type===`plusSign`)&&t===1?`left`:`right`,g+=n;break}case`group`:{let t=u??e.value;h+=t,g+=t;break}case`decimal`:{let t=d??e.value;h+=t,g+=t;break}case`integer`:case`fraction`:case`plusSign`:case`minusSign`:h+=e.value,g+=e.value;break;case`literal`:g+=e.value}}),{formattedNumber:h,formattedValue:g,..._&&{unitSymbol:_},...v&&{unitSymbolPosition:v}}}exports.formatNumber=n;
+var e=/^[\s\u200E\u200F\u061C]*$/;function t(t){return t.type===`literal`&&e.test(t.value)}function n(e){if(typeof e!=`string`)return e;try{return JSON.parse(e)}catch{return}}function r(e,t,r){var i;if(!e||!t)return;let a=(i=n(e))==null?void 0:i[t];if(typeof a==`string`)return a;if(a&&r)return a[r]}function i({value:e,locale:n,style:i,unit:a,currency:o,localeMatcher:s=`lookup`,minimumIntegerDigits:c=1,minimumFractionDigits:l=0,maximumFractionDigits:u=20,thousandSeparator:d,fractionSeparator:f,useGrouping:p=`auto`,currencyDisplay:m=`symbol`,symbolOverrides:h}){let g=``,_=``,v,y,b=r(h,o??a,n),x=new Intl.NumberFormat(n,{...i&&{style:i},...a&&{unit:a},...o&&{currency:o},currencyDisplay:m,localeMatcher:s,minimumIntegerDigits:c,minimumFractionDigits:l,maximumFractionDigits:u,useGrouping:p}).formatToParts(e??0),S=x.filter(e=>!t(e));return x.forEach(e=>{switch(e.type){case`unit`:case`currency`:case`percentSign`:{let t=b??e.value;v=t;let n=S.indexOf(e);y=n===0||(S[0].type===`minusSign`||S[0].type===`plusSign`)&&n===1?`left`:`right`,_+=t;break}case`group`:{let t=d??e.value;g+=t,_+=t;break}case`decimal`:{let t=f??e.value;g+=t,_+=t;break}case`integer`:case`fraction`:case`plusSign`:case`minusSign`:g+=e.value,_+=e.value;break;case`literal`:_+=e.value}}),{formattedNumber:g,formattedValue:_,...v&&{unitSymbol:v},...y&&{unitSymbolPosition:y}}}exports.formatNumber=i;

package/dist/cjs/utils/getDirection/getDirection.cjs

@@ -0,0 +1 @@
+const e=require("../closestAttribute/closestAttribute.cjs");function t(e){return e===`ltr`||e===`rtl`}function n(n){let r=e.closestAttribute(n,`dir`);if(t(r))return r;if(n.isConnected){let e=getComputedStyle(n).direction;if(t(e))return e}return`ltr`}function r(e){return n(e)===`rtl`?-1:1}exports.getDirection=n,exports.getDirectionSign=r;

package/dist/cjs/utils/normalizeDigits/normalizeDigits.cjs

@@ -0,0 +1 @@
+var e=1632,t=1776;function n(n){let r=n.codePointAt(0);return r>=e&&r<=1641?String(r-e):r>=t&&r<=1785?String(r-t):n}function r(e){return e.replace(/[٠-٩۰-۹]/g,n)}exports.normalizeDigits=r;

package/dist/cjs/utils/observeScroll/observeScroll.cjs

@@ -1 +1 @@
-const e=require("../debounce.cjs");function t(t,n){let r=()=>({top:t.scrollTop>0,bottom:Math.ceil(t.scrollTop)<t.scrollHeight-t.clientHeight,left:t.scrollLeft>0,right:Math.ceil(t.scrollLeft)<t.scrollWidth-t.clientWidth}),i=e.debounce({func:()=>n(r()),milliseconds:16}),a=new ResizeObserver(i);return a.observe(t),t.addEventListener(`scroll`,i,{passive:!0}),n(r()),()=>{a.disconnect(),t.removeEventListener(`scroll`,i)}}exports.observeScroll=t;
+const e=require("../debounce.cjs");function t(t,n){let r=()=>{let e=Math.abs(t.scrollLeft)>0,n=Math.ceil(Math.abs(t.scrollLeft))<t.scrollWidth-t.clientWidth;return{top:t.scrollTop>0,bottom:Math.ceil(t.scrollTop)<t.scrollHeight-t.clientHeight,start:e,end:n,left:e,right:n}},i=e.debounce({func:()=>n(r()),milliseconds:16}),a=new ResizeObserver(i);return a.observe(t),t.addEventListener(`scroll`,i,{passive:!0}),n(r()),()=>{a.disconnect(),t.removeEventListener(`scroll`,i)}}exports.observeScroll=t;

package/dist/cjs/utils/resolveLang/resolveLang.cjs

@@ -0,0 +1 @@
+const e=require("../closestAttribute/closestAttribute.cjs");var t=`en-US`;function n(n,r=t){var i;return e.closestAttribute(n,`lang`)||((i=document)==null||(i=i.documentElement)==null?void 0:i.lang)||r}exports.resolveLang=n;

package/dist/cjs/utils/version.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.238`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.239`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

package/dist/esm/components/base/ds-base-input/styles/common.styles.js

@@ -16,7 +16,7 @@ var t = e`
     .label {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         transform-origin: top left;
         pointer-events: none;
         transition:
@@ -24,6 +24,10 @@ var t = e`
             font-size 0.2s;
         white-space: nowrap;
     }
+
+    :host(:dir(rtl)) .label {
+        transform-origin: top right;
+    }
 `, n = e`
     .container {
         position: relative;

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

@@ -11,7 +11,7 @@ var t = e`
     .fill {
         position: absolute;
         top: 0;
-        left: 0;
+        inset-inline-start: 0;
         height: 100%;
         display: block;
     }

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

@@ -8,12 +8,12 @@ import { UiKitElement as a } from "../base/UiKitElement.js";
 import { commonStyles as o } from "./styles/common.styles.js";
 import { themeConfig as s } from "./theme-config.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
 import "../ds-icon/ds-icon.js";
-import { cupraDiagonalStyles as l } from "./styles/cupra-diagonal.styles.js";
-import { cupraStyles as u } from "./styles/cupra.styles.js";
-import { seatLegacyStyles as d } from "./styles/seat-legacy.styles.js";
-import { seatStyles as f } from "./styles/seat.styles.js";
-import { booleanConverter as p } from "../../utils/booleanConverter.js";
+import { cupraDiagonalStyles as u } from "./styles/cupra-diagonal.styles.js";
+import { cupraStyles as d } from "./styles/cupra.styles.js";
+import { seatLegacyStyles as f } from "./styles/seat-legacy.styles.js";
+import { seatStyles as p } from "./styles/seat.styles.js";
 import { uiKitHtml as m } from "../../utils/uiKitHtml.js";
 import { classMap as h } 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";
@@ -93,28 +93,28 @@ var _ = class extends a {
 	}
 }, v = (_.styles = [
 	o,
-	l,
-	f,
 	u,
-	d
+	p,
+	d,
+	f
 ], _);
 i([n({
 	type: Number,
 	attribute: "max-height"
 })], v.prototype, "maxHeight", void 0), i([n({
 	type: Boolean,
-	converter: p,
+	converter: l,
 	reflect: !0
 })], v.prototype, "open", void 0), i([n({
 	type: String,
 	reflect: !0
 })], v.prototype, "mode", void 0), i([n({ type: String })], v.prototype, "size", void 0), i([n({
 	type: Boolean,
-	converter: p
+	converter: l
 })], v.prototype, "disabled", void 0), i([n({
 	type: Boolean,
 	attribute: "show-divider",
-	converter: p
+	converter: l
 })], v.prototype, "showDivider", void 0), i([n({
 	type: String,
 	attribute: "collapse-icon-name"

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

@@ -57,6 +57,14 @@ var t = e`
             block-size: auto;
         }
     }
+
+    :host(:dir(rtl)[data-ui-kit-theme]) .divider {
+        background-image: linear-gradient(
+            to right,
+            var(--ds-color-border-default-faint) 0%,
+            var(--ds-color-border-default-subtle) 30%
+        );
+    }
 `;
 //#endregion
 export { t as commonStyles };

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