@cupra/ui-kit 2.0.0-canary.17 → 2.0.0-canary.171

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

@@ -1,8 +1,7 @@
-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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const n = t`
+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-toast/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -43,7 +42,7 @@ const n = t`
         left: 1rem;
         align-items: flex-start;
     }
-`, s = t`
+`, n = e`
     .toast {
         margin-bottom: 1rem;
         animation: toast-in-top 0.3s cubic-bezier(0, 0, 0.2, 1) forwards;
@@ -106,7 +105,5 @@ const n = t`
         }
     }
 `;
-export {
-  n as containerStyles,
-  s as toastStyles
-};
+//#endregion
+export { t as containerStyles, n as toastStyles };

package/dist/esm/components/ds-toast/utils/ToastManager.js

@@ -1,48 +1,45 @@
-const d = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).substring(2);
-class n {
-  constructor() {
-    this.toasts = [], this.subscribers = [], this.defaultDuration = 1e4, this.handleAddToast = (s) => {
-      const { id: t = d(), status: e = "default", duration: i = this.defaultDuration, ...o } = s.detail || {}, r = {
-        id: t,
-        status: e,
-        ...o,
-        exiting: !1
-      };
-      r.timeoutId = window.setTimeout(() => {
-        this.toasts.find((a) => a.id === t).exiting = !0, this.notifySubscribers();
-      }, i), this.toasts = [...this.toasts, r], this.notifySubscribers();
-    }, this.handleRemoveToast = (s) => {
-      const { id: t, referenceId: e } = s.detail || {};
-      if (!t && !e) return;
-      let i;
-      t ? i = this.toasts.find((o) => o.id === t) : e && (i = this.toasts.find((o) => o.referenceId === e)), i && (i != null && i.timeoutId && window.clearTimeout(i.timeoutId), i.exiting = !0, this.notifySubscribers());
-    }, this.initialize();
-  }
-  initialize() {
-    window.addEventListener("toast:add", this.handleAddToast), window.addEventListener("toast:remove", this.handleRemoveToast);
-  }
-  static getInstance() {
-    return n.instance || (n.instance = new n()), n.instance;
-  }
-  removeToast(s) {
-    const t = this.toasts.find((e) => e.id === s);
-    t != null && t.timeoutId && window.clearTimeout(t.timeoutId), this.toasts = this.toasts.filter((e) => e.id !== s), this.notifySubscribers();
-  }
-  getToasts() {
-    return [...this.toasts];
-  }
-  subscribe(s) {
-    return this.subscribers.push(s), () => {
-      this.subscribers = this.subscribers.filter((t) => t !== s);
-    };
-  }
-  notifySubscribers() {
-    const s = this.getToasts();
-    this.subscribers.forEach((t) => t(s));
-  }
-}
-const u = n.getInstance();
-export {
-  d as generateId,
-  u as toastManager
-};
+//#region src/components/ds-toast/utils/ToastManager.ts
+var e = 1e4, t = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : Math.random().toString(36).substring(2), n = class n {
+	constructor() {
+		this.toasts = [], this.subscribers = [], this.defaultDuration = e, this.handleAddToast = (e) => {
+			let { id: n = t(), status: r = "default", duration: i = this.defaultDuration, ...a } = e.detail || {}, o = {
+				id: n,
+				status: r,
+				...a,
+				exiting: !1
+			};
+			o.timeoutId = window.setTimeout(() => {
+				this.toasts.find((e) => e.id === n).exiting = !0, this.notifySubscribers();
+			}, i), this.toasts = [...this.toasts, o], this.notifySubscribers();
+		}, this.handleRemoveToast = (e) => {
+			let { id: t, referenceId: n } = e.detail || {};
+			if (!t && !n) return;
+			let r;
+			t ? r = this.toasts.find((e) => e.id === t) : n && (r = this.toasts.find((e) => e.referenceId === n)), r && (r != null && r.timeoutId && window.clearTimeout(r.timeoutId), r.exiting = !0, this.notifySubscribers());
+		}, this.initialize();
+	}
+	initialize() {
+		window.addEventListener("toast:add", this.handleAddToast), window.addEventListener("toast:remove", this.handleRemoveToast);
+	}
+	static getInstance() {
+		return n.instance || (n.instance = new n()), n.instance;
+	}
+	removeToast(e) {
+		let t = this.toasts.find((t) => t.id === e);
+		t != null && t.timeoutId && window.clearTimeout(t.timeoutId), this.toasts = this.toasts.filter((t) => t.id !== e), this.notifySubscribers();
+	}
+	getToasts() {
+		return [...this.toasts];
+	}
+	subscribe(e) {
+		return this.subscribers.push(e), () => {
+			this.subscribers = this.subscribers.filter((t) => t !== e);
+		};
+	}
+	notifySubscribers() {
+		let e = this.getToasts();
+		this.subscribers.forEach((t) => t(e));
+	}
+}.getInstance();
+//#endregion
+export { n as toastManager };

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

@@ -1,103 +1,84 @@
-import { UiKitElement as u } from "../base/UiKitElement.js";
-import { customUiKitElement as d } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as h } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as v, html as m } 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 f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { toastMessageStyles as g } from "./styles/common.styles.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (a, o, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? b(o, n) : o, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (e = (i ? l(o, n, e) : l(e)) || e);
-  return i && e && y(o, n, e), e;
-};
-let t = class extends u {
-  constructor() {
-    super(...arguments), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
-  }
-  getIconName() {
-    switch (this.status) {
-      case "success":
-        return "check-mark-circle";
-      case "error":
-        return "cross-circle";
-      case "warning":
-        return "exclamation-mark-circle";
-      case "info":
-        return "info-circle";
-      default:
-        return "chat-bubble";
-    }
-  }
-  handleClickCloseButton() {
-    const a = new CustomEvent("toast:remove", {
-      bubbles: !0,
-      composed: !0,
-      detail: {
-        id: this.dataId
-      }
-    });
-    this.dispatchEvent(a);
-  }
-  get toastMessageClasses() {
-    return {
-      container: !0,
-      [this.status || "default"]: !0
-    };
-  }
-  get iconTemplate() {
-    return this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.getIconName(),
-      size: 24
-    });
-  }
-  get closeButtonTemplate() {
-    return this.componentFactory.createIconButton({
-      "data-aria-label": "close-button",
-      "@click": this.handleClickCloseButton,
-      "icon-name": "cross",
-      variant: "naked",
-      size: "medium"
-    });
-  }
-  render() {
-    return this.dataTemplate ? v : m`
-            <div class=${f(this.toastMessageClasses)}>
+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.133.0/helpers/esm/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 { n as u } 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 { toastMessageStyles as d } from "./styles/common.styles.js";
+//#region src/components/ds-toast-message/ds-toast-message.ts
+var f, p = (f = class extends i {
+	constructor(...e) {
+		super(...e), this.status = "default", this.dataId = "", this.title = "", this.text = "", this.dataTemplate = !0;
+	}
+	getIconName() {
+		switch (this.status) {
+			case "success": return "check-mark-circle";
+			case "error": return "cross-circle";
+			case "warning": return "exclamation-mark-circle";
+			case "info": return "info-circle";
+			default: return "chat-bubble";
+		}
+	}
+	handleClickCloseButton() {
+		let e = new CustomEvent("toast:remove", {
+			bubbles: !0,
+			composed: !0,
+			detail: { id: this.dataId }
+		});
+		this.dispatchEvent(e);
+	}
+	get toastMessageClasses() {
+		return {
+			container: !0,
+			[this.status || "default"]: !0
+		};
+	}
+	get iconTemplate() {
+		return s`<ds-icon class="icon" icon-name=${l(this.getIconName())} size="24"></ds-icon>`;
+	}
+	get closeButtonTemplate() {
+		return s`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>`;
+	}
+	render() {
+		return this.dataTemplate ? e : t`
+            <div class=${c(this.toastMessageClasses)}>
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${p(this.title, () => m`<div class="title">${this.title}</div>`)}
-                        ${p(this.text, () => m`<div class="message">${this.text}</div>`)}
+                        ${u(this.title, () => t`<div class="title">${this.title}</div>`)}
+                        ${u(this.text, () => t`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
                 ${this.closeButtonTemplate}
             </div>
         `;
-  }
-};
-t.styles = [g];
-s([
-  r({ type: String })
-], t.prototype, "status", 2);
-s([
-  r({ type: String, attribute: "data-id", reflect: !0 })
-], t.prototype, "dataId", 2);
-s([
-  r({ type: String })
-], t.prototype, "title", 2);
-s([
-  r({ type: String })
-], t.prototype, "text", 2);
-s([
-  r({ type: Boolean, converter: h, attribute: "data-template", reflect: !0 })
-], t.prototype, "dataTemplate", 2);
-t = s([
-  d("ds-toast-message")
-], t);
-export {
-  t as DsToastMessage
-};
+	}
+}, f.styles = [d], f);
+r([n({ type: String })], p.prototype, "status", void 0), r([n({
+	type: String,
+	attribute: "data-id",
+	reflect: !0
+})], p.prototype, "dataId", void 0), r([n({ type: String })], p.prototype, "title", void 0), r([n({ type: String })], p.prototype, "text", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "data-template",
+	reflect: !0
+})], p.prototype, "dataTemplate", void 0), p = r([a("ds-toast-message")], p);
+//#endregion

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

@@ -1,12 +1,10 @@
-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 t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const r = t`
+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-toast-message/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
 `;
-export {
-  r as toastMessageStyles
-};
+//#endregion
+export { t as toastMessageStyles };

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

@@ -1,38 +1,32 @@
-import { DsButton as u } from "../ds-button/ds-button.js";
-import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { 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 c } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as b } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-var k = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (e, i, n, r) => {
-  for (var t = r > 1 ? void 0 : r ? f(i, n) : i, h = e.length - 1, p; h >= 0; h--)
-    (p = e[h]) && (t = (r ? p(i, n, t) : p(t)) || t);
-  return r && t && k(i, n, t), t;
-};
-let s = class extends u {
-  constructor() {
-    super(...arguments), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
-  }
-  updated(e) {
-    super.updated(e), this.iconName = this.checked ? "minus" : "plus", this.variant = this.checked ? "primary" : "secondary";
-  }
-  handleClick() {
-    this.checked = !this.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked
-        }
-      })
-    );
-  }
-  render() {
-    var e;
-    return a`
+import { x as e } 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 t } 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 n } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as i } from "../../utils/booleanConverter.js";
+import { e as a } 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 o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { DsButton as s } from "../ds-button/ds-button.js";
+//#region src/components/ds-toggle-button/ds-toggle-button.ts
+var c = class extends s {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.checkedText = "", this.uncheckedText = "", this.rounded = !0;
+	}
+	updated(e) {
+		super.updated(e), this.iconName = this.checked ? "minus" : "plus", this.variant = this.checked ? "primary" : "secondary";
+	}
+	handleClick() {
+		this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: this.checked }
+		}));
+	}
+	render() {
+		var t;
+		return e`
             <style>
                 :host {
                     pointer-events: ${this.disabled ? "none" : "visible"};
@@ -40,34 +34,35 @@ let s = class extends u {
             </style>
             ${this.cssTokens}
             <button
-                aria-label=${(e = this.textContent) == null ? void 0 : e.replace(/^\s+|\s+$/g, "")}
-                class=${b(this.classes)}
+                aria-label=${(t = this.textContent) == null ? void 0 : t.replace(/^\s+|\s+$/g, "")}
+                aria-pressed=${this.checked}
+                class=${a(this.classes)}
                 ?disabled=${this.disabled}
                 type=${this.type}
                 @click=${this.handleClick}
             >
-                ${d(this.iconPosition === "left", () => a`${this.iconTemplate}`)}
+                ${o(this.iconPosition === "left", () => e`${this.iconTemplate}`)}
                 ${this.checked ? this.checkedText : this.uncheckedText}
-                ${d(this.iconPosition === "right", () => a`${this.iconTemplate}`)}
+                ${o(this.iconPosition === "right", () => e`${this.iconTemplate}`)}
             </button>
         `;
-  }
-};
-o([
-  c({ type: Boolean, converter: l, reflect: !0 })
-], s.prototype, "checked", 2);
-o([
-  c({ type: String, attribute: "checked-text" })
-], s.prototype, "checkedText", 2);
-o([
-  c({ type: String, attribute: "unchecked-text" })
-], s.prototype, "uncheckedText", 2);
-o([
-  c({ type: Boolean, converter: l })
-], s.prototype, "rounded", 2);
-s = o([
-  m("ds-toggle-button", { skipTagAsComponentName: !0, extendComponentNames: ["ds-button"] })
-], s);
-export {
-  s as DsToggleButton
+	}
 };
+n([t({
+	type: Boolean,
+	converter: i,
+	reflect: !0
+})], c.prototype, "checked", void 0), n([t({
+	type: String,
+	attribute: "checked-text"
+})], c.prototype, "checkedText", void 0), n([t({
+	type: String,
+	attribute: "unchecked-text"
+})], c.prototype, "uncheckedText", void 0), n([t({
+	type: Boolean,
+	converter: i
+})], c.prototype, "rounded", void 0), c = n([r("ds-toggle-button", {
+	skipTagAsComponentName: !0,
+	extendComponentNames: ["ds-button"]
+})], c);
+//#endregion

package/dist/esm/components/ds-toggle-switch/ds-toggle-switch.js

@@ -1,61 +1,66 @@
-import { UiKitElement as d } from "../base/UiKitElement.js";
-import { customUiKitElement as p } from "../../decorators/customUiKitElement.js";
-import { booleanConverter as n } 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 { html as f } 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 i } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as u } 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 k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (h, l, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(l, o) : l, a = h.length - 1, c; a >= 0; a--)
-    (c = h[a]) && (t = (r ? c(l, o, t) : c(t)) || t);
-  return r && t && k(l, o, t), t;
-};
-let e = class extends d {
-  constructor() {
-    super(...arguments), this.size = "medium", this.checked = !1, this.disabled = !1, this.mode = "light";
-  }
-  handleClick() {
-    this.checked = !this.checked, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          checked: this.checked
-        }
-      })
-    );
-  }
-  handleClickOff() {
-    this.checked && this.handleClick();
-  }
-  handleClickOn() {
-    this.checked || this.handleClick();
-  }
-  get styleTokens() {
-    return m`
+import "../ds-theme-provider/themeContext.js";
+import { x as e } 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 t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { r as n } 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 r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/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 { commonStyles as c } from "./styles/common.styles.js";
+//#region src/components/ds-toggle-switch/ds-toggle-switch.ts
+var l, u = (l = class extends i {
+	constructor(...e) {
+		super(...e), this.size = "medium", this._checked = void 0, this._checkedState = !1, this.disabled = !1, this.mode = "light";
+	}
+	get checked() {
+		return this._checked ?? this._checkedState;
+	}
+	set checked(e) {
+		this._checked = e;
+	}
+	handleClick() {
+		let e = !this.checked;
+		this._checkedState = e, this._checked = void 0, this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: e }
+		}));
+	}
+	handleClickOff(e) {
+		e.stopPropagation(), this.checked && this.handleClick();
+	}
+	handleClickOn(e) {
+		e.stopPropagation(), !this.checked && this.handleClick();
+	}
+	get styleTokens() {
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
                 }
             </style>
         `;
-  }
-  get labelClasses() {
-    return {
-      container: !0,
-      [this.size]: !!this.size,
-      checked: this.checked,
-      disabled: this.disabled,
-      [this.mode]: !!this.mode
-    };
-  }
-  render() {
-    return f`
+	}
+	get labelClasses() {
+		return {
+			container: !0,
+			[this.size]: !!this.size,
+			checked: this.checked,
+			disabled: this.disabled,
+			[this.mode]: !!this.mode
+		};
+	}
+	render() {
+		return e`
             ${this.styleTokens}
-            <div class=${u(this.labelClasses)} @click=${this.handleClick}>
+            <div
+                class=${s(this.labelClasses)}
+                @click=${this.handleClick}
+            >
                 <slot name="off" @click=${this.handleClickOff}></slot>
                 <slot name="label"></slot>
                 <button
@@ -74,27 +79,22 @@ let e = class extends d {
                 <slot name="on" @click=${this.handleClickOn}></slot>
             </div>
         `;
-  }
-};
-e.styles = [b];
-s([
-  i({ type: String })
-], e.prototype, "size", 2);
-s([
-  i({ type: Boolean, converter: n, reflect: !0 })
-], e.prototype, "checked", 2);
-s([
-  i({ type: Boolean, converter: n, reflect: !0 })
-], e.prototype, "disabled", 2);
-s([
-  i({ type: String, reflect: !0 })
-], e.prototype, "mode", 2);
-s([
-  i({ type: String, attribute: "data-aria-label" })
-], e.prototype, "dataAriaLabel", 2);
-e = s([
-  p("ds-toggle-switch")
-], e);
-export {
-  e as DsToggleSwitch
-};
+	}
+}, l.styles = [c], l);
+r([t({ type: String })], u.prototype, "size", void 0), r([t({
+	type: Boolean,
+	attribute: "checked",
+	converter: o,
+	reflect: !0
+})], u.prototype, "_checked", void 0), r([n()], u.prototype, "_checkedState", void 0), r([t({
+	type: Boolean,
+	converter: o,
+	reflect: !0
+})], u.prototype, "disabled", void 0), r([t({
+	type: String,
+	reflect: !0
+})], u.prototype, "mode", void 0), r([t({
+	type: String,
+	attribute: "data-aria-label"
+})], u.prototype, "dataAriaLabel", void 0), u = r([a("ds-toggle-switch")], u);
+//#endregion