@muibook/components 9.0.0 → 10.0.0

package/dist/esm/components/mui-accordion/block/index.js

@@ -99,31 +99,31 @@ class u extends HTMLElement {
       }
 
       /* Card Slot (Supports: Table Cell, Accordion Block) */
-      :host(.card-slot) .accordion-summary {
+      :host([card-slot]) .accordion-summary {
         padding-left: var(--space-500);
         padding-right: var(--space-500);
       }
       @media (min-width: 768px) {
-        :host(.card-slot) .accordion-summary {
+        :host([card-slot]) .accordion-summary {
           padding-left: var(--space-600);
           padding-right: var(--space-600);
         }
       }
-      :host(.card-slot) .accordion-detail-inner {
+      :host([card-slot]) .accordion-detail-inner {
         padding-left: var(--space-500);
         padding-right: var(--space-500);
       }
       @media (min-width: 768px) {
-        :host(.card-slot) .accordion-detail-inner {
+        :host([card-slot]) .accordion-detail-inner {
           padding-left: var(--space-600);
           padding-right: var(--space-600);
         }
       }
-      :host(.card-slot) .detail-space-none {
+      :host([card-slot]) .detail-space-none {
         padding: 0;
       }
       @media (min-width: 768px) {
-        :host(.card-slot) .detail-space-none {
+        :host([card-slot]) .detail-space-none {
           padding: 0;
         }
       }

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

@@ -3,10 +3,10 @@ import "../mui-icons/check/index.js";
 import "../mui-icons/info/index.js";
 import "../mui-icons/warning/index.js";
 import "../mui-icons/attention/index.js";
-function b(d) {
+function g(d) {
   return ["positive", "info", "warning", "attention"].includes(d);
 }
-class m extends HTMLElement {
+class v extends HTMLElement {
   constructor() {
     super(), this.actionSlotListener = null, this.attachShadow({ mode: "open" });
   }
@@ -16,26 +16,26 @@ class m extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(i, o, t) {
-    i === "variant" && o !== t && this.shadowRoot && this.render();
+  attributeChangedCallback(e, o, t) {
+    e === "variant" && o !== t && this.shadowRoot && this.render();
   }
   render() {
-    const i = this.getAttribute("variant") || "positive", o = {
+    const e = this.getAttribute("variant") || "positive", o = {
       success: "positive",
       error: "attention"
-    }, t = b(i) ? i : o[i] || "positive";
-    if (i !== t) {
+    }, t = g(e) ? e : o[e] || "positive";
+    if (e !== t) {
       this.setAttribute("variant", t);
       return;
     }
-    const s = {
+    const c = {
       positive: "polite",
       info: "polite",
       warning: "assertive",
       attention: "assertive"
     };
-    this.setAttribute("role", "alert"), this.setAttribute("aria-live", s[t] || "polite");
-    const r = {
+    this.setAttribute("role", "alert"), this.setAttribute("aria-live", c[t] || "polite");
+    const l = {
       positive: "mui-icon-check",
       info: "mui-icon-info",
       warning: "mui-icon-warning",
@@ -45,20 +45,27 @@ class m extends HTMLElement {
       info: "--feedback-info-icon",
       warning: "--feedback-warning-icon",
       attention: "--feedback-attention-icon"
-    }, e = {
+    }, n = {
       positive: "--feedback-positive-text",
       info: "--feedback-info-text",
       warning: "--feedback-warning-text",
       attention: "--feedback-attention-text"
-    }, n = {
+    }, s = {
       positive: "Success!",
       info: "Info:",
       warning: "Warning!",
       attention: "Error!"
-    }, c = r[t], p = a[t], g = e[t], u = n[t], h = (
+    }, i = l[t], r = a[t], p = n[t], u = s[t], b = (
       /*css*/
       `
+
       :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      section {
         border-radius: var(--alert-radius);
         padding-left: var(--alert-padding);
         padding-right: var(--alert-padding);
@@ -69,6 +76,8 @@ class m extends HTMLElement {
         align-items: start;
         gap: var(--alert-gap-horizontal-mobile);
         box-sizing: border-box;
+        border: var(--feedback-${t}-border);
+        background: var(--feedback-${t}-background);
       }
 
       .icon,
@@ -77,7 +86,7 @@ class m extends HTMLElement {
         padding-bottom: var(--alert-padding);
       }
 
-      :host([has-action]) {
+      section[has-action] {
         padding-right: var(--space-100);
         grid-template-columns: auto 1fr auto;
       }
@@ -86,14 +95,14 @@ class m extends HTMLElement {
       ::slotted(mui-link[slot="action"]) { padding-top: var(--space-100); }
 
       @media (min-width: 600px) {
-        :host { gap: var(--alert-gap-horizontal-desktop); }
-        :host([has-action]) { padding-right: var(--space-100); }
+        :section { gap: var(--alert-gap-horizontal-desktop); }
+        :section([has-action]) { padding-right: var(--space-100); }
         ::slotted(mui-button[slot="action"]),
         ::slotted(mui-link[slot="action"]) { align-self: center; padding-top: var(--space-000); }
       }
 
       .label {
-        color: var(${g}); 
+        color: var(${p}); 
         font-weight: var(--font-weight-bold);
       }
 
@@ -105,45 +114,39 @@ class m extends HTMLElement {
         gap: var(--space-000);
       }
 
-      ${["positive", "info", "warning", "attention"].map(
-        (l) => (
-          /*css*/
-          `
-        :host([variant="${l}"]) {
-          border: var(--feedback-${l}-border);
-          background: var(--feedback-${l}-background);
-        }
-      `
-        )
-      ).join("")}
     `
     );
     this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${h}</style>
-      <${c} size="medium" color="var(${p})" class="icon"></${c}>
+      <style>${b}</style>
+      <section>
+      <${i} size="medium" color="var(${r})" class="icon"></${i}>
       <mui-body>
         <span class="label">${u}</span>
         <slot></slot>
       </mui-body>
       <slot name="action"></slot>
+      </section>
     `, this.setupActionSlot());
   }
   setupActionSlot() {
     var o;
-    const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector('slot[name="action"]');
-    if (i) {
-      this.actionSlotListener && i.removeEventListener("slotchange", this.actionSlotListener);
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('slot[name="action"]');
+    if (e) {
+      this.actionSlotListener && e.removeEventListener("slotchange", this.actionSlotListener);
       const t = () => {
-        const s = this.getAttribute("variant") || "positive", r = i.assignedElements();
+        var s;
+        const c = this.getAttribute("variant") || "positive", l = e.assignedElements();
         let a = !1;
-        r.forEach((e) => {
-          const n = e.tagName;
-          (n === "MUI-BUTTON" || n === "MUI-LINK") && (a = !0, e.setAttribute("variant", "tertiary"), e.classList.add("alert-slot", `alert-${s}-slot`));
-        }), a ? this.setAttribute("has-action", "") : this.removeAttribute("has-action");
+        l.forEach((i) => {
+          const r = i.tagName;
+          (r === "MUI-BUTTON" || r === "MUI-LINK") && (a = !0, i.setAttribute("variant", "tertiary"), i.removeAttribute("alert-slot"), i.removeAttribute("alert-positive-slot"), i.removeAttribute("alert-info-slot"), i.removeAttribute("alert-warning-slot"), i.removeAttribute("alert-attention-slot"), i.setAttribute("alert-slot", ""), i.setAttribute(`alert-${c}-slot`, ""));
+        });
+        const n = (s = this.shadowRoot) == null ? void 0 : s.querySelector("section");
+        n && (a ? n.setAttribute("has-action", "") : n.removeAttribute("has-action"));
       };
-      this.actionSlotListener = t, i.addEventListener("slotchange", this.actionSlotListener), requestAnimationFrame(t);
+      this.actionSlotListener = t, e.addEventListener("slotchange", this.actionSlotListener), requestAnimationFrame(t);
     }
   }
 }
-customElements.get("mui-alert") || customElements.define("mui-alert", m);
+customElements.get("mui-alert") || customElements.define("mui-alert", v);

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

@@ -12,23 +12,29 @@ class n extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("variant") || "neutral", a = {
+    const t = this.getAttribute("variant") || "neutral", e = {
       neutral: "var(--badge-background-neutral)",
       positive: "var(--badge-background-positive)",
       warning: "var(--badge-background-warning)",
       attention: "var(--badge-background-attention)"
-    }, e = {
+    }, a = {
       neutral: "off",
       positive: "polite",
       warning: "assertive",
       attention: "assertive"
-    }, r = a[t], i = e[t], s = (
+    }, i = e[t], r = a[t], s = (
       /*css*/
       `
       :host {
-        display: inline-block;
+        display: inline-flex;
+        box-sizing: border-box;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
         border-radius: var(--badge-radius);
-        background: ${r};
+        background: ${i};
         font-size: var(--text-font-size-xs);
         font-weight: var(--badge-font-weight);
         color: var(--badge-text-color);
@@ -41,10 +47,12 @@ class n extends HTMLElement {
       }
     `
     );
-    this.setAttribute("role", "status"), this.setAttribute("aria-live", i), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "status"), this.setAttribute("aria-live", r), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
         <style>${s}</style>
-        <slot></slot>
+        <span class="badge">
+          <slot></slot>
+        </span>
       `);
   }
 }

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>
@@ -295,63 +295,63 @@ class h extends HTMLElement {
     /* ========================================================================== */
 
 
-    :host(.alert-positive-slot) {
+    :host([alert-positive-slot]) {
       --alert-text: var(--feedback-positive-text);
       --alert-icon: var(--feedback-positive-icon);
       --alert-bg-hover: var(--feedback-positive-action-background);
     }
 
-    :host(.alert-info-slot) {
+    :host([alert-info-slot]) {
       --alert-text: var(--feedback-info-text);
       --alert-icon: var(--feedback-info-icon);
       --alert-bg-hover: var(--feedback-info-action-background);
     }
 
-    :host(.alert-warning-slot) {
+    :host([alert-warning-slot]) {
       --alert-text: var(--feedback-warning-text);
       --alert-icon: var(--feedback-warning-icon);
       --alert-bg-hover: var(--feedback-warning-action-background);
     }
 
-    :host(.alert-attention-slot) {
+    :host([alert-attention-slot]) {
       --alert-text: var(--feedback-attention-text);
       --alert-icon: var(--feedback-attention-icon);
       --alert-bg-hover: var(--feedback-attention-action-background);
     }
 
-    :host(.alert-slot) button {
+    :host([alert-slot]) button {
       font-weight: var(--font-weight-semi-bold);
       color: var(--alert-text);
     }
 
-    :host(.alert-slot) button:hover,
-    :host(.alert-slot) button:focus-visible {
+    :host([alert-slot]) button:hover,
+    :host([alert-slot]) button:focus-visible {
       background: var(--alert-bg-hover);
       color: var(--alert-text);
     }
 
-    :host(.alert-slot) ::slotted(.mui-icon),
-    :host(.alert-slot):hover ::slotted(.mui-icon),
-    :host(.alert-slot):focus-visible ::slotted(.mui-icon) {
+    :host([alert-slot]) ::slotted(.mui-icon),
+    :host([alert-slot]):hover ::slotted(.mui-icon),
+    :host([alert-slot]):focus-visible ::slotted(.mui-icon) {
       fill: var(--alert-icon);
     }
 
     /* Dropdown Slot */
-    :host([size].dropdown-slot) button {
+    :host([size][dropdown-slot]) button {
       border-radius: var(--radius-000);
     }
 
-    :host(.dropdown-slot) button:hover,
-    :host(.dropdown-slot) button:focus {
+    :host([dropdown-slot]) button:hover,
+    :host([dropdown-slot]) button:focus {
       background: var(--dropdown-button-background-hover);
     }
 
-    :host([size].dropdown-slot-first) button {
+    :host([size][dropdown-slot-first]) button {
       border-top-left-radius: calc(var(--radius-100) / 2);
       border-top-right-radius: calc(var(--radius-100) / 2);
     }
 
-    :host([size].dropdown-slot-last) button   {
+    :host([size][dropdown-slot-last]) button   {
       border-bottom-left-radius: calc(var(--radius-100) / 2);
       border-bottom-right-radius: calc(var(--radius-100) / 2);
     }
@@ -383,31 +383,30 @@ class h extends HTMLElement {
 
     /* Before & After Icon
     ========================================= */
-    :host(.has-after) button,
-    :host(.has-before) button,
-    :host(.has-after.has-before) button { 
+    :host([has-after]) button,
+    :host([has-before]) button,
+    :host([has-after][has-before]) button { 
       display: grid; 
       align-items: center; 
       gap: var(--space-100);
     }
-    
-    :host(.has-after.has-before) button {
+
+    :host([has-after][has-before]) button {
       grid-template-columns: auto 1fr auto;
       padding-right: var(--action-after-slot-padding);
       padding-left: var(--action-before-slot-padding);
     }
 
-    :host(.has-after) button {
+    :host([has-after]) button {
       grid-template-columns: 1fr auto;
       padding-right: var(--action-after-slot-padding);
     }
 
-    :host(.has-before) button {
+    :host([has-before]) button {
       grid-template-columns: auto 1fr;
       padding-left: var(--action-before-slot-padding);
     }
 
-
     /* Size Variants
     ========================================= */
     :host([size="x-small"]) button,
@@ -463,60 +462,60 @@ class h extends HTMLElement {
 
     /* Before & After Icon
       ========================================= */
-    :host([size="x-small"].has-after) button,
-    :host([size="x-small"].has-before) button,
-    :host([size="x-small"].has-after.has-before) button { 
+    :host([size="x-small"][has-after]) button,
+    :host([size="x-small"][has-before]) button,
+    :host([size="x-small"][has-after][has-before]) button { 
       gap: var(--space-025);
     }
     
-    :host([size="x-small"].has-after.has-before) button {
+    :host([size="x-small"][has-after][has-before]) button {
       padding-right: var(--action-after-slot-padding-x-small);
       padding-left: var(--action-before-slot-padding-x-small);
     }
 
-    :host([size="x-small"].has-after) button {
+    :host([size="x-small"][has-after]) button {
       padding-right: var(--action-after-slot-padding-x-small);
     }
 
-    :host([size="x-small"].has-before) button {
+    :host([size="x-small"][has-before]) button {
       padding-left: var(--action-before-slot-padding-x-small);
     }
 
-    :host([size="small"].has-after) button,
-    :host([size="small"].has-before) button,
-    :host([size="small"].has-after.has-before) button { 
+    :host([size="small"][has-after]) button,
+    :host([size="small"][has-before]) button,
+    :host([size="small"][has-after][has-before]) button { 
       gap: var(--space-050);
     }
     
-    :host([size="small"].has-after.has-before) button {
+    :host([size="small"][has-after][has-before]) button {
       padding-right: var(--action-after-slot-padding-small);
       padding-left: var(--action-before-slot-padding-small);
     }
 
-    :host([size="small"].has-after) button {
+    :host([size="small"][has-after]) button {
       padding-right: var(--action-after-slot-padding-small);
     }
 
-    :host([size="small"].has-before) button {
+    :host([size="small"][has-before]) button {
       padding-left: var(--action-before-slot-padding-small);
     }
 
-    :host([size="large"].has-after) button,
-    :host([size="large"].has-before) button,
-    :host([size="large"].has-after.has-before) button { 
+    :host([size="large"][has-after]) button,
+    :host([size="large"][has-before]) button,
+    :host([size="large"][has-after][has-before]) button { 
       gap: var(--space-200);
     }
     
-    :host([size="large"].has-after.has-before) button {
+    :host([size="large"][has-after][has-before]) button {
       padding-right: var(--action-after-slot-padding-large);
       padding-left: var(--action-before-slot-padding-large);
     }
 
-    :host([size="large"].has-after) button {
+    :host([size="large"][has-after]) button {
       padding-right: var(--action-after-slot-padding-large);
     }
 
-    :host([size="large"].has-before) button {
+    :host([size="large"][has-before]) button {
       padding-left: var(--action-before-slot-padding-large);
     }
 
@@ -524,7 +523,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 +536,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.toggleAttribute("has-before", d), this.toggleAttribute("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 +560,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();
     });
   }
 }