@muibook/components 8.0.2 → 9.1.0

package/dist/esm/components/mui-alert/index.js

@@ -3,23 +3,31 @@ import "../mui-icons/check/index.js";
 import "../mui-icons/info/index.js";
 import "../mui-icons/warning/index.js";
 import "../mui-icons/attention/index.js";
-function A(n) {
-  return ["positive", "info", "warning", "attention"].includes(n);
+function b(d) {
+  return ["positive", "info", "warning", "attention"].includes(d);
 }
-class x extends HTMLElement {
+class m extends HTMLElement {
+  constructor() {
+    super(), this.actionSlotListener = null, this.attachShadow({ mode: "open" });
+  }
   static get observedAttributes() {
     return ["variant"];
   }
-  constructor() {
-    super(), this.attachShadow({ mode: "open" });
-  }
   connectedCallback() {
-    var c;
-    const a = this.getAttribute("variant") || "positive", p = {
+    this.render();
+  }
+  attributeChangedCallback(i, o, t) {
+    i === "variant" && o !== t && this.shadowRoot && this.render();
+  }
+  render() {
+    const i = this.getAttribute("variant") || "positive", o = {
       success: "positive",
       error: "attention"
-    }, t = A(a) ? a : p[a] || "positive";
-    this.setAttribute("variant", t);
+    }, t = b(i) ? i : o[i] || "positive";
+    if (i !== t) {
+      this.setAttribute("variant", t);
+      return;
+    }
     const s = {
       positive: "polite",
       info: "polite",
@@ -27,29 +35,27 @@ class x extends HTMLElement {
       attention: "assertive"
     };
     this.setAttribute("role", "alert"), this.setAttribute("aria-live", s[t] || "polite");
-    const g = {
+    const r = {
       positive: "mui-icon-check",
       info: "mui-icon-info",
       warning: "mui-icon-warning",
       attention: "mui-icon-attention"
-    }, u = {
+    }, a = {
       positive: "--feedback-positive-icon",
       info: "--feedback-info-icon",
       warning: "--feedback-warning-icon",
       attention: "--feedback-attention-icon"
-    }, b = {
+    }, e = {
       positive: "--feedback-positive-text",
       info: "--feedback-info-text",
       warning: "--feedback-warning-text",
       attention: "--feedback-attention-text"
-    }, m = {
+    }, n = {
       positive: "Success!",
       info: "Info:",
       warning: "Warning!",
       attention: "Error!"
-    };
-    this.setAttribute("aria-live", s[t]);
-    const r = g[t], v = u[t], h = b[t], f = m[t], w = (
+    }, c = r[t], p = a[t], g = e[t], u = n[t], h = (
       /*css*/
       `
       :host {
@@ -79,7 +85,6 @@ class x extends HTMLElement {
       ::slotted(mui-button[slot="action"]),
       ::slotted(mui-link[slot="action"]) { padding-top: var(--space-100); }
 
-
       @media (min-width: 600px) {
         :host { gap: var(--alert-gap-horizontal-desktop); }
         :host([has-action]) { padding-right: var(--space-100); }
@@ -88,7 +93,7 @@ class x extends HTMLElement {
       }
 
       .label {
-        color: var(${h}); 
+        color: var(${g}); 
         font-weight: var(--font-weight-bold);
       }
 
@@ -101,41 +106,44 @@ class x extends HTMLElement {
       }
 
       ${["positive", "info", "warning", "attention"].map(
-        (i) => (
+        (l) => (
           /*css*/
           `
-        :host([variant="${i}"]) {
-          border: var(--feedback-${i}-border);
-          background: var(--feedback-${i}-background);
+        :host([variant="${l}"]) {
+          border: var(--feedback-${l}-border);
+          background: var(--feedback-${l}-background);
         }
       `
         )
       ).join("")}
     `
     );
-    if (!this.shadowRoot) return;
-    this.shadowRoot.innerHTML = /*html*/
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${w}</style>
-      <${r} size="medium" color="var(${v})" class="icon"></${r}>
+      <style>${h}</style>
+      <${c} size="medium" color="var(${p})" class="icon"></${c}>
       <mui-body>
-        <span class="label">${f}</span>
+        <span class="label">${u}</span>
         <slot></slot>
       </mui-body>
       <slot name="action"></slot>
-    `;
-    const o = (c = this.shadowRoot) == null ? void 0 : c.querySelector('slot[name="action"]');
-    if (o) {
-      const i = () => {
-        const k = o.assignedElements();
-        let l = !1;
-        k.forEach((e) => {
-          const d = e.tagName;
-          (d === "MUI-BUTTON" || d === "MUI-LINK") && (l = !0, e.setAttribute("variant", "tertiary"), e.classList.add("alert-slot", `alert-${t}-slot`));
-        }), l ? this.setAttribute("has-action", "") : this.removeAttribute("has-action");
+    `, this.setupActionSlot());
+  }
+  setupActionSlot() {
+    var o;
+    const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector('slot[name="action"]');
+    if (i) {
+      this.actionSlotListener && i.removeEventListener("slotchange", this.actionSlotListener);
+      const t = () => {
+        const s = this.getAttribute("variant") || "positive", r = i.assignedElements();
+        let a = !1;
+        r.forEach((e) => {
+          const n = e.tagName;
+          (n === "MUI-BUTTON" || n === "MUI-LINK") && (a = !0, e.setAttribute("variant", "tertiary"), e.classList.add("alert-slot", `alert-${s}-slot`));
+        }), a ? this.setAttribute("has-action", "") : this.removeAttribute("has-action");
       };
-      o.addEventListener("slotchange", i), requestAnimationFrame(i);
+      this.actionSlotListener = t, i.addEventListener("slotchange", this.actionSlotListener), requestAnimationFrame(t);
     }
   }
 }
-customElements.get("mui-alert") || customElements.define("mui-alert", x);
+customElements.get("mui-alert") || customElements.define("mui-alert", m);

package/dist/esm/components/mui-body/index.js

@@ -55,6 +55,11 @@ class r extends HTMLElement {
       :host([variant="default"]) p {
         color: var(--text-color);
       }
+
+      :host([variant="optional"]) p {
+        color: var(--text-color-optional);
+      }
+
       :host([variant="success"]) p {
         color: var(--text-color-success);
       }
@@ -68,6 +73,9 @@ class r extends HTMLElement {
       :host([variant="default"]) ::slotted(.mui-icon) {
         fill: var(--text-color);
       }
+      :host([variant="optional"]) ::slotted(.mui-icon) {
+        fill: var(--text-color-optional);
+      }
       :host([variant="success"]) ::slotted(.mui-icon) {
         fill: var(--text-color-success);
       }

package/dist/esm/components/mui-button/index.js

@@ -1,4 +1,4 @@
-import { getPartMap as u } from "../../utils/part-map/index.js";
+import { getPartMap as b } from "../../utils/part-map/index.js";
 class h extends HTMLElement {
   static get observedAttributes() {
     return ["onclick", "type", "aria-label", "disabled", "variant", "size", "usage"];
@@ -8,7 +8,7 @@ class h extends HTMLElement {
   }
   async connectedCallback() {
     if (this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), !this.shadowRoot) return;
-    let a = (
+    let o = (
       /*html*/
       `
     <style>
@@ -24,7 +24,7 @@ class h extends HTMLElement {
       border: none;
       cursor: pointer;
       width: 100%;
-      border-radius: var(--action-radius);
+      border-radius: var(--action-radius-medium);
       padding: var(--action-padding);
       text-decoration: none;
       line-height: var(--action-line-height);
@@ -524,7 +524,7 @@ class h extends HTMLElement {
     </style>
 
     <button 
-      part="${u("text", "spacing", "layout", "visual")}"
+      part="${b("text", "spacing", "layout", "visual")}"
       onclick="${this.getAttribute("onclick")}" 
       type="${this.getAttribute("type") || "button"}" 
       aria-label="${this.getAttribute("aria-label") || ""}"
@@ -537,23 +537,23 @@ class h extends HTMLElement {
 
     `
     );
-    this.shadowRoot.innerHTML = a, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
-      const i = this.shadowRoot;
-      if (!i) return;
-      const t = i.querySelector("slot:not([name])"), n = i.querySelector('slot[name="before"]'), r = i.querySelector('slot[name="after"]'), o = (l) => l ? l.assignedNodes({ flatten: !0 }).some((s) => {
+    this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
+      const n = this.shadowRoot;
+      if (!n) return;
+      const e = n.querySelector("slot:not([name])"), t = n.querySelector('slot[name="before"]'), i = n.querySelector('slot[name="after"]'), a = (l) => l ? l.assignedNodes({ flatten: !0 }).some((s) => {
         var c;
         return s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && !!((c = s.textContent) != null && c.trim());
-      }) : !1, d = o(n), v = o(r);
-      this.classList.toggle("has-before", d), this.classList.toggle("has-after", v);
-      const b = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [];
-      b.every((l) => {
+      }) : !1, d = a(t), u = a(i);
+      this.classList.toggle("has-before", d), this.classList.toggle("has-after", u);
+      const v = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [];
+      v.every((l) => {
         var s;
         if (l.nodeType === Node.ELEMENT_NODE) {
           const c = l;
           return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
         }
         return l.nodeType === Node.TEXT_NODE && !((s = l.textContent) != null && s.trim());
-      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(b, !0)) : (this.removeAttribute("icon-only"), [n, t, r].forEach((s) => {
+      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(v, !0)) : (this.removeAttribute("icon-only"), [t, e, i].forEach((s) => {
         if (s) {
           const c = s.assignedNodes({ flatten: !0 });
           this.updateIconSizes(c, !1), this.updateAvatarSizes(c);
@@ -561,60 +561,65 @@ class h extends HTMLElement {
       }));
     });
   }
-  attributeChangedCallback(e, a, i) {
-    e === "size" && a !== i && this.shadowRoot && requestAnimationFrame(() => {
+  attributeChangedCallback(r, o, n) {
+    var e;
+    if (r === "disabled") {
+      const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("button");
+      t && (this.hasAttribute("disabled") ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"));
+    }
+    r === "size" && o !== n && this.shadowRoot && requestAnimationFrame(() => {
       const t = this.shadowRoot;
       if (!t) return;
-      const n = [
+      const i = [
         t.querySelector("slot:not([name])"),
         t.querySelector('slot[name="before"]'),
         t.querySelector('slot[name="after"]')
-      ], r = this.hasAttribute("icon-only");
-      n.forEach((o) => {
-        if (o) {
-          const d = o.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(d, r), this.updateAvatarSizes(d);
+      ], a = this.hasAttribute("icon-only");
+      i.forEach((d) => {
+        if (d) {
+          const u = d.assignedNodes({ flatten: !0 });
+          this.updateIconSizes(u, a), this.updateAvatarSizes(u);
         }
       });
     });
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(e) {
-    const a = this.getAttribute("size") || "medium", t = {
+  updateAvatarSizes(r) {
+    const o = this.getAttribute("size") || "medium", e = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "medium"
-    }[a] || "small";
-    e.forEach((n) => {
-      if (n.nodeType === Node.ELEMENT_NODE) {
-        const r = n;
-        r.tagName.toLowerCase() === "mui-avatar" && r.setAttribute("size", t);
+    }[o] || "small";
+    r.forEach((t) => {
+      if (t.nodeType === Node.ELEMENT_NODE) {
+        const i = t;
+        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", e);
       }
     });
   }
-  updateIconSizes(e, a) {
-    const i = this.getAttribute("size") || "medium", n = {
+  updateIconSizes(r, o) {
+    const n = this.getAttribute("size") || "medium", t = {
       "x-small": "x-small",
       small: "x-small",
-      medium: a ? "medium" : "small",
+      medium: o ? "medium" : "small",
       // small for regular, medium for icon-only
-      large: a ? "large" : "medium"
-    }[i] || "small";
-    e.forEach((r) => {
-      if (r.nodeType === Node.ELEMENT_NODE) {
-        const o = r;
-        (o.tagName.toLowerCase() === "svg" || o.classList.contains("mui-icon") || o.tagName.toLowerCase() === "mui-icon") && !o.hasAttribute("size") && o.setAttribute("size", n);
+      large: o ? "large" : "medium"
+    }[n] || "small";
+    r.forEach((i) => {
+      if (i.nodeType === Node.ELEMENT_NODE) {
+        const a = i;
+        (a.tagName.toLowerCase() === "svg" || a.classList.contains("mui-icon") || a.tagName.toLowerCase() === "mui-icon") && !a.hasAttribute("size") && a.setAttribute("size", t);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((e) => {
-      if (typeof u == "function") return e();
-      const a = () => {
-        typeof u == "function" ? e() : requestAnimationFrame(a);
+    return new Promise((r) => {
+      if (typeof b == "function") return r();
+      const o = () => {
+        typeof b == "function" ? r() : requestAnimationFrame(o);
       };
-      a();
+      o();
     });
   }
 }

package/dist/esm/components/mui-card/body/index.js

@@ -1,10 +1,48 @@
-class u extends HTMLElement {
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["condensed"];
+  }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(o, r, a) {
+    o === "condensed" && this.updateSlottedContent();
+  }
+  updateSlottedContent() {
+    requestAnimationFrame(() => {
+      if (!this.shadowRoot) return;
+      const o = this.shadowRoot.querySelector("slot");
+      if (!o) return;
+      const r = o.assignedNodes({ flatten: !0 });
+      this.classList.remove("inner-space", "has-card-slat-group", "has-accordion-slat-group");
+      let a = !1;
+      r.forEach((c) => {
+        if (c.nodeType === Node.ELEMENT_NODE) {
+          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((s) => {
+            s.classList.add("card-slot");
+          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+            const s = e.getAttribute("variant");
+            (s === "action" || s === "row") && (e.classList.add("card-slot"), this.hasAttribute("condensed") ? e.classList.add("condensed-slot") : e.classList.remove("condensed-slot"));
+          });
+          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((s) => {
+            s.classList.add("card-slot");
+          }), a = !0);
+          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          d.length && (a = !0, d.forEach((e) => {
+            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
+          }));
+        }
+      }), !a && !this.hasAttribute("condensed") && this.classList.add("inner-space");
+    });
+  }
+  render() {
     if (!this.shadowRoot) return;
-    const l = (
+    const o = (
       /*html*/
       `
       <style>
@@ -35,32 +73,7 @@ class u extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = l, requestAnimationFrame(() => {
-      if (!this.shadowRoot) return;
-      const a = this.shadowRoot.querySelector("slot");
-      if (!a) return;
-      const d = a.assignedNodes({ flatten: !0 });
-      let e = !1;
-      d.forEach((c) => {
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((o) => {
-            o.classList.add("card-slot");
-          }), e = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((s) => {
-            const o = s.getAttribute("variant");
-            (o === "action" || o === "row") && (s.classList.add("card-slot"), this.hasAttribute("condensed") && s.classList.add("condensed-slot"));
-          });
-          const r = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          r instanceof HTMLElement && (r.querySelectorAll("mui-cell").forEach((o) => {
-            o.classList.add("card-slot");
-          }), e = !0);
-          const n = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          n.length && (e = !0, n.forEach((s) => {
-            s.setAttribute("usage", "card"), s.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
-          }));
-        }
-      }), !e && !this.hasAttribute("condensed") && this.classList.add("inner-space");
-    });
+    this.shadowRoot.innerHTML = o, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", u);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", l);

package/dist/esm/components/mui-checkbox/index.js

@@ -1,5 +1,5 @@
 import "../mui-body/index.js";
-class d extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
     return ["checked", "disabled", "id", "indeterminate"];
   }
@@ -9,55 +9,54 @@ class d extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, r, i) {
-    var c, o, s;
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, t, c) {
+    var r, o, s;
     if (e === "checked") {
-      const t = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
-      if (!t) return;
-      t.checked = i !== null;
+      const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+      if (!i) return;
+      i.checked = c !== null;
     }
     if (e === "disabled") {
-      const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-      if (!t) return;
-      t.disabled = i !== null;
+      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+      if (!i) return;
+      i.disabled = c !== null;
     }
     if (e === "indeterminate") {
-      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
-      if (!t) return;
-      const n = i !== null;
-      t.indeterminate = n, n && (t.checked = !0, this.setAttribute("checked", ""));
+      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      if (!i) return;
+      const n = c !== null;
+      i.indeterminate = n, n && (i.checked = !0, this.setAttribute("checked", ""));
     }
     "id".includes(e) && (this.render(), this.setupListener());
   }
+  cleanupListeners() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e && this._changeHandler && e.removeEventListener("change", this._changeHandler);
+  }
   setupListener() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
-    e && (e.addEventListener("change", (i) => {
-      const c = i.target;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { checked: c.checked },
-          bubbles: !0,
-          composed: !0
-        })
-      ), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-    }), e.indeterminate = this.hasAttribute("indeterminate"), e.addEventListener("change", (i) => {
-      const c = i.target;
-      this.dispatchEvent(
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
+    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (c) => {
+      const r = c.target;
+      r.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: c.checked },
+          detail: { checked: r.checked },
           bubbles: !0,
           composed: !0
         })
-      ), this.removeAttribute("indeterminate"), c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-    }));
+      );
+    }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, r = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), c = `
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), c = this.hasAttribute("disabled"), r = `
       <mui-icon-checkmark class="icon" size="x-small" color="inverted"></mui-icon-checkmark>
-    `, o = this.hasAttribute("indeterminate"), t = o ? `
+    `, o = this.hasAttribute("indeterminate"), i = o ? `
       <mui-icon-subtract class="icon" size="x-small" color="inverted"></mui-icon-subtract>
-    ` : c, n = this.innerHTML.trim().length > 0;
+    ` : r, n = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -139,22 +138,22 @@ class d extends HTMLElement {
             type="checkbox" 
             id="${e}" 
             ${o ? "indeterminate" : ""}
-            ${o || r ? "checked" : ""}
-            ${i ? "disabled" : ""} 
+            ${o || t ? "checked" : ""}
+            ${c ? "disabled" : ""} 
           />
-          ${t}
+          ${i}
         </span>
         ${n ? '<mui-body size="small"><slot></slot></mui-body>' : ""}
       </label>
     `;
   }
   get checked() {
-    var r;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
     return (e == null ? void 0 : e.checked) ?? !1;
   }
   set checked(e) {
     e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
 }
-customElements.get("mui-checkbox") || customElements.define("mui-checkbox", d);
+customElements.get("mui-checkbox") || customElements.define("mui-checkbox", a);

package/dist/esm/components/mui-dialog/index.js

@@ -13,6 +13,10 @@ class l extends HTMLElement {
     const s = (
       /*css*/
       `
+      :host {
+        display: contents;
+      }
+
       dialog {
         border: none;
         width: ${this.getAttribute("width") || "350px"};

package/dist/esm/components/mui-file-upload/index.js

@@ -1,7 +1,13 @@
 import "../mui-button/index.js";
 class r extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null, this.render(), this.cacheElements(), this.attachEvents();
+    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null;
+  }
+  connectedCallback() {
+    this.render(), this.cacheElements(), this.attachEvents();
+  }
+  disconnectedCallback() {
+    this.cleanupListeners();
   }
   render() {
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
@@ -81,10 +87,13 @@ class r extends HTMLElement {
   cacheElements() {
     this.shadowRoot && (this.wrapper = this.shadowRoot.querySelector(".wrapper"), this.label = this.shadowRoot.querySelector(".label"), this.button = this.shadowRoot.querySelector(".button"), this.input = this.shadowRoot.querySelector('input[type="file"]'));
   }
+  cleanupListeners() {
+    this.wrapper && this._wrapperClickHandler && this.wrapper.removeEventListener("click", this._wrapperClickHandler), this.input && this._inputChangeHandler && this.input.removeEventListener("change", this._inputChangeHandler);
+  }
   attachEvents() {
-    this.wrapper.addEventListener("click", () => {
+    this._wrapperClickHandler = () => {
       this.input.click();
-    }), this.input.addEventListener("change", this.handleFileChange.bind(this));
+    }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.input.addEventListener("change", this._inputChangeHandler);
   }
   handleFileChange(i) {
     var t;