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

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

@@ -5,24 +5,26 @@ 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 { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as f, loadingDotsStyles as p, textStyles as m } from "./styles/common.styles.js";
+import { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
+import { objectConverter as u } from "../../utils/objectConverter.js";
+import { r as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { n as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-button/ds-button.ts
-var h = class extends c(i) {
+var g = class extends l(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
 	}
 	static {
 		this.styles = [
-			f,
-			m,
-			p
+			p,
+			h,
+			m
 		];
 	}
 	connectedCallback() {
@@ -57,10 +59,7 @@ var h = class extends c(i) {
 		t && !t.contains(e.composedPath()[0]) && (e.stopPropagation(), t.click());
 	}
 	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=${this.iconName}></ds-icon>` : e;
 	}
 	get loadingTemplate() {
 		return this.loading ? t`
@@ -90,45 +89,45 @@ var h = class extends c(i) {
 	render() {
 		return t`
             ${this.cssTokens}
-            ${u(this.htmlTagName || "button", [
+            ${d(this.htmlTagName || "button", [
 			["button", () => t`
                         <button
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             type=${this.type}
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${d(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${d(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
                         </button>
                     `],
 			["a", () => t`
                         <a
-                            class=${s(this.classes)}
+                            class=${c(this.classes)}
                             aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
                             @click=${this.handleClick}
                         >
-                            ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </a>
                     `],
 			["custom", () => t`
-                        <div class=${s(this.classes)} @click=${this.handleCustomClick}>
-                            ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             ${this.loading && this.textLoading ? t`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : t`<slot></slot>${this.loadingTemplate}`}
-                            ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </div>
                     `]
 		])}
@@ -138,49 +137,49 @@ var h = class extends c(i) {
 r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "variant", void 0), r([n({
+})], g.prototype, "variant", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), r([n({
+})], g.prototype, "mode", void 0), r([n({
 	type: String,
-	converter: l
-})], h.prototype, "size", void 0), r([n({
+	converter: u
+})], g.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], h.prototype, "disabled", void 0), r([n({
+})], g.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], h.prototype, "destructive", void 0), r([n({
+})], g.prototype, "destructive", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], h.prototype, "iconName", void 0), r([n({
+})], g.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], h.prototype, "htmlTagName", void 0), r([n({
+})], g.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "href", void 0), r([n({
+})], g.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "rel", void 0), r([n({
+})], g.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "target", void 0), r([n({ type: String })], h.prototype, "type", void 0), r([n({
+})], g.prototype, "target", void 0), r([n({ type: String })], g.prototype, "type", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], h.prototype, "iconPosition", void 0), r([n({
+})], g.prototype, "iconPosition", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], h.prototype, "rounded", void 0), r([n({
+})], g.prototype, "rounded", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], h.prototype, "fullWidth", void 0), r([n({
+})], g.prototype, "fullWidth", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], h.prototype, "loading", void 0), r([n({
+})], g.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "text-loading"
-})], h.prototype, "textLoading", void 0), h = r([a("ds-button")], h);
+})], g.prototype, "textLoading", void 0), g = r([a("ds-button")], g);
 //#endregion
-export { h as DsButton };
+export { g as DsButton };

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

@@ -6,18 +6,22 @@ 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 { 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 { 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 "../ds-calendar-day/ds-calendar-day.js";
-import { arrayConverter as s } from "../../utils/arrayConverter.js";
-import { commonStyles as c } from "./styles/common.styles.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { arrayConverter as l } from "../../utils/arrayConverter.js";
+import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-calendar/ds-calendar.ts
-var l = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.variant = "plane", this.size = "large", this.locale = "en-US", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1, this._viewDateInitialized = !1;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [u];
 	}
 	get selectedDate() {
 		if (this.value) {
@@ -173,26 +177,24 @@ var l = class extends i {
 		return this.size === "medium" ? "small" : "medium";
 	}
 	get prevButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "nav-button",
-			"icon-name": "arrow-left",
-			"data-aria-label": "Previous month",
-			"@click": this.handlePrevMonth,
-			variant: "naked",
-			size: this.navButtonSize,
-			color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
-		});
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-left"
+            data-aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
 	}
 	get nextButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "nav-button",
-			"icon-name": "arrow-right",
-			"data-aria-label": "Next month",
-			"@click": this.handleNextMonth,
-			variant: "naked",
-			size: this.navButtonSize,
-			color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
-		});
+		return o`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-right"
+            data-aria-label="Next month"
+            @click=${this.handleNextMonth}
+            variant="naked"
+            size=${c(this.navButtonSize)}
+        ></ds-icon-button>`;
 	}
 	get weekdaysTemplate() {
 		return e`
@@ -208,14 +210,14 @@ var l = class extends i {
             <div class="days-grid" role="grid" @ds-calendar-day-change=${this.handleDayChange}>
                 ${n.map((t) => e`
                         <div class="days-row" role="row">
-                            ${t.map((e) => this.componentFactory.createCalendarDay({
-			day: e.day,
-			size: this.size,
-			disabled: e.isDisabled,
-			selected: e.isSelected,
-			today: e.isToday,
-			"outside-month": !e.isCurrentMonth
-		}))}
+                            ${t.map((e) => o`<ds-calendar-day
+                                    day=${e.day}
+                                    size=${c(this.size)}
+                                    ?disabled=${e.isDisabled}
+                                    ?selected=${e.isSelected}
+                                    ?today=${e.isToday}
+                                    ?outside-month=${!e.isCurrentMonth}
+                                ></ds-calendar-day>`)}
                         </div>
                     `)}
             </div>
@@ -223,7 +225,7 @@ var l = class extends i {
 	}
 	render() {
 		return e`
-            <div class=${o(this.calendarClasses)} role="application" aria-label="Calendar">
+            <div class=${s(this.calendarClasses)} role="application" aria-label="Calendar">
                 <div class="header">
                     ${this.prevButtonTemplate}
                     <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
@@ -237,39 +239,39 @@ var l = class extends i {
 r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "value", void 0), r([t({
+})], d.prototype, "value", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "variant", void 0), r([t({
+})], d.prototype, "variant", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), r([t({
+})], d.prototype, "size", void 0), r([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "locale", void 0), r([t({
+})], d.prototype, "locale", void 0), r([t({
 	type: Number,
 	reflect: !0,
 	attribute: "first-day-of-week"
-})], l.prototype, "firstDayOfWeek", void 0), r([t({
+})], d.prototype, "firstDayOfWeek", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "min-date"
-})], l.prototype, "minDate", void 0), r([t({
+})], d.prototype, "minDate", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "max-date"
-})], l.prototype, "maxDate", void 0), r([t({
+})], d.prototype, "maxDate", void 0), r([t({
 	attribute: "disabled-dates",
-	converter: s
-})], l.prototype, "disabledDates", void 0), r([t({
+	converter: l
+})], d.prototype, "disabledDates", void 0), r([t({
 	attribute: "disabled-weekdays",
-	converter: s
-})], l.prototype, "disabledWeekdays", void 0), r([t({
+	converter: l
+})], d.prototype, "disabledWeekdays", void 0), r([t({
 	type: String,
 	reflect: !0,
 	attribute: "view-date"
-})], l.prototype, "viewDateAttr", void 0), r([t({
+})], d.prototype, "viewDateAttr", void 0), r([t({
 	type: String,
 	attribute: "initial-value"
-})], l.prototype, "initialValue", void 0), r([n()], l.prototype, "_viewDate", void 0), r([n()], l.prototype, "_value", void 0), l = r([a("ds-calendar")], l);
+})], d.prototype, "initialValue", void 0), r([n()], d.prototype, "_viewDate", void 0), r([n()], d.prototype, "_value", void 0), d = r([a("ds-calendar")], d);
 //#endregion

package/dist/esm/components/ds-calendar-day/ds-calendar-day.js

@@ -84,4 +84,3 @@ n([t({
 	attribute: "outside-month"
 })], c.prototype, "outsideMonth", void 0), c = n([i("ds-calendar-day")], c);
 //#endregion
-export { c as DsCalendarDay };

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

@@ -7,14 +7,16 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.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 { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } 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 { checkboxGroupDisabledContext as u, checkboxGroupErrorContext as d, checkboxGroupSizeContext as f } from "../ds-checkbox-group/ds-checkbox-group.js";
-import { FormAssociatedMixin as p } from "../../mixins/FormAssociatedMixin.js";
-import { commonStyles as m } from "./styles/common.styles.js";
+import { checkboxGroupDisabledContext as d, checkboxGroupErrorContext as f, checkboxGroupSizeContext as p } from "../ds-checkbox-group/ds-checkbox-group.js";
+import { FormAssociatedMixin as m } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-checkbox/ds-checkbox.ts
-var h = class extends p(o) {
+var g = class extends m(o) {
 	constructor(...e) {
 		super(...e), this.inputPlacement = "left", this._checked = void 0, this._checkedState = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1, this.dataAriaLabel = "";
 	}
@@ -25,25 +27,25 @@ var h = class extends p(o) {
 		this._checked = e;
 	}
 	static {
-		this.styles = [m];
+		this.styles = [h];
 	}
 	connectedCallback() {
 		super.connectedCallback(), queueMicrotask(() => {
 			this.createContextConsumers([
 				{
-					context: u,
+					context: d,
 					callback: (e) => {
 						this.disabledGroup = e;
 					}
 				},
 				{
-					context: d,
+					context: f,
 					callback: (e) => {
 						this.errorGroup = e;
 					}
 				},
 				{
-					context: f,
+					context: p,
 					callback: (e) => {
 						this.sizeGroup = e;
 					}
@@ -104,12 +106,7 @@ var h = class extends p(o) {
 		};
 	}
 	get iconTemplate() {
-		if (!this.checked) return t;
-		let e = this.indeterminate ? "minus" : "check";
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": e
-		});
+		return this.checked ? l`<ds-icon class="icon" icon-name=${this.indeterminate ? "minus" : "check"}></ds-icon>` : t;
 	}
 	get styleTokens() {
 		return n`
@@ -124,7 +121,7 @@ var h = class extends p(o) {
 	render() {
 		return n`
             ${this.styleTokens}
-            <div class=${l(this.classes)}>
+            <div class=${u(this.classes)}>
                 <label>
                     <span class="checkmark-container">
                         <span class="checkmark">
@@ -156,44 +153,44 @@ var h = class extends p(o) {
         `;
 	}
 };
-a([r({ type: String })], h.prototype, "name", void 0), a([r({ type: String })], h.prototype, "value", void 0), a([r({
+a([r({ type: String })], g.prototype, "name", void 0), a([r({ type: String })], g.prototype, "value", void 0), a([r({
 	type: String,
 	attribute: "input-placement"
-})], h.prototype, "inputPlacement", void 0), a([r({
+})], g.prototype, "inputPlacement", void 0), a([r({
 	type: Boolean,
 	attribute: "checked",
 	converter: c,
 	reflect: !0
-})], h.prototype, "_checked", void 0), a([i()], h.prototype, "_checkedState", void 0), a([r({
+})], g.prototype, "_checked", void 0), a([i()], g.prototype, "_checkedState", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], h.prototype, "required", void 0), a([r({
+})], g.prototype, "required", void 0), a([r({
 	type: Boolean,
 	converter: c,
 	attribute: "disabled"
-})], h.prototype, "_disabled", void 0), a([r({
+})], g.prototype, "_disabled", void 0), a([r({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), a([r({
+})], g.prototype, "mode", void 0), a([r({
 	type: String,
 	attribute: "size"
-})], h.prototype, "_size", void 0), a([r({
+})], g.prototype, "_size", void 0), a([r({
 	type: String,
 	attribute: "helper-text"
-})], h.prototype, "helperText", void 0), a([r({
+})], g.prototype, "helperText", void 0), a([r({
 	type: String,
 	attribute: "info-text"
-})], h.prototype, "infoText", void 0), a([r({
+})], g.prototype, "infoText", void 0), a([r({
 	type: String,
 	attribute: "forced-error"
-})], h.prototype, "_forcedError", void 0), a([r({
+})], g.prototype, "_forcedError", void 0), a([r({
 	type: String,
 	attribute: "invalid-error"
-})], h.prototype, "invalidError", void 0), a([r({
+})], g.prototype, "invalidError", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], h.prototype, "indeterminate", void 0), a([r({
+})], g.prototype, "indeterminate", void 0), a([r({
 	type: String,
 	attribute: "data-aria-label"
-})], h.prototype, "dataAriaLabel", void 0), a([i()], h.prototype, "disabledGroup", void 0), a([i()], h.prototype, "errorGroup", void 0), a([i()], h.prototype, "sizeGroup", void 0), h = a([s("ds-checkbox")], h);
+})], g.prototype, "dataAriaLabel", void 0), a([i()], g.prototype, "disabledGroup", void 0), a([i()], g.prototype, "errorGroup", void 0), a([i()], g.prototype, "sizeGroup", void 0), g = a([s("ds-checkbox")], g);
 //#endregion

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

@@ -5,19 +5,23 @@ 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 { 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 { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-chip/ds-chip.ts
-var l = class extends i {
+var d = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "", this.handleSlotChange = (e) => {
 			this.slottedText = e.target.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent.trim()).join(" "), this.requestUpdate();
 		};
 	}
 	static {
-		this.styles = [c];
+		this.styles = [u];
 	}
 	get classes() {
 		return {
@@ -60,25 +64,20 @@ var l = class extends i {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
 	}
 	get leadingIconTemplate() {
-		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;
 	}
 	get iconTemplate() {
-		if (!this.selected || !this.deselectable) return e;
-		let t = this.mode === "light" ? "dark" : "light";
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": "cross",
-			"data-testid": "ds-chip-icon",
-			"@click": this.handleClickIcon,
-			"@keydown": this.handleKeyDownIcon,
-			role: "button",
-			"aria-label": `deselect ${this.slottedText}`,
-			tabindex: "0",
-			mode: t
-		});
+		return !this.selected || !this.deselectable ? e : s`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${this.mode === "light" ? "dark" : "light"}
+            data-testid="ds-chip-icon"
+            @click=${this.handleClickIcon}
+            @keydown=${this.handleKeyDownIcon}
+            role="button"
+            aria-label=${`deselect ${this.slottedText}`}
+            tabindex="0"
+        ></ds-icon>`;
 	}
 	render() {
 		return t`
@@ -88,7 +87,7 @@ var l = class extends i {
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${s(this.classes)}
+                class=${c(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
@@ -99,21 +98,21 @@ var l = class extends i {
         `;
 	}
 };
-r([n({ type: String })], l.prototype, "value", void 0), r([n({
+r([n({ type: String })], d.prototype, "value", void 0), r([n({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), r([n({
+})], d.prototype, "mode", void 0), r([n({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), r([n({
+})], d.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], l.prototype, "selected", void 0), r([n({
+})], d.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], l.prototype, "deselectable", void 0), r([n({
+})], d.prototype, "deselectable", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], l.prototype, "iconName", void 0), l = r([a("ds-chip")], l);
+})], d.prototype, "iconName", void 0), d = r([a("ds-chip")], d);
 //#endregion