hys-ui 0.6.0 → 0.8.0

package/dist/composables/useFloating.js

@@ -4,7 +4,7 @@ import { popupSize as Q } from "../motion/popup.js";
 import { positionFloating as Z } from "./floatingPosition.js";
 import { overlayOwnerKey as _, registerOverlay as ee } from "./overlayManager.js";
 function re(v, n, e = {}) {
-  const { disabled: k } = J({}), m = T(_, void 0), c = E(!1), W = Y(), p = E(!1), L = E({
+  const { disabled: M } = J({}), m = T(_, void 0), s = E(!1), W = Y(), p = E(!1), L = E({
     position: "fixed",
     top: "0px",
     left: "0px",
@@ -17,58 +17,59 @@ function re(v, n, e = {}) {
   let $ = 0, w, r, y = 0;
   function F() {
     var R, S, H;
-    if (!c.value || !v.value || !n.value) return;
+    if (!s.value || !v.value || !n.value) return;
     const t = v.value.getBoundingClientRect();
     if (!t.width && !t.height) {
-      u();
+      u(!1, !1, "anchor");
       return;
     }
-    const a = Number.isFinite(e.gap) ? e.gap : 8, i = Number.isFinite(e.padding) ? Math.max(0, e.padding) : 10, l = document.documentElement.clientWidth, o = document.documentElement.clientHeight, d = Math.min(t.width, Math.max(0, l - 2 * i)), g = typeof e.matchWidth == "function" ? e.matchWidth() : e.matchWidth, h = (R = e.maxWidth) == null ? void 0 : R.call(e), P = h !== void 0 && (typeof h != "number" || Number.isFinite(h)) ? `min(${typeof h == "number" ? Math.max(0, h) + "px" : h},calc(100vw - ${i * 2}px))` : `calc(100vw - ${i * 2}px)`, b = (S = e.width) == null ? void 0 : S.call(e), x = typeof b == "number" ? Number.isFinite(b) ? Math.max(0, b) + "px" : void 0 : b;
-    x !== void 0 ? (n.value.style.width = x, n.value.style.minWidth = "0", n.value.style.maxWidth = P) : g === !0 && (n.value.style.width = `${d}px`, n.value.style.minWidth = "0", n.value.style.maxWidth = `${d}px`), x === void 0 && g === "min" && (n.value.style.width = "max-content", n.value.style.minWidth = `${d}px`, n.value.style.maxWidth = `calc(100vw - ${i * 2}px)`);
+    const a = Number.isFinite(e.gap) ? e.gap : 8, i = Number.isFinite(e.padding) ? Math.max(0, e.padding) : 10, l = document.documentElement.clientWidth, d = document.documentElement.clientHeight, c = Math.min(t.width, Math.max(0, l - 2 * i)), g = typeof e.matchWidth == "function" ? e.matchWidth() : e.matchWidth, h = (R = e.maxWidth) == null ? void 0 : R.call(e), N = h !== void 0 && (typeof h != "number" || Number.isFinite(h)) ? `min(${typeof h == "number" ? Math.max(0, h) + "px" : h},calc(100vw - ${i * 2}px))` : `calc(100vw - ${i * 2}px)`, b = (S = e.width) == null ? void 0 : S.call(e), x = typeof b == "number" ? Number.isFinite(b) ? Math.max(0, b) + "px" : void 0 : b;
+    x !== void 0 ? (n.value.style.width = x, n.value.style.minWidth = "0", n.value.style.maxWidth = N) : g === !0 && (n.value.style.width = `${c}px`, n.value.style.minWidth = "0", n.value.style.maxWidth = `${c}px`), x === void 0 && g === "min" && (n.value.style.width = "max-content", n.value.style.minWidth = `${c}px`, n.value.style.maxWidth = `calc(100vw - ${i * 2}px)`);
     const z = Z(
       t,
       Q(n.value),
-      { width: l, height: o },
+      { width: l, height: d },
       A(),
       a,
       i,
-      e.autoAdjustOverflow !== !1
+      e.autoAdjustOverflow !== !1,
+      e.fallbackPlacements
     );
-    let { x: O, y: M } = z;
+    let { x: O, y: k } = z;
     if (C.value = z.placement, (H = e.onPosition) == null || H.call(e, { anchor: t, ...z }), e.strategy === "absolute") {
       n.value.style.position = "absolute";
       const f = n.value.offsetParent;
       if (f && f !== document.body && f !== document.documentElement) {
         const j = f.getBoundingClientRect();
-        O += f.scrollLeft - j.left - f.clientLeft, M += f.scrollTop - j.top - f.clientTop;
+        O += f.scrollLeft - j.left - f.clientLeft, k += f.scrollTop - j.top - f.clientTop;
       } else
-        O += window.scrollX, M += window.scrollY;
+        O += window.scrollX, k += window.scrollY;
     }
     L.value = {
-      ...x !== void 0 ? { width: x, minWidth: "0" } : g === !0 ? { width: `${d}px`, minWidth: "0" } : g === "min" ? { width: "max-content", minWidth: `${d}px` } : {},
+      ...x !== void 0 ? { width: x, minWidth: "0" } : g === !0 ? { width: `${c}px`, minWidth: "0" } : g === "min" ? { width: "max-content", minWidth: `${c}px` } : {},
       position: e.strategy ?? "fixed",
       left: `${Math.round(O)}px`,
-      top: `${Math.round(M)}px`,
+      top: `${Math.round(k)}px`,
       visibility: "visible",
       zIndex: "1200",
-      maxWidth: P,
+      maxWidth: N,
       maxHeight: `calc(100vh - ${i * 2}px)`,
       overflowY: "auto",
       overscrollBehavior: "contain"
     };
   }
-  function s() {
+  function o() {
     cancelAnimationFrame($), $ = requestAnimationFrame(F);
   }
   function I(t) {
     var a, i;
-    !(r != null && r()) || e.closeOnOutside === !1 || !((a = v.value) != null && a.contains(t.target)) && !((i = n.value) != null && i.contains(t.target)) && u();
+    !(r != null && r()) || e.closeOnOutside === !1 || !((a = v.value) != null && a.contains(t.target)) && !((i = n.value) != null && i.contains(t.target)) && u(!1, !1, "outside");
   }
-  function q(t) {
+  function P(t) {
     var a, i;
-    if (!(!c.value || !(r != null && r()))) {
+    if (!(!s.value || !(r != null && r()))) {
       if (t.key === "Escape" && e.closeOnEscape !== !1)
-        t.preventDefault(), t.stopImmediatePropagation(), u(!0);
+        t.preventDefault(), t.stopImmediatePropagation(), u(!0, !1, "escape");
       else if (t.key === "Tab" && e.closeOnTab !== !1) {
         const l = document.activeElement;
         if ((a = v.value) != null && a.contains(l)) {
@@ -76,25 +77,25 @@ function re(v, n, e = {}) {
           return;
         }
         if ((i = n.value) != null && i.contains(l)) {
-          const o = Array.from(
+          const d = Array.from(
             n.value.querySelectorAll(
               'a[href],button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex="-1"])'
             )
           ).filter(
-            (d) => d.getClientRects().length && !d.closest("[inert]")
+            (c) => c.getClientRects().length && !c.closest("[inert]")
           );
-          (!o.length || l === (t.shiftKey ? o[0] : o.at(-1))) && u(!0);
+          (!d.length || l === (t.shiftKey ? d[0] : d.at(-1))) && u(!0);
         }
       }
     }
   }
-  function B() {
+  function q() {
     var t, a;
-    document.removeEventListener("pointerdown", I, !0), document.removeEventListener("keydown", q, !0), window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), (t = window.visualViewport) == null || t.removeEventListener("resize", s), (a = window.visualViewport) == null || a.removeEventListener("scroll", s), cancelAnimationFrame($), w == null || w(), w = void 0, W.value = void 0, r = void 0;
+    document.removeEventListener("pointerdown", I, !0), document.removeEventListener("keydown", P, !0), window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0), (t = window.visualViewport) == null || t.removeEventListener("resize", o), (a = window.visualViewport) == null || a.removeEventListener("scroll", o), cancelAnimationFrame($), w == null || w(), w = void 0, W.value = void 0, r = void 0;
   }
-  function u(t = !1, a = !1) {
-    var i, l;
-    if (!(!a && c.value && ((i = e.requestOpen) == null ? void 0 : i.call(e, !1, t)) === !1) && (y++, !!c.value && (c.value = !1, B(), t && ((l = v.value) != null && l.isConnected)))) {
+  function u(t = !1, a = !1, i) {
+    var l, d;
+    if (!(!a && s.value && ((l = e.requestOpen) == null ? void 0 : l.call(e, !1, t, i)) === !1) && (y++, !!s.value && (s.value = !1, q(), t && ((d = v.value) != null && d.isConnected)))) {
       p.value = !0;
       try {
         v.value.focus();
@@ -103,33 +104,33 @@ function re(v, n, e = {}) {
       }
     }
   }
-  async function N(t = !1) {
-    var l, o, d;
-    if (k.value || (m == null ? void 0 : m.value) === !1) return;
-    if (c.value) {
-      s();
+  async function B(t = !1) {
+    var l, d, c;
+    if (M.value || (m == null ? void 0 : m.value) === !1) return;
+    if (s.value) {
+      o();
       return;
     }
     if (!t && ((l = e.requestOpen) == null ? void 0 : l.call(e, !0)) === !1) return;
     const a = ++y;
-    if (c.value = !0, L.value = {
+    if (s.value = !0, L.value = {
       position: "fixed",
       top: "0px",
       left: "0px",
       visibility: "hidden"
-    }, await G(), a !== y || !c.value) return;
+    }, await G(), a !== y || !s.value) return;
     const i = ee(
       "floating",
-      () => u(!0),
+      () => u(!0, !1, "escape"),
       e.zIndex
     );
-    W.value = i, w = i.unregister, r = i.isTop, F(), document.addEventListener("pointerdown", I, !0), document.addEventListener("keydown", q, !0), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), (o = window.visualViewport) == null || o.addEventListener("resize", s), (d = window.visualViewport) == null || d.addEventListener("scroll", s);
+    W.value = i, w = i.unregister, r = i.isTop, F(), document.addEventListener("pointerdown", I, !0), document.addEventListener("keydown", P, !0), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), (d = window.visualViewport) == null || d.addEventListener("resize", o), (c = window.visualViewport) == null || c.addEventListener("scroll", o);
   }
   function K() {
-    return c.value ? u() : N();
+    return s.value ? u() : B();
   }
   return D(
-    k,
+    M,
     (t) => {
       t && u(!1, !0);
     },
@@ -141,9 +142,9 @@ function re(v, n, e = {}) {
     },
     { flush: "sync" }
   ), V(() => {
-    y++, B();
+    y++, q();
   }), {
-    open: c,
+    open: s,
     style: X(() => {
       var t;
       return {
@@ -153,11 +154,11 @@ function re(v, n, e = {}) {
     }),
     placement: C,
     update: F,
-    show: N,
+    show: B,
     close: u,
     toggle: K,
     restoringFocus: p,
-    schedule: s,
+    schedule: o,
     isTop: () => (r == null ? void 0 : r()) ?? !1
   };
 }

package/dist/composables/usePageVisibility.js

@@ -0,0 +1,19 @@
+import { onMounted as s, onActivated as u, onDeactivated as c, onBeforeUnmount as d, readonly as f, ref as a } from "vue";
+const r = a(!1);
+let o = 0;
+function i() {
+  r.value = document.hidden;
+}
+function b() {
+  let e = !1;
+  function n() {
+    e || (e = !0, ++o === 1 && (i(), document.addEventListener("visibilitychange", i)));
+  }
+  function t() {
+    e && (e = !1, --o === 0 && document.removeEventListener("visibilitychange", i));
+  }
+  return s(n), u(n), c(t), d(t), f(r);
+}
+export {
+  b as usePageVisibility
+};

package/dist/composables/usePopupSurface.js

@@ -1,59 +1,61 @@
-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(
+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 t.open ?? t.modelValue;
       }
     },
     () => t.defaultOpen ?? !1
-  ), R = u(
-    () => l.value && !k.value && (s == null ? void 0 : s.value) !== !1
-  ), d = u(
+  ), A = i(
+    () => c.value && !q.value && (s == null ? void 0 : s.value) !== !1
+  ), m = i(
     () => 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))
+  ), 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 B() {
+  function V() {
     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 });
+    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 V() {
+  function K() {
     n.restoringFocus.value = !0;
     try {
-      B();
+      V();
     } finally {
       n.restoringFocus.value = !1;
     }
   }
-  const O = u(() => {
-    const e = d.value ?? p.value ?? g.value;
+  const C = i(() => {
+    const e = m.value ?? b.value ?? g.value;
     if (e)
       return {
         getBoundingClientRect: () => e.getBoundingClientRect(),
         contains: (a) => {
-          var r, m;
-          return !!((r = c.value) != null && r.contains(a)) || !!((m = g.value) != null && m.contains(a));
+          var o, w;
+          return !!((o = r.value) != null && o.contains(a)) || !!((w = g.value) != null && w.contains(a));
         },
-        focus: B,
+        focus: V,
         get isConnected() {
           var a;
-          return ((a = c.value) == null ? void 0 : a.isConnected) ?? !!d.value;
+          return ((a = r.value) == null ? void 0 : a.isConnected) ?? !!m.value;
         }
       };
-  }), D = u(() => {
+  }), 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 {
@@ -62,19 +64,19 @@ function Se(t, i, y) {
         return document.body;
       }
     return document.body;
-  }), 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"
+  }), 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 = ye(O, b, {
+  const n = xe(C, x, {
     get placement() {
       return t.placement;
     },
     get gap() {
-      return t.offset ?? (i === "tooltip" ? 7 : 8);
+      return t.offset ?? (v === "tooltip" ? 7 : 8);
     },
     get autoAdjustOverflow() {
       return t.autoAdjustOverflow;
@@ -85,101 +87,103 @@ function Se(t, i, y) {
     get closeOnOutside() {
       return t.closeOnOutside;
     },
-    closeOnTab: i === "tooltip",
+    closeOnTab: v === "tooltip",
     get strategy() {
-      return t.appendTo === !1 || D.value !== document.body ? "absolute" : "fixed";
+      return t.appendTo === !1 || N.value !== document.body ? "absolute" : "fixed";
     },
     width: () => t.width,
-    maxWidth: () => q(t.maxWidth) ?? (i === "tooltip" ? "320px" : "360px"),
+    maxWidth: () => Re(t, v),
     zIndex: () => t.zIndex,
-    onPosition: Q,
-    requestOpen(e, a) {
-      return v(e, a), !1;
+    onPosition: te,
+    requestOpen(e, a, o) {
+      return f(e, a, o), !1;
     }
-  }), o = ge(t, i, {
-    available: R,
-    anchor: O,
-    actualReference: c,
-    panel: b,
+  }), l = Oe(t, v, {
+    available: A,
+    anchor: C,
+    actualReference: r,
+    panel: x,
     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
+    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
   });
-  function T() {
+  function F() {
     var a;
-    const e = l.value && d.value ? c.value : void 0;
-    P.attach(
+    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 x, A = 0, $ = -1, K = -1;
-  function F() {
+  let h, T = 0, G = -1, J = -1;
+  function L() {
     var e;
-    R.value && !w.value && M.current.value && ((e = O.value) != null && e.isConnected) ? (z.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 v(e, a = !1) {
-    var m, W;
-    if (o.clearDelays(), !l.value || e && (!R.value || n.restoringFocus.value || !((m = O.value) != null && m.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 || o.resetReasons(), w.value = !1;
-    let r = Object.is(M.current.value, e);
-    return r || (r = await M.commit(
+    e || l.resetReasons(), O.value = !1;
+    let I = Object.is(M.current.value, e);
+    return I || (I = await M.commit(
       e,
-      (U) => {
-        y("update:open", U), y("update:modelValue", U);
+      ($) => {
+        y("update:open", $), y("update:modelValue", $);
       },
       () => {
       }
-    )), l.value ? (r && (e ? F() : (n.close(!1, !0), a && ((W = O.value) != null && W.isConnected) && V())), r) : !1;
+    )), 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 j() {
-    x == null || x.disconnect(), x = void 0;
+  function D() {
+    h == null || h.disconnect(), h = void 0;
   }
-  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 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));
   }
-  function H() {
-    o.reset(), o.clearAuto(), P.detach(), j(), document.removeEventListener("keydown", I, !0), n.close(!1, !0);
+  function P() {
+    l.reset(), l.clearAuto(), W.detach(), D(), document.removeEventListener("keydown", H, !0), n.close(!1, !0);
   }
-  f(
+  d(
     M.current,
     () => {
-      w.value = !1, F();
+      O.value = !1, L();
     },
     { flush: "post" }
-  ), f(
-    [R, g, d],
+  ), d(
+    [A, g, m],
     () => {
-      R.value || (o.reset(), o.clearAuto()), F(), T();
+      A.value || (l.reset(), l.clearAuto()), L(), F();
     },
     { flush: "post", immediate: !0 }
-  ), f(
+  ), d(
     () => s == null ? void 0 : s.value,
     (e) => {
-      e === !1 && (w.value = !0, H());
+      e === !1 && (O.value = !0, P());
     },
     { flush: "sync" }
-  ), f(() => t.autoClose, o.startAuto), f(
-    [c, d],
+  ), d(() => t.autoClose, l.startAuto), d(
+    [r, m],
     () => {
-      o.reset(), n.schedule(), T();
+      l.reset(), n.schedule(), F();
     },
     { flush: "post" }
-  ), f(
+  ), d(
     () => t.trigger,
     () => {
-      o.reset();
+      l.reset();
     }
-  ), f(
+  ), d(
     () => [
       t.placement,
       t.offset,
@@ -192,101 +196,88 @@ function Se(t, i, y) {
     ],
     n.schedule,
     { flush: "post" }
-  ), f([n.open, b, c], X, { flush: "post" }), f(
+  ), d([n.open, x, r], ne, { flush: "post" }), d(
     n.open,
     (e) => {
-      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());
+      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 Y() {
-    const e = A;
-    await G(), l.value && n.open.value && e === A && $ !== e && ($ = e, y("opened"));
+  async function ae() {
+    const e = T;
+    await k(), c.value && n.open.value && e === T && G !== e && (G = e, y("opened"));
   }
-  async function Z() {
-    const e = A;
-    await G(), l.value && !n.open.value && e === A && K !== e && (K = e, y("closed"));
+  async function ue() {
+    const e = T;
+    await k(), c.value && !n.open.value && e === T && J !== e && (J = e, y("closed"));
   }
-  function _() {
-    w.value = !0, H();
+  function le() {
+    O.value = !0, P();
   }
-  ie(() => {
-    F(), T();
-  }), se(() => {
-    l.value = !0, T();
-  }), ve(() => {
-    l.value = !1, w.value = !0, H();
-  }), fe(() => {
-    l.value = !1, H();
+  me(() => {
+    L(), F();
+  }), pe(() => {
+    c.value = !0, F();
+  }), ye(() => {
+    c.value = !1, O.value = !0, P();
+  }), ge(() => {
+    c.value = !1, P();
   });
-  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": 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))")
-    };
-  }), ne = u(() => ({
-    ...t.overlayStyle,
-    ...n.style.value,
-    ...te.value,
-    overflow: "visible",
-    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(() => ({
+  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: () => v(!0),
-    close: () => v(!1),
-    toggle: () => v(!n.open.value),
+    show: () => f(!0),
+    close: () => f(!1),
+    toggle: () => f(!n.open.value),
     updatePosition: n.schedule
-  })), 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,
+  })), 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: g,
-    referenceElement: p,
-    panel: b,
-    actualReference: c,
+    referenceElement: b,
+    panel: x,
+    actualReference: r,
     nativeReference: S,
-    id: E,
-    titleId: J,
+    id: R,
+    titleId: ee,
     open: n.open,
     placement: n.placement,
-    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),
+    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 = O.value) == null ? void 0 : e.focus();
+      return (e = C.value) == null ? void 0 : e.focus();
     }
   };
 }
 export {
-  Se as usePopupSurface
+  Ie as usePopupSurface
 };