@muibook/components 8.0.2 → 9.1.0

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

@@ -1,14 +1,14 @@
-import { getPartMap as s } from "../../utils/part-map/index.js";
-class i extends HTMLElement {
+import { getPartMap as e } from "../../utils/part-map/index.js";
+class l extends HTMLElement {
   static get observedAttributes() {
-    return ["col", "space"];
+    return ["col", "space", "alignx", "aligny"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(), this.attachShadow({ mode: "open" }), this.col = "1fr 1fr", this.space = "var(--space-000)", this.alignX = "normal", this.alignY = "normal";
   }
   async connectedCallback() {
     await this.waitForPartMap();
-    const t = this.getAttribute("col") || "1fr 1fr", e = this.getAttribute("space") || "var(--space-000)", a = s("layout", "spacing"), o = (
+    const t = this.getAttribute("col") || this.col, a = this.getAttribute("space") || this.space, i = this.getAttribute("alignx") || this.alignX, s = this.getAttribute("aligny") || this.alignY, o = e("layout", "spacing"), r = (
       /*css*/
       `
       :host {
@@ -18,25 +18,32 @@ class i extends HTMLElement {
         display: grid;
         grid-template-columns: var(--col);
         gap: var(--gap);
+        align-items: var(--alignY);
+        justify-items: var(--alignX);
       }
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${o}</style>
-      <div part="${a}" style="--col: ${t}; --gap: ${e};">
+      <style>${r}</style>
+      <div part="${o}" style="--col: ${t}; --gap: ${a}; --alignX: ${i}; --alignY: ${s};">
         <slot></slot>
       </div>
     `);
   }
+  attributeChangedCallback(t, a, i) {
+    if (a === i || !this.shadowRoot) return;
+    const s = this.shadowRoot.querySelector("div");
+    s && (t === "col" && s.style.setProperty("--col", i || this.col), t === "space" && s.style.setProperty("--gap", i || this.space), t === "alignx" && s.style.setProperty("--alignX", i || this.alignX), t === "aligny" && s.style.setProperty("--alignY", i || this.alignY));
+  }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof s == "function") return t();
-      const e = () => {
-        typeof s == "function" ? t() : requestAnimationFrame(e);
+      if (typeof e == "function") return t();
+      const a = () => {
+        typeof e == "function" ? t() : requestAnimationFrame(a);
       };
-      e();
+      a();
     });
   }
 }
-customElements.get("mui-grid") || customElements.define("mui-grid", i);
+customElements.get("mui-grid") || customElements.define("mui-grid", l);

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

@@ -1,4 +1,4 @@
-class t extends HTMLElement {
+class n extends HTMLElement {
   static get observedAttributes() {
     return ["size", "level"];
   }
@@ -6,8 +6,14 @@ class t extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(i, t, e) {
+    t !== e && this.shadowRoot && this.render();
+  }
+  render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("size") || "1", i = `h${this.getAttribute("level") || e}`;
+    const i = this.getAttribute("size") || "1", e = `h${this.getAttribute("level") || i}`;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -26,10 +32,10 @@ class t extends HTMLElement {
         .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
         .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
       </style>
-      <${i} class="size-${e}">
+      <${e} class="size-${i}">
         <slot></slot>
-      </${i}>
+      </${e}>
     `;
   }
 }
-customElements.get("mui-heading") || customElements.define("mui-heading", t);
+customElements.get("mui-heading") || customElements.define("mui-heading", n);

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

@@ -8,53 +8,60 @@ class m extends HTMLElement {
   connectedCallback() {
     this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, a, o) {
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, r, o) {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+    if (t) {
+      if (e === "value") {
+        t.value = o ?? "";
+        return;
+      }
+      if (e === "disabled") {
+        o === null || o === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "");
+        return;
+      }
+      ["type", "placeholder", "label", "hide-label", "variant"].includes(e) && (this.render(), this.setupListener());
+    }
+  }
+  cleanupListeners() {
     var r;
-    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
-    t && (e === "value" && (t.value = o ?? ""), e === "disabled" && (o === null || o === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "")), (e === "type" || e === "placeholder" || e === "label" || e === "hide-label") && (this.render(), this.setupListener()));
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+    e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
-    var o, t;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-    if (!e) return;
-    const a = e.cloneNode(!0);
-    (t = e.parentNode) == null || t.replaceChild(a, e), a.addEventListener("input", (r) => {
-      const s = r.target;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: { value: s.value },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }), a.addEventListener("change", (r) => {
-      const s = r.target;
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: s.value },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    });
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector("input");
+    e && (this.cleanupListeners(), this._changeHandler = (r) => {
+      const o = r.target;
+      this.setAttribute("value", o.value);
+      const t = {
+        detail: { value: o.value },
+        bubbles: !0,
+        composed: !0
+      };
+      this.dispatchEvent(new CustomEvent("change", t)), this.dispatchEvent(new CustomEvent("input", t));
+    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler));
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var t, r;
-      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), a = (r = this.shadowRoot) == null ? void 0 : r.querySelector('slot[name="after"]'), o = (s) => {
-        if (!s) return;
-        s.assignedNodes({ flatten: !0 }).forEach((i) => {
+      var t, s;
+      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), r = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="after"]'), o = (l) => {
+        if (!l) return;
+        l.assignedNodes({ flatten: !0 }).forEach((i) => {
           if (i.nodeType === Node.ELEMENT_NODE) {
-            const l = i, n = l.tagName.toLowerCase();
-            (n === "mui-button" || n === "mui-link") && (l.setAttribute("usage", "input"), l.setAttribute("size", "medium"), l.removeAttribute("variant"), l.removeAttribute("weight"));
+            const a = i, n = a.tagName.toLowerCase();
+            (n === "mui-button" || n === "mui-link") && (a.setAttribute("usage", "input"), a.setAttribute("size", "medium"), a.removeAttribute("variant"), a.removeAttribute("weight"));
           }
         });
       };
-      o(e), o(a);
+      o(e), o(r);
     });
   }
   render() {
-    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], a = this.getAttribute("type") || "text", o = e.includes(a) ? a : "text", t = this.getAttribute("name") || "", r = this.getAttribute("value") || "", s = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", l = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), c = l && i ? `aria-label="${i}"` : "", u = this.getAttribute("variant") || "", h = u || "", b = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [h, b ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
+    const e = ["text", "password", "email", "number", "search", "tel", "url", "date", "time"], r = this.getAttribute("type") || "text", o = e.includes(r) ? r : "text", t = this.getAttribute("name") || "", s = this.getAttribute("value") || "", l = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", a = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), u = a && i ? `aria-label="${i}"` : "", c = this.getAttribute("variant") || "", h = c || "", b = this.querySelector('[slot="before"]') !== null, p = this.querySelector('[slot="after"]') !== null, f = [h, b ? "before" : "", p ? "after" : ""].filter(Boolean).join(" "), v = (
       /*html*/
       `
       <style>
@@ -225,7 +232,7 @@ class m extends HTMLElement {
         
 
       </style>
-      ${i ? `<label for="${d}" class="${l ? "vh" : ""}">${i}</label>` : ""}
+      ${i ? `<label for="${d}" class="${a ? "vh" : ""}">${i}</label>` : ""}
     <div class="input-wrapper">
       <slot name="before"></slot>
       <input
@@ -233,10 +240,10 @@ class m extends HTMLElement {
         type="${o}"
         name="${t}"
         id="${d}"
-        value="${r}"
-        placeholder="${s}"
+        value="${s}"
+        placeholder="${l}"
         ${n ? 'disabled aria-disabled="true"' : ""}
-        ${c}
+        ${u}
       />
       <slot name="after"></slot>
     </div>

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

@@ -10,41 +10,53 @@ class p extends HTMLElement {
   async connectedCallback() {
     await this.waitForPartMap(), this.partMap = s("text", "visual"), this.render(), this.setupListener();
   }
-  attributeChangedCallback(e, r) {
-    if (!this.shadowRoot) return;
-    const o = (
-      /** @type {HTMLSelectElement | null} */
-      this.shadowRoot.querySelector("select")
-    );
-    e === "value" && o && (o.value = r || ""), e === "disabled" && o && (r === null || r === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "")), ["options", "label", "hide-label"].includes(e) && (this.render(), this.setupListener());
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, r, t) {
+    if (!this.shadowRoot || r === t) return;
+    const o = this.shadowRoot.querySelector("select");
+    if (e === "value" && o) {
+      o.value = t || "";
+      return;
+    }
+    if (e === "disabled" && o) {
+      t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "");
+      return;
+    }
+    ["options", "label", "hide-label", "variant"].includes(e) && (this.render(), this.setupListener());
+  }
+  cleanupListeners() {
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("select");
+    e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("select");
-    if (e) {
-      const r = e.cloneNode(!0);
-      e.parentNode && e.parentNode.replaceChild(r, e), r.addEventListener("change", (o) => {
-        const a = o.target;
-        a && this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: a.value },
-            bubbles: !0,
-            composed: !0
-          })
-        );
-      });
-    }
+    e && (this.cleanupListeners(), this._changeHandler = (r) => {
+      const t = r.target;
+      this.setAttribute("value", t.value);
+      const o = {
+        detail: { value: t.value },
+        bubbles: !0,
+        composed: !0
+      };
+      this.dispatchEvent(new CustomEvent("change", o)), this.dispatchEvent(new CustomEvent("input", o));
+    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler));
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("name") || "", r = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", a = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", l = this.getAttribute("variant") || "", h = l || "", b = i && o ? `aria-label="${o}"` : "";
-    let n = [];
+    const e = this.getAttribute("name") || "", r = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, t = this.getAttribute("label") || "", o = this.getAttribute("value") || "", i = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", n = this.getAttribute("variant") || "", h = n || "", u = i && t ? `aria-label="${t}"` : "";
+    let l = [];
     try {
-      n = JSON.parse(d);
-    } catch (t) {
-      console.error("Invalid JSON in options attribute", t);
+      l = JSON.parse(d);
+    } catch (a) {
+      console.error("Invalid JSON in options attribute", a);
     }
-    const u = n.map((t) => `<option value="${t.value}" ${t.value === a ? "selected" : ""}>${t.label}</option>`).join(""), v = (
+    const b = l.map(
+      (a) => `<option value="${a.value}" ${a.value === o ? "selected" : ""} ${a.disabled ? "disabled" : ""}>${a.label}</option>`
+    ).join(""), v = (
       /*html*/
       `
       <style>
@@ -180,14 +192,14 @@ class p extends HTMLElement {
         /* ========================================================================== */
 
       </style>
-      ${o ? (
+      ${t ? (
         /*html*/
-        `<label for="${r}" class="${i ? "vh" : ""}">${o}</label>`
+        `<label for="${r}" class="${i ? "vh" : ""}">${t}</label>`
       ) : ""}
       <div style="position: relative;">
-        <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${r}" ${b} 
+        <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${r}" ${u} 
         ${c ? "disabled" : ""}>
-          ${u}
+          ${b}
         </select>
         <mui-icon-down-chevron class="chevron" size="x-small"></mui-icon-down-chevron>
       </div>

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

@@ -75,6 +75,7 @@ class u extends HTMLElement {
         }
 
         :host {
+          display: block;
           width: 100%;
           max-width: 395px;
           min-width: 247px;

package/dist/esm/components/mui-stack/hstack/index.js

@@ -1,7 +1,7 @@
-import { getPartMap as a } from "../../../utils/part-map/index.js";
-class e extends HTMLElement {
+import { getPartMap as e } from "../../../utils/part-map/index.js";
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "alignY", "alignX"];
+    return ["space", "aligny", "alignx"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
@@ -20,7 +20,7 @@ class e extends HTMLElement {
   async connectedCallback() {
     if (!this.shadowRoot) return;
     await this.waitForPartMap();
-    const t = a("spacing", "layout", "visual");
+    const t = e("spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${this.styles}</style>
@@ -28,25 +28,25 @@ class e extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
-          --alignY: ${this.getAttribute("alignY") || this.alignY};
-          --alignX: ${this.getAttribute("alignX") || this.alignX};
+          --alignY: ${this.getAttribute("aligny") || this.alignY};
+          --alignX: ${this.getAttribute("alignx") || this.alignX};
         ">
       </slot>
     `;
   }
-  attributeChangedCallback(t, s) {
-    if (!this.shadowRoot) return;
-    const i = this.shadowRoot.querySelector("slot");
-    i && (t === "space" && i.style.setProperty("--space", s || this.space), t === "alignY" && i.style.setProperty("--alignY", s || this.alignY), t === "alignX" && i.style.setProperty("--alignX", s || this.alignX));
+  attributeChangedCallback(t, s, i) {
+    if (s === i || !this.shadowRoot) return;
+    const a = this.shadowRoot.querySelector("slot");
+    a && (t === "space" && a.style.setProperty("--space", i || this.space), t === "aligny" && a.style.setProperty("--alignY", i || this.alignY), t === "alignx" && a.style.setProperty("--alignX", i || this.alignX));
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof a == "function") return t();
+      if (typeof e == "function") return t();
       const s = () => {
-        typeof a == "function" ? t() : requestAnimationFrame(s);
+        typeof e == "function" ? t() : requestAnimationFrame(s);
       };
       s();
     });
   }
 }
-customElements.get("mui-h-stack") || customElements.define("mui-h-stack", e);
+customElements.get("mui-h-stack") || customElements.define("mui-h-stack", r);

package/dist/esm/components/mui-stack/vstack/index.js

@@ -1,7 +1,7 @@
-import { getPartMap as a } from "../../../utils/part-map/index.js";
-class e extends HTMLElement {
+import { getPartMap as e } from "../../../utils/part-map/index.js";
+class r extends HTMLElement {
   static get observedAttributes() {
-    return ["space", "alignX", "alignY"];
+    return ["space", "alignx", "aligny"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignX = "normal", this.alignY = "normal", this.styles = /*css*/
@@ -20,7 +20,7 @@ class e extends HTMLElement {
   async connectedCallback() {
     if (!this.shadowRoot) return;
     await this.waitForPartMap();
-    const t = a("spacing", "layout", "visual");
+    const t = e("spacing", "layout", "visual");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${this.styles}</style>
@@ -28,25 +28,25 @@ class e extends HTMLElement {
         part="${t}" 
         style="
           --space: ${this.getAttribute("space") || this.space};
-          --alignX: ${this.getAttribute("alignX") || this.alignX};
-          --alignY: ${this.getAttribute("alignY") || this.alignY};
+          --alignX: ${this.getAttribute("alignx") || this.alignX};
+          --alignY: ${this.getAttribute("aligny") || this.alignY};
         ">
       </slot>
     `;
   }
-  attributeChangedCallback(t, s) {
-    if (!this.shadowRoot) return;
-    const i = this.shadowRoot.querySelector("slot");
-    i && (t === "space" && i.style.setProperty("--space", s || this.space), t === "alignX" && i.style.setProperty("--alignX", s || this.alignX), t === "alignY" && i.style.setProperty("--alignY", s || this.alignY));
+  attributeChangedCallback(t, s, i) {
+    if (s === i || !this.shadowRoot) return;
+    const a = this.shadowRoot.querySelector("slot");
+    a && (t === "space" && a.style.setProperty("--space", i || this.space), t === "alignx" && a.style.setProperty("--alignX", i || this.alignX), t === "aligny" && a.style.setProperty("--alignY", i || this.alignY));
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof a == "function") return t();
+      if (typeof e == "function") return t();
       const s = () => {
-        typeof a == "function" ? t() : requestAnimationFrame(s);
+        typeof e == "function" ? t() : requestAnimationFrame(s);
       };
       s();
     });
   }
 }
-customElements.get("mui-v-stack") || customElements.define("mui-v-stack", e);
+customElements.get("mui-v-stack") || customElements.define("mui-v-stack", r);

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

@@ -1,61 +1,69 @@
-class h extends HTMLElement {
+class o extends HTMLElement {
   constructor() {
     super(), this._checked = !1, this._checkbox = null, this.attachShadow({ mode: "open" }), this._checked = !1;
   }
   connectedCallback() {
-    var t;
-    this.render(), this._checkbox = this.shadowRoot.querySelector('input[type="checkbox"]'), this._checked = this.hasAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked), this._updateIcons(), this._updateDisabledState(), this._enforceIconSize(), (t = this._checkbox) == null || t.addEventListener("change", () => {
-      this._checkbox && (this.checked = this._checkbox.checked, this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { checked: this.checked },
-          bubbles: !0,
-          composed: !0
-        })
-      ));
-    });
+    this.render(), this._checkbox = this.shadowRoot.querySelector('input[type="checkbox"]'), this._checked = this.hasAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked), this._updateIcons(), this._updateDisabledState(), this._enforceIconSize(), this._setupListener();
+  }
+  disconnectedCallback() {
+    this._cleanupListeners();
   }
   static get observedAttributes() {
     return ["label", "disabled", "checked"];
   }
-  attributeChangedCallback(t, e, s) {
-    if (t === "checked" && e !== s && (this._checked = s !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), t === "disabled" && e !== s) {
-      const i = s !== null;
+  attributeChangedCallback(s, e, t) {
+    if (s === "checked" && e !== t && (this._checked = t !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), s === "disabled" && e !== t) {
+      const i = t !== null;
       this._checkbox && (this._checkbox.disabled = i, this._checkbox.setAttribute("aria-disabled", i.toString())), this._updateDisabledState();
     }
   }
   get checked() {
     return this._checked;
   }
-  set checked(t) {
-    const e = !!t;
+  set checked(s) {
+    const e = !!s;
     this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
   }
+  _cleanupListeners() {
+    this._checkbox && this._changeHandler && this._checkbox.removeEventListener("change", this._changeHandler);
+  }
   _updateDisabledState() {
-    var e, s, i, c;
-    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (s = this._checkbox) == null || s.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+    var e, t, i, c;
+    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (t = this._checkbox) == null || t.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (i = this._checkbox) == null || i.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+  }
+  _setupListener() {
+    this._checkbox && (this._cleanupListeners(), this._changeHandler = () => {
+      this._checkbox && (this.checked = this._checkbox.checked, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: this.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }, this._checkbox.addEventListener("change", this._changeHandler));
   }
   _enforceIconSize() {
-    const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), s = (i) => {
+    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]'), t = (i) => {
       if (!i) return;
       const c = () => {
-        i.assignedElements().forEach((o) => {
-          o.tagName.toLowerCase().startsWith("mui-icon") && o.setAttribute("size", "x-small");
+        i.assignedElements().forEach((h) => {
+          h.tagName.toLowerCase().startsWith("mui-icon") && h.setAttribute("size", "x-small");
         });
       };
       i.addEventListener("slotchange", c), setTimeout(c, 0);
     };
-    s(t), s(e);
+    t(s), t(e);
   }
   _updateIcons() {
-    const t = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
-    t && t.assignedElements().forEach((s) => {
-      s.style.display = this._checked ? "inline" : "none";
-    }), e && e.assignedElements().forEach((s) => {
-      s.style.display = this._checked ? "none" : "inline";
+    const s = this.shadowRoot.querySelector('slot[name="on-icon"]'), e = this.shadowRoot.querySelector('slot[name="off-icon"]');
+    s && s.assignedElements().forEach((t) => {
+      t.style.display = this._checked ? "inline" : "none";
+    }), e && e.assignedElements().forEach((t) => {
+      t.style.display = this._checked ? "none" : "inline";
     });
   }
   render() {
-    const t = this.getAttribute("label");
+    const s = this.getAttribute("label");
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -132,7 +140,7 @@ class h extends HTMLElement {
           type="checkbox"
           role="switch"
           aria-checked="${this._checked}"
-          ${t ? `aria-label="${t}"` : ""}
+          ${s ? `aria-label="${s}"` : ""}
         >
         <span class="track">
           <span class="thumb">
@@ -144,4 +152,4 @@ class h extends HTMLElement {
     `;
   }
 }
-customElements.get("mui-switch") || customElements.define("mui-switch", h);
+customElements.get("mui-switch") || customElements.define("mui-switch", o);

package/dist/esm/components/mui-tabs/item/index.js

@@ -1,19 +1,25 @@
-class s extends HTMLElement {
+class o extends HTMLElement {
+  updateIcon(t) {
+    if (this.shadowRoot && (this.iconEl && (this.shadowRoot.removeChild(this.iconEl), this.iconEl = void 0), t && t.trim() !== "" && customElements.get(t))) {
+      const e = document.createElement(t);
+      e.setAttribute("color", this.hasAttribute("active") ? "var(--tab-icon-active)" : "var(--tab-icon)"), e.setAttribute("size", "small"), this.shadowRoot.insertBefore(e, this.shadowRoot.firstChild), this.iconEl = e;
+    }
+  }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["active"];
+    return ["active", "icon"];
   }
-  attributeChangedCallback(t, i, a) {
-    t === "active" && this.updateActiveState();
+  attributeChangedCallback(t, e, s) {
+    t === "active" ? this.updateActiveState() : t === "icon" && this.updateIcon(s);
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
     const t = this.getAttribute("icon");
     this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
-    const i = document.createElement("style");
-    if (i.textContent = /*css*/
+    const e = document.createElement("style");
+    if (e.textContent = /*css*/
     `
       :host {
         user-select: none;
@@ -46,16 +52,16 @@ class s extends HTMLElement {
       ::slotted(*) {
         margin-left: var(--space-100);
       }
-    `, this.shadowRoot.appendChild(i), t && t.trim() !== "" && customElements.get(t)) {
-      const e = document.createElement(t);
-      e.setAttribute("color", "var(--tab-icon)"), e.setAttribute("size", "small"), this.shadowRoot.appendChild(e), this.iconEl = e;
+    `, this.shadowRoot.appendChild(e), t && t.trim() !== "" && customElements.get(t)) {
+      const i = document.createElement(t);
+      i.setAttribute("color", "var(--tab-icon)"), i.setAttribute("size", "small"), this.shadowRoot.appendChild(i), this.iconEl = i;
     }
-    const a = document.createElement("slot");
-    this.shadowRoot.appendChild(a), this.updateActiveState();
+    const s = document.createElement("slot");
+    this.shadowRoot.appendChild(s), this.updateActiveState();
   }
   updateActiveState() {
     const t = this.hasAttribute("active");
     this.classList.toggle("active", t), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
   }
 }
-customElements.get("mui-tab-item") || customElements.define("mui-tab-item", s);
+customElements.get("mui-tab-item") || customElements.define("mui-tab-item", o);