@muibook/components 9.1.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-button/index.js

@@ -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);
     }
 
@@ -544,7 +543,7 @@ class h extends HTMLElement {
         var c;
         return s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && !!((c = s.textContent) != null && c.trim());
       }) : !1, d = a(t), u = a(i);
-      this.classList.toggle("has-before", d), this.classList.toggle("has-after", u);
+      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;

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   static get observedAttributes() {
     return ["condensed"];
   }
@@ -8,41 +8,41 @@ class l extends HTMLElement {
   connectedCallback() {
     this.render();
   }
-  attributeChangedCallback(o, r, a) {
-    o === "condensed" && this.updateSlottedContent();
+  attributeChangedCallback(s, a, r) {
+    s === "condensed" && this.updateSlottedContent();
   }
   updateSlottedContent() {
     requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
-      const o = this.shadowRoot.querySelector("slot");
-      if (!o) return;
-      const r = o.assignedNodes({ flatten: !0 });
-      this.classList.remove("inner-space", "has-card-slat-group", "has-accordion-slat-group");
-      let a = !1;
-      r.forEach((c) => {
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const t = c, i = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
-          i instanceof HTMLElement && (i.querySelectorAll("mui-accordion-block").forEach((s) => {
-            s.classList.add("card-slot");
-          }), a = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
-            const s = e.getAttribute("variant");
-            (s === "action" || s === "row") && (e.classList.add("card-slot"), this.hasAttribute("condensed") ? e.classList.add("condensed-slot") : e.classList.remove("condensed-slot"));
+      const s = this.shadowRoot.querySelector("slot");
+      if (!s) return;
+      const a = s.assignedNodes({ flatten: !0 });
+      this.removeAttribute("inner-space"), this.removeAttribute("has-card-slat-group"), this.removeAttribute("has-accordion-slat-group");
+      let r = !1;
+      a.forEach((i) => {
+        if (i.nodeType === Node.ELEMENT_NODE) {
+          const t = i, n = t.tagName.toLowerCase() === "mui-accordion-group" ? t : t.querySelector("mui-accordion-group");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-accordion-block").forEach((o) => {
+            o.setAttribute("card-slot", "");
+          }), r = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((e) => {
+            const o = e.getAttribute("variant");
+            (o === "action" || o === "row") && (e.setAttribute("card-slot", ""), this.hasAttribute("condensed") ? e.setAttribute("condensed-slot", "") : e.removeAttribute("condensed-slot"));
           });
-          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((s) => {
-            s.classList.add("card-slot");
-          }), a = !0);
-          const d = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
-          d.length && (a = !0, d.forEach((e) => {
-            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.classList.add("has-accordion-slat-group") : this.classList.add("inner-space", "has-card-slat-group");
+          const c = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          c instanceof HTMLElement && (c.querySelectorAll("mui-cell").forEach((o) => {
+            o.setAttribute("card-slot", "");
+          }), r = !0);
+          const l = t.tagName.toLowerCase() === "mui-slat-group" ? [t] : Array.from(t.querySelectorAll("mui-slat-group"));
+          l.length && (r = !0, l.forEach((e) => {
+            e.setAttribute("usage", "card"), e.closest("mui-accordion-block") ? this.setAttribute("has-accordion-slat-group", "") : (this.setAttribute("inner-space", ""), this.setAttribute("has-card-slat-group", ""));
           }));
         }
-      }), !a && !this.hasAttribute("condensed") && this.classList.add("inner-space");
+      }), !r && !this.hasAttribute("condensed") && this.setAttribute("inner-space", "");
     });
   }
   render() {
     if (!this.shadowRoot) return;
-    const o = (
+    const s = (
       /*html*/
       `
       <style>
@@ -51,20 +51,20 @@ class l extends HTMLElement {
           box-sizing: border-box;
         }
         
-        :host(.inner-space) {
+        :host([inner-space]) {
           padding: var(--space-500);
         }
         @media (min-width: 768px) {
-          :host(.inner-space) {
+          :host([inner-space]) {
             padding: var(--space-600);
           }
         }
 
-        :host(.has-card-slat-group) {
+        :host([has-card-slat-group]) {
           padding-bottom: var(--space-200);
         }
         @media (min-width: 768px) {
-        :host(.has-card-slat-group) {
+        :host([has-card-slat-group]) {
           padding-bottom: var(--space-500);
         }
         }
@@ -73,7 +73,7 @@ class l extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = o, this.updateSlottedContent();
+    this.shadowRoot.innerHTML = s, this.updateSlottedContent();
   }
 }
-customElements.get("mui-card-body") || customElements.define("mui-card-body", l);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", d);

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

@@ -7,7 +7,7 @@ class n extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    let d = (
+    let r = (
       /*html*/
       `
     <style>
@@ -19,24 +19,24 @@ class n extends HTMLElement {
       ::slotted(*:last-child) {
         margin-bottom: 0;
       }
-      ::slotted(.inner-space-top) {
-      padding-top: 0;
+      ::slotted([inner-space-top]) {
+        padding-top: 0;
       }
     </style>
     <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = d;
+    this.shadowRoot.innerHTML = r;
     const t = this.shadowRoot.querySelector("slot");
     t && t.addEventListener("slotchange", () => {
-      const a = t.assignedElements(), r = a.some((o) => {
+      const a = t.assignedElements(), d = a.some((o) => {
         var e;
         return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-header";
       }), s = a.find((o) => {
         var e;
         return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-body";
       });
-      s && (r ? s.classList.add("inner-space-top") : s.classList.remove("inner-space-top"));
+      s && (d ? s.setAttribute("inner-space-top", "") : s.removeAttribute("inner-space-top"));
     });
   }
 }