@muibook/components 2.0.0 → 3.1.0

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

@@ -6,11 +6,7 @@ class c extends HTMLElement {
   }
   connectedCallback() {
     var o, r;
-    if (customElements.get("mui-icon-right-chevron") || console.warn(
-      "mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
-    ), customElements.get("mui-heading") || console.warn(
-      "[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
-    ), !this.shadowRoot) return;
+    if (!this.shadowRoot) return;
     const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", s = this.getAttribute("level") || "3", a = this.getAttribute("detail-space"), n = a ? `detail-space-${a}` : "";
     let d = (
       /*html*/
@@ -169,4 +165,4 @@ class c extends HTMLElement {
     this.setOpen(!1);
   }
 }
-customElements.define("mui-accordion-block", c);
+customElements.get("mui-accordion-block") || customElements.define("mui-accordion-block", c);

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

@@ -23,4 +23,4 @@ class e extends HTMLElement {
     }));
   }
 }
-customElements.define("mui-accordion-group", e);
+customElements.get("mui-accordion-group") || customElements.define("mui-accordion-group", e);

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

@@ -6,11 +6,7 @@ class a extends HTMLElement {
   }
   connectedCallback() {
     var o, n;
-    if (customElements.get("mui-icon-right-chevron") || console.warn(
-      "mui-accordion-block requires <mui-icon-right-chevron> to be defined. Please ensure it is imported and registered."
-    ), customElements.get("mui-heading") || console.warn(
-      "[mui-accordion-block] Warning: <mui-heading> is not registered. Please import it to ensure proper functionality."
-    ), !this.shadowRoot) return;
+    if (!this.shadowRoot) return;
     const e = this.getAttribute("heading") || "Heading...";
     let r = (
       /*html*/
@@ -93,4 +89,4 @@ class a extends HTMLElement {
     i && (e ? i.setAttribute("inert", "") : i.removeAttribute("inert"));
   }
 }
-customElements.define("mui-accordion-inline", a);
+customElements.get("mui-accordion-inline") || customElements.define("mui-accordion-inline", a);

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

@@ -43,4 +43,4 @@ class o extends HTMLElement {
     `);
   }
 }
-customElements.define("mui-addon", o);
+customElements.get("mui-addon") || customElements.define("mui-addon", o);

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

@@ -1,3 +1,8 @@
+import "../mui-body/index.js";
+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 A(n) {
   return ["positive", "info", "warning", "attention"].includes(n);
 }
@@ -37,14 +42,14 @@ class x extends HTMLElement {
       info: "--feedback-info-text",
       warning: "--feedback-warning-text",
       attention: "--feedback-attention-text"
-    }, v = {
+    }, m = {
       positive: "Success!",
       info: "Info:",
       warning: "Warning!",
       attention: "Error!"
     };
     this.setAttribute("aria-live", s[t]);
-    const r = g[t], h = u[t], m = b[t], f = v[t], w = (
+    const r = g[t], v = u[t], h = b[t], f = m[t], w = (
       /*css*/
       `
       :host {
@@ -83,7 +88,7 @@ class x extends HTMLElement {
       }
 
       .label {
-        color: var(${m}); 
+        color: var(${h}); 
         font-weight: var(--font-weight-bold);
       }
 
@@ -112,7 +117,7 @@ class x extends HTMLElement {
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>${w}</style>
-      <${r} size="small" color="var(${h})" class="icon"></${r}>
+      <${r} size="small" color="var(${v})" class="icon"></${r}>
       <mui-body>
         <span class="label">${f}</span>
         <slot></slot>
@@ -133,4 +138,4 @@ class x extends HTMLElement {
     }
   }
 }
-customElements.define("mui-alert", x);
+customElements.get("mui-alert") || customElements.define("mui-alert", x);

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

@@ -12,17 +12,17 @@ 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 = (
+    }, r = e[t], i = a[t], s = (
       /*css*/
       `
       :host {
@@ -43,4 +43,4 @@ class n extends HTMLElement {
       `);
   }
 }
-customElements.define("mui-badge", n);
+customElements.get("mui-badge") || customElements.define("mui-badge", n);

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

@@ -1,5 +1,5 @@
 import { getPartMap as i } from "../../utils/part-map/index.js";
-class o extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "weight", "variant"];
   }
@@ -9,8 +9,8 @@ class o extends HTMLElement {
   async connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.hasAttribute("weight") || this.setAttribute("weight", "regular"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), await this.waitForPartMap(), this.render();
   }
-  attributeChangedCallback(t, e, r) {
-    e !== r && this.shadowRoot && this.render();
+  attributeChangedCallback(t, e, o) {
+    e !== o && this.shadowRoot && this.render();
   }
   render() {
     if (!this.shadowRoot) return;
@@ -93,4 +93,4 @@ class o extends HTMLElement {
     });
   }
 }
-customElements.define("mui-body", o);
+customElements.get("mui-body") || customElements.define("mui-body", r);

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

@@ -313,20 +313,18 @@ class v extends HTMLElement {
       
       :host(.has-after.has-before) button {
         grid-template-columns: auto 1fr auto;
-        padding-right: var(--space-300);
-        padding-left: var(--space-300);
+        padding-right: var(--action-after-slot-padding);
+        padding-left: var(--action-before-slot-padding);
       }
 
       :host(.has-after) button {
         grid-template-columns: 1fr auto;
-        padding-right: var(--space-300);
-        padding-left: var(--space-400);
+        padding-right: var(--action-after-slot-padding);
       }
 
       :host(.has-before) button {
         grid-template-columns: auto 1fr;
-        padding-right: var(--space-400);
-        padding-left: var(--space-300);
+        padding-left: var(--action-before-slot-padding);
       }
 
     </style>
@@ -372,4 +370,4 @@ class v extends HTMLElement {
     });
   }
 }
-customElements.define("mui-button", v);
+customElements.get("mui-button") || customElements.define("mui-button", v);

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

@@ -20,4 +20,4 @@ class e extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = t);
   }
 }
-customElements.define("mui-button-group", e);
+customElements.get("mui-button-group") || customElements.define("mui-button-group", e);

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

@@ -4,7 +4,7 @@ class d extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot) return;
-    const i = (
+    const r = (
       /*html*/
       `
       <style>
@@ -12,6 +12,7 @@ class d extends HTMLElement {
           display: block;
           box-sizing: border-box;
         }
+        
         :host(.inner-space) {
           padding: var(--space-500);
         }
@@ -24,25 +25,28 @@ class d extends HTMLElement {
       <slot></slot>
     `
     );
-    this.shadowRoot.innerHTML = i, requestAnimationFrame(() => {
+    this.shadowRoot.innerHTML = r, requestAnimationFrame(() => {
       if (!this.shadowRoot) return;
-      const s = this.shadowRoot.querySelector("slot");
-      if (!s) return;
-      const r = s.assignedNodes({ flatten: !0 });
-      let o = !1;
-      r.forEach((a) => {
-        if (a.nodeType === Node.ELEMENT_NODE) {
-          const e = a, c = e.tagName.toLowerCase() === "mui-accordion-group" ? e : e.querySelector("mui-accordion-group");
-          c instanceof HTMLElement && (c.querySelectorAll("mui-accordion-block").forEach((t) => {
-            t.classList.add("card-slot");
-          }), o = !0);
-          const n = e.tagName.toLowerCase() === "mui-table" ? e : e.querySelector("mui-table");
-          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((t) => {
-            t.classList.add("card-slot");
-          }), o = !0);
+      const a = this.shadowRoot.querySelector("slot");
+      if (!a) return;
+      const l = a.assignedNodes({ flatten: !0 });
+      let s = !1;
+      l.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((e) => {
+            e.classList.add("card-slot");
+          }), s = !0), (t.tagName.toLowerCase() === "mui-slat" ? [t] : Array.from(t.querySelectorAll("mui-slat"))).forEach((o) => {
+            const e = o.getAttribute("variant");
+            (e === "action" || e === "row") && (o.classList.add("card-slot"), this.hasAttribute("condensed") && o.classList.add("condensed-slot"));
+          });
+          const n = t.tagName.toLowerCase() === "mui-table" ? t : t.querySelector("mui-table");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((e) => {
+            e.classList.add("card-slot");
+          }), s = !0);
         }
-      }), o || this.classList.add("inner-space");
+      }), !s && !this.hasAttribute("condensed") && this.classList.add("inner-space");
     });
   }
 }
-customElements.define("mui-card-body", d);
+customElements.get("mui-card-body") || customElements.define("mui-card-body", d);

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

@@ -40,4 +40,4 @@ class n extends HTMLElement {
     });
   }
 }
-customElements.define("mui-card", n);
+customElements.get("mui-card") || customElements.define("mui-card", n);

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

@@ -59,4 +59,4 @@ class d extends HTMLElement {
     });
   }
 }
-customElements.define("mui-card-footer", d);
+customElements.get("mui-card-footer") || customElements.define("mui-card-footer", d);

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

@@ -26,4 +26,4 @@ class t extends HTMLElement {
     this.shadowRoot.innerHTML = e;
   }
 }
-customElements.define("mui-card-header", t);
+customElements.get("mui-card-header") || customElements.define("mui-card-header", t);

package/dist/esm/components/mui-carousel/controller/index.js

@@ -117,4 +117,4 @@ class r extends HTMLElement {
     s !== -1 && (e.style.transform = `translateX(-${s * 100}%)`);
   }
 }
-customElements.define("mui-carousel-controller", r);
+customElements.get("mui-carousel-controller") || customElements.define("mui-carousel-controller", r);

package/dist/esm/components/mui-carousel/panel/index.js

@@ -23,7 +23,7 @@ class t extends HTMLElement {
   set item(e) {
     e !== null && this.setAttribute("item", e);
   }
-  attributeChangedCallback(e, i, o) {
+  attributeChangedCallback(e, i, l) {
   }
 }
-customElements.define("mui-carousel-panel", t);
+customElements.get("mui-carousel-panel") || customElements.define("mui-carousel-panel", t);

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

@@ -0,0 +1,186 @@
+import "../mui-body/index.js";
+class d extends HTMLElement {
+  static get observedAttributes() {
+    return ["checked", "disabled", "id", "indeterminate"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupListener();
+  }
+  attributeChangedCallback(e, o, c) {
+    var i, r, s;
+    if (e === "checked") {
+      const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+      if (!t) return;
+      t.checked = c !== null;
+    }
+    if (e === "disabled") {
+      const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("input");
+      if (!t) return;
+      t.disabled = c !== null;
+    }
+    if (e === "indeterminate") {
+      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      if (!t) return;
+      const n = c !== null;
+      t.indeterminate = n, n && (t.checked = !0, this.setAttribute("checked", ""));
+    }
+    "id".includes(e) && (this.render(), this.setupListener());
+  }
+  setupListener() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    e && (e.addEventListener("change", (c) => {
+      const i = c.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: i.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      ), i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    }), e.indeterminate = this.hasAttribute("indeterminate"), e.addEventListener("change", (c) => {
+      const i = c.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: i.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.removeAttribute("indeterminate"), i.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+    }));
+  }
+  render() {
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, o = this.hasAttribute("checked"), c = this.hasAttribute("disabled"), i = `
+      <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="none"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill="currentColor"
+          d="M12.783 3.59a1 1 0 0 1 1.414 1.414L6.791 12.41a1 1 0 0 1-1.414 0L1.803 8.837l-.069-.076A1 1 0 0 1 3.14 7.353l.077.07 2.866 2.866z"
+        ></path>
+      </svg>
+    `, r = this.hasAttribute("indeterminate"), t = r ? `
+      <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="none"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fill="currentColor"
+          d="m12.5 7 .102.005a1 1 0 0 1 0 1.99L12.5 9h-9a1 1 0 0 1 0-2z"
+        ></path>
+      </svg>
+    ` : i, n = this.innerHTML.trim().length > 0;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+        }
+
+        label {
+          display: flex;
+          align-items: start;
+          gap: var(--space-200);
+          cursor: pointer;
+        }
+
+        input[type="checkbox"] {
+          all: unset;
+          width: 19px;
+          height: 19px;
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--checkbox-radius);
+          display: inline-block;
+          vertical-align: middle;
+          cursor: pointer;
+          background: var(--checkbox-background);
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        input[type="checkbox"]:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+
+        input[type="checkbox"]:checked {
+          background-color: var(--checkbox-background-checked);
+        }
+
+        input[type="checkbox"]:indeterminate {
+          background-color: var(--checkbox-background-checked);
+        }
+
+        input[type="checkbox"]:focus {
+          outline: var(--outline-thick);
+        }
+
+        input:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .checkbox-wrapper {
+          position: relative;
+          display: flex;
+        }
+
+        .checkbox-wrapper .icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 16px;
+          height: 16px;
+          pointer-events: none;
+          display: none;
+          color: var(--checkbox-icon-color-checked);
+        }
+
+        .checkbox-wrapper input:checked + .icon {
+          display: block;
+        }
+
+        .checkbox-wrapper input:indeterminate + .icon {
+          display: block;
+        }
+
+      </style>
+
+      <label>
+        <span class="checkbox-wrapper">
+          <input 
+            type="checkbox" 
+            id="${e}" 
+            ${r ? "indeterminate" : ""}
+            ${r || o ? "checked" : ""}
+            ${c ? "disabled" : ""} 
+          />
+          ${t}
+        </span>
+        ${n ? '<mui-body size="small"><slot></slot></mui-body>' : ""}
+      </label>
+    `;
+  }
+  get checked() {
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+    return (e == null ? void 0 : e.checked) ?? !1;
+  }
+  set checked(e) {
+    e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+}
+customElements.get("mui-checkbox") || customElements.define("mui-checkbox", d);

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

@@ -1,6 +1,6 @@
-class t extends HTMLElement {
+class s extends HTMLElement {
   static get observedAttributes() {
-    return ["size"];
+    return ["size", "scrollable"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -13,11 +13,11 @@ class t extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = (
+    const e = this.hasAttribute("scrollable"), t = (
       /*css*/
       `
       :host {
-        display: block;
+        display: grid;
       }
       :host([size="x-small"]) code {
         font-size: var(--text-font-size-xs);
@@ -43,6 +43,9 @@ class t extends HTMLElement {
         background: var(--surface-elevated-200);
         padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
+        width: 100%;
+        overflow-x: ${e ? "auto" : "visible"};
+        white-space: ${e ? "nowrap" : "wrap"};
       }
 
       @media (min-width: 600px) {
@@ -55,9 +58,9 @@ class t extends HTMLElement {
     );
     this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${e}</style>
+      <style>${t}</style>
       <code><slot></slot></code>
   `;
   }
 }
-customElements.define("mui-code", t);
+customElements.get("mui-code") || customElements.define("mui-code", s);

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

@@ -54,4 +54,4 @@ class e extends HTMLElement {
     this.shadowRoot && (this.shadowRoot.innerHTML = t);
   }
 }
-customElements.define("mui-container", e);
+customElements.get("mui-container") || customElements.define("mui-container", e);

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

@@ -1,3 +1,6 @@
+import "../mui-icons/check/index.js";
+import "../mui-icons/warning/index.js";
+import "../mui-icons/attention/index.js";
 class r extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "message"];
@@ -10,7 +13,7 @@ class r extends HTMLElement {
   connectedCallback() {
     this.render(), this.passAttributesToChild();
   }
-  attributeChangedCallback(t, e, s) {
+  attributeChangedCallback(t, e, i) {
     (t === "variant" || t === "message") && (this.render(), this.passAttributesToChild());
   }
   passAttributesToChild() {
@@ -18,15 +21,15 @@ class r extends HTMLElement {
     if (!this.shadowRoot) return;
     const t = this.shadowRoot.querySelector("slot"), e = (a = t == null ? void 0 : t.assignedElements) == null ? void 0 : a.call(t)[0];
     if (!e) return;
-    ["variant", "label", "hide-label"].forEach((i) => {
-      this.hasAttribute(i) ? e.setAttribute(i, this.getAttribute(i) || "") : e.removeAttribute(i);
+    ["variant", "label", "hide-label"].forEach((s) => {
+      this.hasAttribute(s) ? e.setAttribute(s, this.getAttribute(s) || "") : e.removeAttribute(s);
     });
   }
   render() {
     const t = this.getAttribute("message"), e = this.getAttribute("variant");
     if (!this.shadowRoot) return;
-    let s = "";
-    e === "success" ? s = "check" : e === "warning" ? s = "warning" : e === "error" && (s = "attention"), this.shadowRoot.innerHTML = /*html*/
+    let i = "";
+    e === "success" ? i = "check" : e === "warning" ? i = "warning" : e === "error" && (i = "attention"), this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
@@ -45,15 +48,19 @@ class r extends HTMLElement {
         mui-body::part(gap) {
           gap: var(--space-100);
         }
+
+        ::slotted(mui-checkbox) {
+          padding-left: var(--space-025);
+        }
       </style>
 
       <slot></slot>
       ${t ? `
         <mui-body size="small" variant="${e}">
-          ${s ? `<mui-icon-${s}></mui-icon-${s}>` : ""}
+          ${i ? `<mui-icon-${i}></mui-icon-${i}>` : ""}
           ${t}
         </mui-body>` : ""}
     `;
   }
 }
-customElements.define("mui-field", r);
+customElements.get("mui-field") || customElements.define("mui-field", r);

package/dist/esm/components/mui-file-upload/index.js

@@ -1,3 +1,4 @@
+import "../mui-button/index.js";
 class r extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null, this.render(), this.cacheElements(), this.attachEvents();
@@ -23,7 +24,7 @@ class r extends HTMLElement {
           border-color: var(--form-default-border-color);
           color: var(--text-color);
           background: var(--input-background);
-          min-height: 4.2rem;
+          min-height: 4.4rem;
         }
         .wrapper:hover {
           border-color: var(--form-default-border-color-hover);
@@ -50,12 +51,12 @@ class r extends HTMLElement {
           }
         }
 
-        mui-button::part(height) {
+        mui-button {
           margin-right: 0.1rem;
         }
 
         mui-button::part(height) {
-          height: calc(4.2rem - 0.4rem);
+          height: calc(4.2rem - 0.2rem);
           padding: var(--space-400);
           padding-top: var(--space-000);
           padding-bottom: var(--space-000);
@@ -97,4 +98,4 @@ class r extends HTMLElement {
     ));
   }
 }
-customElements.define("mui-file-upload", r);
+customElements.get("mui-file-upload") || customElements.define("mui-file-upload", r);

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

@@ -39,4 +39,4 @@ class i extends HTMLElement {
     });
   }
 }
-customElements.define("mui-grid", i);
+customElements.get("mui-grid") || customElements.define("mui-grid", i);

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

@@ -32,4 +32,4 @@ class t extends HTMLElement {
     `;
   }
 }
-customElements.define("mui-heading", t);
+customElements.get("mui-heading") || customElements.define("mui-heading", t);