@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.160

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

@@ -1,57 +1,115 @@
-import { UiKitElement as m } from "../base/UiKitElement.js";
-import { customUiKitElement as u } from "../../decorators/customUiKitElement.js";
-import { FormAssociatedMixin as v } from "../../mixins/FormAssociatedMixin.js";
-import { booleanConverter as h } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as f } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as n, html as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as b } from "./styles/common.styles.js";
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (o, s, p, c) => {
-  for (var i = c > 1 ? void 0 : c ? g(s, p) : s, l = o.length - 1, d; l >= 0; l--)
-    (d = o[l]) && (i = (c ? d(s, p, i) : d(i)) || i);
-  return c && i && x(s, p, i), i;
-};
-let e = class extends v(m) {
-  constructor() {
-    super(...arguments), this.inputPlacement = "left", this.checked = !1, this.required = !1, this.disabled = !1, this.mode = "light", this.size = "medium", this.helperText = "", this.infoText = "", this.forcedError = "", this.invalidError = "", this.indeterminate = !1;
-  }
-  handleChange(o) {
-    const s = o.target;
-    this.checked = s.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked,
-          value: this.value
-        }
-      })
-    );
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.inputPlacement]: !!this.inputPlacement,
-      [this.mode]: !!this.mode,
-      [this.size]: !!this.size,
-      disabled: this.disabled,
-      checked: this.checked,
-      error: !!this.forcedError
-    };
-  }
-  get iconTemplate() {
-    if (!this.checked) return n;
-    const o = this.indeterminate ? "minus" : "check";
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": o
-    });
-  }
-  get styleTokens() {
-    return f`
+import { s as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.js";
+import { E as t, x as n } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as r } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+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 { 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 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 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 = "";
+	}
+	get checked() {
+		return this._checked ?? this._checkedState;
+	}
+	set checked(e) {
+		this._checked = e;
+	}
+	static {
+		this.styles = [h];
+	}
+	connectedCallback() {
+		super.connectedCallback(), queueMicrotask(() => {
+			this.createContextConsumers([
+				{
+					context: d,
+					callback: (e) => {
+						this.disabledGroup = e;
+					}
+				},
+				{
+					context: f,
+					callback: (e) => {
+						this.errorGroup = e;
+					}
+				},
+				{
+					context: p,
+					callback: (e) => {
+						this.sizeGroup = e;
+					}
+				}
+			]);
+		});
+	}
+	createContextConsumers(t) {
+		t.forEach(({ context: t, callback: n }) => {
+			new e(this, {
+				context: t,
+				callback: n,
+				subscribe: !0
+			});
+		});
+	}
+	get disabled() {
+		return this.disabledGroup ?? this._disabled;
+	}
+	set disabled(e) {
+		this._disabled = e;
+	}
+	get size() {
+		return this.sizeGroup || this._size;
+	}
+	set size(e) {
+		this._size = e;
+	}
+	get forcedError() {
+		return this._forcedError;
+	}
+	set forcedError(e) {
+		this._forcedError = e;
+	}
+	get error() {
+		return this.errorGroup ?? !!this._forcedError;
+	}
+	handleChange(e) {
+		let t = e.target.checked;
+		this._checkedState = t, this._checked = void 0, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				checked: t,
+				value: this.value
+			}
+		}));
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.inputPlacement]: !!this.inputPlacement,
+			[this.mode]: !!this.mode,
+			[this.size]: !!this.size,
+			disabled: this.disabled,
+			checked: this.checked,
+			error: this.error
+		};
+	}
+	get iconTemplate() {
+		return this.checked ? l`<ds-icon class="icon" icon-name=${this.indeterminate ? "minus" : "check"}></ds-icon>` : t;
+	}
+	get styleTokens() {
+		return n`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -59,11 +117,11 @@ let e = class extends v(m) {
                 }
             </style>
         `;
-  }
-  render() {
-    return a`
+	}
+	render() {
+		return n`
             ${this.styleTokens}
-            <div class=${y(this.classes)}>
+            <div class=${u(this.classes)}>
                 <label>
                     <span class="checkmark-container">
                         <span class="checkmark">
@@ -73,6 +131,7 @@ let e = class extends v(m) {
                                 type="checkbox"
                                 name=${this.name}
                                 value=${this.value}
+                                aria-label=${this.dataAriaLabel || t}
                                 ?required=${this.required}
                                 ?checked=${this.checked}
                                 ?disabled=${this.disabled}
@@ -83,60 +142,55 @@ let e = class extends v(m) {
                     <div class="text-container">
                         <div class="text">
                             <slot></slot>
-                            ${this.infoText ? a` <div class="info-text">${this.infoText}</div> ` : n}
+                            ${this.infoText ? n` <div class="info-text">${this.infoText}</div> ` : t}
                         </div>
-                        ${this.helperText ? a` <div class="helper-text">${this.helperText}</div> ` : n}
-                        ${this.forcedError ? a` <div class="error-text">${this.forcedError}</div> ` : n}
-                        ${this.invalidError && !this.forcedError ? a`<div class="error-text invalid-error">${this.invalidError}</div>` : n}
+                        ${this.helperText ? n` <div class="helper-text">${this.helperText}</div> ` : t}
+                        ${this.forcedError ? n` <div class="error-text">${this.forcedError}</div> ` : t}
+                        ${this.invalidError && !this.forcedError ? n`<div class="error-text invalid-error">${this.invalidError}</div>` : t}
                     </div>
                 </label>
             </div>
         `;
-  }
-};
-e.styles = [b];
-t([
-  r({ type: String })
-], e.prototype, "name", 2);
-t([
-  r({ type: String })
-], e.prototype, "value", 2);
-t([
-  r({ type: String, attribute: "input-placement" })
-], e.prototype, "inputPlacement", 2);
-t([
-  r({ type: Boolean, converter: h, reflect: !0 })
-], e.prototype, "checked", 2);
-t([
-  r({ type: Boolean, converter: h })
-], e.prototype, "required", 2);
-t([
-  r({ type: Boolean, converter: h })
-], e.prototype, "disabled", 2);
-t([
-  r({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-t([
-  r({ type: String })
-], e.prototype, "size", 2);
-t([
-  r({ type: String, attribute: "helper-text" })
-], e.prototype, "helperText", 2);
-t([
-  r({ type: String, attribute: "info-text" })
-], e.prototype, "infoText", 2);
-t([
-  r({ type: String, attribute: "forced-error" })
-], e.prototype, "forcedError", 2);
-t([
-  r({ type: String, attribute: "invalid-error" })
-], e.prototype, "invalidError", 2);
-t([
-  r({ type: Boolean, converter: h })
-], e.prototype, "indeterminate", 2);
-e = t([
-  u("ds-checkbox")
-], e);
-export {
-  e as DsCheckbox
+	}
 };
+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"
+})], g.prototype, "inputPlacement", void 0), a([r({
+	type: Boolean,
+	attribute: "checked",
+	converter: c,
+	reflect: !0
+})], g.prototype, "_checked", void 0), a([i()], g.prototype, "_checkedState", void 0), a([r({
+	type: Boolean,
+	converter: c
+})], g.prototype, "required", void 0), a([r({
+	type: Boolean,
+	converter: c,
+	attribute: "disabled"
+})], g.prototype, "_disabled", void 0), a([r({
+	type: String,
+	reflect: !0
+})], g.prototype, "mode", void 0), a([r({
+	type: String,
+	attribute: "size"
+})], g.prototype, "_size", void 0), a([r({
+	type: String,
+	attribute: "helper-text"
+})], g.prototype, "helperText", void 0), a([r({
+	type: String,
+	attribute: "info-text"
+})], g.prototype, "infoText", void 0), a([r({
+	type: String,
+	attribute: "forced-error"
+})], g.prototype, "_forcedError", void 0), a([r({
+	type: String,
+	attribute: "invalid-error"
+})], g.prototype, "invalidError", void 0), a([r({
+	type: Boolean,
+	converter: c
+})], g.prototype, "indeterminate", void 0), a([r({
+	type: String,
+	attribute: "data-aria-label"
+})], 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-react/esm/components/ds-checkbox/styles/common.styles.js

@@ -1,11 +1,9 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as i } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = i`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-checkbox/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
-        width: 100%;
     }
 
     label {
@@ -55,6 +53,5 @@ const r = i`
         display: none;
     }
 `;
-export {
-  r as commonStyles
-};
+//#endregion
+export { t as commonStyles };

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

@@ -0,0 +1,66 @@
+import { n as e } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.js";
+import { e as t } from "../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.js";
+import { E as n, x as r } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+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 { 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 { commonStyles as u } from "./styles/common.styles.js";
+//#region src/components/ds-checkbox-group/ds-checkbox-group.ts
+var d = e(Symbol("ds-checkbox-group:disabled")), f = e(Symbol("ds-checkbox-group:error")), p = e(Symbol("ds-checkbox-group:error-text")), m = e(Symbol("ds-checkbox-group:helper-text")), h = e(Symbol("ds-checkbox-group:size")), g = class extends o {
+	constructor(...e) {
+		super(...e), this.error = !1, this.errorText = "", this.helperText = "", this.disabled = !1, this.size = "medium", this.orientation = "vertical";
+	}
+	static {
+		this.styles = [u];
+	}
+	get classes() {
+		return {
+			container: !0,
+			error: this.error,
+			disabled: !!this.disabled,
+			[this.size]: !0,
+			[this.orientation]: !0
+		};
+	}
+	render() {
+		return r`
+            <div
+                data-testid="ds-checkbox-group-container"
+                class=${l(this.classes)}
+                .aria-invalid=${this.error}
+            >
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <div class="checkboxes-container">
+                    <slot></slot>
+                </div>
+                ${!this.error && this.helperText ? r`<div class="helper-text">${this.helperText}</div>` : n}
+                ${this.error && this.errorText ? r`<div class="error-text">${this.errorText}</div>` : n}
+            </div>
+        `;
+	}
+};
+a([t({ context: f }), i({
+	type: Boolean,
+	converter: c
+})], g.prototype, "error", void 0), a([t({ context: p }), i({
+	type: String,
+	attribute: "error-text"
+})], g.prototype, "errorText", void 0), a([t({ context: m }), i({
+	type: String,
+	attribute: "helper-text"
+})], g.prototype, "helperText", void 0), a([t({ context: d }), i({
+	type: Boolean,
+	converter: c
+})], g.prototype, "disabled", void 0), a([t({ context: h }), i({ type: String })], g.prototype, "size", void 0), a([i({
+	type: String,
+	reflect: !0
+})], g.prototype, "orientation", void 0), g = a([s("ds-checkbox-group")], g);
+//#endregion
+export { d as checkboxGroupDisabledContext, f as checkboxGroupErrorContext, h as checkboxGroupSizeContext };

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

@@ -0,0 +1,23 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-checkbox-group/styles/common.styles.ts
+var t = e`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: block;
+    }
+
+    .container.vertical ::slotted(ds-checkbox) {
+        display: block;
+    }
+
+    .container.horizontal ::slotted(ds-checkbox) {
+        display: inline-flex;
+        vertical-align: top;
+    }
+`;
+//#endregion
+export { t as commonStyles };

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

@@ -1,40 +1,40 @@
-import { UiKitElement as h } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as d } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as m } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as f } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as v } from "./styles/common.styles.js";
-var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, l, r, s) => {
-  for (var o = s > 1 ? void 0 : s ? k(l, r) : l, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (o = (s ? c(l, r, o) : c(o)) || o);
-  return s && o && g(l, r, o), o;
-};
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "";
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e);
-    const r = this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 });
-    this.slottedText = r.filter((s) => s.nodeType === Node.TEXT_NODE).map((s) => s.textContent.trim()).join(" ");
-  }
-  get classes() {
-    return {
-      container: !0,
-      "ds-blur": !0,
-      [this.size]: !0,
-      [this.mode]: !!this.mode,
-      selected: this.selected,
-      deselectable: this.deselectable
-    };
-  }
-  get styleTokens() {
-    return m`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+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 { 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 { 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 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 = [u];
+	}
+	get classes() {
+		return {
+			container: !0,
+			"ds-blur": !0,
+			[this.size]: !0,
+			[this.mode]: !!this.mode,
+			selected: this.selected,
+			deselectable: this.deselectable
+		};
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -42,90 +42,77 @@ let t = class extends h {
                     }
                 </style>
         `;
-  }
-  handleClick() {
-    this.selected || this.dispatchEvent(
-      new CustomEvent("select", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          value: this.value
-        }
-      })
-    );
-  }
-  handleKeyDown(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
-  }
-  handleClickIcon(e) {
-    e.stopImmediatePropagation(), !(!this.deselectable || !this.selected) && this.dispatchEvent(
-      new CustomEvent("deselect", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          value: this.value
-        }
-      })
-    );
-  }
-  handleKeyDownIcon(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
-  }
-  get iconTemplate() {
-    if (!this.selected || !this.deselectable) return u;
-    const e = 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: e
-    });
-  }
-  render() {
-    return y`
+	}
+	handleClick() {
+		this.selected || this.dispatchEvent(new CustomEvent("select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value }
+		}));
+	}
+	handleKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
+	}
+	handleClickIcon(e) {
+		e.stopImmediatePropagation(), !(!this.deselectable || !this.selected) && this.dispatchEvent(new CustomEvent("deselect", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: this.value }
+		}));
+	}
+	handleKeyDownIcon(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClickIcon(e));
+	}
+	get leadingIconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)}></ds-icon>` : e;
+	}
+	get iconTemplate() {
+		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`
             ${this.styleTokens}
             <div
                 role="button"
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${b(this.classes)}
+                class=${c(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
-                <slot></slot>
+                ${this.leadingIconTemplate}
+                <slot @slotchange=${this.handleSlotChange}></slot>
                 ${this.iconTemplate}
             </div>
         `;
-  }
-};
-t.styles = [v];
-i([
-  n({ type: String })
-], t.prototype, "value", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "size", 2);
-i([
-  n({ type: Boolean, converter: d, reflect: !0 })
-], t.prototype, "selected", 2);
-i([
-  n({ type: Boolean, converter: d })
-], t.prototype, "deselectable", 2);
-i([
-  f()
-], t.prototype, "slottedText", 2);
-t = i([
-  p("ds-chip")
-], t);
-export {
-  t as DsChip
+	}
 };
+r([n({ type: String })], d.prototype, "value", void 0), r([n({
+	type: String,
+	reflect: !0
+})], d.prototype, "mode", void 0), r([n({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], d.prototype, "selected", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], d.prototype, "deselectable", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], d.prototype, "iconName", void 0), d = r([a("ds-chip")], d);
+//#endregion