@floegence/floe-webapp-core 0.89.2 → 0.90.1

package/dist/components/ui/Dropdown.js

@@ -1,31 +1,31 @@
-import { setAttribute as u, insert as s, createComponent as l, Portal as G, use as F, spread as J, mergeProps as Q, effect as H, className as p, template as C, memo as V, delegateEvents as re } from "solid-js/web";
-import { createControllableValue as oe } from "./controllable.js";
-import { useFloeLocale as ae } from "../../context/LocaleContext.js";
-import { createSignal as K, createMemo as ie, createEffect as X, onCleanup as le, Show as y, Index as Y } from "solid-js";
+import { setAttribute as d, insert as c, createComponent as u, Portal as Q, use as F, spread as X, mergeProps as Y, effect as z, className as _, template as L, memo as G, delegateEvents as ie } from "solid-js/web";
+import { createControllableValue as ae } from "./controllable.js";
+import { useFloeLocale as le } from "../../context/LocaleContext.js";
+import { createSignal as q, createMemo as ue, createEffect as Z, onCleanup as de, Show as b, Index as ee } from "solid-js";
 import { cn as A } from "../../utils/cn.js";
-import { deferNonBlocking as ue } from "../../utils/defer.js";
-import { Check as de, ChevronRight as ce } from "../icons/index.js";
-import { focusMenuItem as T, MENU_ITEM_SELECTOR as se, moveMenuFocus as W, calculateMenuPosition as fe, calculateSubmenuPosition as me } from "./menuUtils.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as Z } from "./localInteractionSurface.js";
-import { createFloatingPresence as ee } from "./floatingPresence.js";
-import { useOverlayMask as ge } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as ve, projectSurfacePortalPosition as he, resolveSurfacePortalBoundaryRect as be, isSurfacePortalMode as ye, resolveSurfacePortalMount as we } from "./dialogSurfaceScope.js";
-var N = /* @__PURE__ */ C("<div>"), xe = /* @__PURE__ */ C("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), te = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), Se = /* @__PURE__ */ C('<button type=button data-floe-interactive=item role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ke = /* @__PURE__ */ C("<div class=relative>"), Me = /* @__PURE__ */ C('<span class="w-3.5 h-3.5 flex items-center justify-center">');
-let Pe = 0, Ae = 0;
-function Ce(e, w) {
+import { deferNonBlocking as se } from "../../utils/defer.js";
+import { Check as ce, ChevronRight as fe } from "../icons/index.js";
+import { focusMenuItem as T, calculateMenuPosition as me, MENU_ITEM_SELECTOR as ge, moveMenuFocus as J, calculateSubmenuPosition as ve } from "./menuUtils.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as te } from "./localInteractionSurface.js";
+import { createFloatingPresence as ne } from "./floatingPresence.js";
+import { useOverlayMask as he } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as be, projectSurfacePortalPosition as ye, resolveSurfacePortalBoundaryRect as we, isSurfacePortalMode as Se, resolveSurfacePortalMount as xe } from "./dialogSurfaceScope.js";
+var U = /* @__PURE__ */ L("<div>"), ke = /* @__PURE__ */ L("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), re = /* @__PURE__ */ L('<div class="my-1 h-px bg-border"role=separator>'), Me = /* @__PURE__ */ L('<button type=button data-floe-interactive=item role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), Ce = /* @__PURE__ */ L("<div class=relative>"), Pe = /* @__PURE__ */ L('<span class="w-3.5 h-3.5 flex items-center justify-center">');
+let Ae = 0, Le = 0;
+function Re(e, y) {
   switch (e) {
     case "Enter":
     case " ":
-      return w.open ? {
+      return y.open ? {
         nextOpen: !1
       } : {
         nextOpen: !0,
-        focusMode: w.hasSelection ? "selected" : "first"
+        focusMode: y.hasSelection ? "selected" : "first"
       };
     case "ArrowDown":
       return {
         nextOpen: !0,
-        focusMode: w.hasSelection ? "selected" : "first"
+        focusMode: y.hasSelection ? "selected" : "first"
       };
     case "ArrowUp":
       return {
@@ -36,40 +36,40 @@ function Ce(e, w) {
       return null;
   }
 }
-function _e(e) {
-  const w = ae(), [f, i] = oe({
+function Ke(e) {
+  const y = le(), [g, a] = ae({
     value: () => e.open,
     defaultValue: e.defaultOpen ?? !1,
-    onChange: (r) => e.onOpenChange?.(r)
-  }), k = ee({
-    open: f,
-    element: () => c
-  }), [M, L] = K({
+    onChange: (n) => e.onOpenChange?.(n)
+  }), k = ne({
+    open: g,
+    element: () => f
+  }), [M, R] = q({
     x: -9999,
     y: -9999
-  });
-  let m, c;
-  const h = `floe-dropdown-${Pe += 1}`, b = `${h}-menu`, x = () => typeof e.items == "function" ? e.items() : e.items, P = ie(() => k.mounted() ? ve({
-    owner: m
+  }), [B, N] = q("bottom");
+  let v, f;
+  const h = `floe-dropdown-${Ae += 1}`, w = `${h}-menu`, S = () => typeof e.items == "function" ? e.items() : e.items, C = ue(() => k.mounted() ? be({
+    owner: v
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), g = {
-    mount: () => we(P()),
-    isSurfaceMode: () => ye(P()),
-    boundaryRect: () => be(P()),
-    projectPosition: (r) => he(r, P())
-  }, B = () => {
-    i(!1), requestAnimationFrame(() => m?.focus());
+  }), m = {
+    mount: () => xe(C()),
+    isSurfaceMode: () => Se(C()),
+    boundaryRect: () => we(C()),
+    projectPosition: (n) => ye(n, C())
+  }, j = () => {
+    a(!1), requestAnimationFrame(() => v?.focus());
   };
-  ge({
+  he({
     open: k.mounted,
-    root: () => c,
-    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${h}"]`),
-    onClose: B,
-    onEscapeOutside: B,
+    root: () => f,
+    containsTarget: (n) => !!(n instanceof Element ? n : document.activeElement)?.closest(`[data-floe-dropdown="${h}"]`),
+    onClose: j,
+    onEscapeOutside: j,
     lockBodyScroll: !1,
     trapFocus: !1,
     autoFocus: !1,
@@ -78,153 +78,160 @@ function _e(e) {
     closeOnEscape: "inside",
     escapeKeyPhase: "bubble"
   });
-  const R = () => {
-    if (!m || !c) return;
-    const r = m.getBoundingClientRect(), t = c.getBoundingClientRect(), a = fe(r, t, w.direction === "rtl" ? e.align === "end" ? "start" : e.align === "center" ? "center" : "end" : e.align ?? "start", g.boundaryRect());
-    L(a);
+  const P = () => {
+    if (!v || !f) return;
+    const n = v.getBoundingClientRect(), t = f.getBoundingClientRect(), o = me(n, t, y.direction === "rtl" ? e.align === "end" ? "start" : e.align === "center" ? "center" : "end" : e.align ?? "start", m.boundaryRect());
+    N(o.y < n.top ? "top" : "bottom"), R(o);
   };
-  X(() => {
+  Z(() => {
     if (!k.mounted()) {
-      L({
+      R({
         x: -9999,
         y: -9999
       });
       return;
     }
-    if (!f()) return;
-    const r = (t) => {
-      const a = t.target;
-      a && typeof a.closest == "function" && a.closest(`[data-floe-dropdown="${h}"]`) || i(!1);
+    if (!g()) return;
+    const n = (t) => {
+      const o = t.target;
+      o && typeof o.closest == "function" && o.closest(`[data-floe-dropdown="${h}"]`) || a(!1);
     };
-    document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
-      R(), T(c, e.value ? "selected" : "first");
-    }), le(() => {
-      document.removeEventListener("pointerdown", r, !0);
+    document.addEventListener("pointerdown", n, !0), requestAnimationFrame(() => {
+      P(), T(f, e.value ? "selected" : "first");
+    }), de(() => {
+      document.removeEventListener("pointerdown", n, !0);
     });
   });
-  const q = (r) => {
+  const p = (n) => {
     const t = e.onSelect;
-    r.keepOpen || (i(!1), m?.focus({
+    n.keepOpen || (a(!1), v?.focus({
       preventScroll: !0
-    })), ue(() => t(r.id));
-  }, j = (r, t = "first") => {
-    e.disabled || (i(r), requestAnimationFrame(() => {
-      R(), T(c, t);
+    })), se(() => t(n.id));
+  }, H = (n, t = "first") => {
+    e.disabled || (a(n), requestAnimationFrame(() => {
+      P(), T(f, t);
     }));
-  }, _ = (r) => {
+  }, K = (n) => {
     if (e.disabled) return;
-    const t = Ce(r.key, {
-      open: f(),
+    const t = Re(n.key, {
+      open: g(),
       hasSelection: !!e.value
     });
     if (t) {
-      if (r.preventDefault(), !t.nextOpen) {
-        i(!1);
+      if (n.preventDefault(), !t.nextOpen) {
+        a(!1);
         return;
       }
-      j(!0, t.focusMode ?? "first");
+      H(!0, t.focusMode ?? "first");
     }
-  }, d = (r) => {
-    const t = r.target, a = t?.closest('[role="menu"]'), n = t?.closest(se);
-    switch (r.key) {
+  }, l = (n) => {
+    const t = n.target, o = t?.closest('[role="menu"]'), r = t?.closest(ge);
+    switch (n.key) {
       case "ArrowDown":
-        r.preventDefault(), W(a, n, 1);
+        n.preventDefault(), J(o, r, 1);
         return;
       case "ArrowUp":
-        r.preventDefault(), W(a, n, -1);
+        n.preventDefault(), J(o, r, -1);
         return;
       case "Home":
-        r.preventDefault(), T(a, "first");
+        n.preventDefault(), T(o, "first");
         return;
       case "End":
-        r.preventDefault(), T(a, "last");
+        n.preventDefault(), T(o, "last");
         return;
       case "Tab":
-        r.preventDefault(), i(!1), m?.focus();
+        n.preventDefault(), a(!1), v?.focus();
         return;
       default:
         return;
     }
   };
   return (() => {
-    var r = xe(), t = r.firstChild;
-    u(r, "data-floe-dropdown", h), t.$$keydown = _, t.$$click = () => {
+    var n = ke(), t = n.firstChild;
+    d(n, "data-floe-dropdown", h), t.$$keydown = K, t.$$click = () => {
       if (!e.disabled) {
-        if (f()) {
-          i(!1);
+        if (g()) {
+          a(!1);
           return;
         }
-        j(!0, e.value ? "selected" : "first");
+        H(!0, e.value ? "selected" : "first");
       }
     };
-    var a = m;
-    return typeof a == "function" ? F(a, t) : m = t, u(t, "aria-controls", b), s(t, () => e.trigger), s(r, l(y, {
+    var o = v;
+    return typeof o == "function" ? F(o, t) : v = t, d(t, "aria-controls", w), c(t, () => e.trigger), c(n, u(b, {
       get when() {
         return k.mounted();
       },
       get children() {
-        return l(G, {
+        return u(Q, {
           get mount() {
-            return g.mount();
+            return m.mount();
           },
           get children() {
-            var n = N(), v = c;
-            return typeof v == "function" ? F(v, n) : c = n, u(n, "data-floe-dropdown", h), J(n, Q({
+            var r = U();
+            return F((s) => {
+              f = s, queueMicrotask(() => {
+                s.isConnected && P();
+              });
+            }, r), d(r, "data-floe-dropdown", h), X(r, Y({
               get class() {
-                return A(g.isSurfaceMode() ? "absolute z-20 min-w-36" : "fixed z-50 min-w-36", "bg-popover text-popover-foreground p-1", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu");
+                return A(m.isSurfaceMode() ? "absolute z-20 min-w-36" : "fixed z-50 min-w-36", "bg-popover text-popover-foreground p-1", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu");
               },
               get "data-floating-presence"() {
                 return k.state();
               },
+              get "data-floating-side"() {
+                return B();
+              },
               get "aria-hidden"() {
                 return k.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [Z]: g.isSurfaceMode() ? "true" : void 0
+              [te]: m.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${g.projectPosition(M()).x}px`,
-                  top: `${g.projectPosition(M()).y}px`
+                  left: `${m.projectPosition(M()).x}px`,
+                  top: `${m.projectPosition(M()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
-              id: b,
-              onKeyDown: d
-            }), !1, !0), s(n, l(Y, {
+              id: w,
+              onKeyDown: l
+            }), !1, !0), c(r, u(ee, {
               get each() {
-                return x();
+                return S();
               },
-              children: (o) => l(y, {
+              children: (s) => u(b, {
                 get when() {
-                  return !o().separator;
+                  return !s().separator;
                 },
                 get fallback() {
-                  return te();
+                  return re();
                 },
                 get children() {
-                  return l(ne, {
+                  return u(oe, {
                     get item() {
-                      return o();
+                      return s();
                     },
                     get selected() {
-                      return e.value === o().id;
+                      return e.value === s().id;
                     },
-                    onSelect: q,
-                    onCloseMenu: () => i(!1),
+                    onSelect: p,
+                    onCloseMenu: () => a(!1),
                     dropdownId: h,
-                    portalLayout: g
+                    portalLayout: m
                   });
                 }
               })
-            })), n;
+            })), r;
           }
         });
       }
-    }), null), H((n) => {
-      var v = A("relative inline-block", e.class), o = A("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), S = e.disabled ? -1 : 0, E = f(), $ = e.triggerAriaLabel, O = e.triggerAriaLabelledBy, D = e.triggerAriaDescribedBy, I = e.disabled ? "true" : void 0, z = e.triggerInputSurface ? "true" : void 0, U = e.triggerInputSurface ? "inset" : void 0;
-      return v !== n.e && p(r, n.e = v), o !== n.t && p(t, n.t = o), S !== n.a && u(t, "tabindex", n.a = S), E !== n.o && u(t, "aria-expanded", n.o = E), $ !== n.i && u(t, "aria-label", n.i = $), O !== n.n && u(t, "aria-labelledby", n.n = O), D !== n.s && u(t, "aria-describedby", n.s = D), I !== n.h && u(t, "aria-disabled", n.h = I), z !== n.r && u(t, "data-floe-input-surface", n.r = z), U !== n.d && u(t, "data-floe-surface", n.d = U), n;
+    }), null), z((r) => {
+      var s = A("relative inline-block", e.class), i = A("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, E = g(), O = e.triggerAriaLabel, $ = e.triggerAriaLabelledBy, D = e.triggerAriaDescribedBy, I = e.disabled ? "true" : void 0, V = e.triggerInputSurface ? "true" : void 0, W = e.triggerInputSurface ? "inset" : void 0;
+      return s !== r.e && _(n, r.e = s), i !== r.t && _(t, r.t = i), x !== r.a && d(t, "tabindex", r.a = x), E !== r.o && d(t, "aria-expanded", r.o = E), O !== r.i && d(t, "aria-label", r.i = O), $ !== r.n && d(t, "aria-labelledby", r.n = $), D !== r.s && d(t, "aria-describedby", r.s = D), I !== r.h && d(t, "aria-disabled", r.h = I), V !== r.r && d(t, "data-floe-input-surface", r.r = V), W !== r.d && d(t, "data-floe-surface", r.d = W), r;
     }, {
       e: void 0,
       t: void 0,
@@ -236,110 +243,110 @@ function _e(e) {
       h: void 0,
       r: void 0,
       d: void 0
-    }), r;
+    }), n;
   })();
 }
-function ne(e) {
-  const [w, f] = K(!1), i = () => e.item.children && e.item.children.length > 0, M = ee({
-    open: () => !!(w() && i()),
-    element: () => b
-  }), [L, m] = K({
+function oe(e) {
+  const [y, g] = q(!1), a = () => e.item.children && e.item.children.length > 0, M = ne({
+    open: () => !!(y() && a()),
+    element: () => w
+  }), [R, B] = q({
     x: -9999,
     y: -9999
-  });
-  let c, h, b, x;
-  const P = `floe-dropdown-item-${Ae += 1}`;
-  X(() => {
-    M.mounted() || m({
+  }), [N, v] = q("right");
+  let f, h, w, S;
+  const C = `floe-dropdown-item-${Le += 1}`;
+  Z(() => {
+    M.mounted() || B({
       x: -9999,
       y: -9999
     });
   });
-  const g = () => {
-    if (!c || !b) return;
-    const d = c.getBoundingClientRect(), r = b.getBoundingClientRect(), t = me(d, r, e.portalLayout.boundaryRect());
-    m(t);
-  }, B = () => {
-    i() && (clearTimeout(x), x = setTimeout(() => {
-      f(!0), requestAnimationFrame(g);
+  const m = () => {
+    if (!f || !w) return;
+    const l = f.getBoundingClientRect(), n = w.getBoundingClientRect(), t = ve(l, n, e.portalLayout.boundaryRect());
+    v(t.x < l.left ? "left" : "right"), B(t);
+  }, j = () => {
+    a() && (clearTimeout(S), S = setTimeout(() => {
+      g(!0), requestAnimationFrame(m);
     }, 100));
-  }, R = () => {
-    i() && (clearTimeout(x), x = void 0, !e.item.keepOpen && (x = setTimeout(() => {
-      f(!1);
+  }, P = () => {
+    a() && (clearTimeout(S), S = void 0, !e.item.keepOpen && (S = setTimeout(() => {
+      g(!1);
     }, 150)));
-  }, q = (d) => {
+  }, p = (l) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
-        d.stopPropagation();
+        l.stopPropagation();
         return;
       }
-      i() ? (f((r) => !r), requestAnimationFrame(g)) : e.item.content || e.onSelect(e.item);
+      a() ? (g((n) => !n), requestAnimationFrame(m)) : e.item.content || e.onSelect(e.item);
     }
-  }, j = (d = "first") => {
-    i() && (f(!0), requestAnimationFrame(() => {
-      g(), T(b, d);
+  }, H = (l = "first") => {
+    a() && (g(!0), requestAnimationFrame(() => {
+      m(), T(w, l);
     }));
-  }, _ = () => {
-    f(!1), requestAnimationFrame(() => h?.focus());
+  }, K = () => {
+    g(!1), requestAnimationFrame(() => h?.focus());
   };
   return (() => {
-    var d = ke();
-    d.addEventListener("mouseleave", R), d.addEventListener("mouseenter", B);
-    var r = c;
-    return typeof r == "function" ? F(r, d) : c = d, s(d, l(y, {
+    var l = Ce();
+    l.addEventListener("mouseleave", P), l.addEventListener("mouseenter", j);
+    var n = f;
+    return typeof n == "function" ? F(n, l) : f = l, c(l, u(b, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = N();
-        return t.$$click = q, s(t, e.item.content), H((a) => {
-          var n = A("w-full px-2 py-1.5", e.item.tone === "danger" && "text-error", e.item.disabled && "opacity-50 pointer-events-none"), v = e.item.tone ?? "default";
-          return n !== a.e && p(t, a.e = n), v !== a.t && u(t, "data-tone", a.t = v), a;
+        var t = U();
+        return t.$$click = p, c(t, e.item.content), z((o) => {
+          var r = A("w-full px-2 py-1.5", e.item.tone === "danger" && "text-error", e.item.disabled && "opacity-50 pointer-events-none"), s = e.item.tone ?? "default";
+          return r !== o.e && _(t, o.e = r), s !== o.t && d(t, "data-tone", o.t = s), o;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), s(d, l(y, {
+    }), null), c(l, u(b, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = Se(), a = t.firstChild, n = a.nextSibling;
-        t.$$keydown = (o) => {
-          e.item.disabled || i() && ((o.key === "ArrowRight" || o.key === "Enter" || o.key === " ") && (o.preventDefault(), j("first")), o.key === "ArrowLeft" && (o.preventDefault(), _()));
-        }, t.$$click = q;
-        var v = h;
-        return typeof v == "function" ? F(v, t) : h = t, u(t, "id", P), s(a, l(y, {
+        var t = Me(), o = t.firstChild, r = o.nextSibling;
+        t.$$keydown = (i) => {
+          e.item.disabled || a() && ((i.key === "ArrowRight" || i.key === "Enter" || i.key === " ") && (i.preventDefault(), H("first")), i.key === "ArrowLeft" && (i.preventDefault(), K()));
+        }, t.$$click = p;
+        var s = h;
+        return typeof s == "function" ? F(s, t) : h = t, d(t, "id", C), c(o, u(b, {
           get when() {
-            return V(() => !!e.selected)() && !i();
+            return G(() => !!e.selected)() && !a();
           },
           get children() {
-            return l(de, {
+            return u(ce, {
               class: "w-3 h-3"
             });
           }
-        })), s(t, l(y, {
+        })), c(t, u(b, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (o) => (() => {
-            var S = Me();
-            return s(S, o), S;
+          children: (i) => (() => {
+            var x = Pe();
+            return c(x, i), x;
           })()
-        }), n), s(n, () => e.item.label), s(t, l(y, {
+        }), r), c(r, () => e.item.label), c(t, u(b, {
           get when() {
-            return i();
+            return a();
           },
           get children() {
-            return l(ce, {
+            return u(fe, {
               class: "w-3 h-3 text-[var(--floe-ink-quiet)]"
             });
           }
-        }), null), H((o) => {
-          var S = A("w-full flex items-center gap-2 px-2", "min-h-[var(--floe-row-height)] rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "focus:outline-none", e.item.tone === "danger" ? "text-error" : "text-[var(--floe-ink-soft)]", e.item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), E = e.item.disabled, $ = i() ? "menu" : void 0, O = i() ? w() : void 0, D = e.selected && !i() ? "true" : void 0, I = e.item.tone ?? "default";
-          return S !== o.e && p(t, o.e = S), E !== o.t && (t.disabled = o.t = E), $ !== o.a && u(t, "aria-haspopup", o.a = $), O !== o.o && u(t, "aria-expanded", o.o = O), D !== o.i && u(t, "data-floe-selected", o.i = D), I !== o.n && u(t, "data-tone", o.n = I), o;
+        }), null), z((i) => {
+          var x = A("w-full flex items-center gap-2 px-2", "min-h-[var(--floe-row-height)] rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "focus:outline-none", e.item.tone === "danger" ? "text-error" : "text-[var(--floe-ink-soft)]", e.item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), E = e.item.disabled, O = a() ? "menu" : void 0, $ = a() ? y() : void 0, D = e.selected && !a() ? "true" : void 0, I = e.item.tone ?? "default";
+          return x !== i.e && _(t, i.e = x), E !== i.t && (t.disabled = i.t = E), O !== i.a && d(t, "aria-haspopup", i.a = O), $ !== i.o && d(t, "aria-expanded", i.o = $), D !== i.i && d(t, "data-floe-selected", i.i = D), I !== i.n && d(t, "data-tone", i.n = I), i;
         }, {
           e: void 0,
           t: void 0,
@@ -349,18 +356,22 @@ function ne(e) {
           n: void 0
         }), t;
       }
-    }), null), s(d, l(y, {
+    }), null), c(l, u(b, {
       get when() {
-        return V(() => !!M.mounted())() && i();
+        return G(() => !!M.mounted())() && a();
       },
       get children() {
-        return l(G, {
+        return u(Q, {
           get mount() {
             return e.portalLayout.mount();
           },
           get children() {
-            var t = N(), a = b;
-            return typeof a == "function" ? F(a, t) : b = t, J(t, Q({
+            var t = U();
+            return F((o) => {
+              w = o, queueMicrotask(() => {
+                o.isConnected && m();
+              });
+            }, t), X(t, Y({
               get class() {
                 return A(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36" : "fixed z-50 min-w-36", "bg-popover text-popover-foreground p-1", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
@@ -370,43 +381,46 @@ function ne(e) {
               get "data-floating-presence"() {
                 return M.state();
               },
+              get "data-floating-side"() {
+                return N();
+              },
               get "aria-hidden"() {
                 return M.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [Z]: e.portalLayout.isSurfaceMode() ? "true" : void 0
+              [te]: e.portalLayout.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${e.portalLayout.projectPosition(L()).x}px`,
-                  top: `${e.portalLayout.projectPosition(L()).y}px`
+                  left: `${e.portalLayout.projectPosition(R()).x}px`,
+                  top: `${e.portalLayout.projectPosition(R()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
-              "aria-labelledby": P,
+              "aria-labelledby": C,
               onMouseEnter: () => {
-                clearTimeout(x);
+                clearTimeout(S);
               },
-              onMouseLeave: R,
-              onKeyDown: (n) => {
-                n.key !== "ArrowLeft" && n.key !== "Escape" || (n.preventDefault(), n.stopPropagation(), _());
+              onMouseLeave: P,
+              onKeyDown: (o) => {
+                o.key !== "ArrowLeft" && o.key !== "Escape" || (o.preventDefault(), o.stopPropagation(), K());
               }
-            }), !1, !0), s(t, l(Y, {
+            }), !1, !0), c(t, u(ee, {
               get each() {
                 return e.item.children;
               },
-              children: (n) => l(y, {
+              children: (o) => u(b, {
                 get when() {
-                  return !n().separator;
+                  return !o().separator;
                 },
                 get fallback() {
-                  return te();
+                  return re();
                 },
                 get children() {
-                  return l(ne, {
+                  return u(oe, {
                     get item() {
-                      return n();
+                      return o();
                     },
                     selected: !1,
                     get onSelect() {
@@ -428,11 +442,11 @@ function ne(e) {
           }
         });
       }
-    }), null), d;
+    }), null), l;
   })();
 }
-re(["click", "keydown"]);
+ie(["click", "keydown"]);
 export {
-  _e as Dropdown,
-  Ce as resolveDropdownTriggerKeyAction
+  Ke as Dropdown,
+  Re as resolveDropdownTriggerKeyAction
 };