@muibook/components 4.0.0 → 5.1.0

package/{readme.md → README.md}

@@ -1,3 +1,5 @@
+- See [CHANGELOG.md](./CHANGELOG.md) for details on updates.
+
 # NPM Package 📦 – @muibook/components
 
 Leverage reusable vanilla Web Components built with the Mui (MichaelUI) Design System in your project. Simply install the [@muibook/components](https://www.npmjs.com/package/@muibook/components?activeTab=readme) package to access a framework-agnostic, accessible, and customizable component library.

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

@@ -4,10 +4,14 @@ class u extends HTMLElement {
   constructor() {
     super(), this.summaryEl = null, this.detailEl = null, this.chevronEl = null, this.attachShadow({ mode: "open" }), this.accordionId = `accordion-detail-${Math.random().toString(36).substring(2, 9)}`;
   }
+  getDetailEl() {
+    var e;
+    return this.detailEl || (this.detailEl = ((e = this.shadowRoot) == null ? void 0 : e.querySelector(".accordion-detail")) || null), this.detailEl;
+  }
   connectedCallback() {
-    var s, r;
+    var r, n;
     if (!this.shadowRoot) return;
-    const i = this.getAttribute("heading") || "Heading...", e = this.getAttribute("size") || "medium", l = this.getAttribute("level") || "3", o = this.getAttribute("detail-space"), h = o ? `detail-space-${o}` : "";
+    const e = this.getAttribute("heading") || "Heading...", t = this.getAttribute("size") || "medium", i = this.getAttribute("level") || "3", s = this.getAttribute("detail-space"), h = s ? `detail-space-${s}` : "";
     let m = (
       /*html*/
       `
@@ -58,10 +62,6 @@ class u extends HTMLElement {
         box-shadow: inset 0 1px 0 0 var(--border-color);
       }
 
-      .accordion-detail[open] {
-        max-height: 200vh;
-      }
-
       .accordion-detail-inner {
         padding: var(--space-500);
       }
@@ -132,20 +132,20 @@ class u extends HTMLElement {
     </style>
 
     <div
-      class="accordion-summary size-${e}-summary"
+      class="accordion-summary size-${t}-summary"
       role="button"
       tabindex="0"
       aria-expanded="false"
       aria-controls="${this.accordionId}"
     >
-      <mui-heading size="6" level="${l}">${i}</mui-heading>
+      <mui-heading size="6" level="${i}">${e}</mui-heading>
       <div class="icon">
         <mui-icon-down-chevron size="x-small"></mui-icon-down-chevron>
       </div>
     </div>
 
     <div id="${this.accordionId}" class="accordion-detail">
-      <div class="accordion-detail-inner size-${e}-detail ${h}" inert>
+      <div class="accordion-detail-inner size-${t}-detail ${h}" inert>
         <slot name="detail">Insert Content</slot>
       </div>
     </div>
@@ -153,30 +153,36 @@ class u extends HTMLElement {
     `
     );
     if (this.shadowRoot.innerHTML = m, requestAnimationFrame(() => {
-      const t = this.shadowRoot.querySelector('slot[name="detail"]');
-      t && t.assignedElements({ flatten: !0 }).forEach((a) => {
-        var n, d;
-        (((n = a.tagName) == null ? void 0 : n.toLowerCase()) === "mui-slat-group" ? [a] : Array.from(((d = a.querySelectorAll) == null ? void 0 : d.call(a, "mui-slat-group")) || [])).forEach((c) => {
-          c.hasAttribute("usage") || c.setAttribute("usage", "accordion");
+      const a = this.shadowRoot.querySelector('slot[name="detail"]');
+      a && a.assignedElements({ flatten: !0 }).forEach((o) => {
+        var d, c;
+        (((d = o.tagName) == null ? void 0 : d.toLowerCase()) === "mui-slat-group" ? [o] : Array.from(((c = o.querySelectorAll) == null ? void 0 : c.call(o, "mui-slat-group")) || [])).forEach((l) => {
+          l.hasAttribute("usage") || l.setAttribute("usage", "accordion");
         });
       });
     }), this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-down-chevron"), !this.summaryEl || !this.detailEl || !this.chevronEl) {
       console.error("Accordion elements not found");
       return;
     }
-    (s = this.summaryEl) == null || s.addEventListener("click", () => this.toggleAccordion()), (r = this.summaryEl) == null || r.addEventListener("keydown", (t) => {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
+    (r = this.summaryEl) == null || r.addEventListener("click", () => this.toggleAccordion()), (n = this.summaryEl) == null || n.addEventListener("keydown", (a) => {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.toggleAccordion());
     });
   }
   toggleAccordion() {
-    if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
-    const i = this.detailEl.hasAttribute("open");
-    this.setOpen(!i);
+    const e = this.getDetailEl();
+    if (!e) return;
+    const i = !e.hasAttribute("open");
+    if (this.setOpen(i), i) {
+      const s = e.scrollHeight;
+      e.style.maxHeight = s + "px";
+    } else
+      e.style.maxHeight = "0";
   }
-  setOpen(i) {
-    if (!this.detailEl || !this.chevronEl || !this.summaryEl) return;
-    const e = this.detailEl.querySelector(".accordion-detail-inner");
-    i ? (this.detailEl.setAttribute("open", ""), this.chevronEl.setAttribute("open", ""), this.summaryEl.setAttribute("aria-expanded", "true"), e && e.removeAttribute("inert"), this.dispatchEvent(new CustomEvent("accordion-opened", { bubbles: !0, composed: !0 }))) : (this.detailEl.removeAttribute("open"), this.chevronEl.removeAttribute("open"), this.summaryEl.setAttribute("aria-expanded", "false"), e && e.setAttribute("inert", ""));
+  setOpen(e) {
+    const t = this.getDetailEl();
+    if (!t || !this.chevronEl || !this.summaryEl) return;
+    const i = t.querySelector(".accordion-detail-inner");
+    e ? (t.setAttribute("open", ""), this.chevronEl.setAttribute("open", ""), this.summaryEl.setAttribute("aria-expanded", "true"), i && i.removeAttribute("inert"), this.dispatchEvent(new CustomEvent("accordion-opened", { bubbles: !0, composed: !0 }))) : (t.removeAttribute("open"), this.chevronEl.removeAttribute("open"), this.summaryEl.setAttribute("aria-expanded", "false"), i && i.setAttribute("inert", ""), t.style.maxHeight = "0");
   }
   closeAccordion() {
     this.setOpen(!1);

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class c extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -8,16 +8,16 @@ class l extends HTMLElement {
   get open() {
     return this.hasAttribute("open");
   }
-  set open(t) {
-    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  set open(e) {
+    e ? this.setAttribute("open", "") : this.removeAttribute("open");
   }
   connectedCallback() {
-    var r, n;
+    var n, a;
     if (!this.shadowRoot) return;
-    const t = this.querySelector('[slot="summary"]'), s = this.querySelector('[slot="detail"]');
-    if (!t || !s) return;
-    this.iconToggleEl = t.querySelector("mui-icon-toggle");
-    const i = `
+    const e = this.querySelector('[slot="summary"]'), i = this.querySelector('[slot="detail"]');
+    if (!e || !i) return;
+    this.iconToggleEl = e.querySelector("mui-icon-toggle");
+    const s = `
       :host {
         display: block;
       }
@@ -34,42 +34,51 @@ class l extends HTMLElement {
       .accordion-detail {
         max-height: 0;
         overflow: hidden;
-        transition: max-height 0.3s ease;
-      }
-      .accordion-detail[open] {
-        max-height: 200vh;
+        transition: max-height var(--speed-300) ease;
       }
     `;
-    if (this.shadowRoot.innerHTML = /* html */
+    this.shadowRoot.innerHTML = /* html */
     `
-      <style>${i}</style>
+      <style>${s}</style>
       <div class="accordion-summary" tabindex="0" role="button" aria-expanded="false">
         <slot name="summary"></slot>
       </div>
       <div class="accordion-detail" role="region" aria-hidden="true">
         <slot name="detail"></slot>
       </div>
-    `, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.iconToggleEl = t.querySelector("mui-icon-toggle"), !this.iconToggleEl) {
-      const e = t.querySelector("mui-icon-right-chevron"), o = t.querySelector("mui-icon-down-chevron");
-      e ? (this.chevronEl = e, e.setAttribute("data-icon-animation", "accordion-inline")) : o && (this.chevronEl = o, o.setAttribute("data-icon-animation", "accordion-block"));
+    `, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail");
+    const r = this.shadowRoot.querySelector('slot[name="detail"]'), l = () => {
+      this.open && this.detailEl && (this.detailEl.style.maxHeight = this.detailEl.scrollHeight + "px");
+    };
+    if (Array.from(r.assignedElements({ flatten: !1 })).forEach((t) => {
+      new ResizeObserver(l).observe(t);
+    }), r.addEventListener("slotchange", () => {
+      Array.from(r.assignedElements({ flatten: !1 })).forEach((t) => {
+        new ResizeObserver(l).observe(t);
+      }), l();
+    }), this.iconToggleEl = e.querySelector("mui-icon-toggle"), !this.iconToggleEl) {
+      const t = e.querySelector("mui-icon-right-chevron"), o = e.querySelector("mui-icon-down-chevron");
+      t ? (this.chevronEl = t, t.setAttribute("data-icon-animation", "accordion-inline")) : o && (this.chevronEl = o, o.setAttribute("data-icon-animation", "accordion-block"));
     }
-    (r = this.summaryEl) == null || r.addEventListener("click", () => this.toggleAccordion()), (n = this.summaryEl) == null || n.addEventListener("keydown", (e) => {
-      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toggleAccordion());
+    (n = this.summaryEl) == null || n.addEventListener("click", () => this.toggleAccordion()), (a = this.summaryEl) == null || a.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
     }), this.hasAttribute("open") && this.openAccordion();
   }
-  attributeChangedCallback(t, s, i) {
-    t === "open" && this.detailEl && this.summaryEl && (i !== null ? this.openAccordion() : this.closeAccordion());
+  attributeChangedCallback(e, i, s) {
+    e === "open" && this.detailEl && this.summaryEl && (s !== null ? this.openAccordion() : this.closeAccordion());
   }
   toggleAccordion() {
     this.open = !this.open;
   }
   openAccordion() {
-    var t;
-    !this.detailEl || !this.summaryEl || (this.detailEl.setAttribute("open", ""), this.detailEl.setAttribute("aria-hidden", "false"), this.summaryEl.setAttribute("aria-expanded", "true"), (t = this.chevronEl) == null || t.setAttribute("open", ""), this.iconToggleEl && (this.iconToggleEl.toggle = !0, this.iconToggleEl.setAttribute("aria-pressed", "true")));
+    var i;
+    if (!this.detailEl || !this.summaryEl) return;
+    const e = this.detailEl.scrollHeight;
+    this.detailEl.style.maxHeight = e + "px", this.detailEl.setAttribute("open", ""), this.detailEl.setAttribute("aria-hidden", "false"), this.summaryEl.setAttribute("aria-expanded", "true"), (i = this.chevronEl) == null || i.setAttribute("open", ""), this.iconToggleEl && (this.iconToggleEl.toggle = !0, this.iconToggleEl.setAttribute("aria-pressed", "true"));
   }
   closeAccordion() {
-    var t;
-    !this.detailEl || !this.summaryEl || (this.detailEl.removeAttribute("open"), this.detailEl.setAttribute("aria-hidden", "true"), this.summaryEl.setAttribute("aria-expanded", "false"), (t = this.chevronEl) == null || t.removeAttribute("open"), this.iconToggleEl && (this.iconToggleEl.toggle = !1, this.iconToggleEl.setAttribute("aria-pressed", "false")));
+    var e;
+    !this.detailEl || !this.summaryEl || (this.detailEl.style.maxHeight = "0", this.detailEl.removeAttribute("open"), this.detailEl.setAttribute("aria-hidden", "true"), this.summaryEl.setAttribute("aria-expanded", "false"), (e = this.chevronEl) == null || e.removeAttribute("open"), this.iconToggleEl && (this.iconToggleEl.toggle = !1, this.iconToggleEl.setAttribute("aria-pressed", "false")));
   }
 }
-customElements.get("mui-accordion-core") || customElements.define("mui-accordion-core", l);
+customElements.get("mui-accordion-core") || customElements.define("mui-accordion-core", c);

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

@@ -1,4 +1,4 @@
-class e extends HTMLElement {
+class c extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.accordions = [];
   }
@@ -13,14 +13,14 @@ class e extends HTMLElement {
         (t) => t.tagName === "MUI-ACCORDION-BLOCK" && typeof t.closeAccordion == "function"
       ), this.accordions.forEach((t) => {
         t.removeAttribute("first-child"), t.removeAttribute("last-child");
-      }), this.accordions.length > 0 && (this.accordions[0].setAttribute("first-child", ""), this.accordions[this.accordions.length - 1].setAttribute("last-child", "")), this.accordions.forEach((t) => {
-        t.addEventListener("accordion-opened", () => {
-          this.hasAttribute("exclusive") && this.accordions.forEach((s) => {
-            s !== t && s.closeAccordion();
-          });
+      }), this.accordions.length > 0 && (this.accordions[0].setAttribute("first-child", ""), this.accordions[this.accordions.length - 1].setAttribute("last-child", "")), this.addEventListener("accordion-opened", (t) => {
+        if (!this.hasAttribute("exclusive")) return;
+        const e = t.composedPath()[0];
+        this.accordions.forEach((s) => {
+          s !== e && s.closeAccordion();
         });
       });
     }));
   }
 }
-customElements.get("mui-accordion-group") || customElements.define("mui-accordion-group", e);
+customElements.get("mui-accordion-group") || customElements.define("mui-accordion-group", c);

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

@@ -5,10 +5,10 @@ class a extends HTMLElement {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    var o, n;
+    var n, r;
     if (!this.shadowRoot) return;
     const e = this.getAttribute("heading") || "Heading...";
-    let r = (
+    let t = (
       /*html*/
       `
     <style>
@@ -51,7 +51,6 @@ class a extends HTMLElement {
       }
 
       .accordion-detail[open] {
-        max-height: 200vh;
         transition: max-height var(--speed-400) ease-in-out;
       }
 
@@ -77,8 +76,8 @@ class a extends HTMLElement {
     </div>
     `
     );
-    this.shadowRoot.innerHTML = r, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-right-chevron"), (o = this.summaryEl) == null || o.addEventListener("click", this.toggleAccordion.bind(this)), (n = this.summaryEl) == null || n.addEventListener("keydown", (t) => {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleAccordion());
+    this.shadowRoot.innerHTML = t, this.summaryEl = this.shadowRoot.querySelector(".accordion-summary"), this.detailEl = this.shadowRoot.querySelector(".accordion-detail"), this.chevronEl = this.shadowRoot.querySelector("mui-icon-right-chevron"), (n = this.summaryEl) == null || n.addEventListener("click", this.toggleAccordion.bind(this)), (r = this.summaryEl) == null || r.addEventListener("keydown", (o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this.toggleAccordion());
     });
   }
   toggleAccordion() {
@@ -86,7 +85,14 @@ class a extends HTMLElement {
     const e = this.detailEl.hasAttribute("open");
     this.detailEl.toggleAttribute("open"), this.chevronEl.toggleAttribute("open"), this.summaryEl.setAttribute("aria-expanded", String(!e));
     const i = this.detailEl.querySelector(".accordion-detail-inner");
-    i && (e ? i.setAttribute("inert", "") : i.removeAttribute("inert"));
+    if (i)
+      if (e)
+        i.setAttribute("inert", ""), this.detailEl.style.maxHeight = "0";
+      else {
+        i.removeAttribute("inert");
+        const t = this.detailEl.scrollHeight;
+        this.detailEl.style.maxHeight = t + "px";
+      }
   }
 }
 customElements.get("mui-accordion-inline") || customElements.define("mui-accordion-inline", a);

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

@@ -47,16 +47,20 @@ class v extends HTMLElement {
     button:hover {
       background: var(--action-primary-background-hover);
       color: var(--action-primary-text-color-hover);
+      border: var(--action-primary-border-hover);
     }
 
     button:focus-visible {
       background: var(--action-primary-background-focus);
       color: var(--action-primary-text-color-focus);
+      border: var(--action-primary-border-focus);
     }
 
     button:disabled {
       background: var(--action-primary-background-disabled);
       color: var(--action-primary-text-color-disabled);
+      border: var(--action-primary-border-disabled);
+      cursor: not-allowed;
     }
 
     button, button:before, button:after {box-sizing: border-box;}
@@ -65,6 +69,12 @@ class v extends HTMLElement {
       outline: var(--outline-thick);
     }
 
+    :host button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+    :host button:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+    :host button:focus-visible ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+    :host button:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+
     /* Primary 
     ========================================= */
     :host([variant="primary"]) button {
@@ -92,10 +102,10 @@ class v extends HTMLElement {
       cursor: not-allowed;
     }
 
-    :host([variant="primary"]) ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
-    :host([variant="primary"]):hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
-    :host([variant="primary"]):focus-visible ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
-    :host([variant="primary"]):disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+    :host([variant="primary"]) button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+    :host([variant="primary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+    :host([variant="primary"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+    :host([variant="primary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
 
     /* Secondary
     ========================================= */
@@ -125,10 +135,10 @@ class v extends HTMLElement {
       cursor: not-allowed;
     }
 
-    :host([variant="secondary"]) ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
-    :host([variant="secondary"]):hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
-    :host([variant="secondary"]):focus-visible ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
-    :host([variant="secondary"]):disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+    :host([variant="secondary"]) button ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+    :host([variant="secondary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+    :host([variant="secondary"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+    :host([variant="secondary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
 
     /* Tertiary
     ========================================= */
@@ -158,10 +168,10 @@ class v extends HTMLElement {
       cursor: not-allowed;
     }
 
-    :host([variant="tertiary"]) ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
-    :host([variant="tertiary"]):hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
-    :host([variant="tertiary"]):focus-visible ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
-    :host([variant="tertiary"]):disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+    :host([variant="tertiary"]) button ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+    :host([variant="tertiary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+    :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); }
 
     /* Attention
     ========================================= */
@@ -190,10 +200,10 @@ class v extends HTMLElement {
       cursor: not-allowed;
     }
 
-    :host([variant="attention"]) ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
-    :host([variant="attention"]):hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
-    :host([variant="attention"]):focus-visible ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
-    :host([variant="attention"]):disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+    :host([variant="attention"]) button ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+    :host([variant="attention"]) button:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+    :host([variant="attention"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
+    :host([variant="attention"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
 
     /* Icon only
     ========================================= */
@@ -300,6 +310,26 @@ class v extends HTMLElement {
         fill: var(--alert-icon);
       }
 
+      /* Dropdown Slot */
+      :host(.dropdown-slot) button {
+        border-radius: var(--radius-000);
+      }
+
+      :host(.dropdown-slot) button:hover,
+      :host(.dropdown-slot) button:focus {
+        background: var(--dropdown-button-background-hover);
+      }
+
+      :host(.dropdown-slot-first) button {
+        border-top-left-radius: calc(var(--radius-100) / 2);
+        border-top-right-radius: calc(var(--radius-100) / 2);
+      }
+
+      :host(.dropdown-slot-last) button  {
+        border-bottom-left-radius: calc(var(--radius-100) / 2);
+        border-bottom-right-radius: calc(var(--radius-100) / 2);
+      }
+
 
       /* Before & After Icon
       ========================================= */
@@ -346,11 +376,11 @@ class v extends HTMLElement {
     this.shadowRoot.innerHTML = a, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
       const e = this.shadowRoot;
       if (!e) return;
-      const n = e.querySelector("slot:not([name])"), l = e.querySelector('slot[name="before"]'), d = e.querySelector('slot[name="after"]'), s = (t) => t ? t.assignedNodes({ flatten: !0 }).some((o) => {
+      const i = e.querySelector("slot:not([name])"), d = e.querySelector('slot[name="before"]'), l = e.querySelector('slot[name="after"]'), s = (t) => t ? t.assignedNodes({ flatten: !0 }).some((o) => {
         var r;
         return o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && !!((r = o.textContent) != null && r.trim());
-      }) : !1, b = s(l), u = s(d);
-      this.classList.toggle("has-before", b), this.classList.toggle("has-after", u), ((n == null ? void 0 : n.assignedNodes({ flatten: !0 })) ?? []).every((t) => {
+      }) : !1, b = s(d), u = s(l);
+      this.classList.toggle("has-before", b), this.classList.toggle("has-after", u), ((i == null ? void 0 : i.assignedNodes({ flatten: !0 })) ?? []).every((t) => {
         var o;
         if (t.nodeType === Node.ELEMENT_NODE) {
           const r = t;
@@ -361,10 +391,10 @@ class v extends HTMLElement {
     });
   }
   waitForPartMap() {
-    return new Promise((i) => {
-      if (typeof c == "function") return i();
+    return new Promise((n) => {
+      if (typeof c == "function") return n();
       const a = () => {
-        typeof c == "function" ? i() : requestAnimationFrame(a);
+        typeof c == "function" ? n() : requestAnimationFrame(a);
       };
       a();
     });

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

@@ -0,0 +1,103 @@
+import "../mui-icons/close/index.js";
+import "../mui-button/index.js";
+class l extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "width"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    var a;
+    if (!this.shadowRoot) return;
+    const s = (
+      /*css*/
+      `
+      dialog {
+        border: none;
+        width: ${this.getAttribute("width") || "350px"};
+        max-width: 90vw;
+        padding: 0;
+        overflow: hidden;
+        border-radius: var(--dialog-radius);
+        background: var(--surface-elevated-100);
+      }
+
+      dialog,
+      dialog:focus,
+      dialog:focus-visible {
+       outline: none;
+      }
+
+      dialog::backdrop {
+        background: var(--backdrop-overlay);
+      }
+
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--space-400) var(--space-400) var(--space-400) var(--space-500);
+        border-bottom: var(--border-thin);
+      }
+
+      main {
+        max-height: 60vh;
+        overflow-y: auto;
+        padding: var(--space-500);
+      }
+
+      footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: var(--space-400) var(--space-500);
+        border-top: var(--border-thin);
+        gap: var(--space-300);
+      }
+
+      footer[hidden] {
+        display: none !important;
+      }
+    `
+    );
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${s}</style>
+      <dialog>
+        <header>
+          <slot name="title"></slot>
+          <mui-button class="close" aria-label="Close" variant="tertiary"><mui-icon-close></mui-icon-close></mui-button>
+        </header>
+        <main>
+          <slot></slot>
+        </main>
+        <footer hidden>
+          <slot name="actions"></slot>
+        </footer>
+      </dialog>
+    `, this.dialogEl = this.shadowRoot.querySelector("dialog"), this.footerEl = this.shadowRoot.querySelector("footer"), this.actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
+    const e = this.shadowRoot.querySelector(".close");
+    e == null || e.addEventListener("click", () => this.close()), this.dialogEl.addEventListener("click", (i) => {
+      const o = this.dialogEl.getBoundingClientRect();
+      i.clientX >= o.left && i.clientX <= o.right && i.clientY >= o.top && i.clientY <= o.bottom || this.close();
+    }), (a = this.actionsSlot) == null || a.addEventListener("slotchange", () => this.updateFooterVisibility()), this.updateFooterVisibility(), this.syncOpenState();
+  }
+  updateFooterVisibility() {
+    if (!this.footerEl || !this.actionsSlot) return;
+    const t = this.actionsSlot.assignedElements().length > 0;
+    this.footerEl.hidden = !t;
+  }
+  attributeChangedCallback(t, s, e) {
+    t === "open" && this.syncOpenState(), t === "width" && this.dialogEl && (this.dialogEl.style.width = e || "350px");
+  }
+  syncOpenState() {
+    this.dialogEl && (this.hasAttribute("open") ? this.dialogEl.open || this.dialogEl.showModal() : this.dialogEl.open && this.dialogEl.close());
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+}
+customElements.get("mui-dialog") || customElements.define("mui-dialog", l);