@muibook/components 5.2.0 → 5.2.1

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/package.json

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