hys-ui 0.5.0 → 0.7.0

package/dist/composables/usePopupSurface.js

@@ -1,57 +1,61 @@
-import { ref as D, shallowRef as Pe, useId as qe, inject as Be, computed as f, watch as x, onMounted as Ve, onActivated as Ne, onDeactivated as $e, onBeforeUnmount as Ue, nextTick as Te } from "vue";
-import { useHysControlState as Ge } from "./formContext.js";
-import { useChoiceModel as Je } from "./choiceModel.js";
-import { overlayOwnerKey as Qe } from "./overlayManager.js";
-import { useFloating as Xe } from "./useFloating.js";
-const ee = (a) => typeof a == "number" ? Number.isFinite(a) ? Math.max(0, a) + "px" : void 0 : a, te = (a) => Number.isFinite(a) ? Math.max(0, Math.min(3e4, a)) : 0, P = 'button,a[href],input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
-function at(a, v, A) {
-  const E = D(), F = Pe(), s = D(), R = qe() + "-popup", Oe = R + "-title", { disabled: Q } = Ge(a), y = Be(Qe, void 0), d = D(!0), j = D(!1), X = D(!1), q = Je(
+import { ref as E, shallowRef as fe, useId as de, inject as ve, computed as i, watch as d, onMounted as me, onActivated as pe, onDeactivated as ye, onBeforeUnmount as ge, nextTick as k } from "vue";
+import { useHysControlState as he } from "./formContext.js";
+import { useChoiceModel as we } from "./choiceModel.js";
+import { overlayOwnerKey as be } from "./overlayManager.js";
+import { useFloating as xe } from "./useFloating.js";
+import { popupFocusControls as j, usePopupSurfaceInteractions as Oe } from "./usePopupSurfaceInteractions.js";
+import { createPopupReferenceBinding as Ce } from "./popupReferenceBinding.js";
+import { usePopupSurfaceStyle as Ee, popupMaximumWidth as Re } from "./popupSurfaceStyle.js";
+function Ie(t, v, y, u) {
+  const g = E(), b = fe(), x = E(), R = de() + "-popup", ee = R + "-title", { disabled: q } = he(t), s = ve(be, void 0), c = E(!0), O = E(!1), B = E(!1), M = we(
     {
       get modelValue() {
-        return a.open ?? a.modelValue;
+        return t.open ?? t.modelValue;
       }
     },
-    () => a.defaultOpen ?? !1
-  ), p = f(
-    () => d.value && !Q.value && (y == null ? void 0 : y.value) !== !1
-  ), w = f(
-    () => typeof a.reference == "function" ? a.reference() : a.reference
-  ), h = f(() => {
-    const e = w.value;
-    return e instanceof HTMLElement ? e : (e == null ? void 0 : e.contextElement) ?? F.value ?? E.value;
-  }), H = f(
-    () => !!F.value && (F.value.matches(P) || !!F.value.querySelector(P))
+    () => t.defaultOpen ?? !1
+  ), A = i(
+    () => c.value && !q.value && (s == null ? void 0 : s.value) !== !1
+  ), m = i(
+    () => typeof t.reference == "function" ? t.reference() : t.reference
+  ), r = i(() => {
+    const e = m.value;
+    return e instanceof HTMLElement ? e : (e == null ? void 0 : e.contextElement) ?? b.value ?? g.value;
+  }), S = i(
+    () => !!b.value && (b.value.matches(j) || !!b.value.querySelector(j))
   );
-  function ae() {
-    var t;
-    const e = h.value;
-    (t = e != null && e.matches(P) ? e : (e == null ? void 0 : e.querySelector(P)) ?? E.value) == null || t.focus({ preventScroll: !0 });
+  function V() {
+    var a;
+    const e = r.value;
+    (a = e != null && e.matches(j) ? e : (e == null ? void 0 : e.querySelector(j)) ?? g.value) == null || a.focus({ preventScroll: !0 });
   }
-  function Y() {
+  function K() {
     n.restoringFocus.value = !0;
     try {
-      ae();
+      V();
     } finally {
       n.restoringFocus.value = !1;
     }
   }
-  const T = f(() => {
-    const e = w.value ?? F.value ?? E.value;
+  const C = i(() => {
+    const e = m.value ?? b.value ?? g.value;
     if (e)
       return {
         getBoundingClientRect: () => e.getBoundingClientRect(),
-        contains: (t) => {
-          var u, o;
-          return !!((u = h.value) != null && u.contains(t)) || !!((o = E.value) != null && o.contains(t));
+        contains: (a) => {
+          var o, w;
+          return !!((o = r.value) != null && o.contains(a)) || !!((w = g.value) != null && w.contains(a));
         },
-        focus: ae,
+        focus: V,
         get isConnected() {
-          var t;
-          return ((t = h.value) == null ? void 0 : t.isConnected) ?? !!w.value;
+          var a;
+          return ((a = r.value) == null ? void 0 : a.isConnected) ?? !!m.value;
         }
       };
-  }), ne = f(() => {
-    const e = a.appendTo;
+  }), N = i(() => {
+    const e = t.appendTo;
+    if (typeof document > "u")
+      return typeof e == "string" ? e : "body";
     if (e instanceof HTMLElement) return e;
     if (typeof e == "string")
       try {
@@ -60,399 +64,220 @@ function at(a, v, A) {
         return document.body;
       }
     return document.body;
-  }), ue = D({});
-  function Ae(e) {
-    const t = e.placement.startsWith("left") || e.placement.startsWith("right"), u = t ? e.height : e.width, o = Number.isFinite(a.arrowOffset) ? Math.max(6, a.arrowOffset) : 10, r = t ? e.anchor.top + e.anchor.height / 2 - e.y : e.anchor.left + e.anchor.width / 2 - e.x;
-    ue.value = {
-      [t ? "top" : "left"]: Math.max(Math.min(o, u / 2), Math.min(r, u - o)) + "px"
+  }), U = E({});
+  function te(e) {
+    const a = e.placement.startsWith("left") || e.placement.startsWith("right"), o = a ? e.height : e.width, w = Number.isFinite(t.arrowOffset) ? Math.max(6, t.arrowOffset) : 10, z = a ? e.anchor.top + e.anchor.height / 2 - e.y : e.anchor.left + e.anchor.width / 2 - e.x;
+    U.value = {
+      [a ? "top" : "left"]: Math.max(Math.min(w, o / 2), Math.min(z, o - w)) + "px"
     };
   }
-  const n = Xe(T, s, {
+  const n = xe(C, x, {
     get placement() {
-      return a.placement;
+      return t.placement;
     },
     get gap() {
-      return a.offset ?? (v === "tooltip" ? 7 : 8);
+      return t.offset ?? (v === "tooltip" ? 7 : 8);
     },
     get autoAdjustOverflow() {
-      return a.autoAdjustOverflow;
+      return t.autoAdjustOverflow;
     },
     get closeOnEscape() {
-      return a.closeOnEscape;
+      return t.closeOnEscape;
     },
     get closeOnOutside() {
-      return a.closeOnOutside;
+      return t.closeOnOutside;
     },
     closeOnTab: v === "tooltip",
     get strategy() {
-      return a.appendTo === !1 || ne.value !== document.body ? "absolute" : "fixed";
+      return t.appendTo === !1 || N.value !== document.body ? "absolute" : "fixed";
     },
-    width: () => a.width,
-    maxWidth: () => ee(a.maxWidth) ?? (v === "tooltip" ? "320px" : "360px"),
-    zIndex: () => a.zIndex,
-    onPosition: Ae,
-    requestOpen(e, t) {
-      return l(e, t), !1;
+    width: () => t.width,
+    maxWidth: () => Re(t, v),
+    zIndex: () => t.zIndex,
+    onPosition: te,
+    requestOpen(e, a, o) {
+      return f(e, a, o), !1;
     }
+  }), l = Oe(t, v, {
+    available: A,
+    anchor: C,
+    actualReference: r,
+    panel: x,
+    floating: n,
+    restoreReferenceFocus: K,
+    request: f,
+    allowTabExit: u == null ? void 0 : u.allowTabExit
+  }), { handlers: p, tab: H } = l, W = Ce(v, R, {
+    pointerenter: p.pointerEnter,
+    pointerleave: p.pointerLeave,
+    focusin: p.focusIn,
+    focusout: p.focusOut,
+    click: p.click,
+    contextmenu: p.contextmenu,
+    keydown: p.key
   });
-  let S, m, B, C, i, I = 0, oe = -1, ie = -1, W = !1, V = !1, M = !1, z = !1, g = !1;
-  const c = f(() => {
-    const e = a.trigger ?? (v === "tooltip" ? ["hover", "focus"] : ["click"]), t = Array.isArray(e) ? e : [e];
-    return new Set(t.includes("manual") ? [] : t);
-  });
-  function k() {
-    clearTimeout(S), clearTimeout(m), S = m = void 0;
-  }
-  function N() {
-    clearTimeout(B), B = void 0;
+  function F() {
+    var a;
+    const e = c.value && m.value ? r.value : void 0;
+    W.attach(
+      e && !((a = g.value) != null && a.contains(e)) ? e : void 0,
+      n.open.value
+    );
   }
+  let h, T = 0, G = -1, J = -1;
   function L() {
-    W = V = M = z = g = !1;
-  }
-  function $() {
     var e;
-    p.value && !j.value && q.current.value && ((e = T.value) != null && e.isConnected) ? (X.value = !0, n.show(!0)) : n.close(!1, !0);
+    A.value && !O.value && M.current.value && ((e = C.value) != null && e.isConnected) ? (B.value = !0, n.show(!0)) : n.close(!1, !0);
   }
-  async function l(e, t = !1) {
-    var o, r;
-    if (k(), !d.value || e && (!p.value || n.restoringFocus.value || !((o = T.value) != null && o.isConnected)))
+  async function f(e, a = !1, o = "programmatic", w = !0) {
+    var Q, X, Y, Z, _;
+    const z = n.open.value;
+    if (!e && z && ((Q = u == null ? void 0 : u.allowClose) == null ? void 0 : Q.call(u, o)) === !1 || (l.clearDelays(), !c.value || e && (!A.value || n.restoringFocus.value || !((X = C.value) != null && X.isConnected))))
       return !1;
-    e || L(), j.value = !1;
-    let u = Object.is(q.current.value, e);
-    return u || (u = await q.commit(
+    e || l.resetReasons(), O.value = !1;
+    let I = Object.is(M.current.value, e);
+    return I || (I = await M.commit(
       e,
-      (O) => {
-        A("update:open", O), A("update:modelValue", O);
+      ($) => {
+        y("update:open", $), y("update:modelValue", $);
       },
       () => {
       }
-    )), d.value ? (u && (e ? $() : (n.close(!1, !0), t && ((r = T.value) != null && r.isConnected) && Y())), u) : !1;
-  }
-  function re() {
-    if (clearTimeout(m), m = void 0, !p.value || n.restoringFocus.value || n.open.value || S)
-      return;
-    const e = te(a.showDelay);
-    e ? S = setTimeout(() => {
-      S = void 0, l(!0);
-    }, e) : l(!0);
-  }
-  function le() {
-    return g || W || a.enterable !== !1 && V || c.value.has("focus") && M || a.enterable !== !1 && z;
-  }
-  function U() {
-    if (clearTimeout(S), S = void 0, clearTimeout(m), m = void 0, le() || !n.open.value) return;
-    const e = () => {
-      m = void 0, !le() && n.isTop() && l(!1);
-    }, t = te(a.hideDelay);
-    t ? m = setTimeout(e, t) : e();
-  }
-  function se() {
-    c.value.has("hover") && (W = !0, re());
-  }
-  function ce() {
-    c.value.has("hover") && (W = !1, U());
-  }
-  function Ee() {
-    a.enterable !== !1 && (V = !0, clearTimeout(m), m = void 0);
-  }
-  function Se() {
-    V = !1, c.value.has("hover") && U();
-  }
-  function fe(e) {
-    var t;
-    (t = s.value) != null && t.contains(e.target) || n.restoringFocus.value || (M = !0, c.value.has("focus") && re());
-  }
-  function ve(e) {
-    var u, o, r;
-    if ((u = s.value) != null && u.contains(e.target)) return;
-    const t = e.relatedTarget;
-    if (!((o = T.value) != null && o.contains(t))) {
-      if (M = !1, (r = s.value) != null && r.contains(t) && a.enterable !== !1) {
-        z = !0;
-        return;
-      }
-      (c.value.has("focus") || c.value.has("hover")) && U();
-    }
-  }
-  function Ce() {
-    a.enterable !== !1 && (z = !0);
-  }
-  function Fe(e) {
-    var u, o;
-    const t = e.relatedTarget;
-    if (!((u = s.value) != null && u.contains(t))) {
-      if (z = !1, (o = T.value) != null && o.contains(t)) {
-        M = !0;
-        return;
-      }
-      (c.value.has("focus") || c.value.has("hover")) && U();
-    }
-  }
-  function de(e) {
-    var t;
-    (t = s.value) != null && t.contains(e.target) || !c.value.has("click") || !p.value || (g = n.open.value ? !g && (W && c.value.has("hover") || M && c.value.has("focus")) : !0, l(g));
-  }
-  function he(e) {
-    var t;
-    (t = s.value) != null && t.contains(e.target) || !c.value.has("contextmenu") || !p.value || (e.preventDefault(), g = !0, l(!0));
-  }
-  function me(e) {
-    var u;
-    if ((u = s.value) != null && u.contains(e.target) || !c.value.size || !p.value || e.defaultPrevented)
-      return;
-    const t = e.target;
-    if (!t.closest('input,textarea,select,[contenteditable="true"]')) {
-      if (e.key === "F10" && e.shiftKey && c.value.has("contextmenu")) {
-        e.preventDefault(), g = !0, l(!0);
-        return;
-      }
-      (a.triggerKeys ?? ["Enter", " "]).some(
-        (o) => o === e.key || o === "Space" && e.key === " "
-      ) && (c.value.has("click") && t.closest("button,a[href],input") || (e.preventDefault(), g = !n.open.value, l(g)));
-    }
+    )), c.value ? (I && (e ? L() : (n.close(!1, !0), a && ((Y = u == null ? void 0 : u.shouldRestoreFocus) == null ? void 0 : Y.call(u)) !== !1 && ((Z = C.value) != null && Z.isConnected) && K(), z && w && ((_ = u == null ? void 0 : u.onDismiss) == null || _.call(u, o)))), I) : !1;
   }
-  function ye(e) {
-    return [...e.querySelectorAll(P)].filter(
-      (t) => t.tabIndex >= 0 && !t.matches(":disabled") && !t.closest('[inert],[aria-hidden="true"]') && !!t.getClientRects().length && getComputedStyle(t).visibility !== "hidden"
-    );
+  function D() {
+    h == null || h.disconnect(), h = void 0;
   }
-  function Re(e) {
-    const t = h.value, u = ye(document).filter((O) => {
-      var K;
-      return !((K = s.value) != null && K.contains(O));
-    }), o = u.findIndex((O) => O === t || (t == null ? void 0 : t.contains(O))), r = o < 0 ? void 0 : u[o + (e ? -1 : 1)];
-    return r == null || r.focus(), !!r;
+  function ne() {
+    D(), !(!n.open.value || !x.value || typeof ResizeObserver > "u") && (h = new ResizeObserver(n.schedule), h.observe(x.value), r.value && h.observe(r.value));
   }
-  async function Z(e) {
-    var K, we;
-    if (e.key !== "Tab" || v !== "popover" || !n.open.value || !n.isTop())
-      return;
-    const t = e.target, u = (K = s.value) == null ? void 0 : K.contains(t), o = (we = T.value) == null ? void 0 : we.contains(t);
-    if (!u && !o) return;
-    const r = s.value ? ye(s.value) : [];
-    if (o && !e.shiftKey && a.enterable !== !1 && r.length) {
-      e.preventDefault(), r[0].focus();
-      return;
-    }
-    if (u && t !== (e.shiftKey ? r[0] : r.at(-1)) && r.length)
-      return;
-    e.preventDefault(), await l(!1) && (u && e.shiftKey ? Y() : Re(e.shiftKey) || Y());
+  function P() {
+    l.reset(), l.clearAuto(), W.detach(), D(), document.removeEventListener("keydown", H, !0), n.close(!1, !0);
   }
-  function ge() {
-    N();
-    const e = te(a.autoClose);
-    n.open.value && e && (B = setTimeout(() => {
-      B = void 0, l(!1);
-    }, e));
-  }
-  function _() {
-    C == null || C.disconnect(), C = void 0;
-  }
-  function je() {
-    _(), !(!n.open.value || !s.value || typeof ResizeObserver > "u") && (C = new ResizeObserver(n.schedule), C.observe(s.value), h.value && C.observe(h.value));
-  }
-  const be = {
-    pointerenter: se,
-    pointerleave: ce,
-    focusin: fe,
-    focusout: ve,
-    click: de,
-    contextmenu: he,
-    keydown: me
-  };
-  let b;
-  function xe() {
-    if (!(!i || !b))
-      if (v === "tooltip") {
-        const e = n.open.value ? [b["aria-describedby"], R].filter(Boolean).join(" ") : b["aria-describedby"];
-        e ? i.setAttribute("aria-describedby", e) : i.removeAttribute("aria-describedby");
-      } else {
-        i.setAttribute(
-          "aria-haspopup",
-          b["aria-haspopup"] ?? "dialog"
-        ), i.setAttribute("aria-expanded", String(n.open.value));
-        const e = n.open.value ? R : b["aria-controls"];
-        e ? i.setAttribute("aria-controls", e) : i.removeAttribute("aria-controls");
-      }
-  }
-  function pe() {
-    if (i)
-      for (const [e, t] of Object.entries(be))
-        i.removeEventListener(e, t);
-    if (i && b)
-      for (const [e, t] of Object.entries(b))
-        t === null ? i.removeAttribute(e) : i.setAttribute(e, t);
-    b = void 0, i = void 0;
-  }
-  function G() {
-    var e;
-    if (pe(), !(!d.value || !w.value)) {
-      if (i = h.value, i && ((e = E.value) != null && e.contains(i))) {
-        i = void 0;
-        return;
-      }
-      i && (b = Object.fromEntries(
-        [
-          "aria-describedby",
-          "aria-controls",
-          "aria-expanded",
-          "aria-haspopup"
-        ].map((t) => [t, i.getAttribute(t)])
-      ), xe());
-      for (const [t, u] of Object.entries(be))
-        i == null || i.addEventListener(t, u);
-    }
-  }
-  function J() {
-    k(), N(), L(), pe(), _(), document.removeEventListener("keydown", Z, !0), n.close(!1, !0);
-  }
-  x(
-    q.current,
+  d(
+    M.current,
     () => {
-      j.value = !1, $();
+      O.value = !1, L();
     },
     { flush: "post" }
-  ), x(
-    [p, E, w],
+  ), d(
+    [A, g, m],
     () => {
-      p.value || (k(), N(), L()), $(), G();
+      A.value || (l.reset(), l.clearAuto()), L(), F();
     },
     { flush: "post", immediate: !0 }
-  ), x(
-    () => y == null ? void 0 : y.value,
+  ), d(
+    () => s == null ? void 0 : s.value,
     (e) => {
-      e === !1 && (j.value = !0, J());
+      e === !1 && (O.value = !0, P());
     },
     { flush: "sync" }
-  ), x(() => a.autoClose, ge), x(
-    [h, w],
+  ), d(() => t.autoClose, l.startAuto), d(
+    [r, m],
     () => {
-      k(), L(), n.schedule(), G();
+      l.reset(), n.schedule(), F();
     },
     { flush: "post" }
-  ), x(
-    () => a.trigger,
+  ), d(
+    () => t.trigger,
     () => {
-      k(), L();
+      l.reset();
     }
-  ), x(
+  ), d(
     () => [
-      a.placement,
-      a.offset,
-      a.autoAdjustOverflow,
-      a.width,
-      a.maxWidth,
-      a.maxHeight,
-      a.appendTo,
-      a.arrowOffset
+      t.placement,
+      t.offset,
+      t.autoAdjustOverflow,
+      t.width,
+      t.maxWidth,
+      t.maxHeight,
+      t.appendTo,
+      t.arrowOffset
     ],
     n.schedule,
     { flush: "post" }
-  ), x([n.open, s, h], je, { flush: "post" }), x(
+  ), d([n.open, x, r], ne, { flush: "post" }), d(
     n.open,
     (e) => {
-      I++, xe(), A("visibleChange", e), A("openChange", e), A(e ? "show" : "hide"), document.removeEventListener("keydown", Z, !0), e ? (X.value = !0, document.addEventListener("keydown", Z, !0), ge()) : (k(), N(), L(), _());
+      T++, W.syncAria(e), y("visibleChange", e), y("openChange", e), y(e ? "show" : "hide"), document.removeEventListener("keydown", H, !0), e ? (B.value = !0, document.addEventListener("keydown", H, !0), l.startAuto()) : (l.reset(), l.clearAuto(), D());
     },
     { flush: "sync" }
   );
-  async function Me() {
-    const e = I;
-    await Te(), d.value && n.open.value && e === I && oe !== e && (oe = e, A("opened"));
-  }
-  async function ke() {
-    const e = I;
-    await Te(), d.value && !n.open.value && e === I && ie !== e && (ie = e, A("closed"));
+  async function ae() {
+    const e = T;
+    await k(), c.value && n.open.value && e === T && G !== e && (G = e, y("opened"));
   }
-  function Le() {
-    j.value = !0, J();
+  async function ue() {
+    const e = T;
+    await k(), c.value && !n.open.value && e === T && J !== e && (J = e, y("closed"));
   }
-  Ve(() => {
-    $(), G();
-  }), Ne(() => {
-    d.value = !0, G();
-  }), $e(() => {
-    d.value = !1, j.value = !0, J();
-  }), Ue(() => {
-    d.value = !1, J();
+  function le() {
+    O.value = !0, P();
+  }
+  me(() => {
+    L(), F();
+  }), pe(() => {
+    c.value = !0, F();
+  }), ye(() => {
+    c.value = !1, O.value = !0, P();
+  }), ge(() => {
+    c.value = !1, P();
   });
-  const De = f(
-    () => n.open.value || a.forceRender || a.destroyOnHide === !1 && X.value
-  ), He = f(() => {
-    const e = (a.effect ?? (v === "tooltip" ? "dark" : "light")) === "dark";
-    return {
-      "--hys-ui-popup-surface": a.color || (e ? "#172744" : "var(--hys-ui-surface,var(--hys-ui-theme-surface))"),
-      "--hys-ui-popup-color": a.textColor || (e ? "#fff" : "var(--hys-ui-text,var(--hys-ui-theme-text))"),
-      "--hys-ui-popup-border": a.color || (e ? "#172744" : "var(--hys-ui-border,var(--hys-ui-theme-border))")
-    };
-  }), Ie = f(() => ({
-    ...a.overlayStyle,
-    ...n.style.value,
-    ...He.value,
-    overflow: "visible",
-    maxWidth: `min(${ee(a.maxWidth) ?? (v === "tooltip" ? "320px" : "360px")},calc(100vw - 20px))`,
-    minWidth: a.width !== void 0 ? "0" : void 0
-  })), We = f(() => ({
-    ...a.contentStyle,
-    maxHeight: a.maxHeight !== void 0 ? `min(${ee(a.maxHeight)},calc(100vh - 20px))` : "calc(100vh - 20px)"
-  })), ze = f(() => ({
+  const ce = i(
+    () => n.open.value || t.forceRender || t.destroyOnHide === !1 && B.value
+  ), { style: re, contentStyle: oe } = Ee(
+    t,
+    v,
+    n.style
+  ), ie = i(() => ({
     open: n.open.value,
-    show: () => l(!0),
-    close: () => l(!1),
-    toggle: () => l(!n.open.value),
+    show: () => f(!0),
+    close: () => f(!1),
+    toggle: () => f(!n.open.value),
     updatePosition: n.schedule
-  })), Ke = f(() => ({
-    tabindex: w.value ? -1 : H.value ? void 0 : Q.value ? -1 : a.triggerTabindex ?? 0,
-    role: v === "popover" && !H.value && !w.value ? "button" : void 0,
-    "aria-disabled": !H.value && Q.value || void 0,
-    ...H.value ? {} : v === "tooltip" ? { "aria-describedby": n.open.value ? R : void 0 } : {
+  })), se = i(() => ({
+    tabindex: m.value ? -1 : S.value ? void 0 : q.value ? -1 : t.triggerTabindex ?? 0,
+    role: v === "popover" && !S.value && !m.value ? "button" : void 0,
+    "aria-disabled": !S.value && q.value || void 0,
+    ...S.value ? {} : v === "tooltip" ? { "aria-describedby": n.open.value ? R : void 0 } : {
       "aria-controls": n.open.value ? R : void 0,
       "aria-expanded": n.open.value,
       "aria-haspopup": "dialog"
     }
   }));
   return {
-    wrapper: E,
-    referenceElement: F,
-    panel: s,
-    actualReference: h,
-    nativeReference: H,
+    wrapper: g,
+    referenceElement: b,
+    panel: x,
+    actualReference: r,
+    nativeReference: S,
     id: R,
-    titleId: Oe,
+    titleId: ee,
     open: n.open,
     placement: n.placement,
-    active: f(() => d.value && (y == null ? void 0 : y.value) !== !1),
-    mounted: De,
-    teleportTo: ne,
-    arrowStyle: ue,
-    style: Ie,
-    contentStyle: We,
-    scope: ze,
-    wrapperAttrs: Ke,
-    pointerEnter: se,
-    pointerLeave: ce,
-    panelEnter: Ee,
-    panelLeave: Se,
-    focusIn: fe,
-    focusOut: ve,
-    panelFocusIn: Ce,
-    panelFocusOut: Fe,
-    click: de,
-    contextmenu: he,
-    key: me,
-    afterEnter: Me,
-    afterLeave: ke,
-    inactive: Le,
-    request: l,
-    show: () => l(!0),
-    hide: () => l(!1),
-    toggle: () => l(!n.open.value),
+    active: i(() => c.value && (s == null ? void 0 : s.value) !== !1),
+    mounted: ce,
+    teleportTo: N,
+    arrowStyle: U,
+    style: re,
+    contentStyle: oe,
+    scope: ie,
+    wrapperAttrs: se,
+    ...p,
+    afterEnter: ae,
+    afterLeave: ue,
+    inactive: le,
+    request: f,
+    show: () => f(!0),
+    hide: () => f(!1),
+    toggle: () => f(!n.open.value),
     updatePosition: n.schedule,
     focus: () => {
       var e;
-      return (e = T.value) == null ? void 0 : e.focus();
+      return (e = C.value) == null ? void 0 : e.focus();
     }
   };
 }
 export {
-  at as usePopupSurface
+  Ie as usePopupSurface
 };