@muibook/components 19.1.1 → 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/components/mui-dialog/index.js

@@ -1,6 +1,6 @@
 import "../mui-icons/close/index.js";
 import "../mui-button/index.js";
-class n extends HTMLElement {
+class l extends HTMLElement {
   static get observedAttributes() {
     return ["open", "width", "content-max-height"];
   }
@@ -8,7 +8,7 @@ class n extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    var a;
+    var a, n;
     if (!this.shadowRoot) return;
     const s = (
       /*css*/
@@ -71,6 +71,10 @@ class n extends HTMLElement {
       .actions[hidden] {
         display: none !important;
       }
+
+      .header[hidden] {
+        display: none !important;
+      }
     `
     );
     this.shadowRoot.innerHTML = /*html*/
@@ -88,12 +92,17 @@ class n extends HTMLElement {
           <slot name="actions"></slot>
         </div>
       </dialog>
-    `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
+    `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector(".actions"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.headerEl = this.shadowRoot.querySelector(".header"), this.titleSlot = this.shadowRoot.querySelector('slot[name="title"]');
     const e = this.shadowRoot.querySelector(".close");
     e == null || e.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (i) => {
       const o = this.dialogEl.getBoundingClientRect();
       i.clientX >= o.left && i.clientX <= o.right && i.clientY >= o.top && i.clientY <= o.bottom || this.close();
-    }), (a = this.actionsSlot) == null || a.addEventListener("slotchange", () => this.updateFooterVisibility()), this.updateFooterVisibility(), this.syncOpenState();
+    }), (a = this.actionsSlot) == null || a.addEventListener("slotchange", () => this.updateFooterVisibility()), (n = this.titleSlot) == null || n.addEventListener("slotchange", () => this.updateHeaderVisibility()), this.updateHeaderVisibility(), this.updateFooterVisibility(), this.syncOpenState();
+  }
+  updateHeaderVisibility() {
+    if (!this.headerEl || !this.titleSlot) return;
+    const t = this.titleSlot.assignedElements().length > 0;
+    this.headerEl.hidden = !t, this.toggleAttribute("has-header", t);
   }
   updateFooterVisibility() {
     if (!this.footerEl || !this.actionsSlot) return;
@@ -113,4 +122,4 @@ class n extends HTMLElement {
     this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("mui-dialog-close", { bubbles: !0, composed: !0 }));
   }
 }
-customElements.get("mui-dialog") || customElements.define("mui-dialog", n);
+customElements.get("mui-dialog") || customElements.define("mui-dialog", l);

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

@@ -21,7 +21,7 @@ class n extends HTMLElement {
           margin-top: var(--space-300);
         }
         :host([size="x-small"][has-message]) .message-container { margin-top: var(--space-100); }
-        :host([size="small"][has-message]) .message-container { margin-top: var(--space-100); }
+        :host([size="small"][has-message]) .message-container { margin-top: var(--space-200); }
         :host([size="medium"][has-message]) .message-container { margin-top: var(--space-300); }
         :host([size="large"][has-message]) .message-container { margin-top: var(--space-300); }
 

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

@@ -0,0 +1 @@
+import "./trash/index.js";

package/dist/esm/components/mui-illustrations/trash/index.js

@@ -0,0 +1,81 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(l, t, a) {
+    (l === "size" || l === "color") && t !== a && this.render();
+  }
+  render() {
+    const l = this.getAttribute("size") || "medium", t = this.getAttribute("color"), a = {
+      default: "var(--illustration-main-color-default)",
+      inverted: "var(--illustration-main-color-inverted)"
+    }, o = t && a[t] || t || a.default, s = "color-mix(in srgb, var(--illustration-main-color) 35%, transparent)", e = "color-mix(in srgb, var(--illustration-main-color) 14%, transparent)", n = t === "inverted" ? "var(--illustration-shadow-color-inverted)" : "var(--illustration-shadow-color-default)", i = {
+      small: "var(--illustration-size-small)",
+      medium: "var(--illustration-size-medium)",
+      large: "var(--illustration-size-large)",
+      "x-large": "var(--illustration-size-x-large)"
+    }, r = i[l] ?? i.medium;
+    this.classList.add("mui-illustration"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${r};
+          height: ${r};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex: none;
+          --illustration-main-color: ${o};
+          --illustration-detail-color: ${s};
+          --illustration-atmosphere-color: ${e};
+          --illustration-shadow-color: ${n};
+        }
+
+        svg {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+      </style>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+        <ellipse cx="48" cy="93" fill="var(--illustration-shadow-color)" rx="25" ry="3"></ellipse>
+        <path
+          fill="var(--illustration-main-color)"
+          d="M39.947 69.904q.765 0 1.24-.448.474-.449.448-1.16l-.844-29.057q0-.738-.475-1.16-.474-.422-1.213-.422-.79 0-1.265.448-.45.422-.422 1.16l.79 29.03q.054.739.502 1.187.474.422 1.24.422m8.042 0q.791 0 1.266-.422.5-.448.5-1.186v-29.03q0-.74-.5-1.16-.475-.45-1.266-.449-.764 0-1.265.448-.475.422-.475 1.16v29.03q0 .739.474 1.187.501.422 1.266.422m8.069 0q.764 0 1.212-.422.476-.422.501-1.186l.791-29.03q.027-.74-.448-1.16-.448-.45-1.24-.449-.711 0-1.186.422-.474.422-.5 1.186l-.818 29.03q-.027.739.422 1.187.474.422 1.265.422M35.697 28.742l-.474-5.887q-.228-2.838 1.376-4.608 1.628-1.797 4.65-2.04l9.987-.803q3.022-.242 4.89 1.273 1.893 1.488 2.12 4.327l.474 5.887-4.179.336-.452-5.624q-.089-1.104-.88-1.728-.765-.627-1.947-.532l-9.41.757q-1.181.094-1.863.837-.654.741-.566 1.845l.453 5.624zm-11.764 3.062q-.788.063-1.439-.466a2 2 0 0 1-.692-1.373 1.88 1.88 0 0 1 .468-1.413q.556-.653 1.344-.716l46.967-3.776q.789-.065 1.413.468.626.531.69 1.346a2 2 0 0 1-.464 1.466 1.82 1.82 0 0 1-1.32.688zm11.98 46.116q-2.848 0-4.614-1.688-1.74-1.66-1.872-4.509l-1.872-38.917h40.869l-1.846 38.891q-.131 2.847-1.898 4.535t-4.588 1.688z"
+        ></path>
+        <path
+          fill="var(--illustration-detail-color)"
+          d="M84 59a1 1 0 1 0-1 1v1a2 2 0 1 1 0-4 2 2 0 0 1 0 4v-1a1 1 0 0 0 1-1"
+        ></path>
+        <circle cx="17" cy="50" r="1" fill="var(--illustration-atmosphere-color)"></circle>
+        <path
+          fill="var(--illustration-detail-color)"
+          d="M77 85a1 1 0 1 1-2 0 1 1 0 0 1 2 0M34.5 1.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0"
+        ></path>
+        <path
+          fill="var(--illustration-detail-color)"
+          d="M82 13c.207 0 .375.168.375.375v1.25h1.25a.375.375 0 0 1 0 .75h-1.25v1.25a.375.375 0 0 1-.75 0v-1.25h-1.25a.375.375 0 0 1 0-.75h1.25v-1.25c0-.207.168-.375.375-.375"
+        ></path>
+        <path
+          fill="var(--illustration-detail-color)"
+          d="M10.5 75.4c.155 0 .281.126.281.281v.938h.938a.281.281 0 0 1 0 .562h-.938v.938a.281.281 0 0 1-.562 0v-.938H9.28a.281.281 0 1 1 0-.562h.938v-.938c0-.155.126-.28.281-.28"
+        ></path>
+        <path
+          fill="var(--illustration-detail-color)"
+          d="M13.508 20.4c.362 0 .656.294.656.656v2.188h2.188a.656.656 0 0 1 0 1.312h-2.188v2.188a.656.656 0 0 1-1.312 0v-2.188h-2.188a.656.656 0 1 1 0-1.312h2.188v-2.188c0-.362.293-.656.656-.656"
+        ></path>
+        <path
+          fill="var(--illustration-atmosphere-color)"
+          d="M74.535 64.6c.156 0 .281.127.281.282v.937h.938a.281.281 0 0 1 0 .563h-.938v.937a.281.281 0 0 1-.562 0v-.937h-.938a.281.281 0 0 1 0-.563h.938v-.937c0-.156.126-.281.281-.281"
+        ></path>
+      </svg>
+    `);
+  }
+}
+customElements.get("mui-illustration-trash") || customElements.define("mui-illustration-trash", c);

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

@@ -91,7 +91,7 @@ class I extends HTMLElement {
         medium: "x-small",
         large: "small"
       }, v = {
-        "x-small": "x-small",
+        "x-small": "xx-small",
         small: "x-small",
         medium: "small",
         large: "medium"
@@ -113,7 +113,7 @@ class I extends HTMLElement {
           medium: "x-small",
           large: "small"
         }, u = {
-          "x-small": "x-small",
+          "x-small": "xx-small",
           small: "x-small",
           medium: "small",
           large: "medium"

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

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

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

@@ -256,6 +256,14 @@ html[data-theme="light"] {
   /* Icon */
   --icon-color-default: var(--black);
   --icon-color-inverted: var(--white);
+  --illustration-main-color-default: var(--icon-color-default);
+  --illustration-main-color-inverted: var(--icon-color-inverted);
+  --illustration-shadow-color-default: var(--black-opacity-20);
+  --illustration-shadow-color-inverted: var(--white-opacity-20);
+  --illustration-size-small: 8rem;
+  --illustration-size-medium: 9.6rem;
+  --illustration-size-large: 11.2rem;
+  --illustration-size-x-large: 12.8rem;
   /* Badge */
   --badge-text-color: var(--grey-100);
   --badge-background-neutral: var(--grey-600);
@@ -600,6 +608,14 @@ html[data-theme="dark"] {
   /* Icon */
   --icon-color-default: var(--white);
   --icon-color-inverted: var(--black);
+  --illustration-main-color-default: var(--icon-color-default);
+  --illustration-main-color-inverted: var(--icon-color-inverted);
+  --illustration-shadow-color-default: var(--black-opacity-30);
+  --illustration-shadow-color-inverted: var(--black-opacity-20);
+  --illustration-size-small: 8rem;
+  --illustration-size-medium: 9.6rem;
+  --illustration-size-large: 11.2rem;
+  --illustration-size-x-large: 12.8rem;
   /* Badge */
   --badge-text-color: var(--grey-900);
   --badge-background-neutral: var(--grey-400);