hys-ui 0.4.0 → 0.6.0

package/dist/composables/usePopupSurface.js

@@ -1,57 +1,59 @@
-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 C, shallowRef as le, useId as ce, inject as re, computed as u, watch as f, onMounted as ie, onActivated as se, onDeactivated as ve, onBeforeUnmount as fe, nextTick as G } from "vue";
+import { useHysControlState as de } from "./formContext.js";
+import { useChoiceModel as he } from "./choiceModel.js";
+import { overlayOwnerKey as me } from "./overlayManager.js";
+import { useFloating as ye } from "./useFloating.js";
+import { popupFocusControls as L, usePopupSurfaceInteractions as ge } from "./usePopupSurfaceInteractions.js";
+import { createPopupReferenceBinding as xe } from "./popupReferenceBinding.js";
+const q = (t) => typeof t == "number" ? Number.isFinite(t) ? Math.max(0, t) + "px" : void 0 : t;
+function Se(t, i, y) {
+  const g = C(), p = le(), b = C(), E = ce() + "-popup", J = E + "-title", { disabled: k } = de(t), s = re(me, void 0), l = C(!0), w = C(!1), z = C(!1), M = he(
     {
       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
+  ), R = u(
+    () => l.value && !k.value && (s == null ? void 0 : s.value) !== !1
+  ), d = u(
+    () => typeof t.reference == "function" ? t.reference() : t.reference
+  ), c = u(() => {
+    const e = d.value;
+    return e instanceof HTMLElement ? e : (e == null ? void 0 : e.contextElement) ?? p.value ?? g.value;
+  }), S = u(
+    () => !!p.value && (p.value.matches(L) || !!p.value.querySelector(L))
   );
-  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 B() {
+    var a;
+    const e = c.value;
+    (a = e != null && e.matches(L) ? e : (e == null ? void 0 : e.querySelector(L)) ?? g.value) == null || a.focus({ preventScroll: !0 });
   }
-  function Y() {
+  function V() {
     n.restoringFocus.value = !0;
     try {
-      ae();
+      B();
     } finally {
       n.restoringFocus.value = !1;
     }
   }
-  const T = f(() => {
-    const e = w.value ?? F.value ?? E.value;
+  const O = u(() => {
+    const e = d.value ?? p.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 r, m;
+          return !!((r = c.value) != null && r.contains(a)) || !!((m = g.value) != null && m.contains(a));
         },
-        focus: ae,
+        focus: B,
         get isConnected() {
-          var t;
-          return ((t = h.value) == null ? void 0 : t.isConnected) ?? !!w.value;
+          var a;
+          return ((a = c.value) == null ? void 0 : a.isConnected) ?? !!d.value;
         }
       };
-  }), ne = f(() => {
-    const e = a.appendTo;
+  }), D = u(() => {
+    const e = t.appendTo;
     if (e instanceof HTMLElement) return e;
     if (typeof e == "string")
       try {
@@ -60,399 +62,231 @@ 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"
+  }), N = C({});
+  function Q(e) {
+    const a = e.placement.startsWith("left") || e.placement.startsWith("right"), r = a ? e.height : e.width, m = Number.isFinite(t.arrowOffset) ? Math.max(6, t.arrowOffset) : 10, W = a ? e.anchor.top + e.anchor.height / 2 - e.y : e.anchor.left + e.anchor.width / 2 - e.x;
+    N.value = {
+      [a ? "top" : "left"]: Math.max(Math.min(m, r / 2), Math.min(W, r - m)) + "px"
     };
   }
-  const n = Xe(T, s, {
+  const n = ye(O, b, {
     get placement() {
-      return a.placement;
+      return t.placement;
     },
     get gap() {
-      return a.offset ?? (v === "tooltip" ? 7 : 8);
+      return t.offset ?? (i === "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",
+    closeOnTab: i === "tooltip",
     get strategy() {
-      return a.appendTo === !1 || ne.value !== document.body ? "absolute" : "fixed";
+      return t.appendTo === !1 || D.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: () => q(t.maxWidth) ?? (i === "tooltip" ? "320px" : "360px"),
+    zIndex: () => t.zIndex,
+    onPosition: Q,
+    requestOpen(e, a) {
+      return v(e, a), !1;
     }
+  }), o = ge(t, i, {
+    available: R,
+    anchor: O,
+    actualReference: c,
+    panel: b,
+    floating: n,
+    restoreReferenceFocus: V,
+    request: v
+  }), { handlers: h, tab: I } = o, P = xe(i, E, {
+    pointerenter: h.pointerEnter,
+    pointerleave: h.pointerLeave,
+    focusin: h.focusIn,
+    focusout: h.focusOut,
+    click: h.click,
+    contextmenu: h.contextmenu,
+    keydown: h.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 L() {
-    W = V = M = z = g = !1;
+  function T() {
+    var a;
+    const e = l.value && d.value ? c.value : void 0;
+    P.attach(
+      e && !((a = g.value) != null && a.contains(e)) ? e : void 0,
+      n.open.value
+    );
   }
-  function $() {
+  let x, A = 0, $ = -1, K = -1;
+  function F() {
     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);
+    R.value && !w.value && M.current.value && ((e = O.value) != null && e.isConnected) ? (z.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 v(e, a = !1) {
+    var m, W;
+    if (o.clearDelays(), !l.value || e && (!R.value || n.restoringFocus.value || !((m = O.value) != null && m.isConnected)))
       return !1;
-    e || L(), j.value = !1;
-    let u = Object.is(q.current.value, e);
-    return u || (u = await q.commit(
+    e || o.resetReasons(), w.value = !1;
+    let r = Object.is(M.current.value, e);
+    return r || (r = await M.commit(
       e,
-      (O) => {
-        A("update:open", O), A("update:modelValue", O);
+      (U) => {
+        y("update:open", U), y("update:modelValue", U);
       },
       () => {
       }
-    )), 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;
+    )), l.value ? (r && (e ? F() : (n.close(!1, !0), a && ((W = O.value) != null && W.isConnected) && V())), r) : !1;
   }
-  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 j() {
+    x == null || x.disconnect(), x = void 0;
   }
-  function se() {
-    c.value.has("hover") && (W = !0, re());
+  function X() {
+    j(), !(!n.open.value || !b.value || typeof ResizeObserver > "u") && (x = new ResizeObserver(n.schedule), x.observe(b.value), c.value && x.observe(c.value));
   }
-  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)));
-    }
+  function H() {
+    o.reset(), o.clearAuto(), P.detach(), j(), document.removeEventListener("keydown", I, !0), n.close(!1, !0);
   }
-  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 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;
-  }
-  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 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,
+  f(
+    M.current,
     () => {
-      j.value = !1, $();
+      w.value = !1, F();
     },
     { flush: "post" }
-  ), x(
-    [p, E, w],
+  ), f(
+    [R, g, d],
     () => {
-      p.value || (k(), N(), L()), $(), G();
+      R.value || (o.reset(), o.clearAuto()), F(), T();
     },
     { flush: "post", immediate: !0 }
-  ), x(
-    () => y == null ? void 0 : y.value,
+  ), f(
+    () => s == null ? void 0 : s.value,
     (e) => {
-      e === !1 && (j.value = !0, J());
+      e === !1 && (w.value = !0, H());
     },
     { flush: "sync" }
-  ), x(() => a.autoClose, ge), x(
-    [h, w],
+  ), f(() => t.autoClose, o.startAuto), f(
+    [c, d],
     () => {
-      k(), L(), n.schedule(), G();
+      o.reset(), n.schedule(), T();
     },
     { flush: "post" }
-  ), x(
-    () => a.trigger,
+  ), f(
+    () => t.trigger,
     () => {
-      k(), L();
+      o.reset();
     }
-  ), x(
+  ), f(
     () => [
-      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(
+  ), f([n.open, b, c], X, { flush: "post" }), f(
     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(), _());
+      A++, P.syncAria(e), y("visibleChange", e), y("openChange", e), y(e ? "show" : "hide"), document.removeEventListener("keydown", I, !0), e ? (z.value = !0, document.addEventListener("keydown", I, !0), o.startAuto()) : (o.reset(), o.clearAuto(), j());
     },
     { 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 Y() {
+    const e = A;
+    await G(), l.value && n.open.value && e === A && $ !== e && ($ = e, y("opened"));
   }
-  async function ke() {
-    const e = I;
-    await Te(), d.value && !n.open.value && e === I && ie !== e && (ie = e, A("closed"));
+  async function Z() {
+    const e = A;
+    await G(), l.value && !n.open.value && e === A && K !== e && (K = e, y("closed"));
   }
-  function Le() {
-    j.value = !0, J();
-  }
-  Ve(() => {
-    $(), G();
-  }), Ne(() => {
-    d.value = !0, G();
-  }), $e(() => {
-    d.value = !1, j.value = !0, J();
-  }), Ue(() => {
-    d.value = !1, J();
+  function _() {
+    w.value = !0, H();
+  }
+  ie(() => {
+    F(), T();
+  }), se(() => {
+    l.value = !0, T();
+  }), ve(() => {
+    l.value = !1, w.value = !0, H();
+  }), fe(() => {
+    l.value = !1, H();
   });
-  const De = f(
-    () => n.open.value || a.forceRender || a.destroyOnHide === !1 && X.value
-  ), He = f(() => {
-    const e = (a.effect ?? (v === "tooltip" ? "dark" : "light")) === "dark";
+  const ee = u(
+    () => n.open.value || t.forceRender || t.destroyOnHide === !1 && z.value
+  ), te = u(() => {
+    const e = (t.effect ?? (i === "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))")
+      "--hys-ui-popup-surface": t.color || (e ? "#172744" : "var(--hys-ui-surface,var(--hys-ui-theme-surface))"),
+      "--hys-ui-popup-color": t.textColor || (e ? "#fff" : "var(--hys-ui-text,var(--hys-ui-theme-text))"),
+      "--hys-ui-popup-border": t.color || (e ? "#172744" : "var(--hys-ui-border,var(--hys-ui-theme-border))")
     };
-  }), Ie = f(() => ({
-    ...a.overlayStyle,
+  }), ne = u(() => ({
+    ...t.overlayStyle,
     ...n.style.value,
-    ...He.value,
+    ...te.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(() => ({
+    maxWidth: `min(${q(t.maxWidth) ?? (i === "tooltip" ? "320px" : "360px")},calc(100vw - 20px))`,
+    minWidth: t.width !== void 0 ? "0" : void 0
+  })), ae = u(() => ({
+    ...t.contentStyle,
+    maxHeight: t.maxHeight !== void 0 ? `min(${q(t.maxHeight)},calc(100vh - 20px))` : "calc(100vh - 20px)"
+  })), oe = u(() => ({
     open: n.open.value,
-    show: () => l(!0),
-    close: () => l(!1),
-    toggle: () => l(!n.open.value),
+    show: () => v(!0),
+    close: () => v(!1),
+    toggle: () => v(!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 } : {
-      "aria-controls": n.open.value ? R : void 0,
+  })), ue = u(() => ({
+    tabindex: d.value ? -1 : S.value ? void 0 : k.value ? -1 : t.triggerTabindex ?? 0,
+    role: i === "popover" && !S.value && !d.value ? "button" : void 0,
+    "aria-disabled": !S.value && k.value || void 0,
+    ...S.value ? {} : i === "tooltip" ? { "aria-describedby": n.open.value ? E : void 0 } : {
+      "aria-controls": n.open.value ? E : void 0,
       "aria-expanded": n.open.value,
       "aria-haspopup": "dialog"
     }
   }));
   return {
-    wrapper: E,
-    referenceElement: F,
-    panel: s,
-    actualReference: h,
-    nativeReference: H,
-    id: R,
-    titleId: Oe,
+    wrapper: g,
+    referenceElement: p,
+    panel: b,
+    actualReference: c,
+    nativeReference: S,
+    id: E,
+    titleId: J,
     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: u(() => l.value && (s == null ? void 0 : s.value) !== !1),
+    mounted: ee,
+    teleportTo: D,
+    arrowStyle: N,
+    style: ne,
+    contentStyle: ae,
+    scope: oe,
+    wrapperAttrs: ue,
+    ...h,
+    afterEnter: Y,
+    afterLeave: Z,
+    inactive: _,
+    request: v,
+    show: () => v(!0),
+    hide: () => v(!1),
+    toggle: () => v(!n.open.value),
     updatePosition: n.schedule,
     focus: () => {
       var e;
-      return (e = T.value) == null ? void 0 : e.focus();
+      return (e = O.value) == null ? void 0 : e.focus();
     }
   };
 }
 export {
-  at as usePopupSurface
+  Se as usePopupSurface
 };