@muibook/components 19.6.0 → 20.1.0

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

@@ -1,9 +1,9 @@
-class b extends HTMLElement {
+class m extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["variant", "size"];
+    return ["variant", "size", "color"];
   }
   connectedCallback() {
     this.hasAttribute("variant") || this.setAttribute("variant", "neutral"), this.hasAttribute("size") || this.setAttribute("size", "medium"), this.setAttribute("role", "status"), this.render();
@@ -12,36 +12,53 @@ class b extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("variant") || "neutral", i = this.getAttribute("size") || "medium", n = {
+    var o;
+    const e = this.getAttribute("variant") || "neutral", s = this.getAttribute("size") || "medium", r = (o = this.getAttribute("color")) == null ? void 0 : o.trim(), g = {
       neutral: "var(--badge-background-neutral)",
       positive: "var(--badge-background-positive)",
       warning: "var(--badge-background-warning)",
       attention: "var(--badge-background-attention)",
       overlay: "var(--badge-background-overlay)"
-    }, r = {
+    }, n = {
+      grey: "var(--badge-background-grey)",
+      purple: "var(--badge-background-purple)",
+      violet: "var(--badge-background-violet)",
+      pink: "var(--badge-background-pink)",
+      magenta: "var(--badge-background-magenta)",
+      red: "var(--badge-background-red)",
+      orange: "var(--badge-background-orange)",
+      amber: "var(--badge-background-amber)",
+      yellow: "var(--badge-background-yellow)",
+      lime: "var(--badge-background-lime)",
+      green: "var(--badge-background-green)",
+      teal: "var(--badge-background-teal)",
+      cyan: "var(--badge-background-cyan)",
+      blue: "var(--badge-background-blue)",
+      indigo: "var(--badge-background-indigo)"
+    }, d = {
       neutral: "var(--badge-text-color)",
       positive: "var(--badge-text-color)",
       warning: "var(--badge-text-color)",
       attention: "var(--badge-text-color)",
       overlay: "var(--badge-text-color-overlay)"
-    }, s = {
+    }, b = {
       neutral: "none",
       positive: "none",
       warning: "none",
       attention: "none",
       overlay: "var(--badge-border-overlay)"
-    }, o = {
+    }, l = {
       neutral: "off",
       positive: "polite",
       warning: "assertive",
       attention: "assertive",
       overlay: "off"
-    }, d = n[t], g = r[t], l = s[t], c = o[t], a = {
+    }, t = r, c = t && n[t] ? n[t] : r || "var(--badge-background, " + g[e] + ")", v = d[e], u = b[e], h = l[e], i = {
       "xx-small": {
-        fontSize: "var(--font-size-15)",
+        fontSize: "var(--font-size-10)",
         lineHeight: "1",
         padding: "0 var(--space-050)",
-        minHeight: "1.6rem"
+        minHeight: "1.8rem"
       },
       "x-small": {
         fontSize: "var(--font-size-15)",
@@ -65,7 +82,7 @@ class b extends HTMLElement {
         lineHeight: "1",
         padding: "var(--space-100) var(--space-300)"
       }
-    }, e = a[i] || a.medium, v = (
+    }, a = i[s] || i.medium, p = (
       /*css*/
       `
       :host {
@@ -77,14 +94,14 @@ class b extends HTMLElement {
         display: inline-flex;
         align-items: center;
         border-radius: var(--badge-radius);
-        background: ${d};
-        border: ${l};
-        font-size: ${e.fontSize};
-        line-height: ${e.lineHeight};
+        background: ${c};
+        border: ${u};
+        font-size: ${a.fontSize};
+        line-height: ${a.lineHeight};
         font-weight: var(--badge-font-weight);
-        color: ${g};
-        padding: ${e.padding};
-        min-height: ${e.minHeight || "auto"};
+        color: ${v};
+        padding: ${a.padding};
+        min-height: ${a.minHeight || "auto"};
       }
 
       :host([usage="slat-end"]) {
@@ -92,13 +109,13 @@ class b extends HTMLElement {
       }
     `
     );
-    this.setAttribute("role", "status"), this.setAttribute("aria-live", c), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    this.setAttribute("role", "status"), this.setAttribute("aria-live", h), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${v}</style>
+        <style>${p}</style>
         <span class="badge">
           <slot></slot>
         </span>
       `);
   }
 }
-customElements.get("mui-badge") || customElements.define("mui-badge", b);
+customElements.get("mui-badge") || customElements.define("mui-badge", m);

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

@@ -1,5 +1,5 @@
-import { getPartMap as r } from "../../utils/part-map/index.js";
-class l extends HTMLElement {
+import { getPartMap as l } from "../../utils/part-map/index.js";
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "weight", "variant", "truncate", "clamp"];
   }
@@ -14,7 +14,7 @@ class l extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = r("text", "spacing", "layout", "visual"), e = this.getLineClamp();
+    const t = l("text", "spacing", "layout", "visual"), e = this.getLineClamp();
     this.shadowRoot.innerHTML = /*html*/
     `
     <style>
@@ -83,6 +83,8 @@ class l extends HTMLElement {
         margin-top: var(--body-inline-icon-offset-medium, var(--body-inline-icon-offset, var(--stroke-size-200)));
       }
 
+      :host([size="xx-small"]) ::slotted([slot="before"]),
+      :host([size="xx-small"]) ::slotted([slot="after"]),
       :host([size="x-small"]) ::slotted([slot="before"]),
       :host([size="x-small"]) ::slotted([slot="after"]) {
         margin-top: var(--body-inline-icon-offset-x-small, var(--body-inline-icon-offset, var(--stroke-size-100)));
@@ -100,6 +102,11 @@ class l extends HTMLElement {
         margin-top: var(--body-inline-icon-offset-large, var(--body-inline-icon-offset, var(--stroke-size-300)));
       }
 
+      :host([size="xx-small"]) p {
+        font-size: var(--text-font-size-xxs);
+        line-height: var(--text-line-height-xxs);
+      }
+
       :host([size="x-small"]) p {
         font-size: var(--text-font-size-xs);
         line-height: var(--text-line-height-xs);
@@ -181,35 +188,37 @@ class l extends HTMLElement {
   setupSlotBehavior() {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector('slot[name="before"]'), e = this.shadowRoot.querySelector('slot[name="after"]'), i = () => {
-      const a = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], o = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
-      a.length > 0 ? this.setAttribute("has-before", "") : this.removeAttribute("has-before"), o.length > 0 ? this.setAttribute("has-after", "") : this.removeAttribute("has-after"), this.syncInlineSlotSizes([...a, ...o]);
+      const a = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], s = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
+      a.length > 0 ? this.setAttribute("has-before", "") : this.removeAttribute("has-before"), s.length > 0 ? this.setAttribute("has-after", "") : this.removeAttribute("has-after"), this.syncInlineSlotSizes([...a, ...s]);
     };
     t == null || t.addEventListener("slotchange", i), e == null || e.addEventListener("slotchange", i), i();
   }
   syncInlineSlotSizes(t) {
     const i = {
+      "xx-small": "xx-small",
       "x-small": "x-small",
       small: "small",
       medium: "small",
       large: "medium"
-    }[this.getAttribute("size") || "medium"] || "small", o = {
+    }[this.getAttribute("size") || "medium"] || "small", s = {
+      "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "x-small",
       medium: "small",
       large: "medium"
     }[this.getAttribute("size") || "medium"] || "small";
-    t.forEach((s) => {
-      s.tagName.startsWith("MUI-ICON-") && s.setAttribute("size", i), s.tagName === "MUI-BADGE" && s.setAttribute("size", o);
+    t.forEach((o) => {
+      o.tagName.startsWith("MUI-ICON-") && o.setAttribute("size", i), o.tagName === "MUI-BADGE" && o.setAttribute("size", s);
     });
   }
   waitForPartMap() {
     return new Promise((t) => {
-      if (typeof r == "function") return t();
+      if (typeof l == "function") return t();
       const e = () => {
-        typeof r == "function" ? t() : requestAnimationFrame(e);
+        typeof l == "function" ? t() : requestAnimationFrame(e);
       };
       e();
     });
   }
 }
-customElements.get("mui-body") || customElements.define("mui-body", l);
+customElements.get("mui-body") || customElements.define("mui-body", r);