@floegence/floe-webapp-core 0.50.6 → 0.52.0

package/dist/components/ui/Dropdown.js

@@ -1,28 +1,29 @@
-import { setAttribute as v, insert as g, createComponent as l, Portal as W, use as E, spread as G, mergeProps as J, effect as T, className as D, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as O, spread as G, mergeProps as J, effect as F, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
 import { createSignal as _, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
-import { cn as k } from "../../utils/cn.js";
+import { cn as M } from "../../utils/cn.js";
 import { deferNonBlocking as oe } from "../../utils/defer.js";
-import { ChevronDown as ie, Check as ue, ChevronRight as ae } from "../icons/index.js";
-import { focusMenuItem as R, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as de, calculateSubmenuPosition as ce } from "./menuUtils.js";
+import { ChevronDown as ae, Check as ie, ChevronRight as ue } from "../icons/index.js";
+import { focusMenuItem as I, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
-import { resolveSurfacePortalHost as se, projectSurfacePortalPosition as fe, resolveSurfacePortalBoundaryRect as me, isSurfacePortalMode as ge, resolveSurfacePortalMount as ve } from "./dialogSurfaceScope.js";
-var j = /* @__PURE__ */ P("<div>"), be = /* @__PURE__ */ P("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ P('<div class="my-1 h-px bg-border"role=separator>'), he = /* @__PURE__ */ P('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), we = /* @__PURE__ */ P("<div class=relative>"), ye = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), xe = /* @__PURE__ */ P("<span>");
-let Se = 0, Me = 0;
-function ke(e, f) {
+import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as fe, projectSurfacePortalPosition as me, resolveSurfacePortalBoundaryRect as ge, isSurfacePortalMode as ve, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
+var H = /* @__PURE__ */ P("<div>"), he = /* @__PURE__ */ P("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ P('<div class="my-1 h-px bg-border"role=separator>'), we = /* @__PURE__ */ P('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ye = /* @__PURE__ */ P("<div class=relative>"), xe = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Se = /* @__PURE__ */ P("<span>");
+let Me = 0, ke = 0;
+function Pe(e, c) {
   switch (e) {
     case "Enter":
     case " ":
-      return f.open ? {
+      return c.open ? {
         nextOpen: !1
       } : {
         nextOpen: !0,
-        focusMode: f.hasSelection ? "selected" : "first"
+        focusMode: c.hasSelection ? "selected" : "first"
       };
     case "ArrowDown":
       return {
         nextOpen: !0,
-        focusMode: f.hasSelection ? "selected" : "first"
+        focusMode: c.hasSelection ? "selected" : "first"
       };
     case "ArrowUp":
       return {
@@ -34,107 +35,124 @@ function ke(e, f) {
   }
 }
 function $e(e) {
-  const [f, c] = _(!1), u = Y({
-    open: f,
+  const [c, d] = _(!1), o = Y({
+    open: c,
     exitDurationMs: 100
-  }), [F, $] = _({
+  }), [B, k] = _({
     x: -9999,
     y: -9999
   });
-  let x, w;
-  const b = `floe-dropdown-${Se += 1}`, C = `${b}-menu`, h = ne(() => u.mounted() ? se() : {
+  let b, h;
+  const v = `floe-dropdown-${Me += 1}`, $ = `${v}-menu`, w = ne(() => o.mounted() ? fe({
+    owner: b
+  }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
   }), m = {
-    mount: () => ve(h()),
-    isSurfaceMode: () => ge(h()),
-    boundaryRect: () => me(h()),
-    projectPosition: (o) => fe(o, h())
+    mount: () => be(w()),
+    isSurfaceMode: () => ve(w()),
+    boundaryRect: () => ge(w()),
+    projectPosition: (r) => me(r, w())
   }, A = () => {
-    if (!x || !w) return;
-    const o = x.getBoundingClientRect(), r = w.getBoundingClientRect(), i = de(o, r, e.align ?? "start", m.boundaryRect());
-    $(i);
+    d(!1), requestAnimationFrame(() => b?.focus());
+  };
+  ce({
+    open: o.mounted,
+    root: () => h,
+    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${v}"]`),
+    onClose: A,
+    onEscapeOutside: A,
+    lockBodyScroll: !1,
+    trapFocus: !1,
+    autoFocus: !1,
+    restoreFocus: !1,
+    blockHotkeys: !1,
+    closeOnEscape: "inside",
+    escapeKeyPhase: "bubble"
+  });
+  const C = () => {
+    if (!b || !h) return;
+    const r = b.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
+    k(i);
   };
   Q(() => {
-    if (!u.mounted()) {
-      $({
+    if (!o.mounted()) {
+      k({
         x: -9999,
         y: -9999
       });
       return;
     }
-    if (!f()) return;
-    const o = (i) => {
-      const n = i.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${b}"]`) || c(!1);
-    }, r = (i) => {
-      i.key === "Escape" && (c(!1), requestAnimationFrame(() => x?.focus()));
+    if (!c()) return;
+    const r = (n) => {
+      const i = n.target;
+      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${v}"]`) || d(!1);
     };
-    document.addEventListener("pointerdown", o, !0), document.addEventListener("keydown", r), requestAnimationFrame(() => {
-      A(), R(w, e.value ? "selected" : "first");
+    document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
+      C(), I(h, e.value ? "selected" : "first");
     }), re(() => {
-      document.removeEventListener("pointerdown", o, !0), document.removeEventListener("keydown", r);
+      document.removeEventListener("pointerdown", r, !0);
     });
   });
-  const L = (o) => {
-    const r = e.onSelect;
-    o.keepOpen || c(!1), oe(() => r(o.id));
-  }, p = (o, r = "first") => {
-    e.disabled || (c(o), requestAnimationFrame(() => {
-      A(), R(w, r);
+  const j = (r) => {
+    const n = e.onSelect;
+    r.keepOpen || d(!1), oe(() => n(r.id));
+  }, R = (r, n = "first") => {
+    e.disabled || (d(r), requestAnimationFrame(() => {
+      C(), I(h, n);
     }));
-  }, I = (o) => {
+  }, T = (r) => {
     if (e.disabled) return;
-    const r = ke(o.key, {
-      open: f(),
+    const n = Pe(r.key, {
+      open: c(),
       hasSelection: !!e.value
     });
-    if (r) {
-      if (o.preventDefault(), !r.nextOpen) {
-        c(!1);
+    if (n) {
+      if (r.preventDefault(), !n.nextOpen) {
+        d(!1);
         return;
       }
-      p(!0, r.focusMode ?? "first");
+      R(!0, n.focusMode ?? "first");
     }
-  }, O = (o) => {
-    const r = o.target, i = r?.closest('[role="menu"]'), n = r?.closest(le);
-    switch (o.key) {
+  }, q = (r) => {
+    const n = r.target, i = n?.closest('[role="menu"]'), t = n?.closest(le);
+    switch (r.key) {
       case "ArrowDown":
-        o.preventDefault(), U(i, n, 1);
+        r.preventDefault(), U(i, t, 1);
         return;
       case "ArrowUp":
-        o.preventDefault(), U(i, n, -1);
+        r.preventDefault(), U(i, t, -1);
         return;
       case "Home":
-        o.preventDefault(), R(i, "first");
+        r.preventDefault(), I(i, "first");
         return;
       case "End":
-        o.preventDefault(), R(i, "last");
+        r.preventDefault(), I(i, "last");
         return;
       case "Tab":
-        c(!1);
+        r.preventDefault(), d(!1), b?.focus();
         return;
       default:
         return;
     }
   };
   return (() => {
-    var o = be(), r = o.firstChild;
-    v(o, "data-floe-dropdown", b), r.$$keydown = I, r.$$click = () => {
+    var r = he(), n = r.firstChild;
+    f(r, "data-floe-dropdown", v), n.$$keydown = T, n.$$click = () => {
       if (!e.disabled) {
-        if (f()) {
-          c(!1);
+        if (c()) {
+          d(!1);
           return;
         }
-        p(!0, e.value ? "selected" : "first");
+        R(!0, e.value ? "selected" : "first");
       }
     };
-    var i = x;
-    return typeof i == "function" ? E(i, r) : x = r, v(r, "aria-controls", C), g(r, () => e.trigger), g(o, l(y, {
+    var i = b;
+    return typeof i == "function" ? O(i, n) : b = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
       get when() {
-        return u.mounted();
+        return o.mounted();
       },
       get children() {
         return l(W, {
@@ -142,36 +160,37 @@ function $e(e) {
             return m.mount();
           },
           get children() {
-            var n = j(), t = w;
-            return typeof t == "function" ? E(t, n) : w = n, v(n, "data-floe-dropdown", b), G(n, J({
+            var t = H(), s = h;
+            return typeof s == "function" ? O(s, t) : h = t, f(t, "data-floe-dropdown", v), G(t, J({
               get class() {
-                return k(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
+                return M(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
               },
               get "data-floating-presence"() {
-                return u.state();
+                return o.state();
               },
               get "aria-hidden"() {
-                return u.exiting() ? "true" : void 0;
+                return o.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: m.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${m.projectPosition(F()).x}px`,
-                  top: `${m.projectPosition(F()).y}px`
+                  left: `${m.projectPosition(B()).x}px`,
+                  top: `${m.projectPosition(B()).y}px`
                 };
               },
               role: "menu",
-              id: C,
-              onKeyDown: O
-            }), !1, !0), g(n, l(V, {
+              "data-floe-surface": "floating",
+              id: $,
+              onKeyDown: q
+            }), !1, !0), g(t, l(V, {
               get each() {
                 return e.items;
               },
-              children: (d) => l(y, {
+              children: (u) => l(y, {
                 get when() {
-                  return !d().separator;
+                  return !u().separator;
                 },
                 get fallback() {
                   return Z();
@@ -179,112 +198,114 @@ function $e(e) {
                 get children() {
                   return l(ee, {
                     get item() {
-                      return d();
+                      return u();
                     },
                     get selected() {
-                      return e.value === d().id;
+                      return e.value === u().id;
                     },
-                    onSelect: L,
-                    onCloseMenu: () => c(!1),
-                    dropdownId: b,
+                    onSelect: j,
+                    onCloseMenu: () => d(!1),
+                    dropdownId: v,
                     portalLayout: m
                   });
                 }
               })
-            })), n;
+            })), t;
           }
         });
       }
-    }), null), T((n) => {
-      var t = k("relative inline-block", e.class), d = k("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), s = e.disabled ? -1 : 0, S = f(), a = e.triggerAriaLabel, M = e.disabled ? "true" : void 0;
-      return t !== n.e && D(o, n.e = t), d !== n.t && D(r, n.t = d), s !== n.a && v(r, "tabindex", n.a = s), S !== n.o && v(r, "aria-expanded", n.o = S), a !== n.i && v(r, "aria-label", n.i = a), M !== n.n && v(r, "aria-disabled", n.n = M), n;
+    }), null), F((t) => {
+      var s = M("relative inline-block", e.class), u = M("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, D = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
+      return s !== t.e && p(r, t.e = s), u !== t.t && p(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0,
-      n: void 0
-    }), o;
+      n: void 0,
+      s: void 0,
+      h: void 0
+    }), r;
   })();
 }
 function ee(e) {
-  const [f, c] = _(!1), u = () => e.item.children && e.item.children.length > 0, $ = Y({
-    open: () => !!(f() && u()),
+  const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, k = Y({
+    open: () => !!(c() && o()),
     exitDurationMs: 100
-  }), [x, w] = _({
+  }), [b, h] = _({
     x: -9999,
     y: -9999
   });
-  let b, C, h, m;
-  const A = `floe-dropdown-item-${Me += 1}`;
+  let v, $, w, m;
+  const A = `floe-dropdown-item-${ke += 1}`;
   Q(() => {
-    $.mounted() || w({
+    k.mounted() || h({
       x: -9999,
       y: -9999
     });
   });
-  const L = () => {
-    if (!b || !h) return;
-    const i = b.getBoundingClientRect(), n = h.getBoundingClientRect(), t = ce(i, n, e.portalLayout.boundaryRect());
-    w(t);
-  }, p = () => {
-    u() && (clearTimeout(m), m = setTimeout(() => {
-      c(!0), requestAnimationFrame(L);
+  const C = () => {
+    if (!v || !w) return;
+    const n = v.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
+    h(t);
+  }, j = () => {
+    o() && (clearTimeout(m), m = setTimeout(() => {
+      d(!0), requestAnimationFrame(C);
     }, 100));
-  }, I = () => {
-    u() && (clearTimeout(m), m = void 0, !e.item.keepOpen && (m = setTimeout(() => {
-      c(!1);
+  }, R = () => {
+    o() && (clearTimeout(m), m = void 0, !e.item.keepOpen && (m = setTimeout(() => {
+      d(!1);
     }, 150)));
-  }, O = (i) => {
+  }, T = (n) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
-        i.stopPropagation();
+        n.stopPropagation();
         return;
       }
-      u() ? (c((n) => !n), requestAnimationFrame(L)) : e.item.content || e.onSelect(e.item);
+      o() ? (d((i) => !i), requestAnimationFrame(C)) : e.item.content || e.onSelect(e.item);
     }
-  }, o = (i = "first") => {
-    u() && (c(!0), requestAnimationFrame(() => {
-      L(), R(h, i);
+  }, q = (n = "first") => {
+    o() && (d(!0), requestAnimationFrame(() => {
+      C(), I(w, n);
     }));
   }, r = () => {
-    c(!1), requestAnimationFrame(() => C?.focus());
+    d(!1), requestAnimationFrame(() => $?.focus());
   };
   return (() => {
-    var i = we();
-    i.addEventListener("mouseleave", I), i.addEventListener("mouseenter", p);
-    var n = b;
-    return typeof n == "function" ? E(n, i) : b = i, g(i, l(y, {
+    var n = ye();
+    n.addEventListener("mouseleave", R), n.addEventListener("mouseenter", j);
+    var i = v;
+    return typeof i == "function" ? O(i, n) : v = n, g(n, l(y, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = j();
-        return t.$$click = O, g(t, e.item.content), T((d) => {
-          var s = k("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), S = e.item.tone ?? "default";
-          return s !== d.e && D(t, d.e = s), S !== d.t && v(t, "data-tone", d.t = S), d;
+        var t = H();
+        return t.$$click = T, g(t, e.item.content), F((s) => {
+          var u = M("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
+          return u !== s.e && p(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), g(i, l(y, {
+    }), null), g(n, l(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = he(), d = t.firstChild, s = d.nextSibling;
+        var t = we(), s = t.firstChild, u = s.nextSibling;
         t.$$keydown = (a) => {
-          e.item.disabled || u() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), o("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
-        }, t.$$click = O;
-        var S = C;
-        return typeof S == "function" ? E(S, t) : C = t, v(t, "id", A), g(d, l(y, {
+          e.item.disabled || o() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), q("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
+        }, t.$$click = T;
+        var x = $;
+        return typeof x == "function" ? O(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
           get when() {
-            return z(() => !!e.selected)() && !u();
+            return z(() => !!e.selected)() && !o();
           },
           get children() {
-            return l(ue, {
+            return l(ie, {
               class: "w-3 h-3"
             });
           }
@@ -294,21 +315,21 @@ function ee(e) {
           },
           keyed: !0,
           children: (a) => (() => {
-            var M = ye();
-            return g(M, a), M;
+            var S = xe();
+            return g(S, a), S;
           })()
-        }), s), g(s, () => e.item.label), g(t, l(y, {
+        }), u), g(u, () => e.item.label), g(t, l(y, {
           get when() {
-            return u();
+            return o();
           },
           get children() {
-            return l(ae, {
+            return l(ue, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), T((a) => {
-          var M = k("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), q = e.item.disabled, B = u() ? "menu" : void 0, H = u() ? f() : void 0, K = e.selected && !u() ? "true" : void 0, N = e.item.tone ?? "default";
-          return M !== a.e && D(t, a.e = M), q !== a.t && (t.disabled = a.t = q), B !== a.a && v(t, "aria-haspopup", a.a = B), H !== a.o && v(t, "aria-expanded", a.o = H), K !== a.i && v(t, "data-floe-selected", a.i = K), N !== a.n && v(t, "data-tone", a.n = N), a;
+        }), null), F((a) => {
+          var S = M("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, D = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
+          return S !== a.e && p(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
         }, {
           e: void 0,
           t: void 0,
@@ -318,9 +339,9 @@ function ee(e) {
           n: void 0
         }), t;
       }
-    }), null), g(i, l(y, {
+    }), null), g(n, l(y, {
       get when() {
-        return z(() => !!$.mounted())() && u();
+        return z(() => !!k.mounted())() && o();
       },
       get children() {
         return l(W, {
@@ -328,45 +349,46 @@ function ee(e) {
             return e.portalLayout.mount();
           },
           get children() {
-            var t = j(), d = h;
-            return typeof d == "function" ? E(d, t) : h = t, G(t, J({
+            var t = H(), s = w;
+            return typeof s == "function" ? O(s, t) : w = t, G(t, J({
               get class() {
-                return k(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
+                return M(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
               get "data-floe-dropdown"() {
                 return e.dropdownId;
               },
               get "data-floating-presence"() {
-                return $.state();
+                return k.state();
               },
               get "aria-hidden"() {
-                return $.exiting() ? "true" : void 0;
+                return k.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${e.portalLayout.projectPosition(x()).x}px`,
-                  top: `${e.portalLayout.projectPosition(x()).y}px`
+                  left: `${e.portalLayout.projectPosition(b()).x}px`,
+                  top: `${e.portalLayout.projectPosition(b()).y}px`
                 };
               },
               role: "menu",
+              "data-floe-surface": "floating",
               "aria-labelledby": A,
               onMouseEnter: () => {
                 clearTimeout(m);
               },
-              onMouseLeave: I,
-              onKeyDown: (s) => {
-                s.key !== "ArrowLeft" && s.key !== "Escape" || (s.preventDefault(), s.stopPropagation(), r());
+              onMouseLeave: R,
+              onKeyDown: (u) => {
+                u.key !== "ArrowLeft" && u.key !== "Escape" || (u.preventDefault(), u.stopPropagation(), r());
               }
             }), !1, !0), g(t, l(V, {
               get each() {
                 return e.item.children;
               },
-              children: (s) => l(y, {
+              children: (u) => l(y, {
                 get when() {
-                  return !s().separator;
+                  return !u().separator;
                 },
                 get fallback() {
                   return Z();
@@ -374,7 +396,7 @@ function ee(e) {
                 get children() {
                   return l(ee, {
                     get item() {
-                      return s();
+                      return u();
                     },
                     selected: !1,
                     get onSelect() {
@@ -396,28 +418,29 @@ function ee(e) {
           }
         });
       }
-    }), null), i;
+    }), null), n;
   })();
 }
-function Oe(e) {
-  const f = () => e.options.find((u) => u.value === e.value), c = () => e.options.map((u) => ({
-    id: u.value,
-    label: u.label
+function Fe(e) {
+  const c = () => e.options.find((o) => o.value === e.value), d = () => e.options.map((o) => ({
+    id: o.value,
+    label: o.label
   }));
   return l($e, {
+    triggerInputSurface: !0,
     get triggerClass() {
-      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
+      return M("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
     },
     get trigger() {
       return [(() => {
-        var u = xe();
-        return g(u, () => f()?.label ?? e.placeholder ?? "Select..."), T(() => D(u, k("truncate", !f() && "text-muted-foreground"))), u;
-      })(), l(ie, {
+        var o = Se();
+        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => p(o, M("truncate", !c() && "text-muted-foreground"))), o;
+      })(), l(ae, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
     },
     get items() {
-      return c();
+      return d();
     },
     get value() {
       return e.value;
@@ -433,6 +456,6 @@ function Oe(e) {
 te(["click", "keydown"]);
 export {
   $e as Dropdown,
-  Oe as Select,
-  ke as resolveDropdownTriggerKeyAction
+  Fe as Select,
+  Pe as resolveDropdownTriggerKeyAction
 };