@cupra/ui-kit 2.0.0-canary.131 → 2.0.0-canary.133

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

@@ -9,12 +9,16 @@ import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } 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 { arrayConverter as d } from "../../utils/arrayConverter.js";
-import { commonStyles as f } from "./styles/common.styles.js";
+import { o as f } 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 "../ds-icon-button/ds-icon-button.js";
+import { arrayConverter as p } from "../../utils/arrayConverter.js";
+import { commonStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-chips/ds-chips.ts
-var p = class extends s {
+var h = class extends s {
 	constructor(...e) {
 		super(...e), this.multiChoice = null, this.size = "medium", this.mode = "light", this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScrollNav();
@@ -34,7 +38,7 @@ var p = class extends s {
 		};
 	}
 	static {
-		this.styles = [f];
+		this.styles = [m];
 	}
 	firstUpdated() {
 		this.handleScrollNav(), this.resizeObserver.observe(this.chipsContainer), this.chips.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.chipsContainer.addEventListener("scroll", this.handleScrollNav);
@@ -45,16 +49,16 @@ var p = class extends s {
 	getScrollButtonTemplate(t, n) {
 		if (t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
 		let r = `arrow-${t}`;
-		return this.componentFactory.createIconButton({
-			class: `scroll-button ${t}`,
-			"data-testid": `scroll-button-${t}`,
-			"data-aria-label": `scroll-button-${t}`,
-			"@click": n,
-			size: this.size || "large",
-			"icon-name": r,
-			variant: "rounded",
-			mode: this.mode
-		});
+		return u`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size || "large"}
+            icon-name=${r}
+            variant="rounded"
+            mode=${f(this.mode)}
+        ></ds-icon-button>`;
 	}
 	updated(e) {
 		super.updated(e), (e.has("selectedChips") || e.has("multiChoice") || e.has("size") || e.has("mode")) && this.updateChildChips();
@@ -96,7 +100,7 @@ var p = class extends s {
                 @deselect=${this.handleDeselect}
             >
                 ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
-                <nav tabindex="0" class=${u(this.chipsContainerClasses)}>
+                <nav tabindex="0" class=${d(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
                 ${this.getScrollButtonTemplate("right", this.handleScrollRight)}
@@ -107,14 +111,14 @@ var p = class extends s {
 o([n({
 	type: Array,
 	attribute: "selected-chips",
-	converter: d,
+	converter: p,
 	reflect: !0
-})], p.prototype, "selectedChips", void 0), o([n({
+})], h.prototype, "selectedChips", void 0), o([n({
 	type: Boolean,
 	attribute: "multi-choice",
 	converter: l
-})], p.prototype, "multiChoice", void 0), o([n({ type: String })], p.prototype, "size", void 0), o([n({
+})], h.prototype, "multiChoice", void 0), o([n({ type: String })], h.prototype, "size", void 0), o([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "mode", void 0), o([r()], p.prototype, "hasScrollLeft", void 0), o([r()], p.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], p.prototype, "chips", void 0), o([i(".chips-container")], p.prototype, "chipsContainer", void 0), p = o([c("ds-chips")], p);
+})], h.prototype, "mode", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([a({ slot: "" })], h.prototype, "chips", void 0), o([i(".chips-container")], h.prototype, "chipsContainer", void 0), h = o([c("ds-chips")], h);
 //#endregion

package/dist/esm/components/ds-date-picker/ds-date-picker.js

@@ -6,14 +6,18 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 { inputStatesMixin as c } from "../../mixins/inputStatesMixin.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+import { o as l } 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 "../ds-icon-button/ds-icon-button.js";
+import { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
+import { commonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-date-picker/ds-date-picker.ts
-var u, d = class extends c(a) {
+var f, p = class extends u(a) {
 	static {
-		u = this;
+		f = this;
 	}
 	constructor(...e) {
 		super(...e), this.size = "large", this.helperText = "", this.forcedError = "", this.invalidError = "", this.readonlyText = "", this.dataAriaLabelCalendarButton = "", this.isExpanded = !1, this.handleCalendarButtonClick = () => {
@@ -27,17 +31,17 @@ var u, d = class extends c(a) {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [d];
 	}
 	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), u.injectNativeInputStyles();
+		super.connectedCallback(), this.classList.add("ds-date-picker"), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("ds-calendar-change", this.handleCalendarChange), f.injectNativeInputStyles();
 	}
 	static injectNativeInputStyles() {
-		if (u.nativeStylesInjected) return;
-		u.nativeStylesInjected = !0;
+		if (f.nativeStylesInjected) return;
+		f.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("\n"), document.head.appendChild(e);
 	}
@@ -60,7 +64,7 @@ var u, d = class extends c(a) {
 	}
 	render() {
 		return t`
-            <div class=${s(this.classes)}>
+            <div class=${c(this.classes)}>
                 <div class="input-container">
                     <div><slot></slot></div>
                     ${this.calendarButtonTemplate}
@@ -83,15 +87,15 @@ var u, d = class extends c(a) {
         `;
 	}
 	get calendarButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "calendar-button",
-			"icon-name": "calendar",
-			size: this.size,
-			disabled: !!this.nativeInput?.disabled,
-			variant: "naked",
-			"@click": this.handleCalendarButtonClick,
-			"data-aria-label": this.dataAriaLabelCalendarButton || "open calendar"
-		});
+		return s`<ds-icon-button
+            class="calendar-button"
+            icon-name="calendar"
+            size=${l(this.size)}
+            ?disabled=${!!this.nativeInput?.disabled}
+            variant="naked"
+            @click=${this.handleCalendarButtonClick}
+            data-aria-label=${this.dataAriaLabelCalendarButton || "open calendar"}
+        ></ds-icon-button>`;
 	}
 	get helperTextTemplate() {
 		return this.inputStates.readonly || this.forcedError || this.inputStates.invalid && this.invalidError ? e : t`<span class="support-text helper-text">${this.helperText}</span>`;
@@ -106,20 +110,20 @@ var u, d = class extends c(a) {
 		return this.inputStates.readonly || this.forcedError || !this.inputStates.invalid || !this.invalidError ? e : t`<span class="support-text error-text invalid-error">${this.invalidError}</span>`;
 	}
 };
-i([n({ type: String })], d.prototype, "size", void 0), i([n({
+i([n({ type: String })], p.prototype, "size", void 0), i([n({
 	type: String,
 	attribute: "helper-text"
-})], d.prototype, "helperText", void 0), i([n({
+})], p.prototype, "helperText", void 0), i([n({
 	type: String,
 	attribute: "forced-error"
-})], d.prototype, "forcedError", void 0), i([n({
+})], p.prototype, "forcedError", void 0), i([n({
 	type: String,
 	attribute: "invalid-error"
-})], d.prototype, "invalidError", void 0), i([n({
+})], p.prototype, "invalidError", void 0), i([n({
 	type: String,
 	attribute: "readonly-text"
-})], d.prototype, "readonlyText", void 0), i([n({
+})], p.prototype, "readonlyText", void 0), i([n({
 	type: String,
 	attribute: "data-aria-label-calendar-button"
-})], d.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], d.prototype, "isExpanded", void 0), d = u = i([o("ds-date-picker")], d);
+})], p.prototype, "dataAriaLabelCalendarButton", void 0), i([r()], p.prototype, "isExpanded", void 0), p = f = i([o("ds-date-picker")], p);
 //#endregion

package/dist/esm/components/ds-dialog-header/ds-dialog-header.js

@@ -5,16 +5,20 @@ 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 { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.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 { commonStyles as s } from "./styles/common.styles.js";
+import { o as c } 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 { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-dialog-header/ds-dialog-header.ts
-var c = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.title = "primary", this.iconSize = 32;
 	}
 	static {
-		this.styles = [s];
+		this.styles = [l];
 	}
 	get classes() {
 		return { container: !0 };
@@ -29,16 +33,12 @@ var c = class extends i {
         `;
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: this.iconSize
-		}) : e;
+		return this.iconName ? o`<ds-icon class="icon" icon-name=${c(this.iconName)} size=${c(this.iconSize)}></ds-icon>` : e;
 	}
 	render() {
 		return t`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-header-container" class=${o(this.classes)}>
+            <div data-testid="ds-dialog-header-container" class=${s(this.classes)}>
                 <div class="title-container">
                     ${this.iconTemplate}
                     <div class="title">${this.title}</div>
@@ -48,11 +48,11 @@ var c = class extends i {
         `;
 	}
 };
-r([n({ type: String })], c.prototype, "title", void 0), r([n({
+r([n({ type: String })], u.prototype, "title", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], c.prototype, "iconName", void 0), r([n({
+})], u.prototype, "iconName", void 0), r([n({
 	type: Number,
 	attribute: "icon-size"
-})], c.prototype, "iconSize", void 0), c = r([a("ds-dialog-header")], c);
+})], u.prototype, "iconSize", void 0), u = r([a("ds-dialog-header")], u);
 //#endregion

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

@@ -45,4 +45,3 @@ n([t({ type: String })], s.prototype, "orientation", void 0), n([t({ type: Strin
 	reflect: !0
 })], s.prototype, "mode", void 0), s = n([i("ds-divider")], s);
 //#endregion
-export { s as DsDivider };

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

@@ -7,12 +7,16 @@ import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 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 { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 { commonStyles as c, iconStyles as l } from "./styles/common.styles.js";
-import { themeConfig as u } from "./theme-config.js";
+import { o as l } 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 "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as u, iconStyles as d } from "./styles/common.styles.js";
+import { themeConfig as f } from "./theme-config.js";
 //#region src/components/ds-drawer/ds-drawer.ts
-var d = class extends i {
+var p = class extends i {
 	constructor(...e) {
 		super(...e), this._open = void 0, this._openState = !1, this.handleOverlayClick = () => {
 			this.dispatchEvent(new Event("ds-drawer:close", {
@@ -24,7 +28,7 @@ var d = class extends i {
 		};
 	}
 	static {
-		this.styles = [c, l];
+		this.styles = [u, d];
 	}
 	get open() {
 		return this._open ?? this._openState;
@@ -39,17 +43,17 @@ var d = class extends i {
 		};
 	}
 	getIconButtonTemplate() {
-		let e = u[this.theme]?.["icon-button-variant"];
-		return this.componentFactory.createIconButton({
-			class: "close-button visible",
-			"data-testid": "close-button",
-			"data-aria-label": "close-button",
-			"@click": this.handleOverlayClick,
-			size: "medium",
-			"icon-name": "cross",
-			variant: e,
-			mode: "dark"
-		});
+		let e = f[this.theme]?.["icon-button-variant"];
+		return s`<ds-icon-button
+            class="close-button visible"
+            data-testid="close-button"
+            data-aria-label="close-button"
+            @click=${this.handleOverlayClick}
+            size="medium"
+            icon-name="cross"
+            variant=${l(e)}
+            mode="dark"
+        ></ds-icon-button>`;
 	}
 	updated(e) {
 		super.updated?.(e), e.has && (e.has("_open") || e.has("_openState")) && window.addEventListener("keydown", this.handleKeyDown);
@@ -59,11 +63,11 @@ var d = class extends i {
 	}
 	render() {
 		return e`          
-            <div class=${s({
+            <div class=${c({
 			overlay: !0,
 			open: !!this.open
 		})} @click=${this.handleOverlayClick}></div>
-            <div data-testid="ds-drawer-container" class=${s(this.classes)}>
+            <div data-testid="ds-drawer-container" class=${c(this.classes)}>
                 <div class="scroll-area" tabindex="0">
                     <div class="drawer-header">
                         <slot name="header"></slot>                        
@@ -86,5 +90,5 @@ r([t({
 	type: Boolean,
 	attribute: "open",
 	converter: o
-})], d.prototype, "_open", void 0), r([n()], d.prototype, "_openState", void 0), d = r([a("ds-drawer")], d);
+})], p.prototype, "_open", void 0), r([n()], p.prototype, "_openState", void 0), p = r([a("ds-drawer")], p);
 //#endregion

package/dist/esm/components/ds-favourite-action/ds-favourite-action.js

@@ -6,17 +6,19 @@ 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 "../ds-icon/ds-icon.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 { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 { commonStyles as c } from "./styles/common.styles.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-favourite-action/ds-favourite-action.ts
-var l = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.initialSelected = !1, this.disabled = !1, this._selected = !1, this._initializedFromInitialSelected = !1;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [l];
 	}
 	willUpdate(e) {
 		!this._initializedFromInitialSelected && e.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
@@ -37,10 +39,7 @@ var l = class extends i {
 		return this.currentSelected ? "heart-filled" : "heart";
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName
-		});
+		return s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>`;
 	}
 	get classes() {
 		return {
@@ -53,7 +52,7 @@ var l = class extends i {
 		return e`
             <button
                 type="button"
-                class=${s(this.classes)}
+                class=${c(this.classes)}
                 ?disabled=${this.disabled}
                 aria-pressed=${this.currentSelected}
                 aria-label=${this.dataAriaLabel || (this.currentSelected ? "Remove from favourites" : "Add to favourites")}
@@ -68,15 +67,15 @@ r([t({
 	type: Boolean,
 	converter: o,
 	attribute: "initial-selected"
-})], l.prototype, "initialSelected", void 0), r([t({
+})], u.prototype, "initialSelected", void 0), r([t({
 	type: Boolean,
 	attribute: "selected"
-})], l.prototype, "selected", void 0), r([t({
+})], u.prototype, "selected", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], l.prototype, "disabled", void 0), r([t({
+})], u.prototype, "disabled", void 0), r([t({
 	type: String,
 	attribute: "data-aria-label"
-})], l.prototype, "dataAriaLabel", void 0), r([n()], l.prototype, "_selected", void 0), l = r([a("ds-favourite-action")], l);
+})], u.prototype, "dataAriaLabel", void 0), r([n()], u.prototype, "_selected", void 0), u = r([a("ds-favourite-action")], u);
 //#endregion

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

@@ -72,4 +72,3 @@ a([r({
 	attribute: "size"
 })], u.prototype, "size", void 0), a([i()], u.prototype, "iconHtml", void 0), u = a([s("ds-icon")], u);
 //#endregion
-export { u as DsIcon };

package/dist/esm/components/ds-icon-button/ds-icon-button.js

@@ -5,26 +5,27 @@ 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 "../ds-icon/ds-icon.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 { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } 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 c } from "../../mixins/ViewportMixin.js";
-import { objectConverter as l } from "../../utils/objectConverter.js";
-import { r as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { buttonStyles as d } from "./styles/common.styles.js";
+import { o as l } 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 { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import { objectConverter as d } from "../../utils/objectConverter.js";
+import { r as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { buttonStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-icon-button/ds-icon-button.ts
-var f = class extends c(i) {
+var m = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
 	}
 	static {
-		this.styles = [d];
+		this.styles = [p];
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName
-		}) : e;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : e;
 	}
 	handleClick(e) {
 		this.href || e.preventDefault();
@@ -61,11 +62,11 @@ var f = class extends c(i) {
 	render() {
 		return t`
             ${this.variantColorTokens}
-            ${u(this.htmlTagName || "button", [
+            ${f(this.htmlTagName || "button", [
 			["button", () => t`
                         <button
                             ?disabled=${this.disabled}
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.dataAriaLabel}
                         >
                             ${this.iconTemplate}
@@ -74,7 +75,7 @@ var f = class extends c(i) {
 			["a", () => t`
                         <a
                             ?disabled=${this.disabled}
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -85,7 +86,7 @@ var f = class extends c(i) {
                         </a>
                     `],
 			["custom", () => t`
-                        <div class=${s(this.classes)} @click=${this.handleCustomClick}>
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
                             <slot></slot>
                         </div>
                     `]
@@ -96,39 +97,38 @@ var f = class extends c(i) {
 r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "variant", void 0), r([n({
+})], m.prototype, "variant", void 0), r([n({
 	type: String,
 	attribute: "custom-background"
-})], f.prototype, "customBackground", void 0), r([n({
+})], m.prototype, "customBackground", void 0), r([n({
 	type: String,
 	attribute: "custom-color"
-})], f.prototype, "customColor", void 0), r([n({
+})], m.prototype, "customColor", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "mode", void 0), r([n({
+})], m.prototype, "mode", void 0), r([n({
 	type: String,
-	converter: l
-})], f.prototype, "size", void 0), r([n({
+	converter: d
+})], m.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], f.prototype, "disabled", void 0), r([n({
+})], m.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], f.prototype, "iconName", void 0), r([n({
+})], m.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], f.prototype, "htmlTagName", void 0), r([n({
+})], m.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label"
-})], f.prototype, "dataAriaLabel", void 0), r([n({
+})], m.prototype, "dataAriaLabel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "href", void 0), r([n({
+})], m.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "rel", void 0), r([n({
+})], m.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], f.prototype, "target", void 0), f = r([a("ds-icon-button")], f);
+})], m.prototype, "target", void 0), m = r([a("ds-icon-button")], m);
 //#endregion
-export { f as DsIconButton };

package/dist/esm/components/ds-inline-alert/ds-inline-alert.js

@@ -6,18 +6,23 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.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 { n as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { inlineAlertStyles as u } from "./styles/common.styles.js";
+import { o as u } 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 { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { inlineAlertStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-inline-alert/ds-inline-alert.ts
-var d = class extends a {
+var p = class extends a {
 	constructor(...e) {
 		super(...e), this.status = "default", this.title = "", this.text = "", this.showClose = !0, this._show = void 0, this._showState = !0;
 	}
 	static {
-		this.styles = [u];
+		this.styles = [f];
 	}
 	get show() {
 		return this._show ?? this._showState;
@@ -49,29 +54,25 @@ var d = class extends a {
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.getIconName(),
-			size: 24
-		});
+		return c`<ds-icon class="icon" icon-name=${u(this.getIconName())} size="24"></ds-icon>`;
 	}
 	get closeButtonTemplate() {
-		return this.showClose ? this.componentFactory.createIconButton({
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			"icon-name": "cross",
-			variant: "naked",
-			size: "medium"
-		}) : e;
+		return this.showClose ? c`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>` : e;
 	}
 	render() {
 		return this.show ? t`
-            <div class=${c(this.inlineAlertClasses)} part="container">
+            <div class=${l(this.inlineAlertClasses)} part="container">
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${l(this.title, () => t`<div class="title">${this.title}</div>`)}
-                        ${l(this.text, () => t`<div class="message">${this.text}</div>`)}
+                        ${d(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${d(this.text, () => t`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
@@ -80,15 +81,14 @@ var d = class extends a {
         ` : e;
 	}
 };
-i([n({ type: String })], d.prototype, "status", void 0), i([n({ type: String })], d.prototype, "title", void 0), i([n({ type: String })], d.prototype, "text", void 0), i([n({
+i([n({ type: String })], p.prototype, "status", void 0), i([n({ type: String })], p.prototype, "title", void 0), i([n({ type: String })], p.prototype, "text", void 0), i([n({
 	attribute: "show-close",
 	type: Boolean,
 	converter: s,
 	reflect: !0
-})], d.prototype, "showClose", void 0), i([n({
+})], p.prototype, "showClose", void 0), i([n({
 	type: Boolean,
 	attribute: "show",
 	converter: s
-})], d.prototype, "_show", void 0), i([r()], d.prototype, "_showState", void 0), d = i([o("ds-inline-alert")], d);
+})], p.prototype, "_show", void 0), i([r()], p.prototype, "_showState", void 0), p = i([o("ds-inline-alert")], p);
 //#endregion
-export { d as DsInlineAlert };