@muibook/components 10.0.1 → 11.0.0

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

@@ -173,6 +173,46 @@ class h extends HTMLElement {
     :host([variant="tertiary"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
     :host([variant="tertiary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
 
+    /* Overlay
+    ========================================= */
+    :host([variant="overlay"]) button {
+      background: color-mix(in srgb, var(--action-overlay-background) 85%, transparent);
+      color: var(--action-overlay-text-color);
+      border: var(--action-overlay-border);
+      -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+      backdrop-filter: blur(var(--space-100)) saturate(120%);
+    }
+
+    :host([variant="overlay"]) button:hover {
+      background: color-mix(in srgb, var(--action-overlay-background-hover) 85%, transparent);
+      color: var(--action-overlay-text-color-hover);
+      border: var(--action-overlay-border-hover);
+      -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+      backdrop-filter: blur(var(--space-100)) saturate(120%);
+    }
+
+    :host([variant="overlay"]) button:focus-visible {
+      background: color-mix(in srgb, var(--action-overlay-background-focus) 85%, transparent);
+      color: var(--action-overlay-text-color-focus);
+      border: var(--action-overlay-border-focus);
+      -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+      backdrop-filter: blur(var(--space-100)) saturate(120%);
+    }
+
+    :host([variant="overlay"]) button:disabled {
+      background: color-mix(in srgb, var(--action-overlay-background-disabled) 85%, transparent);
+      color: var(--action-overlay-text-color-disabled);
+      border: var(--action-overlay-border-disabled);
+      -webkit-backdrop-filter: blur(var(--space-100)) saturate(120%);
+      backdrop-filter: blur(var(--space-100)) saturate(120%);
+      cursor: not-allowed;
+    }
+
+    :host([variant="overlay"]) button ::slotted(.mui-icon) { fill: var(--action-overlay-text-color); }
+    :host([variant="overlay"]) button:hover ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-hover); }
+    :host([variant="overlay"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-focus); }
+    :host([variant="overlay"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-overlay-text-color-disabled); }
+
     /* Attention
     ========================================= */
     :host([variant="attention"]) button {
@@ -360,6 +400,7 @@ class h extends HTMLElement {
       --avatar-background-override: var(--action-avatar-background);
     }
 
+    :host([size="xx-small"]) button ::slotted(mui-avatar),
     :host([size="x-small"]) button ::slotted(mui-avatar) {
       margin-right: var(--space-025);
     }
@@ -381,6 +422,31 @@ class h extends HTMLElement {
       --avatar-background-override: var(--action-avatar-background-hover);
     }
 
+    /* Badge Spacing */
+    :host([has-before]) button ::slotted(mui-badge[slot="before"]) {
+      margin-right: var(--space-025);
+    }
+
+    :host([has-after]) button ::slotted(mui-badge[slot="after"]) {
+      margin-left: var(--space-025);
+    }
+
+    :host([size="x-small"][has-before]) button ::slotted(mui-badge[slot="before"]) {
+      margin-right: var(--space-025);
+    }
+
+    :host([size="x-small"][has-after]) button ::slotted(mui-badge[slot="after"]) {
+      margin-left: var(--space-025);
+    }
+
+    :host([size="large"][has-before]) button ::slotted(mui-badge[slot="before"]) {
+      margin-right: var(--space-050);
+    }
+
+    :host([size="large"][has-after]) button ::slotted(mui-badge[slot="after"]) {
+      margin-left: var(--space-050);
+    }
+
     /* Before & After Icon
     ========================================= */
     :host([has-after]) button,
@@ -409,6 +475,18 @@ class h extends HTMLElement {
 
     /* Size Variants
     ========================================= */
+    :host([size="xx-small"]) button,
+    :host([size="xx-small"]) button:hover,
+    :host([size="xx-small"]) button:focus,
+    :host([size="xx-small"]) button:disabled {
+      font-size: var(--font-size-15);
+      line-height: var(--line-height-25);
+      font-weight: var(--font-weight-semi-bold);
+      padding: var(--space-025) var(--space-100);
+      border-width: var(--stroke-size-100);
+      border-radius: var(--action-radius-x-small);
+    }
+
     :host([size="x-small"]) button,
     :host([size="x-small"]) button:hover,
     :host([size="x-small"]) button:focus,
@@ -441,6 +519,12 @@ class h extends HTMLElement {
       border-radius: var(--action-radius-large);
     }
 
+    :host([size="xx-small"][icon-only]) button {
+      height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+      width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+      padding: var(--action-icon-only-padding);
+    }
+
     :host([size="x-small"][icon-only]) button {
       height: var(--action-icon-only-size-x-small);
       width: var(--action-icon-only-size-x-small);
@@ -462,10 +546,29 @@ class h extends HTMLElement {
 
     /* Before & After Icon
       ========================================= */
+    :host([size="xx-small"][has-after]) button,
+    :host([size="xx-small"][has-before]) button,
+    :host([size="xx-small"][has-after][has-before]) button { 
+      gap: var(--space-050);
+    }
+    
+    :host([size="xx-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="xx-small"][has-after]) button {
+      padding-right: var(--action-after-slot-padding-x-small);
+    }
+
+    :host([size="xx-small"][has-before]) button {
+      padding-left: var(--action-before-slot-padding-x-small);
+    }
+
     :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);
+      gap: var(--space-050);
     }
     
     :host([size="x-small"][has-after][has-before]) button {
@@ -484,7 +587,7 @@ class h extends HTMLElement {
     :host([size="small"][has-after]) button,
     :host([size="small"][has-before]) button,
     :host([size="small"][has-after][has-before]) button { 
-      gap: var(--space-050);
+      gap: var(--space-100);
     }
     
     :host([size="small"][has-after][has-before]) button {
@@ -537,47 +640,47 @@ class h extends HTMLElement {
     `
     );
     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 = a(t), u = a(i);
+      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 = (c) => c ? c.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, d = i(t), u = i(a);
       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");
+      v.every((c) => {
+        var n;
+        if (c.nodeType === Node.ELEMENT_NODE) {
+          const l = c;
+          return l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon");
         }
-        return l.nodeType === Node.TEXT_NODE && !((s = l.textContent) != null && s.trim());
-      }) ? (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);
+        return c.nodeType === Node.TEXT_NODE && !((n = c.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);
         }
       }));
     });
   }
-  attributeChangedCallback(r, o, n) {
+  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 !== n && this.shadowRoot && requestAnimationFrame(() => {
+    r === "size" && o !== s && this.shadowRoot && requestAnimationFrame(() => {
       const t = this.shadowRoot;
       if (!t) return;
-      const i = [
+      const a = [
         t.querySelector("slot:not([name])"),
         t.querySelector('slot[name="before"]'),
         t.querySelector('slot[name="after"]')
-      ], a = this.hasAttribute("icon-only");
-      i.forEach((d) => {
+      ], i = this.hasAttribute("icon-only");
+      a.forEach((d) => {
         if (d) {
           const u = d.assignedNodes({ flatten: !0 });
-          this.updateIconSizes(u, a), this.updateAvatarSizes(u);
+          this.updateIconSizes(u, i), this.updateAvatarSizes(u), this.updateBadgeSizes(u);
         }
       });
     });
@@ -585,6 +688,7 @@ class h extends HTMLElement {
   // Update avatar sizes based on button size
   updateAvatarSizes(r) {
     const o = this.getAttribute("size") || "medium", e = {
+      "xx-small": "x-small",
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
@@ -592,23 +696,39 @@ class h extends HTMLElement {
     }[o] || "small";
     r.forEach((t) => {
       if (t.nodeType === Node.ELEMENT_NODE) {
-        const i = t;
-        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", e);
+        const a = t;
+        a.tagName.toLowerCase() === "mui-avatar" && a.setAttribute("size", e);
       }
     });
   }
   updateIconSizes(r, o) {
-    const n = this.getAttribute("size") || "medium", t = {
+    const s = this.getAttribute("size") || "medium", t = {
+      "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
       medium: o ? "medium" : "small",
       // small for regular, medium for icon-only
       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);
+    }[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);
+      }
+    });
+  }
+  updateBadgeSizes(r) {
+    const o = this.getAttribute("size") || "medium", e = {
+      "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);
       }
     });
   }

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

@@ -1,13 +1,13 @@
 class n extends HTMLElement {
   static get observedAttributes() {
-    return ["footer"];
+    return ["footer", "borderless"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    let r = (
+    let a = (
       /*html*/
       `
     <style>
@@ -15,6 +15,11 @@ class n extends HTMLElement {
         display: block;
         border-radius: var(--card-radius);
         background: var(--surface-elevated-100);
+        border: var(--border-thin);
+        border-color: var(--border-color);
+      }
+      :host([borderless]) {
+        border: none;
       }
       ::slotted(*:last-child) {
         margin-bottom: 0;
@@ -26,17 +31,17 @@ class n extends HTMLElement {
     <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = r;
+    this.shadowRoot.innerHTML = a;
     const t = this.shadowRoot.querySelector("slot");
     t && t.addEventListener("slotchange", () => {
-      const a = t.assignedElements(), d = a.some((o) => {
+      const s = t.assignedElements(), d = s.some((r) => {
         var e;
-        return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-header";
-      }), s = a.find((o) => {
+        return ((e = r.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-header";
+      }), o = s.find((r) => {
         var e;
-        return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-body";
+        return ((e = r.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-body";
       });
-      s && (d ? s.setAttribute("inner-space-top", "") : s.removeAttribute("inner-space-top"));
+      o && (d ? o.setAttribute("inner-space-top", "") : o.removeAttribute("inner-space-top"));
     });
   }
 }

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

@@ -1,36 +1,36 @@
 import "../mui-body/index.js";
-class a extends HTMLElement {
+class p extends HTMLElement {
   static get observedAttributes() {
-    return ["checked", "disabled", "id", "indeterminate"];
+    return ["checked", "disabled", "id", "indeterminate", "size"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render(), this.setupListener();
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, t, c) {
-    var r, o, s;
+  attributeChangedCallback(e, t, s) {
+    var c, a, o;
     if (e === "checked") {
-      const i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+      const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
       if (!i) return;
-      i.checked = c !== null;
+      i.checked = s !== null;
     }
     if (e === "disabled") {
-      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
       if (!i) return;
-      i.disabled = c !== null;
+      i.disabled = s !== null;
     }
     if (e === "indeterminate") {
-      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
       if (!i) return;
-      const n = c !== null;
-      i.indeterminate = n, n && (i.checked = !0, this.setAttribute("checked", ""));
+      const r = s !== null;
+      i.indeterminate = r, r && (i.checked = !0, this.setAttribute("checked", ""));
     }
-    "id".includes(e) && (this.render(), this.setupListener());
+    ["id", "size"].includes(e) && (this.render(), this.setupListener());
   }
   cleanupListeners() {
     var t;
@@ -40,11 +40,11 @@ class a extends HTMLElement {
   setupListener() {
     var t;
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
-    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (c) => {
-      const r = c.target;
-      r.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
+    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (s) => {
+      const c = s.target;
+      c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: r.checked },
+          detail: { checked: c.checked },
           bubbles: !0,
           composed: !0
         })
@@ -52,11 +52,27 @@ class a extends HTMLElement {
     }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), c = this.hasAttribute("disabled"), r = `
-      <mui-icon-checkmark class="icon" size="x-small" color="inverted"></mui-icon-checkmark>
-    `, o = this.hasAttribute("indeterminate"), i = o ? `
-      <mui-icon-subtract class="icon" size="x-small" color="inverted"></mui-icon-subtract>
-    ` : r, n = this.innerHTML.trim().length > 0;
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), s = this.hasAttribute("disabled"), c = this.getAttribute("size") || "medium", o = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", r = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }[o] || "small", l = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "x-small",
+      large: "small"
+    }[o] || "x-small", d = (
+      /*html*/
+      `
+      <mui-icon-checkmark class="icon" size="${l}" color="inverted"></mui-icon-checkmark>
+    `
+    ), n = this.hasAttribute("indeterminate"), h = (
+      /*html*/
+      `
+      <mui-icon-subtract class="icon" size="${l}" color="inverted"></mui-icon-subtract>
+    `
+    ), u = n ? h : d, b = this.innerHTML.trim().length > 0;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -66,10 +82,16 @@ class a extends HTMLElement {
 
         label {
           display: flex;
-          align-items: start;
+          align-items: center;
           gap: var(--space-200);
           cursor: pointer;
         }
+        :host([disabled]) label {
+          cursor: not-allowed;
+        }
+        :host([disabled]) mui-body {
+          cursor: not-allowed;
+        }
 
         input[type="checkbox"] {
           all: unset;
@@ -85,6 +107,18 @@ class a extends HTMLElement {
           background-repeat: no-repeat;
           background-position: center;
         }
+        :host([size="x-small"]) input[type="checkbox"] {
+          width: calc(var(--checkbox-size) - var(--space-100));
+          height: calc(var(--checkbox-size) - var(--space-100));
+        }
+        :host([size="small"]) input[type="checkbox"] {
+          width: calc(var(--checkbox-size) - var(--space-050));
+          height: calc(var(--checkbox-size) - var(--space-050));
+        }
+        :host([size="large"]) input[type="checkbox"] {
+          width: calc(var(--checkbox-size) + var(--space-100));
+          height: calc(var(--checkbox-size) + var(--space-100));
+        }
 
         input[type="checkbox"]:hover {
           border-color: var(--form-default-border-color-hover);
@@ -99,7 +133,7 @@ class a extends HTMLElement {
         }
 
         input[type="checkbox"]:focus {
-          outline: var(--outline-thick);
+          outline: var(--outline-medium);
         }
 
         input:disabled {
@@ -137,13 +171,13 @@ class a extends HTMLElement {
           <input 
             type="checkbox" 
             id="${e}" 
-            ${o ? "indeterminate" : ""}
-            ${o || t ? "checked" : ""}
-            ${c ? "disabled" : ""} 
+            ${n ? "indeterminate" : ""}
+            ${n || t ? "checked" : ""}
+            ${s ? "disabled" : ""} 
           />
-          ${i}
+          ${u}
         </span>
-        ${n ? '<mui-body size="small"><slot></slot></mui-body>' : ""}
+        ${b ? `<mui-body size="${r}"><slot></slot></mui-body>` : ""}
       </label>
     `;
   }
@@ -156,4 +190,4 @@ class a extends HTMLElement {
     e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
   }
 }
-customElements.get("mui-checkbox") || customElements.define("mui-checkbox", a);
+customElements.get("mui-checkbox") || customElements.define("mui-checkbox", p);