@muibook/components 5.2.0 → 6.0.0

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

@@ -51,7 +51,7 @@ class p extends HTMLElement {
     if (!this.shadowRoot) return;
     const t = this.getAttribute("width") || "400px", e = this.getAttribute("variant") || "overlay", i = !!this.querySelector('[slot="before"]');
     this._computedSide = this.getAttribute("side") || (i ? "right" : "left"), this.getAttribute("side") !== this._computedSide && this.setAttribute("side", this._computedSide);
-    const a = (
+    const o = (
       /*css*/
       `
       header {
@@ -88,7 +88,7 @@ class p extends HTMLElement {
         justify-content: flex-end;
         padding: var(--space-400) var(--space-500) calc(var(--space-400) + env(safe-area-inset-bottom));
         border-top: var(--border-thin);
-        background: var(--surface-elevated-100);
+        background: var(--drawer-background);
         gap: var(--space-300);
         box-sizing: border-box;
         position: fixed;
@@ -179,11 +179,11 @@ class p extends HTMLElement {
         visibility: visible;
       }
     `
-    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", l = (
+    ), r = this._computedSide === "left" ? "border-right: var(--border-thin);" : "border-left: var(--border-thin);", d = (
       /*css*/
       `
       .inner {
-        background: var(--surface-elevated-100);
+        background: var(--drawer-background);
         width: ${t};
         position: fixed;
         top: 0;
@@ -319,12 +319,12 @@ class p extends HTMLElement {
       }
 
     `
-    ), d = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
-    let o = "";
+    ), l = this.getAttribute("side") || this._computedSide, h = e === "overlay" || e === "push";
+    let a = "";
     const c = this.hasAttribute("drawer-space") ? "no-padding" : "";
-    e === "overlay" ? o = /*html*/
+    e === "overlay" ? a = /*html*/
     `
-      <style>${a}${s}${n}</style>
+      <style>${o}${s}${n}</style>
       <div class="overlay"></div>
       <div class="inner" role="dialog" aria-modal="true">
         <header hidden>
@@ -340,20 +340,20 @@ class p extends HTMLElement {
           <slot name="actions"></slot>
         </footer>
       </div>
-    ` : (e === "push" || e === "persistent") && (o = /*html*/
+    ` : (e === "push" || e === "persistent") && (a = /*html*/
     `
-        <style>${a}${l}${n}</style>
+        <style>${o}${d}${n}</style>
         <div class="shell">
-          ${d === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
+          ${l === "left" ? this.getDrawerTemplate(h) + '<slot name="page"></slot>' : '<slot name="page"></slot>' + this.getDrawerTemplate(h)}
         </div>
-      `), this.shadowRoot.innerHTML = o;
+      `), this.shadowRoot.innerHTML = a;
   }
   cacheEls() {
     this.innerEl = this.shadowRoot.querySelector(".inner"), this.overlayEl = this.shadowRoot.querySelector(".overlay"), this.footerEl = this.shadowRoot.querySelector("footer"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]'), this.outer = this.shadowRoot.querySelector(".outer"), this.pushLayout = this.shadowRoot.querySelector(".shell"), this.persistentLayout = this.shadowRoot.querySelector(".shell"), this.headerEl = this.shadowRoot.querySelector("header"), this.headerSlot = this.shadowRoot.querySelector('slot[name="title"]');
   }
   attachEvents() {
-    var t, e, i, a;
-    (t = this.shadowRoot.querySelector(".close")) == null || t.addEventListener("click", () => this.close()), (e = this.overlayEl) == null || e.addEventListener("click", () => this.close()), (i = this.actionsSlot) == null || i.addEventListener("slotchange", () => this.updateFooterVisibility()), (a = this.headerSlot) == null || a.addEventListener("slotchange", () => this.updateHeaderVisibility());
+    var t, e, i, o;
+    (t = this.shadowRoot.querySelector(".close")) == null || t.addEventListener("click", () => this.close()), (e = this.overlayEl) == null || e.addEventListener("click", () => this.close()), (i = this.actionsSlot) == null || i.addEventListener("slotchange", () => this.updateFooterVisibility()), (o = this.headerSlot) == null || o.addEventListener("slotchange", () => this.updateHeaderVisibility());
   }
   updateFooterVisibility() {
     if (!this.footerEl || !this.actionsSlot) return;
@@ -371,17 +371,17 @@ class p extends HTMLElement {
     t === "open" && this.syncOpenState(), t === "width" && this.innerEl && (this.innerEl.style.width = i || "400px"), t === "side" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState()), t === "variant" && (this.render(), this.cacheEls(), this.attachEvents(), this.syncOpenState());
   }
   syncOpenState() {
-    const t = this.hasAttribute("open"), e = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), a = i ? Number(i) : 10, s = i ? Number(i) + 1 : 11;
-    e === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = t ? "visible" : "hidden", this.overlayEl.style.opacity = t ? "1" : "0", this.overlayEl.style.zIndex = a.toString(), this.innerEl.style.zIndex = s.toString(), this.inert = !t), e === "push" && this.outer && (this.updateLayout(e, t), this.outer.style.zIndex = s.toString(), this.outer.inert = !t), e === "persistent" && this.outer && (this.updateLayout(e, t), this.outer.inert = !1);
+    const t = this.hasAttribute("open"), e = this.getAttribute("variant") || "overlay", i = this.getAttribute("z-index"), o = i ? Number(i) : 10, s = i ? Number(i) + 1 : 11;
+    e === "overlay" && this.overlayEl && (this.overlayEl.style.visibility = t ? "visible" : "hidden", this.overlayEl.style.opacity = t ? "1" : "0", this.overlayEl.style.zIndex = o.toString(), this.innerEl.style.zIndex = s.toString(), this.inert = !t), e === "push" && this.outer && (this.updateLayout(e, t), this.outer.style.zIndex = s.toString(), this.outer.inert = !t), e === "persistent" && this.outer && (this.updateLayout(e, t), this.outer.inert = !1);
   }
   updateLayout(t, e) {
-    const i = this.getAttribute("width") || "300px", a = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
+    const i = this.getAttribute("width") || "300px", o = this.getAttribute("side") || this._computedSide, s = t === "push" ? this.pushLayout : t === "persistent" ? this.persistentLayout : null;
     if (!s) return;
     if (window.innerWidth <= this.getBreakpoint()) {
       t === "push" ? s.style.removeProperty("grid-template-columns") : t === "persistent" && (s.style.display = "grid", s.style.removeProperty("grid-template-columns"));
       return;
     }
-    s.style.display = "grid", t === "push" ? s.style.gridTemplateColumns = a === "left" ? e ? `${i} auto` : "0 auto" : e ? `auto ${i}` : "auto 0" : t === "persistent" && (s.style.gridTemplateColumns = a === "left" ? `${i} auto` : `auto ${i}`);
+    s.style.display = "grid", t === "push" ? s.style.gridTemplateColumns = o === "left" ? e ? `${i} auto` : "0 auto" : e ? `auto ${i}` : "auto 0" : t === "persistent" && (s.style.gridTemplateColumns = o === "left" ? `${i} auto` : `auto ${i}`);
   }
   open() {
     this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("mui-drawer-open", { bubbles: !0, composed: !0 }));

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

@@ -1,66 +1,78 @@
-import "../mui-icons/check/index.js";
-import "../mui-icons/warning/index.js";
-import "../mui-icons/attention/index.js";
-class r extends HTMLElement {
+class a extends HTMLElement {
   static get observedAttributes() {
-    return ["variant", "message"];
+    return ["variant", "message", "label", "hide-label"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
-    const t = this.getAttribute("variant") || "default";
-    this.setAttribute("variant", t);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+
+        mui-body { margin-top: var(--space-200); }
+        mui-body::part(display) { display: flex; }
+        mui-body::part(align-items) { align-items: center; }
+        mui-body::part(gap) { gap: var(--space-100); }
+
+        ::slotted(mui-checkbox) { padding-left: var(--space-025); }
+      </style>
+
+      <slot></slot>
+      <div class="message-container"></div>
+    `;
+  }
+  // -----------------------
+  // Property getters/setters
+  // -----------------------
+  get variant() {
+    return this.getAttribute("variant") || "default";
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get message() {
+    return this.getAttribute("message") || "";
+  }
+  set message(e) {
+    this.setAttribute("message", e);
+  }
+  get label() {
+    return this.getAttribute("label") || "";
   }
+  set label(e) {
+    this.setAttribute("label", e);
+  }
+  get hideLabel() {
+    return this.hasAttribute("hide-label");
+  }
+  set hideLabel(e) {
+    e ? this.setAttribute("hide-label", "") : this.removeAttribute("hide-label");
+  }
+  // -----------------------
+  // Lifecycle methods
+  // -----------------------
   connectedCallback() {
-    this.render(), this.passAttributesToChild();
+    this.renderMessage(), this.passAttributesToChild();
   }
-  attributeChangedCallback(t, e, i) {
-    (t === "variant" || t === "message") && (this.render(), this.passAttributesToChild());
+  attributeChangedCallback(e) {
+    ["variant", "message", "label", "hide-label"].includes(e) && (this.renderMessage(), this.passAttributesToChild());
   }
+  // -----------------------
+  // Helper methods
+  // -----------------------
   passAttributesToChild() {
-    var a;
+    var s;
     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((s) => {
-      this.hasAttribute(s) ? e.setAttribute(s, this.getAttribute(s) || "") : e.removeAttribute(s);
+    const e = this.shadowRoot.querySelector("slot"), i = (s = e == null ? void 0 : e.assignedElements) == null ? void 0 : s.call(e)[0];
+    i && ["variant", "label", "hide-label"].forEach((t) => {
+      this.hasAttribute(t) ? i.setAttribute(t, this.getAttribute(t) || "") : i.removeAttribute(t);
     });
   }
-  render() {
-    const t = this.getAttribute("message"), e = this.getAttribute("variant");
+  renderMessage() {
     if (!this.shadowRoot) return;
-    let i = "";
-    e === "success" ? i = "check" : e === "warning" ? i = "warning" : e === "error" && (i = "attention"), this.shadowRoot.innerHTML = /*html*/
-    `
-      <style>
-        :host {
-          display: block;
-        }
-
-        mui-body {
-          margin-top: var(--space-200);
-        }
-        mui-body::part(display) {
-          display: flex;
-        }
-        mui-body::part(align-items) {
-          align-items: center;
-        }
-        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}">
-          ${i ? `<mui-icon-${i}></mui-icon-${i}>` : ""}
-          ${t}
-        </mui-body>` : ""}
-    `;
+    const e = this.shadowRoot.querySelector(".message-container");
+    if (!e) return;
+    const i = this.variant, s = this.message;
+    let t = "";
+    i === "success" ? t = "<mui-icon-check></mui-icon-check>" : i === "warning" ? t = "<mui-icon-warning></mui-icon-warning>" : i === "error" && (t = "<mui-icon-attention></mui-icon-attention>"), e.innerHTML = s ? `<mui-body size="small" variant="${i}">${t}${s}</mui-body>` : "";
   }
 }
-customElements.get("mui-field") || customElements.define("mui-field", r);
+customElements.get("mui-field") || customElements.define("mui-field", a);

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

@@ -3,7 +3,10 @@ class s extends HTMLElement {
     return ["length", "weight", "direction"];
   }
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.setAttribute("role", "presentation"), this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.updateStyles();
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.setAttribute("role", "presentation"), this.updateStyles());
   }
   attributeChangedCallback() {
     this.updateStyles();

package/dist/types/components/mui-field/index.d.ts

@@ -1,3 +1 @@
-import "../mui-icons/check";
-import "../mui-icons/warning";
-import "../mui-icons/attention";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muibook/components",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "type": "module",
   "description": "A library of MUI-based design system components.",
   "author": "Michael Trilford",