@muibook/components 20.0.0 → 20.1.0

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

@@ -1,23 +1,34 @@
-const i = class i extends HTMLElement {
+const r = class r extends HTMLElement {
   constructor() {
-    super(), this.button = null, this.menu = null, this.handleResize = () => {
+    super(), this.button = null, this.menu = null, this.portalMenu = null, this.portalInner = null, this.portaledItems = [], this.originalNextSibling = /* @__PURE__ */ new Map(), this.positionFrameId = null, this.positionTimeoutIds = [], this.menuResizeObserver = null, this.handleResize = () => {
       var t;
-      (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
+      (t = this.activeMenu) != null && t.classList.contains("show") && this.closeMenu();
     }, this.handleScroll = () => {
       var t;
-      (t = this.menu) != null && t.classList.contains("show") && this.adjustPosition();
+      (t = this.activeMenu) != null && t.classList.contains("show") && this.adjustPosition();
     }, this.handleFocusOut = (t) => {
-      var e, n;
-      this.persistent || this.contains(t.relatedTarget) || (this.closeWithAnimation(), (e = this.menu) == null || e.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), (n = this.button) == null || n.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+      var e, n, o;
+      if (this.persistent) return;
+      const i = t.relatedTarget;
+      !this.contains(i) && !((e = this.portalMenu) != null && e.contains(i)) && (this.closeWithAnimation(), (n = this.activeMenu) == null || n.setAttribute("inert", "true"), r.openDropdown === this && (r.openDropdown = null), (o = this.button) == null || o.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
     }, this.handleActionKeyDown = (t) => {
+      var i;
+      if (t.key === "Tab" && !t.shiftKey && ((i = this.activeMenu) != null && i.classList.contains("show"))) {
+        t.preventDefault(), this.focusFirstItem();
+        return;
+      }
       t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.toggleMenu(t));
     }, this.attachShadow({ mode: "open" });
   }
+  get activeMenu() {
+    return this.portalMenu || this.menu;
+  }
   handleKeyDown(t) {
-    var e;
+    var i, e;
     if (t.key === "Escape") {
-      if (!this.menu) return;
-      this.menu.classList.remove("show"), this.menu.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), (e = this.button) == null || e.setAttribute("aria-expanded", "false"), this.dispatchEvent(
+      const n = this.activeMenu;
+      if (!n || !n.classList.contains("show")) return;
+      n.classList.remove("show"), n.setAttribute("inert", "true"), this.restorePortalItems(), r.openDropdown === this && (r.openDropdown = null), (i = this.button) == null || i.setAttribute("aria-expanded", "false"), (e = this.button) == null || e.focus(), this.dispatchEvent(
         new CustomEvent("dropdown-toggle", {
           detail: { open: !1 },
           bubbles: !0
@@ -25,93 +36,267 @@ const i = class i extends HTMLElement {
       );
     }
   }
+  close() {
+    var i, e;
+    const t = this.activeMenu;
+    !t || !t.classList.contains("show") || (t.classList.remove("show"), t.setAttribute("inert", "true"), this.restorePortalItems(), r.openDropdown === this && (r.openDropdown = null), (i = this.button) == null || i.setAttribute("aria-expanded", "false"), (e = this.button) == null || e.focus(), this.dispatchEvent(
+      new CustomEvent("dropdown-toggle", {
+        detail: { open: !1 },
+        bubbles: !0
+      })
+    ));
+  }
+  clearPositionSchedules() {
+    this.positionFrameId !== null && (cancelAnimationFrame(this.positionFrameId), this.positionFrameId = null), this.positionTimeoutIds.forEach((t) => window.clearTimeout(t)), this.positionTimeoutIds = [];
+  }
+  schedulePositionUpdate() {
+    this.clearPositionSchedules();
+    let t = 0;
+    const i = () => {
+      var e;
+      if (!((e = this.activeMenu) != null && e.classList.contains("show"))) {
+        this.positionFrameId = null;
+        return;
+      }
+      this.adjustPosition(), t += 1, t < 4 ? this.positionFrameId = requestAnimationFrame(i) : this.positionFrameId = null;
+    };
+    this.positionFrameId = requestAnimationFrame(i), [80, 180, 320].forEach((e) => {
+      const n = window.setTimeout(() => {
+        var o;
+        this.positionTimeoutIds = this.positionTimeoutIds.filter((s) => s !== n), (o = this.activeMenu) != null && o.classList.contains("show") && this.adjustPosition();
+      }, e);
+      this.positionTimeoutIds.push(n);
+    });
+  }
+  focusFirstItem() {
+    const t = this.portalInner || this.menu;
+    if (!t) return;
+    const i = (n) => {
+      const o = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+      if (n instanceof HTMLElement && n.matches(o))
+        return n;
+      const s = n.children;
+      for (let u = 0; u < s.length; u++) {
+        const l = s[u];
+        if (l.shadowRoot) {
+          const h = i(l.shadowRoot);
+          if (h) return h;
+        }
+        if (l.tagName === "SLOT") {
+          const h = l.assignedElements({ flatten: !0 });
+          for (const p of h)
+            if (p instanceof HTMLElement) {
+              const a = i(p);
+              if (a) return a;
+            }
+        }
+        if (l.matches(o))
+          return l;
+        const d = i(l);
+        if (d) return d;
+      }
+      return null;
+    }, e = i(t);
+    e && e.focus();
+  }
   static get observedAttributes() {
     return ["zindex", "position", "vertical-position", "persistent"];
   }
   get persistent() {
     return this.hasAttribute("persistent");
   }
-  attributeChangedCallback(t, e, n) {
-    t === "zindex" && this.menu && (this.menu.style.zIndex = n ?? "1"), (t === "position" || t === "vertical-position") && this.menu && this.adjustPosition();
+  attributeChangedCallback(t, i, e) {
+    t === "zindex" && this.menu && (this.menu.style.zIndex = e ?? "1", this.portalMenu && (this.portalMenu.style.zIndex = e ?? "1")), (t === "position" || t === "vertical-position") && this.menu && this.adjustPosition();
   }
   connectedCallback() {
-    var r, o, c, p;
-    this.render(), this.menu = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".dropdown-menu");
+    var o, s, u, l;
+    this.render(), this.menu = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".dropdown-menu");
     const t = this.getAttribute("zindex") || "1";
-    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (o = this.menu) == null || o.addEventListener("focusout", this.handleFocusOut);
-    const e = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot:not([name])");
-    if (e) {
+    this.menu && (this.menu.style.zIndex = t), this.menu && this.menu.setAttribute("inert", "true"), (s = this.menu) == null || s.addEventListener("focusout", this.handleFocusOut);
+    const i = (u = this.shadowRoot) == null ? void 0 : u.querySelector("slot:not([name])");
+    if (i) {
       const d = () => {
-        const m = e.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "mui-button");
-        m.forEach((s) => {
-          s.removeAttribute("dropdown-slot"), s.removeAttribute("dropdown-slot-first"), s.removeAttribute("dropdown-slot-last");
-        }), m.forEach((s, a) => {
-          s.hasAttribute("variant") || s.setAttribute("variant", "tertiary"), s.setAttribute("dropdown-slot", ""), a === 0 && s.setAttribute("dropdown-slot-first", ""), a === m.length - 1 && s.setAttribute("dropdown-slot-last", ""), s._dropdownListenerAdded || (s.addEventListener("click", () => {
-            var u, l;
-            this.persistent || ((u = this.menu) == null || u.classList.remove("show"), (l = this.menu) == null || l.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
-          }), s._dropdownListenerAdded = !0);
+        const p = i.assignedElements({ flatten: !0 }).filter((a) => {
+          const c = a.tagName.toLowerCase();
+          return c === "mui-button" || c === "mui-link";
+        });
+        p.forEach((a) => {
+          a.removeAttribute("dropdown-slot"), a.removeAttribute("dropdown-slot-first"), a.removeAttribute("dropdown-slot-last");
+        }), p.forEach((a, c) => {
+          a.hasAttribute("variant") || a.setAttribute("variant", "tertiary"), a.setAttribute("dropdown-slot", ""), c === 0 && a.setAttribute("dropdown-slot-first", ""), c === p.length - 1 && a.setAttribute("dropdown-slot-last", ""), a._dropdownListenerAdded || (a.addEventListener("click", () => {
+            var m, b, w;
+            this.persistent || ((m = this.activeMenu) == null || m.classList.remove("show"), (b = this.activeMenu) == null || b.setAttribute("inert", "true"), this.restorePortalItems(), r.openDropdown === this && (r.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })), (w = this.button) == null || w.focus());
+          }), a._dropdownListenerAdded = !0);
         });
       };
-      e.addEventListener("slotchange", d), d();
+      i.addEventListener("slotchange", d), d();
     }
     this.toggleMenu = this.toggleMenu.bind(this), this.closeMenu = this.closeMenu.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this);
-    const n = (p = this.shadowRoot) == null ? void 0 : p.querySelector('slot[name="action"]'), h = () => {
-      var s, a, u;
-      (s = this.button) == null || s.removeEventListener("click", this.toggleMenu), (a = this.button) == null || a.removeEventListener("keydown", this.handleActionKeyDown);
-      const d = (n == null ? void 0 : n.assignedElements({ flatten: !0 })) || [];
-      if (this.button = d.find((l) => l instanceof HTMLElement), !this.button) return;
-      const w = this.button.tagName.toLowerCase();
-      w === "mui-button" || w === "button" || w === "a" || (this.button.hasAttribute("tabindex") || this.button.setAttribute("tabindex", "0"), this.button.setAttribute("role", "button")), this.button.setAttribute("aria-haspopup", "menu"), this.button.setAttribute("aria-expanded", (u = this.menu) != null && u.classList.contains("show") ? "true" : "false"), this.button.addEventListener("click", this.toggleMenu), this.button.addEventListener("keydown", this.handleActionKeyDown);
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector('slot[name="action"]'), n = () => {
+      var a, c, m;
+      (a = this.button) == null || a.removeEventListener("click", this.toggleMenu), (c = this.button) == null || c.removeEventListener("keydown", this.handleActionKeyDown);
+      const d = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) || [];
+      if (this.button = d.find((b) => b instanceof HTMLElement), !this.button) return;
+      const h = this.button.tagName.toLowerCase();
+      h === "mui-button" || h === "button" || h === "a" || h === "mui-input" || (this.button.hasAttribute("tabindex") || this.button.setAttribute("tabindex", "0"), this.button.setAttribute("role", "button")), this.button.setAttribute("aria-haspopup", "menu"), this.button.setAttribute("aria-expanded", (m = this.menu) != null && m.classList.contains("show") ? "true" : "false"), this.button.addEventListener("click", this.toggleMenu), this.button.addEventListener("keydown", this.handleActionKeyDown);
     };
-    n == null || n.addEventListener("slotchange", h), h(), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
+    e == null || e.addEventListener("slotchange", n), n(), document.addEventListener("click", this.closeMenu), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleResize), window.addEventListener("scroll", this.handleScroll, !0);
   }
   disconnectedCallback() {
-    var t, e, n;
-    (t = this.button) == null || t.removeEventListener("click", this.toggleMenu), (e = this.button) == null || e.removeEventListener("keydown", this.handleActionKeyDown), document.removeEventListener("click", this.closeMenu), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleScroll, !0), (n = this.menu) == null || n.removeEventListener("focusout", this.handleFocusOut);
+    var t, i, e, n;
+    (t = this.button) == null || t.removeEventListener("click", this.toggleMenu), (i = this.button) == null || i.removeEventListener("keydown", this.handleActionKeyDown), this.clearPositionSchedules(), (e = this.menuResizeObserver) == null || e.disconnect(), this.menuResizeObserver = null, document.removeEventListener("click", this.closeMenu), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleResize), window.removeEventListener("scroll", this.handleScroll, !0), (n = this.menu) == null || n.removeEventListener("focusout", this.handleFocusOut), this.restorePortalItems();
   }
   closeWithAnimation() {
     var e;
-    if (!this.menu) return;
-    this.menu.classList.remove("show"), (e = this.button) == null || e.setAttribute("aria-expanded", "false"), setTimeout(() => {
-      this.menu && (this.menu.classList.contains("show") || (this.menu.style.display = "none"));
+    const t = this.activeMenu;
+    if (!t) return;
+    t.classList.remove("show"), (e = this.button) == null || e.setAttribute("aria-expanded", "false"), setTimeout(() => {
+      const n = this.activeMenu;
+      n && (n.classList.contains("show") || (n.style.display = "none", this.restorePortalItems()));
     }, 150);
   }
   toggleMenu(t) {
-    var n, h;
+    var e, n, o;
     if (t.stopPropagation(), !this.menu) return;
-    const e = this.menu.classList.contains("show");
-    !e && i.openDropdown && i.openDropdown !== this && i.openDropdown.closeWithAnimation(), e ? (this.closeWithAnimation(), (n = this.menu) == null || n.setAttribute("inert", "true"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))) : (this.menu.style.display = "block", requestAnimationFrame(() => {
-      var r, o;
-      (r = this.menu) == null || r.classList.add("show"), (o = this.menu) == null || o.removeAttribute("inert"), this.adjustPosition();
-    }), (h = this.button) == null || h.setAttribute("aria-expanded", "true"), i.openDropdown = this, this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !0 }, bubbles: !0 })));
+    const i = (e = this.activeMenu) == null ? void 0 : e.classList.contains("show");
+    if (!i && r.openDropdown && r.openDropdown !== this && r.openDropdown.closeWithAnimation(), i)
+      this.closeWithAnimation(), (n = this.activeMenu) == null || n.setAttribute("inert", "true"), r.openDropdown === this && (r.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }));
+    else {
+      this.portalItems();
+      const s = this.activeMenu;
+      if (!s) return;
+      s.style.display = "block", requestAnimationFrame(() => {
+        s.classList.add("show"), s.removeAttribute("inert"), this.schedulePositionUpdate();
+      }), (o = this.button) == null || o.setAttribute("aria-expanded", "true"), r.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"), i.openDropdown === this && (i.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
+    var i;
+    if (t) {
+      const e = t.composedPath();
+      if (this.menu && e.includes(this.menu) || this.portalMenu && e.includes(this.portalMenu) || this.button && e.includes(this.button)) return;
+    }
+    this.closeWithAnimation(), (i = this.activeMenu) == null || i.setAttribute("inert", "true"), r.openDropdown === this && (r.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }));
+  }
+  portalItems() {
+    var e, n;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot:not([name])"), i = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) || [];
+    if (i.length) {
+      if (this.ensurePortalStyles(), !this.portalMenu) {
+        this.portalMenu = document.createElement("div"), this.portalMenu.className = "mui-dropdown-portal", this.portalMenu.setAttribute("inert", "true"), this.portalMenu.style.zIndex = this.getAttribute("zindex") || "1";
+        const o = () => {
+          const s = document.createElement("div");
+          return s.tabIndex = 0, s.style.position = "absolute", s.style.opacity = "0", s.style.pointerEvents = "none", s.addEventListener("focus", () => {
+            var u, l, d;
+            this.persistent || ((u = this.activeMenu) == null || u.classList.remove("show"), (l = this.activeMenu) == null || l.setAttribute("inert", "true"), this.restorePortalItems(), r.openDropdown === this && (r.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 }))), (d = this.button) == null || d.focus();
+          }), s;
+        };
+        this.portalMenu.appendChild(o()), this.portalInner = document.createElement("div"), this.portalInner.className = "inner", this.portalMenu.appendChild(this.portalInner), this.portalMenu.appendChild(o()), this.portalMenu.addEventListener("focusout", this.handleFocusOut), document.body.appendChild(this.portalMenu);
+      }
+      this.syncPortalStyles(), this.portaledItems = i, i.forEach((o) => {
+        var s;
+        this.originalNextSibling.has(o) || this.originalNextSibling.set(o, o.nextSibling), (s = this.portalInner) == null || s.appendChild(o);
+      }), typeof ResizeObserver < "u" && this.portalMenu && ((n = this.menuResizeObserver) == null || n.disconnect(), this.menuResizeObserver = new ResizeObserver(() => {
+        var o;
+        (o = this.activeMenu) != null && o.classList.contains("show") && this.adjustPosition();
+      }), this.menuResizeObserver.observe(this.portalMenu));
+    }
+  }
+  restorePortalItems() {
+    var t;
+    this.portalMenu && (this.clearPositionSchedules(), (t = this.menuResizeObserver) == null || t.disconnect(), this.menuResizeObserver = null, this.portaledItems.forEach((i) => {
+      const e = this.originalNextSibling.get(i);
+      e && e.parentNode === this ? this.insertBefore(i, e) : this.appendChild(i);
+    }), this.portaledItems = [], this.originalNextSibling.clear(), this.portalMenu.removeEventListener("focusout", this.handleFocusOut), this.portalMenu.remove(), this.portalMenu = null, this.portalInner = null);
+  }
+  ensurePortalStyles() {
+    if (r.portalStylesInjected) return;
+    const t = document.createElement("style");
+    t.textContent = `
+      .mui-dropdown-portal {
+        display: none;
+        opacity: 0;
+        transform: translateY(-0.25rem);
+        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
+        min-width: var(--dropdown-min-width, 15rem);
+        position: fixed;
+        z-index: 1;
+        box-sizing: border-box;
+        border: var(--border-thin);
+        background: var(--dropdown-background);
+        border-color: var(--dropdown-border-color);
+        box-shadow: 0 var(--space-100) var(--space-200) var(--dropdown-shadow-color);
+        border-radius: var(--dropdown-radius);
+        padding: 1px;
+      }
+      .mui-dropdown-portal.show {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+      .mui-dropdown-portal .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+      }
+      .mui-dropdown-portal mui-button,
+      .mui-dropdown-portal mui-link {
+        width: 100%;
+        text-align: left;
+      }
+      .mui-dropdown-portal mui-button:focus,
+      .mui-dropdown-portal mui-link:focus {
+        z-index: 1;
+      }
+    `, document.head.appendChild(t), r.portalStylesInjected = !0;
+  }
+  syncPortalStyles() {
+    if (!this.portalMenu) return;
+    const t = window.getComputedStyle(this);
+    [
+      "--dropdown-background",
+      "--dropdown-border-color",
+      "--dropdown-min-width",
+      "--dropdown-radius",
+      "--dropdown-shadow-color",
+      "--action-tertiary-background",
+      "--action-tertiary-background-hover",
+      "--action-tertiary-background-focus",
+      "--action-tertiary-border",
+      "--action-tertiary-border-hover",
+      "--action-tertiary-border-focus",
+      "--action-tertiary-text-color",
+      "--action-tertiary-text-color-hover",
+      "--action-tertiary-text-color-focus"
+    ].forEach((i) => {
+      var n;
+      const e = t.getPropertyValue(i);
+      e && ((n = this.portalMenu) == null || n.style.setProperty(i, e));
+    });
   }
   adjustPosition() {
-    if (!this.menu) return;
-    const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", h = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, r = n.endsWith("rem") ? parseFloat(n) * h : parseFloat(n) || 8;
+    const t = this.activeMenu;
+    if (!t) return;
+    const i = 8, e = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", n = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, o = e.endsWith("rem") ? parseFloat(e) * n : parseFloat(e) || 8;
     t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
-    const o = this.getBoundingClientRect(), c = t.offsetWidth, p = t.offsetHeight, d = window.innerWidth, w = window.innerHeight, m = (this.getAttribute("vertical-position") || "auto").toLowerCase(), s = w - o.bottom, a = o.top, u = p + r, l = s >= u, g = a >= u;
-    let f = o.height + r;
-    m === "up" ? f = g || !l ? -(p + r) : o.height + r : m === "down" ? f = l || !g ? o.height + r : -(p + r) : !l && a > s && (f = -(p + r));
-    let b = 0;
+    const s = this.getBoundingClientRect(), u = t.offsetWidth, l = t.offsetHeight, d = window.innerWidth, h = window.innerHeight, p = (this.getAttribute("vertical-position") || "auto").toLowerCase(), a = h - s.bottom, c = s.top, m = l + o, b = a >= m, w = c >= m;
+    let v = this.portalMenu ? s.bottom + o : s.height + o;
+    p === "up" ? v = w || !b ? this.portalMenu ? s.top - l - o : -(l + o) : this.portalMenu ? s.bottom + o : s.height + o : p === "down" ? v = b || !w ? this.portalMenu ? s.bottom + o : s.height + o : this.portalMenu ? s.top - l - o : -(l + o) : !b && c > a && (v = this.portalMenu ? s.top - l - o : -(l + o));
+    let f = 0;
     switch (this.getAttribute("position") || "left") {
       case "left":
-        b = 0;
+        f = this.portalMenu ? s.left : 0;
         break;
       case "center":
-        b = (o.width - c) / 2;
+        f = this.portalMenu ? s.left + (s.width - u) / 2 : (s.width - u) / 2;
         break;
       case "right":
       default:
-        b = o.width - c;
+        f = this.portalMenu ? s.right - u : s.width - u;
         break;
     }
-    const y = e - o.left, A = d - e - (o.left + c);
-    b = Math.max(y, Math.min(b, A)), c > d - e * 2 && (t.style.maxWidth = `${d - e * 2}px`), t.style.top = `${f}px`, t.style.left = `${b}px`;
+    const y = this.portalMenu ? i : i - s.left, M = this.portalMenu ? d - i - u : d - i - (s.left + u);
+    f = Math.max(y, Math.min(f, M)), u > d - i * 2 && (t.style.maxWidth = `${d - i * 2}px`), t.style.top = `${v}px`, t.style.left = `${f}px`;
   }
   render() {
     this.shadowRoot.innerHTML = /*html*/
@@ -148,12 +333,14 @@ const i = class i extends HTMLElement {
           transform: translateY(0);
         }
 
-        .dropdown-menu ::slotted(mui-button) {
+        .dropdown-menu ::slotted(mui-button),
+        .dropdown-menu ::slotted(mui-link) {
           width: 100%;
           text-align: left;
         }
 
-        .dropdown-menu ::slotted(mui-button:focus) {
+        .dropdown-menu ::slotted(mui-button:focus),
+        .dropdown-menu ::slotted(mui-link:focus) {
           z-index: 1;
         }
 
@@ -177,6 +364,6 @@ const i = class i extends HTMLElement {
     `;
   }
 };
-i.openDropdown = null;
-let v = i;
-customElements.get("mui-dropdown") || customElements.define("mui-dropdown", v);
+r.openDropdown = null, r.portalStylesInjected = !1;
+let g = r;
+customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);

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

@@ -116,7 +116,7 @@ class r extends HTMLElement {
     if (!t) return;
     t.assignedElements({ flatten: !0 }).forEach((s) => {
       const a = s.tagName.toLowerCase();
-      (a === "mui-form-message" || a === "mui-form-hint" || a === "mui-body") && s.setAttribute("size", e);
+      (a === "mui-form-message" || a === "mui-body") && s.setAttribute("size", e);
     });
   }
   bindSlotEvents() {

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

@@ -24,6 +24,9 @@ class a extends HTMLElement {
   connectedCallback() {
     this.acceptedFileTypes = this.readAcceptedFileTypes(), this.currentFileName = this.readCurrentFileName(), this.render(), this.cacheElements(), this.attachEvents();
   }
+  focus(e) {
+    this.wrapper ? this.wrapper.focus(e) : super.focus(e);
+  }
   disconnectedCallback() {
     this.cleanupListeners();
   }
@@ -42,7 +45,7 @@ class a extends HTMLElement {
           line-height: var(--text-line-height-s);
           box-sizing: border-box;
           font-size: var(--text-font-size-s);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           border: var(--border-thin);
           border-style: dashed;
           border-color: var(--form-default-border-color);
@@ -53,6 +56,10 @@ class a extends HTMLElement {
         .wrapper:hover {
           border-color: var(--form-default-border-color-hover);
         }
+        .wrapper:focus-visible {
+          outline: var(--outline-medium);
+          outline-offset: var(--outline-offset);
+        }
         .label {
           width: 90px;
           white-space: nowrap;
@@ -96,7 +103,7 @@ class a extends HTMLElement {
           display: none;
         }
       </style>
-      <div class="wrapper">
+      <div class="wrapper" role="button" tabindex="0">
         <span class="label">${this.selectedFileName || this.currentFileName || "No file selected"}</span>
         <mui-button variant="tertiary">Browse</mui-button>
         <input type="file" accept="${this.acceptedFileTypes}" />
@@ -107,12 +114,14 @@ class a extends HTMLElement {
     this.shadowRoot && (this.wrapper = this.shadowRoot.querySelector(".wrapper"), this.label = this.shadowRoot.querySelector(".label"), this.button = this.shadowRoot.querySelector(".button"), this.input = this.shadowRoot.querySelector('input[type="file"]'));
   }
   cleanupListeners() {
-    this.wrapper && this._wrapperClickHandler && this.wrapper.removeEventListener("click", this._wrapperClickHandler), this.input && this._inputChangeHandler && this.input.removeEventListener("change", this._inputChangeHandler);
+    this.wrapper && this._wrapperClickHandler && this.wrapper.removeEventListener("click", this._wrapperClickHandler), this.wrapper && this._wrapperKeydownHandler && this.wrapper.removeEventListener("keydown", this._wrapperKeydownHandler), this.input && this._inputChangeHandler && this.input.removeEventListener("change", this._inputChangeHandler);
   }
   attachEvents() {
     this._wrapperClickHandler = () => {
       this.input.click();
-    }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.input.addEventListener("change", this._inputChangeHandler);
+    }, this._wrapperKeydownHandler = (e) => {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.input.click());
+    }, this._inputChangeHandler = this.handleFileChange.bind(this), this.wrapper.addEventListener("click", this._wrapperClickHandler), this.wrapper.addEventListener("keydown", this._wrapperKeydownHandler), this.input.addEventListener("change", this._inputChangeHandler);
   }
   handleFileChange(e) {
     var r;

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

@@ -47,8 +47,7 @@ class r extends HTMLElement {
         :host([variant="horizontal"]) .content-inner ::slotted(*) {
           min-inline-size: 0;
         }
-        :host([variant="horizontal"]) .content-inner ::slotted(mui-form-message),
-        :host([variant="horizontal"]) .content-inner ::slotted(mui-form-hint) {
+        :host([variant="horizontal"]) .content-inner ::slotted(mui-form-message) {
           grid-column: 1 / -1;
         }
         @media (max-width: 767px) {

package/dist/esm/components/mui-form-message/index.js

@@ -1,6 +1,6 @@
 import "../mui-body/index.js";
 import "../mui-icons/info/index.js";
-class a extends HTMLElement {
+class r extends HTMLElement {
   static get observedAttributes() {
     return ["size", "weight", "variant"];
   }
@@ -39,7 +39,7 @@ class a extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.getAttribute("size") || "small", s = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional", r = this.querySelector('[slot="after"]') !== null;
+    const t = this.getAttribute("size") || "small", s = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "optional", i = this.querySelector('[slot="after"]') !== null;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -63,7 +63,7 @@ class a extends HTMLElement {
           </slot>
         </span>
         <slot></slot>
-        ${r ? `<span slot="after" class="slot-wrapper">
+        ${i ? `<span slot="after" class="slot-wrapper">
                 <slot name="after"></slot>
               </span>` : ""}
       </mui-body>
@@ -72,9 +72,4 @@ class a extends HTMLElement {
     e == null || e.addEventListener("slotchange", () => this.syncBeforeIcon()), this.syncBeforeIcon();
   }
 }
-customElements.get("mui-form-message") || customElements.define("mui-form-message", a);
-if (!customElements.get("mui-form-hint")) {
-  class i extends a {
-  }
-  customElements.define("mui-form-hint", i);
-}
+customElements.get("mui-form-message") || customElements.define("mui-form-message", r);