@muibook/components 9.0.0 → 9.1.0

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>
@@ -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-input/index.js

@@ -12,9 +12,19 @@ class m extends HTMLElement {
     this.cleanupListeners();
   }
   attributeChangedCallback(e, r, o) {
-    var a;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.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" || e === "variant") && (this.render(), this.setupListener()));
+    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;
@@ -37,13 +47,13 @@ class m extends HTMLElement {
   }
   updateSlottedButtons() {
     requestAnimationFrame(() => {
-      var t, a;
-      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="before"]'), r = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="after"]'), o = (l) => {
+      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 s = i, n = s.tagName.toLowerCase();
-            (n === "mui-button" || n === "mui-link") && (s.setAttribute("usage", "input"), s.setAttribute("size", "medium"), s.removeAttribute("variant"), s.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"));
           }
         });
       };
@@ -51,7 +61,7 @@ class m extends HTMLElement {
     });
   }
   render() {
-    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") || "", a = this.getAttribute("value") || "", l = this.getAttribute("placeholder") || "", d = this.getAttribute("id") || `mui-input-${Math.random().toString(36).substr(2, 9)}`, i = this.getAttribute("label") || "", s = this.hasAttribute("hide-label"), n = this.hasAttribute("disabled"), u = s && 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 = (
+    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>
@@ -222,7 +232,7 @@ class m extends HTMLElement {
         
 
       </style>
-      ${i ? `<label for="${d}" class="${s ? "vh" : ""}">${i}</label>` : ""}
+      ${i ? `<label for="${d}" class="${a ? "vh" : ""}">${i}</label>` : ""}
     <div class="input-wrapper">
       <slot name="before"></slot>
       <input
@@ -230,7 +240,7 @@ class m extends HTMLElement {
         type="${o}"
         name="${t}"
         id="${d}"
-        value="${a}"
+        value="${s}"
         placeholder="${l}"
         ${n ? 'disabled aria-disabled="true"' : ""}
         ${u}

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

@@ -16,7 +16,15 @@ class p extends HTMLElement {
   attributeChangedCallback(e, r, t) {
     if (!this.shadowRoot || r === t) return;
     const o = this.shadowRoot.querySelector("select");
-    e === "value" && o && (o.value = t || ""), e === "disabled" && o && (t === null || t === "false" ? o.removeAttribute("disabled") : o.setAttribute("disabled", "")), ["options", "label", "hide-label", "variant", "disabled"].includes(e) && (this.render(), this.setupListener());
+    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;

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/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Wed, 31 Dec 2025 01:53:05 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Thu, 08 Jan 2026 02:39:52 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */

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

@@ -169,7 +169,7 @@ html[data-theme="light"] {
   --text-color-success: var(--green-600);
   --text-color-warning: var(--orange-600);
   --text-color-error: var(--red-600);
-  --text-color-optional: var(--grey-600);
+  --text-color-optional: var(--grey-500);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */
@@ -426,7 +426,7 @@ html[data-theme="dark"] {
   --text-color-success: var(--green-400);
   --text-color-warning: var(--orange-400);
   --text-color-error: var(--red-400);
-  --text-color-optional: var(--grey-300);
+  --text-color-optional: var(--grey-400);
   /* Overlay */
   --backdrop-overlay: var(--black-opacity-70);
   /* ================================================================================================== */