@floegence/floe-webapp-core 0.86.76 → 0.87.0

package/dist/components/ui/Dropdown.js

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