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

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

@@ -2,6 +2,10 @@ 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-toast/styles/common.styles.ts
 var t = e`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: contents;
     }
@@ -14,6 +18,37 @@ var t = e`
         pointer-events: none;
     }
 
+    .toast-container.top-end,
+    .toast-container.top-start {
+        top: 1rem;
+    }
+
+    .toast-container.top-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.top-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
+    .toast-container.bottom-end,
+    .toast-container.bottom-start {
+        flex-direction: column;
+        bottom: 1rem;
+    }
+
+    .toast-container.bottom-end {
+        inset-inline-end: 1rem;
+        align-items: flex-end;
+    }
+
+    .toast-container.bottom-start {
+        inset-inline-start: 1rem;
+        align-items: flex-start;
+    }
+
     .toast-container.top-right {
         top: 1rem;
         right: 1rem;
@@ -29,16 +64,15 @@ var t = e`
     .toast-container.bottom-right,
     .toast-container.bottom-left {
         flex-direction: column;
+        bottom: 1rem;
     }
 
     .toast-container.bottom-right {
-        bottom: 1rem;
         right: 1rem;
         align-items: flex-end;
     }
 
     .toast-container.bottom-left {
-        bottom: 1rem;
         left: 1rem;
         align-items: flex-start;
     }
@@ -90,7 +124,7 @@ var t = e`
         }
         to {
             opacity: 0;
-            transform: translateX(-1rem);
+            transform: translateX(calc(-1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 
@@ -101,7 +135,7 @@ var t = e`
         }
         to {
             opacity: 0;
-            transform: translateX(1rem);
+            transform: translateX(calc(1rem * var(--ui-kit-private-dir, 1)));
         }
     }
 `;

package/dist-react/esm/components/ds-toast-message/ds-toast-message.js

@@ -12,8 +12,8 @@ import "../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map
 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-icon-button/ds-icon-button.js";
-import { when as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
 import "../ds-link-button/ds-link-button.js";
+import { when as c } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
 import { toastMessageStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-toast-message/ds-toast-message.ts
 var u = class extends t {
@@ -64,7 +64,7 @@ var u = class extends t {
 	}
 	get closeButtonTemplate() {
 		return a`<ds-icon-button
-            data-aria-label="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton || "close-button"}
             @click=${this.handleClickCloseButton}
             icon-name="cross"
             variant="naked"
@@ -95,6 +95,9 @@ var u = class extends t {
 	}
 }, d = (u.styles = [l], u);
 r([n({
+	type: String,
+	attribute: "data-aria-label-close-button"
+})], d.prototype, "dataAriaLabelCloseButton", void 0), r([n({
 	type: String,
 	reflect: !0
 })], d.prototype, "status", void 0), r([n({

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

@@ -104,7 +104,7 @@ var t = e`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 4;
         overflow: hidden;
-        text-align: left;
+        text-align: start;
     }
 
     @media (min-width: 480px) {

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

@@ -7,10 +7,9 @@ import { customUiKitElement as r } from "../../decorators/customUiKitElement.js"
 import { booleanConverter as i } from "../../utils/booleanConverter.js";
 import { classMap as a } 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 { when as o } from "../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.js";
-import { DsButton as s } from "../ds-button/ds-button.js";
+import { DsButton as o } from "../ds-button/ds-button.js";
 //#region src/components/ds-toggle-button/ds-toggle-button.ts
-var c = class extends s {
+var s = class extends o {
 	constructor(...e) {
 		super(...e), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
 	}
@@ -41,9 +40,8 @@ var c = class extends s {
                 type=${this.type}
                 @click=${this.handleClick}
             >
-                ${o(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                 ${this.checked ? this.checkedText : this.uncheckedText}
-                ${o(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
+                ${this.iconTemplate}
             </button>
         `;
 	}
@@ -52,15 +50,15 @@ n([t({
 	type: Boolean,
 	converter: i,
 	reflect: !0
-})], c.prototype, "checked", void 0), n([t({
+})], s.prototype, "checked", void 0), n([t({
 	type: String,
 	attribute: "checked-text"
-})], c.prototype, "checkedText", void 0), n([t({
+})], s.prototype, "checkedText", void 0), n([t({
 	type: String,
 	attribute: "unchecked-text"
-})], c.prototype, "uncheckedText", void 0), n([t({
+})], s.prototype, "uncheckedText", void 0), n([t({
 	type: Boolean,
 	converter: i
-})], c.prototype, "rounded", void 0), c = n([r("ds-toggle-button")], c);
+})], s.prototype, "rounded", void 0), s = n([r("ds-toggle-button")], s);
 //#endregion
-export { c as DsToggleButton };
+export { s as DsToggleButton };

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

@@ -29,7 +29,7 @@ var t = e`
     .fill {
         transition: width 200ms ease-in-out;
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 50%;
     }
 
@@ -39,7 +39,7 @@ var t = e`
         top: 50%;
         transform: translateY(-50%);
         transition:
-            left 0.3s cubic-bezier(0, 0, 0.2, 1),
+            inset-inline-start 0.3s cubic-bezier(0, 0, 0.2, 1),
             width 0.3s cubic-bezier(0, 0, 0.2, 1),
             height 0.3s cubic-bezier(0, 0, 0.2, 1),
             background-color 0.3s cubic-bezier(0, 0, 0.2, 1);

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

@@ -113,14 +113,14 @@ var t = e`
         transform: translateY(-50%);
         border-radius: var(--ds-border-radius-full, 100000px);
         transition:
-            left 150ms ease,
+            inset-inline-start 150ms ease,
             width 150ms ease,
             height 150ms ease;
-        left: var(--ui-kit-private-dot-gap);
+        inset-inline-start: var(--ui-kit-private-dot-gap);
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .container.checked .dot {
-        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+        inset-inline-start: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
     }
 
     :host([data-ui-kit-theme='cupra-diagonal']) .medium .dot {

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

@@ -113,14 +113,14 @@ var t = e`
         transform: translateY(-50%);
         border-radius: var(--ds-border-radius-full, 100000px);
         transition:
-            left 150ms ease,
+            inset-inline-start 150ms ease,
             width 150ms ease,
             height 150ms ease;
-        left: var(--ui-kit-private-dot-gap);
+        inset-inline-start: var(--ui-kit-private-dot-gap);
     }
 
     :host([data-ui-kit-theme='seat']) .container.checked .dot {
-        left: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
+        inset-inline-start: calc(100% - var(--ui-kit-private-dot-gap) - var(--ui-kit-private-dot-size));
     }
 
     :host([data-ui-kit-theme='seat']) .medium .dot {

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

@@ -184,7 +184,7 @@ var C = class extends s {
                 aria-controls=${this.disablePressListener ? t : this.tooltipId}
                 aria-expanded=${this.disablePressListener ? t : String(this.show)}
                 aria-describedby=${this.show ? this.tooltipId : t}
-                aria-label=${this.disablePressListener ? t : "open tooltip"}
+                aria-label=${this.disablePressListener ? t : this.dataAriaLabel || "open tooltip"}
                 @mouseover="${this.handleAnchorMouseOver}"
                 @mouseout="${this.handleAnchorMouseOut}"
                 @pointerdown="${this.handleAnchorPointerDown}"
@@ -204,6 +204,9 @@ var C = class extends s {
 	x
 ], C);
 o([n({
+	type: String,
+	attribute: "data-aria-label"
+})], w.prototype, "dataAriaLabel", void 0), o([n({
 	type: String,
 	reflect: !0
 })], w.prototype, "mode", void 0), o([n({

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

@@ -9,11 +9,11 @@ var t = e`
     }
 
     .title {
-        text-align: left;
+        text-align: start;
     }
 
     .body {
-        text-align: left;
+        text-align: start;
     }
 
     .buttons-container {
@@ -23,7 +23,7 @@ var t = e`
     }
 
     ::slotted([slot='content']) {
-        text-align: left;
+        text-align: start;
     }
 
     .container {
@@ -77,7 +77,7 @@ var t = e`
 
     ::slotted([slot='close-button']) {
         flex: 0 0 auto;
-        margin-left: auto;
+        margin-inline-start: auto;
     }
 
     .arrow {

package/dist-react/esm/components/ds-value-unit/ds-value-unit.js

@@ -29,10 +29,10 @@ var u = class extends r {
 		return e`
             <div class="container" part="container">
                 <span class=${a(t)} part="value">
-                    <slot name="value"></slot>
+                    <bdi><slot name="value"></slot></bdi>
                 </span>
                 <span class=${a(n)} part="unit">
-                    <slot name="unit"></slot>
+                    <bdi><slot name="unit"></slot></bdi>
                 </span>
             </div>
         `;

package/dist-react/esm/decorators/customUiKitElement.js

@@ -8,7 +8,7 @@ function t(t) {
 		(r = globalThis) != null && (r = r.customElements) != null && r.get(o) || (i = globalThis) == null || (i = i.customElements) == null || (a = i.define) == null || a.call(i, o, class extends n {
 			connectedCallback() {
 				var e;
-				(e = n.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.237"), this.setAttribute("data-ui-kit-component-name", t);
+				(e = n.prototype.connectedCallback) == null || e.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.239"), this.setAttribute("data-ui-kit-component-name", t);
 			}
 		});
 	};

package/dist-react/esm/utils/IconsManager.js

@@ -26,7 +26,7 @@ var n = class {
 			return console.error(`Failed to fetch icon "${e}":`, t), "";
 		}), t.subscribe("theme", this.handleChangeTheme);
 	}
-}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.237"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.239"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ var e = class {
 			}
 		});
 	}
-}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.237"), n = globalThis, r = n[t];
+}, t = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.239"), n = globalThis, r = n[t];
 r || (r = new e(), Object.defineProperty(n, t, {
 	value: r,
 	writable: !1,

package/dist-react/esm/utils/closestAttribute/closestAttribute.js

@@ -0,0 +1,12 @@
+//#region src/utils/closestAttribute/closestAttribute.ts
+function e(e, t) {
+	let n = e;
+	for (; n;) {
+		let e = n.getAttribute(t);
+		if (e) return e;
+		n = n.parentElement ?? n.getRootNode().host ?? null;
+	}
+	return null;
+}
+//#endregion
+export { e as closestAttribute };

package/dist-react/esm/utils/formatNumber/formatNumber.js

@@ -1,5 +1,9 @@
 //#region src/utils/formatNumber/formatNumber.ts
-function e(e) {
+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);
@@ -7,58 +11,60 @@ function e(e) {
 		return;
 	}
 }
-function t(t, n, r) {
+function r(e, t, r) {
 	var i;
-	if (!t || !n) return;
-	let a = (i = e(t)) == null ? void 0 : i[n];
+	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 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) => {
+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 n = y ?? e.value;
-				_ = n, v = t === 0 || (b[0].type === "minusSign" || b[0].type === "plusSign") && t === 1 ? "left" : "right", g += n;
+				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 = u ?? e.value;
-				h += t, g += t;
+				let t = d ?? e.value;
+				g += t, _ += t;
 				break;
 			}
 			case "decimal": {
-				let t = d ?? e.value;
-				h += t, g += t;
+				let t = f ?? e.value;
+				g += t, _ += t;
 				break;
 			}
 			case "integer":
 			case "fraction":
 			case "plusSign":
 			case "minusSign":
-				h += e.value, g += e.value;
+				g += e.value, _ += e.value;
 				break;
-			case "literal": g += e.value;
+			case "literal": _ += e.value;
 		}
 	}), {
-		formattedNumber: h,
-		formattedValue: g,
-		..._ && { unitSymbol: _ },
-		...v && { unitSymbolPosition: v }
+		formattedNumber: g,
+		formattedValue: _,
+		...v && { unitSymbol: v },
+		...y && { unitSymbolPosition: y }
 	};
 }
 //#endregion
-export { n as formatNumber };
+export { i as formatNumber };

package/dist-react/esm/utils/getDirection/getDirection.js

@@ -0,0 +1,19 @@
+import { closestAttribute as e } from "../closestAttribute/closestAttribute.js";
+//#region src/utils/getDirection/getDirection.ts
+function t(e) {
+	return e === "ltr" || e === "rtl";
+}
+function n(n) {
+	let r = e(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;
+}
+//#endregion
+export { n as getDirection, r as getDirectionSign };

package/dist-react/esm/utils/normalizeDigits/normalizeDigits.js

@@ -0,0 +1,11 @@
+//#region src/utils/normalizeDigits/normalizeDigits.ts
+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);
+}
+//#endregion
+export { r as normalizeDigits };

package/dist-react/esm/utils/observeScroll/observeScroll.js

@@ -1,12 +1,17 @@
 import { debounce as e } from "../debounce.js";
 //#region src/utils/observeScroll/observeScroll.ts
 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({
+	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({
 		func: () => n(r()),
 		milliseconds: 16
 	}), a = new ResizeObserver(i);

package/dist-react/esm/utils/resolveLang/resolveLang.js

@@ -0,0 +1,9 @@
+import { closestAttribute as e } from "../closestAttribute/closestAttribute.js";
+//#region src/utils/resolveLang/resolveLang.ts
+var t = "en-US";
+function n(n, r = t) {
+	var i;
+	return e(n, "lang") || ((i = document) == null || (i = i.documentElement) == null ? void 0 : i.lang) || r;
+}
+//#endregion
+export { n as resolveLang };

package/dist-react/esm/utils/version.js

@@ -1,4 +1,4 @@
 //#region src/utils/version.ts
-var e = "2.0.0-canary.237", t = `--v${e.replaceAll(".", "-")}`;
+var e = "2.0.0-canary.239", t = `--v${e.replaceAll(".", "-")}`;
 //#endregion
 export { e as VERSION, t as VERSION_TAG_SUFFIX };

package/dist-react/types/components/ds-avatar/ds-avatar.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 import type { DsAvatarAttrs } from './ds-avatar.types.ts';
 export declare class DsAvatar extends LitElement {
     static styles: import("lit").CSSResult[];
+    dataAriaLabel: DsAvatarAttrs['data-aria-label'];
     size: DsAvatarAttrs['size'];
     name: DsAvatarAttrs['name'];
     disabled: boolean;

package/dist-react/types/components/ds-avatar/ds-avatar.types.d.ts

@@ -1,6 +1,7 @@
 import type { DsIconAttrs } from '../ds-icon/ds-icon.types';
 import { CommonAttrs } from '../../types/types';
 export type DsAvatarAttrs = {
+    'data-aria-label'?: string;
     'icon-name': DsIconAttrs['icon-name'];
     size?: 'large' | 'medium' | 'small';
     initials?: string;

package/dist-react/types/components/ds-badge/ds-badge.d.ts

@@ -2,6 +2,7 @@ import { LitElement, nothing } from 'lit';
 import type { DsBadgeAttrs } from './ds-badge.types.js';
 export declare class DsBadge extends LitElement {
     static styles: import("lit").CSSResult[];
+    dataAriaLabel: DsBadgeAttrs['data-aria-label'];
     number: DsBadgeAttrs['number'];
     variant: DsBadgeAttrs['variant'];
     size: DsBadgeAttrs['size'];

package/dist-react/types/components/ds-badge/ds-badge.types.d.ts

@@ -1,5 +1,6 @@
 import type { CommonAttrs } from '../../types/types';
 export interface DsBadgeAttrs extends CommonAttrs {
+    'data-aria-label'?: string;
     number?: number;
     variant?: 'base' | 'inverted' | 'alert' | 'warning' | 'default';
     size?: 'large' | 'medium';

package/dist-react/types/components/ds-banner/ds-banner.d.ts

@@ -3,6 +3,7 @@ import { LitElement, nothing } from 'lit';
 import type { DsBannerAttrs } from './ds-banner.types.js';
 export declare class DsBanner extends LitElement {
     static styles: import("lit").CSSResult[];
+    dataAriaLabelCloseButton: DsBannerAttrs['data-aria-label-close-button'];
     orientation: DsBannerAttrs['orientation'];
     showClose: DsBannerAttrs['show-close'];
     _show: boolean | undefined;

package/dist-react/types/components/ds-banner/ds-banner.types.d.ts

@@ -1,6 +1,7 @@
 import type { CommonAttrs } from '../../types/types.ts';
 export type DsBannerOrientation = 'horizontal' | 'vertical';
 export interface DsBannerAttrs extends CommonAttrs {
+    'data-aria-label-close-button'?: string;
     orientation?: DsBannerOrientation;
     show?: boolean;
     'show-close'?: boolean;

package/dist-react/types/components/ds-breadcrumbs/ds-breadcrumbs.d.ts

@@ -1,9 +1,12 @@
 import '../ds-icon/ds-icon.ts';
 import '../ds-tooltip/ds-tooltip.ts';
 import { LitElement, PropertyValues } from 'lit';
+import type { DsBreadcrumbsAttrs } from './ds-breadcrumbs.types.ts';
 import '../ds-breadcrumbs-item/ds-breadcrumbs-item.ts';
 export declare class DsBreadcrumbs extends LitElement {
     static styles: import("lit").CSSResult[];
+    dataAriaLabel: DsBreadcrumbsAttrs['data-aria-label'];
+    dataAriaLabelShowMoreButton: DsBreadcrumbsAttrs['data-aria-label-show-more-button'];
     private items;
     private maxItems;
     private itemTag;

package/dist-react/types/components/ds-breadcrumbs/ds-breadcrumbs.types.d.ts

@@ -5,6 +5,8 @@ export interface BreadcrumbItemData extends Partial<DsBreadcrumbsItemAttrs> {
     href?: string;
 }
 export interface DsBreadcrumbsProps {
+    'data-aria-label'?: string;
+    'data-aria-label-show-more-button'?: string;
     items?: BreadcrumbItemData[];
 }
 export type DsBreadcrumbsAttrs = DsBreadcrumbsProps & CommonAttrs;

package/dist-react/types/components/ds-button/ds-button.types.d.ts

@@ -32,7 +32,7 @@ export type DsButtonAttrs = {
     'icon-name'?: DsIconAttrs['icon-name'];
     size?: Size | ResponsiveSize;
     type?: 'button' | 'submit' | 'reset';
-    'icon-position'?: 'left' | 'right';
+    'icon-position'?: 'left' | 'right' | 'start' | 'end';
     'icon-size'?: number;
     rounded?: boolean;
     'full-width'?: boolean;

package/dist-react/types/components/ds-calendar/ds-calendar.d.ts

@@ -3,10 +3,14 @@ import '../ds-icon-button/ds-icon-button.ts';
 import { LitElement, type PropertyValues } from 'lit';
 import type { DsCalendarAttrs, DsCalendarSize, DsCalendarVariant, WeekDay } from './ds-calendar.types';
 export declare class DsCalendar extends LitElement {
+    dataAriaLabelPreviousMonth: DsCalendarAttrs['data-aria-label-previous-month'];
+    dataAriaLabelNextMonth: DsCalendarAttrs['data-aria-label-next-month'];
+    dataAriaLabel: DsCalendarAttrs['data-aria-label'];
     value: DsCalendarAttrs['value'];
     variant: DsCalendarVariant;
     size: DsCalendarSize;
     locale: DsCalendarAttrs['locale'];
+    weekdayFormat: DsCalendarAttrs['weekday-format'];
     firstDayOfWeek: WeekDay;
     minDate: DsCalendarAttrs['min-date'];
     maxDate: DsCalendarAttrs['max-date'];
@@ -21,12 +25,16 @@ export declare class DsCalendar extends LitElement {
     static styles: import("lit").CSSResult[];
     private get selectedDate();
     get viewDate(): Date;
+    private handleLangChange;
+    disconnectedCallback(): void;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     private applyInitialValue;
     private initializeViewDate;
     private parseDate;
     private get calendarClasses();
+    private get resolvedLocale();
+    private formatWeekday;
     private get weekdayNames();
     private get monthYearLabel();
     private getDaysInMonth;
@@ -36,6 +44,11 @@ export declare class DsCalendar extends LitElement {
     private isDateDisabled;
     private handlePrevMonth;
     private handleNextMonth;
+    private get tabStopIndex();
+    private focusDayAt;
+    private changeMonthKeepingDay;
+    private moveFocusToViewDate;
+    private handleGridKeyDown;
     private handleDayChange;
     private get navButtonSize();
     private get prevButtonTemplate();