@muibook/components 18.0.1 → 18.1.0

package/README.md

@@ -2,6 +2,8 @@
 
 # NPM Package 📦 – @muibook/components
 
+[![Sponsor](https://img.shields.io/badge/Sponsor-GitHub-ff69b4?logo=githubsponsors)](https://github.com/sponsors/michaeltrilford)
+
 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.
 
 ## Usage Policy (Summary)

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

@@ -381,11 +381,6 @@ class h extends HTMLElement {
       border-radius: var(--radius-000);
     }
 
-    :host([dropdown-slot]) button:hover,
-    :host([dropdown-slot]) button:focus {
-      background: var(--dropdown-button-background-hover);
-    }
-
     :host([size][dropdown-slot-first]) button {
       border-top-left-radius: calc(var(--radius-100) / 2);
       border-top-right-radius: calc(var(--radius-100) / 2);

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

@@ -1,4 +1,4 @@
-const s = class s extends HTMLElement {
+const o = class o extends HTMLElement {
   constructor() {
     super(), this.button = null, this.menu = null, this.handleResize = () => {
       var t;
@@ -8,13 +8,13 @@ const s = class s extends HTMLElement {
       (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
     }, this.handleFocusOut = (t) => {
       var e;
-      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
     }, this.attachShadow({ mode: "open" });
   }
   handleKeyDown(t) {
     if (t.key === "Escape") {
       if (!this.menu) return;
-      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(
+      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -43,14 +43,14 @@ const s = class s extends HTMLElement {
     const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
     if (d) {
       const u = () => {
-        const c = d.assignedElements({ flatten: !0 });
-        c.forEach((o) => {
-          o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
-        }), c.forEach((o, w) => {
-          o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
-            var f, p;
-            this.persistent || ((f = this.menu) == null || f.classList.remove("show"), (p = this.menu) == null || p.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), o._dropdownListenerAdded = !0);
+        const c = d.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "mui-button");
+        c.forEach((s) => {
+          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
+        }), c.forEach((s, w) => {
+          s.setAttribute("dropdown-slot", ""), w === 0 && s.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
+            var p, f;
+            this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+          }), s._dropdownListenerAdded = !0);
         });
       };
       d.addEventListener("slotchange", u), u();
@@ -71,23 +71,23 @@ const s = class s extends HTMLElement {
     var n;
     if (t.stopPropagation(), !this.menu) return;
     const e = this.menu.classList.contains("show");
-    !e && s.openDropdown && s.openDropdown !== this && s.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
+    !e && o.openDropdown && o.openDropdown !== this && o.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
       var d, i;
       (d = this.menu) == null || d.classList.add("show"), (i = this.menu) == null || i.removeAttribute("inert"), this.adjustPosition();
-    }), s.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    }), o.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
   }
   closeMenu(t) {
     var n;
     const e = t.composedPath();
-    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    this.menu && e.includes(this.menu) || this.button && e.includes(this.button) || (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), o.openDropdown === this && (o.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
   }
   adjustPosition() {
     if (!this.menu) return;
     const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, c = (this.getAttribute("vertical-position") || "auto").toLowerCase(), o = u - r.bottom, w = r.top, f = a + i, p = o >= f, g = w >= f;
+    const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, s = r.top, w = a + i, p = c >= w, f = s >= w;
     let b = r.height + i;
-    c === "up" ? b = g || !p ? -(a + i) : r.height + i : c === "down" ? b = p || !g ? r.height + i : -(a + i) : !p && w > o && (b = -(a + i));
+    v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && s > c && (b = -(a + i));
     let m = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
@@ -168,6 +168,6 @@ const s = class s extends HTMLElement {
     `;
   }
 };
-s.openDropdown = null;
-let v = s;
-customElements.get("mui-dropdown") || customElements.define("mui-dropdown", v);
+o.openDropdown = null;
+let g = o;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);

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

@@ -794,9 +794,9 @@ class S extends HTMLElement {
         .surface::before {
           content: "";
           position: absolute;
-          inset: var(--stroke-size-200);
+          inset: 0;
           pointer-events: none;
-          border-radius: calc(var(--radius-300) - var(--stroke-size-200));
+          border-radius: var(--radius-300);
           z-index: 1;
           opacity: 1;
           background: var(--surface-elevated-100);
@@ -839,7 +839,7 @@ class S extends HTMLElement {
           transition: opacity var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1), filter var(--speed-200) ease;
         }
         .surface:hover {
-          overflow: hidden;
+          overflow: visible;
           background: var(--surface-elevated-100);
           animation: promptBorderHoverPulse var(--prompt-hover-border-pulse-speed, var(--speed-500)) ease-in-out infinite;
         }
@@ -873,9 +873,7 @@ class S extends HTMLElement {
             var(--surface-elevated-100);
           mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
           filter: none;
-          animation:
-            promptMeshHoverPulse var(--prompt-hover-sweep-speed, var(--speed-500)) ease-in-out infinite alternate,
-            promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
+          animation: promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
         }
         .surface:hover::after {
           opacity: 0;
@@ -1246,7 +1244,7 @@ class S extends HTMLElement {
         }
         .actions-slot {
           position: absolute;
-          z-index: 2;
+          z-index: 4;
           bottom: var(--space-300);
           display: inline-flex;
           align-items: center;

package/dist/esm/components/mui-slide-frame/index.js

@@ -453,7 +453,7 @@ class E extends HTMLElement {
                     id="slideFrameRatioSelect"
                     size="x-small"
                     style="width: 7rem; margin-right: var(--space-025)"
-                    options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"1:1","value":"1:1"}]'
+                    options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"3:2","value":"3:2"},{"label":"1:1","value":"1:1"},{"label":"9:16","value":"9:16"}]'
                     value="${this.getAttribute("ratio") || "16:9"}"
                     aria-label="Slide ratio">
                   </mui-select>

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Sat, 28 Feb 2026 10:18:48 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Thu, 19 Mar 2026 13:05:27 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */