@floegence/floe-webapp-core 0.86.69 → 0.86.71

package/dist/components/ui/Dropdown.js

@@ -1,29 +1,29 @@
-import { setAttribute as d, insert as f, createComponent as u, Portal as W, use as D, spread as G, mergeProps as J, effect as q, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
-import { createSignal as B, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
+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 oe } from "../../utils/defer.js";
-import { ChevronDown as ae, Check as ie, ChevronRight as le } from "../icons/index.js";
-import { focusMenuItem as O, MENU_ITEM_SELECTOR as ue, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as ce } from "./menuUtils.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
-import { createFloatingPresence as Y } from "./floatingPresence.js";
-import { useOverlayMask as de } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as fe, projectSurfacePortalPosition as me, resolveSurfacePortalBoundaryRect as ge, isSurfacePortalMode as ve, resolveSurfacePortalMount as he } from "./dialogSurfaceScope.js";
-var K = /* @__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>'), we = /* @__PURE__ */ P('<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">'), 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 ke = 0, Me = 0;
-function Pe(e, c) {
+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) {
   switch (e) {
     case "Enter":
     case " ":
-      return c.open ? {
+      return s.open ? {
         nextOpen: !1
       } : {
         nextOpen: !0,
-        focusMode: c.hasSelection ? "selected" : "first"
+        focusMode: s.hasSelection ? "selected" : "first"
       };
     case "ArrowDown":
       return {
         nextOpen: !0,
-        focusMode: c.hasSelection ? "selected" : "first"
+        focusMode: s.hasSelection ? "selected" : "first"
       };
     case "ArrowUp":
       return {
@@ -34,36 +34,36 @@ function Pe(e, c) {
       return null;
   }
 }
-function $e(e) {
-  const [c, s] = B(!1), a = Y({
-    open: c,
+function Le(e) {
+  const [s, c] = H(!1), a = Z({
+    open: s,
     element: () => v
-  }), [j, M] = B({
+  }), [K, M] = H({
     x: -9999,
     y: -9999
   });
   let g, v;
-  const h = `floe-dropdown-${ke += 1}`, $ = `${h}-menu`, x = () => typeof e.items == "function" ? e.items() : e.items, b = ne(() => a.mounted() ? fe({
+  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
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), w = {
-    mount: () => he(b()),
-    isSurfaceMode: () => ve(b()),
-    boundaryRect: () => ge(b()),
-    projectPosition: (t) => me(t, b())
-  }, C = () => {
-    s(!1), requestAnimationFrame(() => g?.focus());
+  }), y = {
+    mount: () => he(h()),
+    isSurfaceMode: () => be(h()),
+    boundaryRect: () => ve(h()),
+    projectPosition: (t) => ge(t, h())
+  }, L = () => {
+    c(!1), requestAnimationFrame(() => g?.focus());
   };
-  de({
+  fe({
     open: a.mounted,
     root: () => v,
-    containsTarget: (t) => !!(t instanceof Element ? t : document.activeElement)?.closest(`[data-floe-dropdown="${h}"]`),
-    onClose: C,
-    onEscapeOutside: C,
+    containsTarget: (t) => !!(t instanceof Element ? t : document.activeElement)?.closest(`[data-floe-dropdown="${b}"]`),
+    onClose: L,
+    onEscapeOutside: L,
     lockBodyScroll: !1,
     trapFocus: !1,
     autoFocus: !1,
@@ -72,12 +72,12 @@ function $e(e) {
     closeOnEscape: "inside",
     escapeKeyPhase: "bubble"
   });
-  const T = () => {
+  const F = () => {
     if (!g || !v) return;
-    const t = g.getBoundingClientRect(), o = v.getBoundingClientRect(), n = se(t, o, e.align ?? "start", w.boundaryRect());
+    const t = g.getBoundingClientRect(), o = v.getBoundingClientRect(), n = ce(t, o, e.align ?? "start", y.boundaryRect());
     M(n);
   };
-  Q(() => {
+  V(() => {
     if (!a.mounted()) {
       M({
         x: -9999,
@@ -85,47 +85,47 @@ function $e(e) {
       });
       return;
     }
-    if (!c()) return;
+    if (!s()) return;
     const t = (o) => {
       const n = o.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${h}"]`) || s(!1);
+      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${b}"]`) || c(!1);
     };
     document.addEventListener("pointerdown", t, !0), requestAnimationFrame(() => {
-      T(), O(v, e.value ? "selected" : "first");
-    }), re(() => {
+      F(), O(v, e.value ? "selected" : "first");
+    }), oe(() => {
       document.removeEventListener("pointerdown", t, !0);
     });
   });
-  const F = (t) => {
+  const q = (t) => {
     const o = e.onSelect;
-    t.keepOpen || (s(!1), g?.focus({
+    t.keepOpen || (c(!1), g?.focus({
       preventScroll: !0
-    })), oe(() => o(t.id));
-  }, A = (t, o = "first") => {
-    e.disabled || (s(t), requestAnimationFrame(() => {
-      T(), O(v, o);
+    })), ae(() => o(t.id));
+  }, C = (t, o = "first") => {
+    e.disabled || (c(t), requestAnimationFrame(() => {
+      F(), O(v, o);
     }));
-  }, H = (t) => {
+  }, N = (t) => {
     if (e.disabled) return;
     const o = Pe(t.key, {
-      open: c(),
+      open: s(),
       hasSelection: !!e.value
     });
     if (o) {
       if (t.preventDefault(), !o.nextOpen) {
-        s(!1);
+        c(!1);
         return;
       }
-      A(!0, o.focusMode ?? "first");
+      C(!0, o.focusMode ?? "first");
     }
   }, _ = (t) => {
-    const o = t.target, n = o?.closest('[role="menu"]'), r = o?.closest(ue);
+    const o = t.target, n = o?.closest('[role="menu"]'), r = o?.closest(de);
     switch (t.key) {
       case "ArrowDown":
-        t.preventDefault(), U(n, r, 1);
+        t.preventDefault(), W(n, r, 1);
         return;
       case "ArrowUp":
-        t.preventDefault(), U(n, r, -1);
+        t.preventDefault(), W(n, r, -1);
         return;
       case "Home":
         t.preventDefault(), O(n, "first");
@@ -134,38 +134,38 @@ function $e(e) {
         t.preventDefault(), O(n, "last");
         return;
       case "Tab":
-        t.preventDefault(), s(!1), g?.focus();
+        t.preventDefault(), c(!1), g?.focus();
         return;
       default:
         return;
     }
   };
   return (() => {
-    var t = be(), o = t.firstChild;
-    d(t, "data-floe-dropdown", h), o.$$keydown = H, o.$$click = () => {
+    var t = ye(), o = t.firstChild;
+    d(t, "data-floe-dropdown", b), o.$$keydown = N, o.$$click = () => {
       if (!e.disabled) {
-        if (c()) {
-          s(!1);
+        if (s()) {
+          c(!1);
           return;
         }
-        A(!0, e.value ? "selected" : "first");
+        C(!0, e.value ? "selected" : "first");
       }
     };
     var n = g;
-    return typeof n == "function" ? D(n, o) : g = o, d(o, "aria-controls", $), f(o, () => e.trigger), f(t, u(y, {
+    return typeof n == "function" ? T(n, o) : g = o, d(o, "aria-controls", P), f(o, () => e.trigger), f(t, u(w, {
       get when() {
         return a.mounted();
       },
       get children() {
-        return u(W, {
+        return u(G, {
           get mount() {
-            return w.mount();
+            return y.mount();
           },
           get children() {
-            var r = K(), l = v;
-            return typeof l == "function" ? D(l, r) : v = r, d(r, "data-floe-dropdown", h), G(r, J({
+            var r = z(), l = v;
+            return typeof l == "function" ? T(l, r) : v = r, d(r, "data-floe-dropdown", b), J(r, Q({
               get class() {
-                return k(w.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 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");
               },
               get "data-floating-presence"() {
                 return a.state();
@@ -174,41 +174,41 @@ function $e(e) {
                 return a.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [X]: w.isSurfaceMode() ? "true" : void 0
+              [Y]: y.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${w.projectPosition(j()).x}px`,
-                  top: `${w.projectPosition(j()).y}px`
+                  left: `${y.projectPosition(K()).x}px`,
+                  top: `${y.projectPosition(K()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
-              id: $,
+              id: P,
               onKeyDown: _
-            }), !1, !0), f(r, u(V, {
+            }), !1, !0), f(r, u(X, {
               get each() {
                 return x();
               },
-              children: (m) => u(y, {
+              children: (m) => u(w, {
                 get when() {
                   return !m().separator;
                 },
                 get fallback() {
-                  return Z();
+                  return ee();
                 },
                 get children() {
-                  return u(ee, {
+                  return u(te, {
                     get item() {
                       return m();
                     },
                     get selected() {
                       return e.value === m().id;
                     },
-                    onSelect: F,
-                    onCloseMenu: () => s(!1),
-                    dropdownId: h,
-                    portalLayout: w
+                    onSelect: q,
+                    onCloseMenu: () => c(!1),
+                    dropdownId: b,
+                    portalLayout: y
                   });
                 }
               })
@@ -216,9 +216,9 @@ function $e(e) {
           }
         });
       }
-    }), null), q((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 = c(), R = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, L = e.triggerInputSurface ? "true" : void 0, I = e.triggerInputSurface ? "inset" : void 0;
-      return l !== r.e && p(t, r.e = l), m !== r.t && p(o, r.t = m), i !== r.a && d(o, "tabindex", r.a = i), S !== r.o && d(o, "aria-expanded", r.o = S), R !== r.i && d(o, "aria-label", r.i = R), E !== r.n && d(o, "aria-disabled", r.n = E), L !== r.s && d(o, "data-floe-input-surface", r.s = L), I !== r.h && d(o, "data-floe-surface", r.h = I), r;
+    }), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -227,111 +227,113 @@ function $e(e) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0
+      h: void 0,
+      r: void 0,
+      d: void 0
     }), t;
   })();
 }
-function ee(e) {
-  const [c, s] = B(!1), a = () => e.item.children && e.item.children.length > 0, M = Y({
-    open: () => !!(c() && a()),
+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] = B({
+  }), [g, v] = H({
     x: -9999,
     y: -9999
   });
-  let h, $, x, b;
-  const w = `floe-dropdown-item-${Me += 1}`;
-  Q(() => {
+  let b, P, x, h;
+  const y = `floe-dropdown-item-${Ae += 1}`;
+  V(() => {
     M.mounted() || v({
       x: -9999,
       y: -9999
     });
   });
-  const C = () => {
-    if (!h || !x) return;
-    const t = h.getBoundingClientRect(), o = x.getBoundingClientRect(), n = ce(t, o, e.portalLayout.boundaryRect());
+  const L = () => {
+    if (!b || !x) return;
+    const t = b.getBoundingClientRect(), o = x.getBoundingClientRect(), n = se(t, o, e.portalLayout.boundaryRect());
     v(n);
-  }, T = () => {
-    a() && (clearTimeout(b), b = setTimeout(() => {
-      s(!0), requestAnimationFrame(C);
-    }, 100));
   }, F = () => {
-    a() && (clearTimeout(b), b = void 0, !e.item.keepOpen && (b = setTimeout(() => {
-      s(!1);
+    a() && (clearTimeout(h), h = setTimeout(() => {
+      c(!0), requestAnimationFrame(L);
+    }, 100));
+  }, q = () => {
+    a() && (clearTimeout(h), h = void 0, !e.item.keepOpen && (h = setTimeout(() => {
+      c(!1);
     }, 150)));
-  }, A = (t) => {
+  }, C = (t) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
         t.stopPropagation();
         return;
       }
-      a() ? (s((o) => !o), requestAnimationFrame(C)) : e.item.content || e.onSelect(e.item);
+      a() ? (c((o) => !o), requestAnimationFrame(L)) : e.item.content || e.onSelect(e.item);
     }
-  }, H = (t = "first") => {
-    a() && (s(!0), requestAnimationFrame(() => {
-      C(), O(x, t);
+  }, N = (t = "first") => {
+    a() && (c(!0), requestAnimationFrame(() => {
+      L(), O(x, t);
     }));
   }, _ = () => {
-    s(!1), requestAnimationFrame(() => $?.focus());
+    c(!1), requestAnimationFrame(() => P?.focus());
   };
   return (() => {
-    var t = ye();
-    t.addEventListener("mouseleave", F), t.addEventListener("mouseenter", T);
-    var o = h;
-    return typeof o == "function" ? D(o, t) : h = t, f(t, u(y, {
+    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, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var n = K();
-        return n.$$click = A, f(n, e.item.content), q((r) => {
+        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 && p(n, r.e = l), m !== r.t && d(n, "data-tone", r.t = m), r;
+          return l !== r.e && B(n, r.e = l), m !== r.t && d(n, "data-tone", r.t = m), r;
         }, {
           e: void 0,
           t: void 0
         }), n;
       }
-    }), null), f(t, u(y, {
+    }), null), f(t, u(w, {
       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(), H("first")), i.key === "ArrowLeft" && (i.preventDefault(), _()));
-        }, n.$$click = A;
-        var m = $;
-        return typeof m == "function" ? D(m, n) : $ = n, d(n, "id", w), f(r, u(y, {
+          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, {
           get when() {
-            return z(() => !!e.selected)() && !a();
+            return p(() => !!e.selected)() && !a();
           },
           get children() {
-            return u(ie, {
+            return u(le, {
               class: "w-3 h-3"
             });
           }
-        })), f(n, u(y, {
+        })), f(n, u(w, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
           children: (i) => (() => {
-            var S = xe();
+            var S = Se();
             return f(S, i), S;
           })()
-        }), l), f(l, () => e.item.label), f(n, u(y, {
+        }), l), f(l, () => e.item.label), f(n, u(w, {
           get when() {
             return a();
           },
           get children() {
-            return u(le, {
+            return u(ue, {
               class: "w-3 h-3 text-[var(--floe-ink-quiet)]"
             });
           }
-        }), null), q((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"), R = e.item.disabled, E = a() ? "menu" : void 0, L = a() ? c() : void 0, I = e.selected && !a() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== i.e && p(n, i.e = S), R !== i.t && (n.disabled = i.t = R), E !== i.a && d(n, "aria-haspopup", i.a = E), L !== i.o && d(n, "aria-expanded", i.o = L), I !== i.i && d(n, "data-floe-selected", i.i = I), N !== i.n && d(n, "data-tone", i.n = N), i;
+        }), 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;
         }, {
           e: void 0,
           t: void 0,
@@ -341,18 +343,18 @@ function ee(e) {
           n: void 0
         }), n;
       }
-    }), null), f(t, u(y, {
+    }), null), f(t, u(w, {
       get when() {
-        return z(() => !!M.mounted())() && a();
+        return p(() => !!M.mounted())() && a();
       },
       get children() {
-        return u(W, {
+        return u(G, {
           get mount() {
             return e.portalLayout.mount();
           },
           get children() {
-            var n = K(), r = x;
-            return typeof r == "function" ? D(r, n) : x = n, G(n, J({
+            var n = z(), r = x;
+            return typeof r == "function" ? T(r, n) : x = n, J(n, 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");
               },
@@ -366,7 +368,7 @@ function ee(e) {
                 return M.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
+              [Y]: e.portalLayout.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
@@ -376,27 +378,27 @@ function ee(e) {
               },
               role: "menu",
               "data-floe-surface": "floating",
-              "aria-labelledby": w,
+              "aria-labelledby": y,
               onMouseEnter: () => {
-                clearTimeout(b);
+                clearTimeout(h);
               },
-              onMouseLeave: F,
+              onMouseLeave: q,
               onKeyDown: (l) => {
                 l.key !== "ArrowLeft" && l.key !== "Escape" || (l.preventDefault(), l.stopPropagation(), _());
               }
-            }), !1, !0), f(n, u(V, {
+            }), !1, !0), f(n, u(X, {
               get each() {
                 return e.item.children;
               },
-              children: (l) => u(y, {
+              children: (l) => u(w, {
                 get when() {
                   return !l().separator;
                 },
                 get fallback() {
-                  return Z();
+                  return ee();
                 },
                 get children() {
-                  return u(ee, {
+                  return u(te, {
                     get item() {
                       return l();
                     },
@@ -423,26 +425,35 @@ function ee(e) {
     }), null), t;
   })();
 }
-function Fe(e) {
-  const c = () => e.options.find((a) => a.value === e.value), s = () => e.options.map((a) => ({
+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($e, {
+  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 = Se();
-        return f(a, () => c()?.label ?? e.placeholder ?? "Select..."), q(() => p(a, k("truncate", !c() && "text-[var(--floe-ink-soft)]"))), a;
-      })(), u(ae, {
+        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 s();
+      return c();
     },
     get value() {
       return e.value;
@@ -455,9 +466,9 @@ function Fe(e) {
     }
   });
 }
-te(["click", "keydown"]);
+ne(["click", "keydown"]);
 export {
-  $e as Dropdown,
-  Fe as Select,
+  Le as Dropdown,
+  qe as Select,
   Pe as resolveDropdownTriggerKeyAction
 };

package/dist/components/ui/FloatingWindow.js

@@ -14,7 +14,7 @@ import { createFloatingPresence as bt } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as Le } from "./localInteractionSurface.js";
 import { resolveFloatingBoundary as pt } from "./surfaceFloatingBoundary.js";
 import { SURFACE_PORTAL_LAYER_ATTR as zt, resolveSurfacePortalHost as $t } from "./dialogSurfaceScope.js";
-var _t = /* @__PURE__ */ d("<span hidden>"), St = /* @__PURE__ */ d('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Pt = /* @__PURE__ */ d('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">'), It = /* @__PURE__ */ d('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), Rt = /* @__PURE__ */ d('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">');
+var _t = /* @__PURE__ */ d("<span hidden>"), St = /* @__PURE__ */ d('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Pt = /* @__PURE__ */ d('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">'), It = /* @__PURE__ */ d('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), Rt = /* @__PURE__ */ d('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-3"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">');
 function en(n) {
   const me = () => n.resizable ?? !0, K = () => n.maximizable ?? !0, ve = () => n.draggable ?? !0, q = () => n.minSize ?? {
     width: 200,

package/dist/components/ui/Select.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};