@muibook/components 19.2.0 → 19.3.0

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

@@ -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 o = (
+    let t = (
       /*html*/
       `
     <style>
@@ -662,6 +662,35 @@ class h extends HTMLElement {
       padding-left: var(--action-before-slot-padding-large);
     }
 
+    :host([avatar-only]) {
+      width: auto;
+      display: flex;
+    }
+
+    :host([avatar-only]) button,
+    :host([avatar-only]) button:hover,
+    :host([avatar-only]) button:focus,
+    :host([avatar-only]) button:focus-visible,
+    :host([avatar-only]) button:disabled {
+      width: auto;
+      min-width: 0;
+      min-height: 0;
+      padding: var(--space-000);
+      border: none;
+      background: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-000);
+      line-height: 0;
+      border-radius: 999rem;
+    }
+
+    :host([avatar-only]) button ::slotted(mui-avatar) {
+      margin-right: var(--space-000);
+      margin-left: var(--space-000);
+    }
+
 
     </style>
 
@@ -679,106 +708,103 @@ class h extends HTMLElement {
 
     `
     );
-    this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
-      const s = this.shadowRoot;
-      if (!s) return;
-      const e = s.querySelector("slot:not([name])"), t = s.querySelector('slot[name="before"]'), a = s.querySelector('slot[name="after"]'), i = (d) => d ? d.assignedNodes({ flatten: !0 }).some((n) => {
-        var l;
-        return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((l = n.textContent) != null && l.trim());
-      }) : !1, c = i(t), u = i(a);
-      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", u);
-      const v = (e == null ? void 0 : e.assignedNodes({ flatten: !0 })) ?? [];
-      v.every((d) => {
-        var n;
-        if (d.nodeType === Node.ELEMENT_NODE) {
-          const l = d;
-          return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
-        }
-        return d.nodeType === Node.TEXT_NODE && !((n = d.textContent) != null && n.trim());
-      }) ? (this.setAttribute("icon-only", ""), this.updateIconSizes(v, !0)) : (this.removeAttribute("icon-only"), [t, e, a].forEach((n) => {
-        if (n) {
-          const l = n.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(l, !1), this.updateAvatarSizes(l), this.updateBadgeSizes(l);
-        }
-      }));
-    });
+    this.shadowRoot.innerHTML = t, await customElements.whenDefined("mui-button"), [
+      this.shadowRoot.querySelector("slot:not([name])"),
+      this.shadowRoot.querySelector('slot[name="before"]'),
+      this.shadowRoot.querySelector('slot[name="after"]')
+    ].forEach((r) => r == null ? void 0 : r.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
+  }
+  attributeChangedCallback(o, t, n) {
+    var r;
+    if (o === "disabled") {
+      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button");
+      e && (this.hasAttribute("disabled") ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+    }
+    o === "size" && t !== n && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState());
   }
-  attributeChangedCallback(r, o, s) {
-    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 !== s && this.shadowRoot && requestAnimationFrame(() => {
-      const t = this.shadowRoot;
-      if (!t) return;
-      const a = [
-        t.querySelector("slot:not([name])"),
-        t.querySelector('slot[name="before"]'),
-        t.querySelector('slot[name="after"]')
-      ], i = this.hasAttribute("icon-only");
-      a.forEach((c) => {
-        if (c) {
-          const u = c.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(u, i), this.updateAvatarSizes(u), this.updateBadgeSizes(u);
-        }
-      });
+  syncButtonState() {
+    const o = this.shadowRoot;
+    if (!o) return;
+    const t = o.querySelector("slot:not([name])"), n = o.querySelector('slot[name="before"]'), r = o.querySelector('slot[name="after"]'), e = (a) => a ? a.assignedNodes({ flatten: !0 }).some((i) => {
+      var d;
+      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((d = i.textContent) != null && d.trim());
+    }) : !1, s = e(n), l = e(r);
+    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", l);
+    const c = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], v = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], u = v.length === 1 && v[0].tagName.toLowerCase() === "mui-avatar" && c.every((a) => {
+      var i;
+      return a.nodeType === Node.TEXT_NODE ? !((i = a.textContent) != null && i.trim()) : a.nodeType === Node.ELEMENT_NODE ? a.tagName.toLowerCase() === "mui-avatar" : !1;
+    });
+    if (this.toggleAttribute("avatar-only", u), !u && c.every((a) => {
+      var i;
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const d = a;
+        return d.tagName.toLowerCase() === "svg" || d.classList.contains("mui-icon");
+      }
+      return a.nodeType === Node.TEXT_NODE && !((i = a.textContent) != null && i.trim());
+    })) {
+      this.setAttribute("icon-only", ""), this.updateIconSizes(c, !0);
+      return;
+    }
+    this.removeAttribute("icon-only"), [n, t, r].forEach((a) => {
+      if (!a) return;
+      const i = a.assignedNodes({ flatten: !0 });
+      this.updateIconSizes(i, !1), u || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
     });
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(r) {
-    const o = this.getAttribute("size") || "medium", e = {
+  updateAvatarSizes(o) {
+    const t = this.getAttribute("size") || "medium", r = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "medium"
-    }[o] || "small";
-    r.forEach((t) => {
-      if (t.nodeType === Node.ELEMENT_NODE) {
-        const a = t;
-        a.tagName.toLowerCase() === "mui-avatar" && a.setAttribute("size", e);
+    }[t] || "small";
+    o.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const s = e;
+        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", r);
       }
     });
   }
-  updateIconSizes(r, o) {
-    const s = this.getAttribute("size") || "medium", t = {
+  updateIconSizes(o, t) {
+    const n = this.getAttribute("size") || "medium", e = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: o ? "medium" : "small",
+      medium: t ? "medium" : "small",
       // small for regular, medium for icon-only
-      large: o ? "large" : "medium"
-    }[s] || "small";
-    r.forEach((a) => {
-      if (a.nodeType === Node.ELEMENT_NODE) {
-        const i = a;
-        (i.tagName.toLowerCase() === "svg" || i.classList.contains("mui-icon") || i.tagName.toLowerCase() === "mui-icon") && !i.hasAttribute("size") && i.setAttribute("size", t);
+      large: t ? "large" : "medium"
+    }[n] || "small";
+    o.forEach((s) => {
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const l = s;
+        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", e);
       }
     });
   }
-  updateBadgeSizes(r) {
-    const o = this.getAttribute("size") || "medium", e = {
+  updateBadgeSizes(o) {
+    const t = this.getAttribute("size") || "medium", r = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[o] || "medium";
-    r.forEach((t) => {
-      if (t.nodeType === Node.ELEMENT_NODE) {
-        const a = t;
-        a.tagName.toLowerCase() === "mui-badge" && a.setAttribute("size", e);
+    }[t] || "medium";
+    o.forEach((e) => {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const s = e;
+        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", r);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((r) => {
-      if (typeof b == "function") return r();
-      const o = () => {
-        typeof b == "function" ? r() : requestAnimationFrame(o);
+    return new Promise((o) => {
+      if (typeof b == "function") return o();
+      const t = () => {
+        typeof b == "function" ? o() : requestAnimationFrame(t);
       };
-      o();
+      t();
     });
   }
 }

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Tue, 05 May 2026 05:23:52 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Thu, 07 May 2026 04:13:10 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */