@muibook/components 1.6.0 → 3.0.0

package/dist/esm/components/mui-icons/add/index.js

@@ -8,19 +8,19 @@ class r extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-add", r);
+customElements.get("mui-icon-add") || customElements.define("mui-icon-add", r);

package/dist/esm/components/mui-icons/attention/index.js

@@ -8,19 +8,19 @@ class c extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class c extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-attention", c);
+customElements.get("mui-icon-attention") || customElements.define("mui-icon-attention", c);

package/dist/esm/components/mui-icons/check/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -8,19 +8,19 @@ class r extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-check", r);
+customElements.get("mui-icon-check") || customElements.define("mui-icon-check", c);

package/dist/esm/components/mui-icons/close/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-close", r);
+customElements.get("mui-icon-close") || customElements.define("mui-icon-close", c);

package/dist/esm/components/mui-icons/down-arrow-circle/index.js

@@ -0,0 +1,55 @@
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${r};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M17.992 35.5C8.65 35.5 1 27.85 1 18.508S8.65 1.5 17.992 1.5 35 9.166 35 18.508 27.334 35.5 17.992 35.5m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m0-20.327c1.186 0 2.102.806 2.102 1.928v6.07l-.205 2.972.948-1.439 1.423-1.643c.3-.364.806-.585 1.312-.585 1.027 0 1.754.695 1.754 1.66 0 .553-.142.932-.553 1.375l-5.042 5.374c-.459.506-1.028.759-1.739.759-.695 0-1.249-.253-1.723-.76l-5.042-5.373c-.411-.443-.553-.822-.553-1.376 0-.964.71-1.66 1.754-1.66.522 0 1.012.222 1.312.585l1.438 1.692.933 1.39-.205-2.97v-6.07c0-1.123.916-1.929 2.086-1.929"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-down-arrow-circle") || customElements.define("mui-icon-down-arrow-circle", l);

package/dist/esm/components/mui-icons/down-chevron/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-down-chevron", r);
+customElements.get("mui-icon-down-chevron") || customElements.define("mui-icon-down-chevron", n);

package/dist/esm/components/mui-icons/ellipsis/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M6.916 21.5c-1.987 0-3.615-1.559-3.615-3.493S4.929 14.5 6.916 14.5c2.002 0 3.63 1.573 3.63 3.507S8.919 21.5 6.917 21.5m11.385 0c-2.002 0-3.616-1.559-3.616-3.493S16.3 14.5 18.301 14.5s3.63 1.573 3.63 3.507-1.628 3.493-3.63 3.493m11.384 0c-2.002 0-3.63-1.559-3.63-3.493s1.628-3.507 3.63-3.507c1.987 0 3.616 1.573 3.616 3.507S31.672 21.5 29.685 21.5"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.get("mui-icon-ellipsis") || customElements.define("mui-icon-ellipsis", r);

package/dist/esm/components/mui-icons/globe/index.js

@@ -8,19 +8,19 @@ class a extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, c) {
-    (e === "size" || e === "color") && t !== c && this.render();
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), s = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[t] || t || "var(--icon-color-default)", c = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = o[e] ?? o.small;
+    }, i = c[e] ?? c.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class a extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-globe", a);
+customElements.get("mui-icon-globe") || customElements.define("mui-icon-globe", a);

package/dist/esm/components/mui-icons/grid/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-grid", r);
+customElements.get("mui-icon-grid") || customElements.define("mui-icon-grid", r);

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

@@ -22,3 +22,5 @@ import "./toggle/index.js";
 import "./up-arrow/index.js";
 import "./up-chevron/index.js";
 import "./warning/index.js";
+import "./down-arrow-circle/index.js";
+import "./ellipsis/index.js";

package/dist/esm/components/mui-icons/info/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-info", r);
+customElements.get("mui-icon-info") || customElements.define("mui-icon-info", c);

package/dist/esm/components/mui-icons/left-arrow/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-arrow", r);
+customElements.get("mui-icon-left-arrow") || customElements.define("mui-icon-left-arrow", r);

package/dist/esm/components/mui-icons/left-chevron/index.js

@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-chevron", r);
+customElements.get("mui-icon-left-chevron") || customElements.define("mui-icon-left-chevron", r);

package/dist/esm/components/mui-icons/left-sidebar/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -15,18 +15,18 @@ class r extends HTMLElement {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), c = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[t] || t || "var(--icon-color-default)", s = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = o[e] ?? o.small;
+    }, o = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${s};
-          height: ${s};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-left-sidebar", r);
+customElements.get("mui-icon-left-sidebar") || customElements.define("mui-icon-left-sidebar", l);

package/dist/esm/components/mui-icons/menu/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -15,18 +15,18 @@ class r extends HTMLElement {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", o = {
+    }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = o[e] ?? o.small;
+    }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${i};
-          height: ${i};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-menu", r);
+customElements.get("mui-icon-menu") || customElements.define("mui-icon-menu", n);

package/dist/esm/components/mui-icons/message/index.js

@@ -12,7 +12,7 @@ class l extends HTMLElement {
     (t === "size" || t === "color") && e !== c && this.render();
   }
   render() {
-    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), i = e && {
+    const t = this.getAttribute("size") || "small", e = this.getAttribute("color"), o = e && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[e] || e || "var(--icon-color-default)", s = {
@@ -20,17 +20,17 @@ class l extends HTMLElement {
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, o = s[t] ?? s.small;
+    }, i = s[t] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${o};
-          height: ${o};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${i};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-message", l);
+customElements.get("mui-icon-message") || customElements.define("mui-icon-message", l);

package/dist/esm/components/mui-icons/moon/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-moon", r);
+customElements.get("mui-icon-moon") || customElements.define("mui-icon-moon", n);

package/dist/esm/components/mui-icons/notification/index.js

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-notification", l);
+customElements.get("mui-icon-notification") || customElements.define("mui-icon-notification", n);

package/dist/esm/components/mui-icons/right-chevron/index.js

@@ -8,19 +8,19 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", i = {
+    }[t] || t || "var(--icon-color-default)", o = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, s = i[e] ?? i.small;
+    }, s = o[e] ?? o.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-right-chevron", l);
+customElements.get("mui-icon-right-chevron") || customElements.define("mui-icon-right-chevron", l);

package/dist/esm/components/mui-icons/stop/index.js

@@ -1,4 +1,4 @@
-class r extends HTMLElement {
+class c extends HTMLElement {
   static get observedAttributes() {
     return ["size", "color"];
   }
@@ -52,4 +52,4 @@ class r extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-stop", r);
+customElements.get("mui-icon-stop") || customElements.define("mui-icon-stop", c);

package/dist/esm/components/mui-icons/subtract/index.js

@@ -8,25 +8,25 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(e, t, o) {
-    (e === "size" || e === "color") && t !== o && this.render();
+  attributeChangedCallback(e, t, s) {
+    (e === "size" || e === "color") && t !== s && this.render();
   }
   render() {
     const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), r = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
-    }[t] || t || "var(--icon-color-default)", s = {
+    }[t] || t || "var(--icon-color-default)", i = {
       "x-small": "1.6rem",
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, i = s[e] ?? s.small;
+    }, o = i[e] ?? i.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${i};
-          height: ${i};
+          width: ${o};
+          height: ${o};
           display: inline-flex;
           align-items: center;
           justify-content: center;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-subtract", l);
+customElements.get("mui-icon-subtract") || customElements.define("mui-icon-subtract", l);

package/dist/esm/components/mui-icons/sun/index.js

@@ -12,7 +12,7 @@ class l extends HTMLElement {
     (e === "size" || e === "color") && t !== c && this.render();
   }
   render() {
-    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), i = t && {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), o = t && {
       default: "var(--icon-color-default)",
       inverted: "var(--icon-color-inverted)"
     }[t] || t || "var(--icon-color-default)", s = {
@@ -20,17 +20,17 @@ class l extends HTMLElement {
       small: "2.4rem",
       medium: "3.6rem",
       large: "4.8rem"
-    }, o = s[e] ?? s.small;
+    }, i = s[e] ?? s.small;
     this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
-          width: ${o};
-          height: ${o};
+          width: ${i};
+          height: ${i};
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          fill: ${i};
+          fill: ${o};
         }
         svg {
           width: 100%;
@@ -52,4 +52,4 @@ class l extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-icon-sun", l);
+customElements.get("mui-icon-sun") || customElements.define("mui-icon-sun", l);

package/dist/esm/components/mui-icons/toggle/index.js

@@ -1,39 +1,55 @@
-class s extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
-    return ["variant"];
+    return ["toggle", "rotate"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.addEventListener("click", () => {
-      if (this.toggleAttribute("toggle"), !this.shadowRoot) return;
-      const t = this.shadowRoot.querySelector("mui-button");
-      t && (t.blur(), requestAnimationFrame(() => {
-        t.focus({ preventScroll: !0 });
-      }));
-    }), this.addEventListener("keydown", (t) => {
-      t.code === "Space" && (t.preventDefault(), this.click());
-    });
+    super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.hasAttribute("variant") || this.setAttribute("variant", "primary"), this.render();
+    this.classList.add("mui-icon"), this.shadowRoot.innerHTML || this.render(), this.applySmallSize();
+    const t = this.shadowRoot.querySelector('slot[name="start"]'), e = this.shadowRoot.querySelector('slot[name="end"]');
+    t.addEventListener("slotchange", () => this.applySmallSize()), e.addEventListener("slotchange", () => this.applySmallSize());
+  }
+  attributeChangedCallback() {
+  }
+  get toggle() {
+    return this.hasAttribute("toggle");
+  }
+  set toggle(t) {
+    this.toggleAttribute("toggle", !!t);
+  }
+  get rotate() {
+    return this.hasAttribute("rotate");
   }
-  attributeChangedCallback(t, e, o) {
-    t === "variant" && e !== o && this.render();
+  set rotate(t) {
+    this.toggleAttribute("rotate", !!t);
+  }
+  /* ------------------------------------------------------------------ */
+  /* PRIVATE: force size="small" on all assigned elements               */
+  /* ------------------------------------------------------------------ */
+  applySmallSize() {
+    this.shadowRoot.querySelectorAll("slot").forEach((e) => {
+      e.assignedElements({ flatten: !0 }).forEach((s) => {
+        s.setAttribute("size", "small");
+      });
+    });
   }
   render() {
-    const t = this.getAttribute("variant") || "primary";
-    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: inline-flex;
+          position: relative;
+          height: 2.4rem;
+          width: 2.4rem;
         }
 
         ::slotted(*) {
           position: absolute;
-          top: auto;
-          left: auto;
           transform-origin: 50% 50%;
           transition: var(--speed-200) ease-in-out;
+          fill: currentColor; 
         }
 
         ::slotted([slot="start"]) {
@@ -52,21 +68,14 @@ class s extends HTMLElement {
           transform: scale(1);
         }
 
-        :host([rotate]) ::slotted([slot="end"]) {
-          transform: scale(0) rotate(0deg);
-        }
-
-        :host([toggle][rotate]) ::slotted([slot="end"]) {
+        :host([rotate][toggle]) ::slotted([slot="end"]) {
           transform: scale(1) rotate(-360deg);
         }
-
       </style>
 
-      <mui-button ${`variant="${t}"`}>
-        <slot name="start"></slot>
-        <slot name="end"></slot>
-      </mui-button>
-    `);
+      <slot name="start"></slot>
+      <slot name="end"></slot>
+    `;
   }
 }
-customElements.define("mui-icon-toggle", s);
+customElements.get("mui-icon-toggle") || customElements.define("mui-icon-toggle", o);