@cupra/ui-kit 2.0.0-canary.113 → 2.0.0-canary.115

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

@@ -5,12 +5,12 @@ import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mod
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
-import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { s as c, u as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import { s as a, u as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
+import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as c } from "../../utils/booleanConverter.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
 import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
 import { objectConverter as d } from "../../utils/objectConverter.js";
 import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
@@ -51,12 +51,12 @@ var m = new Set([
 		};
 	}
 	render() {
-		let t = (this.htmlTagName ?? "").toLowerCase(), n = c(m.has(t) ? t : "span");
-		return l`
+		let t = (this.htmlTagName ?? "").toLowerCase(), n = a(m.has(t) ? t : "span");
+		return o`
             <${n} 
                 part="container" 
                 data-testid="ds-text-container" 
-                class=${s(this.classes)}
+                class=${l(this.classes)}
                 style=${f({ color: this.color || "var(--ui-kit-text-color)" })}
             >
                 ${this.value ? this.value : e}
@@ -79,10 +79,10 @@ r([t({
 	reflect: !0
 })], h.prototype, "color", void 0), r([t({
 	type: Boolean,
-	converter: o,
+	converter: c,
 	reflect: !0
 })], h.prototype, "uppercase", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], h.prototype, "slotedNodes", void 0), h = r([a("ds-text")], h);
+})], h.prototype, "slotedNodes", void 0), h = r([s("ds-text")], h);
 //#endregion

package/dist/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -50,7 +50,7 @@ var p = class extends o {
 	}
 	loadThemeStyles() {
 		return this.loadStyles ? new Promise((e, t) => {
-			let n = "/2.0.0-canary.113", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
+			let n = "/2.0.0-canary.115", r = `https://ds-assets.cupra.com${n}/styles/${this.theme}/theme.css`;
 			if (document.head.querySelector(`link[href="${r}"]`)) e();
 			else {
 				let i = `ui-kit-theme-${n}`, a = document.getElementById(i), o = document.createElement("link");

package/dist/esm/decorators/customUiKitElement.js

@@ -1,23 +1,24 @@
-import { reactFactory as e, standardFactory as t } from "../utils/componentFactory.js";
+import { VERSION_TAG_SUFFIX as e } from "../utils/version.js";
+import { reactFactory as t, standardFactory as n } from "../utils/componentFactory.js";
 //#region src/decorators/customUiKitElement.ts
-function n(n, r) {
-	return function(i) {
-		if (!i?.prototype) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
-		let a = typeof __UIKIT_TARGET__ < "u" && __UIKIT_TARGET__ === "react", o = a ? `${n}-react` : n;
-		if (globalThis?.customElements?.get(o)) return;
-		let s = r?.skipTagAsComponentName ? [] : [n];
-		Array.isArray(r?.extendComponentNames) && (s = [...r.extendComponentNames, ...s]), globalThis?.customElements?.define?.(o, class extends i {
-			constructor(...n) {
-				super(...n), this.componentFactory = a ? e : t;
+function r(r, i) {
+	return function(a) {
+		if (!a?.prototype) throw TypeError("@customUiKitElement requires a class that extends HTMLElement.");
+		let o = typeof __UIKIT_TARGET__ < "u" && __UIKIT_TARGET__ === "react", s = o ? `${r}${e}` : r;
+		if (globalThis?.customElements?.get(s)) return;
+		let c = i?.skipTagAsComponentName ? [] : [r];
+		Array.isArray(i?.extendComponentNames) && (c = [...i.extendComponentNames, ...c]), globalThis?.customElements?.define?.(s, class extends a {
+			constructor(...e) {
+				super(...e), this.componentFactory = o ? t : n;
 			}
 			static {
-				this.componentName = s;
+				this.componentName = c;
 			}
 			connectedCallback() {
-				i.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.113");
+				a.prototype.connectedCallback?.call(this), this.setAttribute("data-ui-kit-version", "2.0.0-canary.115");
 			}
 		});
 	};
 }
 //#endregion
-export { n as customUiKitElement };
+export { r as customUiKitElement };

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+import { VERSION as e, VERSION_TAG_SUFFIX as t } from "./utils/version.js";
 import "./components/index.js";
-import { iconNames as e } from "./components/ds-icon/iconNames.js";
-export { e as iconNames };
+import { iconNames as n } from "./components/ds-icon/iconNames.js";
+export { e as VERSION, t as VERSION_TAG_SUFFIX, n as iconNames };

package/dist/esm/utils/IconsManager.js

@@ -25,7 +25,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.113"), i = globalThis, a = i[r];
+}, r = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.115"), i = globalThis, a = i[r];
 a || (a = new n(), Object.defineProperty(i, r, {
 	value: a,
 	writable: !1,

package/dist/esm/utils/PubSub.js

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

package/dist/esm/utils/StylesRegistry/StylesRegistry.js

@@ -4,7 +4,7 @@ var t = e(20), n = class e {
 	constructor() {
 		this.stylePromises = /* @__PURE__ */ new Map(), this.getStyles = async ({ componentName: e, theme: n }) => {
 			if (!n || !e) return;
-			let r = `https://ds-assets.cupra.com/2.0.0-canary.113/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
+			let r = `https://ds-assets.cupra.com/2.0.0-canary.115/styles/${n}/components/${e}.css`, i = this.getCachedStyleSheetPromise({ url: r });
 			if (i) return i;
 			let a = t(() => this.fetchStyle({ url: r })).then((e) => (e || this.stylePromises.delete(r), e));
 			return this.stylePromises.set(r, a), this.stylePromises.get(r);

package/dist/esm/utils/componentFactory.js

@@ -2,9 +2,12 @@ import { x as e } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-ht
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 import { o as t } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { s as n, u as r } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
+import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
+import { VERSION_TAG_SUFFIX as i } from "./version.js";
 //#region src/utils/componentFactory.ts
-var n = {
-	createIcon: (n) => (i("ds-icon", () => import("../components/ds-icon/ds-icon.js")), e`
+var a = n(`ds-icon${i}`), o = n(`ds-calendar-day${i}`), s = n(`ds-button${i}`), c = n(`ds-divider${i}`), l = n(`ds-icon-button${i}`), u = n(`ds-loader-spinner${i}`), d = n(`ds-skeleton${i}`), f = n(`ds-toast-message${i}`), p = n(`ds-inline-alert${i}`), m = n(`ds-tooltip${i}`), h = {
+	createIcon: (n) => (_("ds-icon", () => import("../components/ds-icon/ds-icon.js")), e`
             <ds-icon
                 class=${t(n?.class)}
                 data-testid=${t(n?.["data-testid"])}
@@ -22,7 +25,7 @@ var n = {
                 ${n.children}
             </ds-icon>
         `),
-	createCalendarDay: (n = {}) => (i("ds-calendar-day", () => import("../components/ds-calendar-day/ds-calendar-day.js")), e`
+	createCalendarDay: (n = {}) => (_("ds-calendar-day", () => import("../components/ds-calendar-day/ds-calendar-day.js")), e`
             <ds-calendar-day
                 class=${t(n?.class)}
                 day=${t(n?.day)}
@@ -34,7 +37,7 @@ var n = {
                 data-testid=${t(n?.["data-testid"])}
             ></ds-calendar-day>
         `),
-	createButton: (n = {}) => (i("ds-button", () => import("../components/ds-button/ds-button.js")), e`
+	createButton: (n = {}) => (_("ds-button", () => import("../components/ds-button/ds-button.js")), e`
             <ds-button
                 class=${n?.class}
                 @click=${n?.["@click"]}
@@ -56,7 +59,7 @@ var n = {
                 ${n.children}
             </ds-button>
         `),
-	createDivider: (t = {}) => (i("ds-divider", () => import("../components/ds-divider/ds-divider.js")), e`
+	createDivider: (t = {}) => (_("ds-divider", () => import("../components/ds-divider/ds-divider.js")), e`
             <ds-divider
                 class=${t?.class}
                 variant=${t?.variant ?? "primary"}
@@ -65,7 +68,7 @@ var n = {
             >
             </ds-divider>
         `),
-	createIconButton: (n = {}) => (i("ds-icon-button", () => import("../components/ds-icon-button/ds-icon-button.js")), e`
+	createIconButton: (n = {}) => (_("ds-icon-button", () => import("../components/ds-icon-button/ds-icon-button.js")), e`
             <ds-icon-button
                 class=${n?.class}
                 @click=${n?.["@click"]}
@@ -84,14 +87,14 @@ var n = {
                 ${n.children}
             </ds-icon-button>
         `),
-	createLoaderSpinner: (t = {}) => (i("ds-loader-spinner", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), e`
+	createLoaderSpinner: (t = {}) => (_("ds-loader-spinner", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), e`
             <ds-loader-spinner
                 ?show=${t?.show}
                 orientation=${t?.orientation ?? "row"}
                 mode=${t?.mode ?? "light"}
             ></ds-loader-spinner>
         `),
-	createSkeleton: (n = {}) => (i("ds-skeleton", () => import("../components/ds-skeleton/ds-skeleton.js")), e`
+	createSkeleton: (n = {}) => (_("ds-skeleton", () => import("../components/ds-skeleton/ds-skeleton.js")), e`
             <ds-skeleton
                 class=${t(n?.class)}
                 data-testid=${t(n?.["data-testid"])}
@@ -101,7 +104,7 @@ var n = {
                 animation=${t(n?.animation)}
             ></ds-skeleton>
         `),
-	createToastMessage: (t) => (i("ds-toast-message", () => import("../components/ds-toast-message/ds-toast-message.js")), e`
+	createToastMessage: (t) => (_("ds-toast-message", () => import("../components/ds-toast-message/ds-toast-message.js")), e`
             <ds-toast-message
                 data-id="${t["data-id"]}"
                 data-template="${t["data-template"]}"
@@ -110,7 +113,7 @@ var n = {
                 status="${t.status}"
             ></ds-toast-message>
         `),
-	createInlineAlert: (t) => (i("ds-inline-alert", () => import("../components/ds-inline-alert/ds-inline-alert.js")), e`
+	createInlineAlert: (t) => (_("ds-inline-alert", () => import("../components/ds-inline-alert/ds-inline-alert.js")), e`
             <ds-inline-alert
                 title="${t.title}"
                 text="${t.text}"
@@ -118,8 +121,9 @@ var n = {
                 ?show=${t.show ?? !0}
             ></ds-inline-alert>
         `),
-	createTooltip: (n = {}) => (i("ds-tooltip", () => import("../components/ds-tooltip/ds-tooltip.js")), e`
+	createTooltip: (n = {}) => (_("ds-tooltip", () => import("../components/ds-tooltip/ds-tooltip.js")), e`
             <ds-tooltip
+                class=${t(n?.class)}
                 mode=${t(n.mode)}
                 ?show=${n.show ?? !1}
                 ?disable-hover-listener=${n?.["disable-hover-listener"]}
@@ -130,138 +134,139 @@ var n = {
                 <div slot="content">${n.content}</div>
             </ds-tooltip>
         `)
-}, r = {
-	createIcon: (n) => (i("ds-icon-react", () => import("../components/ds-icon/ds-icon.js")), e`
-            <ds-icon-react
-                class=${t(n?.class)}
-                data-testid=${t(n?.["data-testid"])}
-                @click=${n?.["@click"]}
-                @keydown=${n?.["@keydown"]}
-                icon-name=${n?.["icon-name"]}
-                color=${t(n?.color)}
-                background-color=${t(n?.["background-color"])}
-                size=${t(n?.size)}
-                aria-label=${t(n?.["aria-label"])}
-                aria-hidden=${t(n?.["aria-hidden"])}
-                role=${t(n?.role)}
-                tabindex=${t(n?.tabindex)}
+}, g = {
+	createIcon: (e) => (_(`ds-icon${i}`, () => import("../components/ds-icon/ds-icon.js")), r`
+            <${a}
+                class=${t(e?.class)}
+                data-testid=${t(e?.["data-testid"])}
+                @click=${e?.["@click"]}
+                @keydown=${e?.["@keydown"]}
+                icon-name=${e?.["icon-name"]}
+                color=${t(e?.color)}
+                background-color=${t(e?.["background-color"])}
+                size=${t(e?.size)}
+                aria-label=${t(e?.["aria-label"])}
+                aria-hidden=${t(e?.["aria-hidden"])}
+                role=${t(e?.role)}
+                tabindex=${t(e?.tabindex)}
             >
-                ${n.children}
-            </ds-icon-react>
+                ${e.children}
+            </${a}>
         `),
-	createCalendarDay: (n = {}) => (i("ds-calendar-day-react", () => import("../components/ds-calendar-day/ds-calendar-day.js")), e`
-            <ds-calendar-day-react
-                class=${t(n?.class)}
-                day=${t(n?.day)}
-                size=${t(n?.size)}
-                ?disabled=${n?.disabled}
-                ?selected=${n?.selected}
-                ?today=${n?.today}
-                ?outside-month=${n?.["outside-month"]}
-                data-testid=${t(n?.["data-testid"])}
-            ></ds-calendar-day-react>
+	createCalendarDay: (e = {}) => (_(`ds-calendar-day${i}`, () => import("../components/ds-calendar-day/ds-calendar-day.js")), r`
+            <${o}
+                class=${t(e?.class)}
+                day=${t(e?.day)}
+                size=${t(e?.size)}
+                ?disabled=${e?.disabled}
+                ?selected=${e?.selected}
+                ?today=${e?.today}
+                ?outside-month=${e?.["outside-month"]}
+                data-testid=${t(e?.["data-testid"])}
+            ></${o}>
         `),
-	createButton: (n = {}) => (i("ds-button-react", () => import("../components/ds-button/ds-button.js")), e`
-            <ds-button-react
-                class=${n?.class}
-                @click=${n?.["@click"]}
-                .size=${t(n?.size)}
-                type=${n?.type}
-                icon-position=${n?.["icon-position"]}
-                .rounded=${n?.rounded}
-                .full-width=${n?.["full-width"]}
-                variant=${n?.variant ?? "primary"}
-                mode=${n?.mode ?? "light"}
-                .disabled=${n?.disabled}
-                icon-name=${n?.["icon-name"]}
-                html-tag-name=${n?.["html-tag-name"]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.["data-testid"]}
+	createButton: (e = {}) => (_(`ds-button${i}`, () => import("../components/ds-button/ds-button.js")), r`
+            <${s}
+                class=${e?.class}
+                @click=${e?.["@click"]}
+                .size=${t(e?.size)}
+                type=${e?.type}
+                icon-position=${e?.["icon-position"]}
+                .rounded=${e?.rounded}
+                .full-width=${e?.["full-width"]}
+                variant=${e?.variant ?? "primary"}
+                mode=${e?.mode ?? "light"}
+                .disabled=${e?.disabled}
+                icon-name=${e?.["icon-name"]}
+                html-tag-name=${e?.["html-tag-name"]}
+                href=${e?.href}
+                rel=${e?.rel}
+                target=${e?.target}
+                data-testid=${e?.["data-testid"]}
             >
-                ${n.children}
-            </ds-button-react>
+                ${e.children}
+            </${s}>
         `),
-	createDivider: (t = {}) => (i("ds-divider-react", () => import("../components/ds-divider/ds-divider.js")), e`
-            <ds-divider-react
-                class=${t?.class}
-                variant=${t?.variant ?? "primary"}
-                orientation=${t?.orientation ?? "horizontal"}
-                data-testid=${t?.["data-testid"]}
+	createDivider: (e = {}) => (_(`ds-divider${i}`, () => import("../components/ds-divider/ds-divider.js")), r`
+            <${c}
+                class=${e?.class}
+                variant=${e?.variant ?? "primary"}
+                orientation=${e?.orientation ?? "horizontal"}
+                data-testid=${e?.["data-testid"]}
             >
-            </ds-divider-react>
+            </${c}>
         `),
-	createIconButton: (n = {}) => (i("ds-icon-button-react", () => import("../components/ds-icon-button/ds-icon-button.js")), e`
-            <ds-icon-button-react
-                class=${n?.class}
-                @click=${n?.["@click"]}
-                size=${t(n?.size)}
-                variant=${n?.variant ?? "primary"}
-                mode=${n?.mode ?? "light"}
-                .disabled=${n?.disabled}
-                icon-name=${n?.["icon-name"]}
-                html-tag-name=${n?.["html-tag-name"]}
-                href=${n?.href}
-                rel=${n?.rel}
-                target=${n?.target}
-                data-testid=${n?.["data-testid"]}
-                data-aria-label=${n?.["data-aria-label"]}
+	createIconButton: (e = {}) => (_(`ds-icon-button${i}`, () => import("../components/ds-icon-button/ds-icon-button.js")), r`
+            <${l}
+                class=${e?.class}
+                @click=${e?.["@click"]}
+                size=${t(e?.size)}
+                variant=${e?.variant ?? "primary"}
+                mode=${e?.mode ?? "light"}
+                .disabled=${e?.disabled}
+                icon-name=${e?.["icon-name"]}
+                html-tag-name=${e?.["html-tag-name"]}
+                href=${e?.href}
+                rel=${e?.rel}
+                target=${e?.target}
+                data-testid=${e?.["data-testid"]}
+                data-aria-label=${e?.["data-aria-label"]}
             >
-                ${n.children}
-            </ds-icon-button-react>
+                ${e.children}
+            </${l}>
         `),
-	createLoaderSpinner: (t = {}) => (i("ds-loader-spinner-react", () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), e`
-            <ds-loader-spinner-react
-                ?show=${t?.show}
-                orientation=${t?.orientation ?? "row"}
-                mode=${t?.mode ?? "light"}
-            ></ds-loader-spinner-react>
+	createLoaderSpinner: (e = {}) => (_(`ds-loader-spinner${i}`, () => import("../components/ds-loader-spinner/ds-loader-spinner.js")), r`
+            <${u}
+                ?show=${e?.show}
+                orientation=${e?.orientation ?? "row"}
+                mode=${e?.mode ?? "light"}
+            ></${u}>
         `),
-	createSkeleton: (n = {}) => (i("ds-skeleton-react", () => import("../components/ds-skeleton/ds-skeleton.js")), e`
-            <ds-skeleton-react
-                class=${t(n?.class)}
-                data-testid=${t(n?.["data-testid"])}
-                variant=${t(n?.variant)}
-                width=${t(n?.width)}
-                height=${t(n?.height)}
-                animation=${t(n?.animation)}
-            ></ds-skeleton-react>
+	createSkeleton: (e = {}) => (_(`ds-skeleton${i}`, () => import("../components/ds-skeleton/ds-skeleton.js")), r`
+            <${d}
+                class=${t(e?.class)}
+                data-testid=${t(e?.["data-testid"])}
+                variant=${t(e?.variant)}
+                width=${t(e?.width)}
+                height=${t(e?.height)}
+                animation=${t(e?.animation)}
+            ></${d}>
         `),
-	createToastMessage: (t) => (i("ds-toast-message-react", () => import("../components/ds-toast-message/ds-toast-message.js")), e`
-            <ds-toast-message-react
-                data-id="${t["data-id"]}"
-                data-template="${t["data-template"]}"
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-            ></ds-toast-message-react>
+	createToastMessage: (e) => (_(`ds-toast-message${i}`, () => import("../components/ds-toast-message/ds-toast-message.js")), r`
+            <${f}
+                data-id="${e["data-id"]}"
+                data-template="${e["data-template"]}"
+                title="${e.title}"
+                text="${e.text}"
+                status="${e.status}"
+            ></${f}>
         `),
-	createInlineAlert: (t) => (i("ds-inline-alert-react", () => import("../components/ds-inline-alert/ds-inline-alert.js")), e`
-            <ds-inline-alert-react
-                title="${t.title}"
-                text="${t.text}"
-                status="${t.status}"
-                ?show=${t.show ?? !0}
-            ></ds-inline-alert-react>
+	createInlineAlert: (e) => (_(`ds-inline-alert${i}`, () => import("../components/ds-inline-alert/ds-inline-alert.js")), r`
+            <${p}
+                title="${e.title}"
+                text="${e.text}"
+                status="${e.status}"
+                ?show=${e.show ?? !0}
+            ></${p}>
         `),
-	createTooltip: (n = {}) => (i("ds-tooltip-react", () => import("../components/ds-tooltip/ds-tooltip.js")), e`
-            <ds-tooltip-react
-                mode=${t(n.mode)}
-                ?show=${n.show ?? !1}
-                ?disable-hover-listener=${n?.["disable-hover-listener"]}
-                ?disable-focus-listener=${n?.["disable-focus-listener"]}
-                ?disable-press-listener=${n?.["disable-press-listener"]}
+	createTooltip: (e = {}) => (_(`ds-tooltip${i}`, () => import("../components/ds-tooltip/ds-tooltip.js")), r`
+            <${m}
+                class=${t(e?.class)}
+                mode=${t(e.mode)}
+                ?show=${e.show ?? !1}
+                ?disable-hover-listener=${e?.["disable-hover-listener"]}
+                ?disable-focus-listener=${e?.["disable-focus-listener"]}
+                ?disable-press-listener=${e?.["disable-press-listener"]}
             >
-                ${n.children}
-                <div slot="content">${n.content}</div>
-            </ds-tooltip-react>
+                ${e.children}
+                <div slot="content">${e.content}</div>
+            </${m}>
         `)
 };
-function i(e, t) {
+function _(e, t) {
 	try {
 		typeof window < "u" && typeof customElements < "u" && !customElements.get(e) && t().catch((e) => {});
 	} catch {}
 }
 //#endregion
-export { r as reactFactory, n as standardFactory };
+export { g as reactFactory, h as standardFactory };

package/dist/esm/utils/cssWithTokens.js

@@ -2,7 +2,7 @@ import { i as e, r as t } from "../node_modules/.pnpm/@lit_reactive-element@2.1.
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/utils/cssWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-113"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-115"))}`;
 }
 //#endregion
 export { n as cssWithTokens };

package/dist/esm/utils/htmlWithTokens.js

@@ -4,7 +4,7 @@ import { o as t } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-ht
 import "../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
 //#region src/utils/htmlWithTokens.ts
 function n(n, ...r) {
-	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-113"))}`;
+	return e`${t(String.raw({ raw: n }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-115"))}`;
 }
 //#endregion
 export { n as htmlWithTokens };

package/dist/esm/utils/version.js

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

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 import './components/index';
 export { iconNames } from './components/ds-icon/iconNames.ts';
+export { VERSION, VERSION_TAG_SUFFIX } from './utils/version.ts';

package/dist/types/utils/componentFactory.d.ts

@@ -20,6 +20,7 @@ export type ComponentFactory = {
     createToastMessage: GetAttributes<DsToastMessageAttrs>;
     createInlineAlert: GetAttributes<DsInlineAlertAttrs>;
     createTooltip: GetAttributes<DsTooltipAttrs & {
+        class?: string;
         children?: any;
         content?: any;
     }>;

package/dist/types/utils/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION: string;
+export declare const VERSION_TAG_SUFFIX: string;

package/dist-react/cjs/components/ds-breadcrumbs/ds-breadcrumbs.cjs

@@ -1,21 +1,21 @@
-const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs`);const a=require(`../../decorators/customUiKitElement.cjs`),o=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.cjs`),require(`../ds-breadcrumbs-item/ds-breadcrumbs-item.cjs`);var s=[{below:768,maxItems:3},{below:1024,maxItems:4}],c=5,l=class extends r.UiKitElement{constructor(...e){super(...e),this.items=[],this.maxItems=c,this.itemTag=`ds-breadcrumbs-item`,this.onResize=()=>{this.maxItems=s.find(({below:e})=>window.innerWidth<e)?.maxItems??c}}async firstUpdated(e){super.firstUpdated(e),this.onResize()}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this.onResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this.onResize)}handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase().startsWith(`ds-breadcrumbs-item`));t.length>0&&(this.itemTag=t[0].tagName.toLowerCase()),this.items=t.map(e=>({label:e.getAttribute(`label`)||e.textContent?.trim()||``,href:e.getAttribute(`href`)||e.querySelector(`[slot="item"]`)?.getAttribute(`href`)||void 0,disabled:e.hasAttribute(`disabled`),loading:e.hasAttribute(`loading`),selected:e.hasAttribute(`selected`)}))}get separatorIcon(){return this.componentFactory.createIcon({class:`separator-icon`,"icon-name":`arrow-right`,size:24})}itemTemplate(t,n){let r=t.selected||n,i=o.s(this.itemTag),a=r||t.disabled||!t.href?o.u`<span slot="item">${t.label}</span>`:o.u`<a href=${t.href} slot="item">${t.label}</a>`;return o.u`<li class="breadcrumb-list-item">
+const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const n=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),r=require(`../base/UiKitElement.cjs`),i=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs`);const a=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.cjs`);const o=require(`../../decorators/customUiKitElement.cjs`);require(`../ds-breadcrumbs-item/ds-breadcrumbs-item.cjs`);var s=[{below:768,maxItems:3},{below:1024,maxItems:4}],c=5,l=class extends r.UiKitElement{constructor(...e){super(...e),this.items=[],this.maxItems=c,this.itemTag=`ds-breadcrumbs-item`,this.onResize=()=>{this.maxItems=s.find(({below:e})=>window.innerWidth<e)?.maxItems??c}}async firstUpdated(e){super.firstUpdated(e),this.onResize()}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this.onResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this.onResize)}handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase().startsWith(`ds-breadcrumbs-item`));t.length>0&&(this.itemTag=t[0].tagName.toLowerCase()),this.items=t.map(e=>({label:e.getAttribute(`label`)||e.textContent?.trim()||``,href:e.getAttribute(`href`)||e.querySelector(`[slot="item"]`)?.getAttribute(`href`)||void 0,disabled:e.hasAttribute(`disabled`),loading:e.hasAttribute(`loading`),selected:e.hasAttribute(`selected`)}))}get separatorIcon(){return this.componentFactory.createIcon({class:`separator-icon`,"icon-name":`arrow-right`,size:24})}itemTemplate(t,n){let r=t.selected||n,i=a.s(this.itemTag),o=r||t.disabled||!t.href?a.u`<span slot="item">${t.label}</span>`:a.u`<a href=${t.href} slot="item">${t.label}</a>`;return a.u`<li class="breadcrumb-list-item">
             <${i}
                 ?selected=${r}
                 ?disabled=${t.disabled}
                 ?loading=${t.loading}
             >
-                ${a}
+                ${o}
             </${i}>
             ${n?e.E:this.separatorIcon}
-        </li>`}get slotTemplate(){return o.u`<slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>`}get overflowMenuTemplate(){return o.u`<ul class="overflow-menu" role="menu">
-            ${this.items.slice(1,this.items.length-(this.maxItems-2)).map(e=>o.u`
+        </li>`}get slotTemplate(){return a.u`<slot @slotchange=${this.handleSlotChange} style="display: none;"></slot>`}get overflowMenuTemplate(){return a.u`<ul class="overflow-menu" role="menu">
+            ${this.items.slice(1,this.items.length-(this.maxItems-2)).map(e=>a.u`
                     <li class="overflow-menu-item" role="none">
                         <a href=${i.o(e.href)} class="overflow-menu-link" role="menuitem">${e.label}</a>
                     </li>
                 `)}
-        </ul>`}get overflowTriggerTemplate(){return o.u`<button class="overflow-trigger">
+        </ul>`}get overflowTriggerTemplate(){return a.u`<button class="overflow-trigger">
             <span class="overflow-label">...</span>
-        </button>`}get tooltipTemplate(){return this.componentFactory.createTooltip({content:this.overflowMenuTemplate,children:this.overflowTriggerTemplate})}get listTemplate(){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 o.u`
+        </button>`}get tooltipTemplate(){return this.componentFactory.createTooltip({class:`breadcrumbs-tooltip`,content:this.overflowMenuTemplate,children:this.overflowTriggerTemplate})}get listTemplate(){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 a.u`
             ${this.itemTemplate(e[0],!1)}
             <li class="breadcrumb-list-item">
                 <div class="overflow-item-wrapper">
@@ -24,11 +24,11 @@ const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
                 </div>
             </li>
             ${n.map((e,t)=>this.itemTemplate(e,t===n.length-1))}
-        `}render(){return o.u`
+        `}render(){return a.u`
             ${this.slotTemplate}
             <nav class="container" aria-label="Breadcrumb">
                 <ol class="breadcrumb-list">
                     ${this.listTemplate}
                 </ol>
             </nav>
-        `}};n.__decorate([t.r()],l.prototype,`items`,void 0),n.__decorate([t.r()],l.prototype,`maxItems`,void 0),n.__decorate([t.r()],l.prototype,`itemTag`,void 0),l=n.__decorate([a.customUiKitElement(`ds-breadcrumbs`)],l);
+        `}};n.__decorate([t.r()],l.prototype,`items`,void 0),n.__decorate([t.r()],l.prototype,`maxItems`,void 0),n.__decorate([t.r()],l.prototype,`itemTag`,void 0),l=n.__decorate([o.customUiKitElement(`ds-breadcrumbs`)],l);

package/dist-react/cjs/components/ds-date-picker/ds-date-picker.cjs

@@ -1,4 +1,4 @@
-const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const r=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),i=require(`../base/UiKitElement.cjs`),a=require(`../../decorators/customUiKitElement.cjs`),o=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const s=require(`../../mixins/inputStatesMixin.cjs`),c=require(`./styles/common.styles.cjs`);var l,u=class extends s.inputStatesMixin(i.UiKitElement){static{l=this}constructor(...e){super(...e),this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelCalendarButton=``,this.isExpanded=!1,this.handleCalendarButtonClick=()=>{this.inputStates.disabled||this.inputStates.readonly||(this.isExpanded=!this.isExpanded)},this.handleCalendarChange=e=>{e.stopPropagation();let t=e.detail.value;this.nativeInput&&(this.nativeInput.value=t,this.nativeInput.dispatchEvent(new Event(`input`,{bubbles:!0}))),this.isExpanded=!1},this.handleDocumentClick=e=>{this.isExpanded&&!this.contains(e.target)&&(this.isExpanded=!1)}}static{this.styles=[c.commonStyles]}static{this.nativeStylesInjected=!1}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this.handleDocumentClick),this.addEventListener(`ds-calendar-change`,this.handleCalendarChange),l.injectNativeInputStyles()}static injectNativeInputStyles(){if(l.nativeStylesInjected)return;l.nativeStylesInjected=!0;let e=document.createElement(`style`);e.setAttribute(`data-ds-date-picker`,``),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; }`,`ds-date-picker-react input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }`,`ds-date-picker-react input[type="date"]::-webkit-inner-spin-button { display: none !important; }`].join(`
+const e=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs`);const t=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs`),n=require(`../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs`);const r=require(`../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.cjs`),i=require(`../base/UiKitElement.cjs`),a=require(`../../decorators/customUiKitElement.cjs`),o=require(`../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs`);require(`../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs`);const s=require(`../../mixins/inputStatesMixin.cjs`),c=require(`./styles/common.styles.cjs`);var l,u=class extends s.inputStatesMixin(i.UiKitElement){static{l=this}constructor(...e){super(...e),this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelCalendarButton=``,this.isExpanded=!1,this.handleCalendarButtonClick=()=>{this.inputStates.disabled||this.inputStates.readonly||(this.isExpanded=!this.isExpanded)},this.handleCalendarChange=e=>{e.stopPropagation();let t=e.detail.value;this.nativeInput&&(this.nativeInput.value=t,this.nativeInput.dispatchEvent(new Event(`input`,{bubbles:!0}))),this.isExpanded=!1},this.handleDocumentClick=e=>{this.isExpanded&&!this.contains(e.target)&&(this.isExpanded=!1)}}static{this.styles=[c.commonStyles]}static{this.nativeStylesInjected=!1}connectedCallback(){super.connectedCallback(),this.classList.add(`ds-date-picker`),document.addEventListener(`click`,this.handleDocumentClick),this.addEventListener(`ds-calendar-change`,this.handleCalendarChange),l.injectNativeInputStyles()}static injectNativeInputStyles(){if(l.nativeStylesInjected)return;l.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(`
 `),document.head.appendChild(e)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.handleDocumentClick),this.removeEventListener(`ds-calendar-change`,this.handleCalendarChange)}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible,expanded:this.isExpanded}}render(){return e.x`
             <div class=${o.e(this.classes)}>
                 <div class="input-container">