@zag-js/popover 0.1.6 → 0.1.9

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -41,307 +42,30 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// ../../../node_modules/compute-scroll-into-view/dist/index.module.js
-function t(t3) {
-  return typeof t3 == "object" && t3 != null && t3.nodeType === 1;
-}
-function e(t3, e2) {
-  return (!e2 || t3 !== "hidden") && t3 !== "visible" && t3 !== "clip";
-}
-function n(t3, n2) {
-  if (t3.clientHeight < t3.scrollHeight || t3.clientWidth < t3.scrollWidth) {
-    var r2 = getComputedStyle(t3, null);
-    return e(r2.overflowY, n2) || e(r2.overflowX, n2) || function(t4) {
-      var e2 = function(t5) {
-        if (!t5.ownerDocument || !t5.ownerDocument.defaultView)
-          return null;
-        try {
-          return t5.ownerDocument.defaultView.frameElement;
-        } catch (t6) {
-          return null;
-        }
-      }(t4);
-      return !!e2 && (e2.clientHeight < t4.scrollHeight || e2.clientWidth < t4.scrollWidth);
-    }(t3);
-  }
-  return false;
-}
-function r(t3, e2, n2, r2, i, o, l, d) {
-  return o < t3 && l > e2 || o > t3 && l < e2 ? 0 : o <= t3 && d <= n2 || l >= e2 && d >= n2 ? o - t3 - r2 : l > e2 && d < n2 || o < t3 && d > n2 ? l - e2 + i : 0;
-}
-function index_module_default(e2, i) {
-  var o = window, l = i.scrollMode, d = i.block, u = i.inline, h = i.boundary, a = i.skipOverflowHiddenElements, c = typeof h == "function" ? h : function(t3) {
-    return t3 !== h;
-  };
-  if (!t(e2))
-    throw new TypeError("Invalid target");
-  for (var f = document.scrollingElement || document.documentElement, s = [], p = e2; t(p) && c(p); ) {
-    if ((p = p.parentElement) === f) {
-      s.push(p);
-      break;
-    }
-    p != null && p === document.body && n(p) && !n(document.documentElement) || p != null && n(p, a) && s.push(p);
-  }
-  for (var m = o.visualViewport ? o.visualViewport.width : innerWidth, g = o.visualViewport ? o.visualViewport.height : innerHeight, w = window.scrollX || pageXOffset, v = window.scrollY || pageYOffset, W = e2.getBoundingClientRect(), b = W.height, H = W.width, y = W.top, E = W.right, M = W.bottom, V = W.left, x = d === "start" || d === "nearest" ? y : d === "end" ? M : y + b / 2, I = u === "center" ? V + H / 2 : u === "end" ? E : V, C = [], T = 0; T < s.length; T++) {
-    var k = s[T], B = k.getBoundingClientRect(), D = B.height, O = B.width, R = B.top, X = B.right, Y = B.bottom, L = B.left;
-    if (l === "if-needed" && y >= 0 && V >= 0 && M <= g && E <= m && y >= R && M <= Y && V >= L && E <= X)
-      return C;
-    var S = getComputedStyle(k), j = parseInt(S.borderLeftWidth, 10), q = parseInt(S.borderTopWidth, 10), z = parseInt(S.borderRightWidth, 10), A = parseInt(S.borderBottomWidth, 10), F = 0, G = 0, J = "offsetWidth" in k ? k.offsetWidth - k.clientWidth - j - z : 0, K = "offsetHeight" in k ? k.offsetHeight - k.clientHeight - q - A : 0;
-    if (f === k)
-      F = d === "start" ? x : d === "end" ? x - g : d === "nearest" ? r(v, v + g, g, q, A, v + x, v + x + b, b) : x - g / 2, G = u === "start" ? I : u === "center" ? I - m / 2 : u === "end" ? I - m : r(w, w + m, m, j, z, w + I, w + I + H, H), F = Math.max(0, F + v), G = Math.max(0, G + w);
-    else {
-      F = d === "start" ? x - R - q : d === "end" ? x - Y + A + K : d === "nearest" ? r(R, Y, D, q, A + K, x, x + b, b) : x - (R + D / 2) + K / 2, G = u === "start" ? I - L - j : u === "center" ? I - (L + O / 2) + J / 2 : u === "end" ? I - X + z + J : r(L, X, O, j, z + J, I, I + H, H);
-      var N = k.scrollLeft, P = k.scrollTop;
-      x += P - (F = Math.max(0, Math.min(P + F, k.scrollHeight - D + K))), I += N - (G = Math.max(0, Math.min(N + G, k.scrollWidth - O + J)));
-    }
-    C.push({ el: k, top: F, left: G });
-  }
-  return C;
-}
-
-// ../../utilities/dom/node_modules/scroll-into-view-if-needed/es/index.js
-function isOptionsObject(options) {
-  return options === Object(options) && Object.keys(options).length !== 0;
-}
-function defaultBehavior(actions, behavior) {
-  if (behavior === void 0) {
-    behavior = "auto";
-  }
-  var canSmoothScroll = "scrollBehavior" in document.body.style;
-  actions.forEach(function(_ref) {
-    var el = _ref.el, top = _ref.top, left = _ref.left;
-    if (el.scroll && canSmoothScroll) {
-      el.scroll({
-        top,
-        left,
-        behavior
-      });
-    } else {
-      el.scrollTop = top;
-      el.scrollLeft = left;
-    }
-  });
-}
-function getOptions(options) {
-  if (options === false) {
-    return {
-      block: "end",
-      inline: "nearest"
-    };
-  }
-  if (isOptionsObject(options)) {
-    return options;
-  }
-  return {
-    block: "start",
-    inline: "nearest"
-  };
-}
-function scrollIntoView(target, options) {
-  var isTargetAttached = target.isConnected || target.ownerDocument.documentElement.contains(target);
-  if (isOptionsObject(options) && typeof options.behavior === "function") {
-    return options.behavior(isTargetAttached ? index_module_default(target, options) : []);
-  }
-  if (!isTargetAttached) {
-    return;
-  }
-  var computeOptions = getOptions(options);
-  return defaultBehavior(index_module_default(target, computeOptions), computeOptions.behavior);
-}
-var es_default = scrollIntoView;
-
 // ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-function getStyleCache() {
-  ;
-  globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
-  return globalThis.__styleCache__;
-}
-function getComputedStyle2(el) {
-  var _a;
-  if (!el)
-    return {};
-  const cache = getStyleCache();
-  let style = cache.get(el);
-  if (!style) {
-    const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-    style = win.getComputedStyle(el);
-    cache.set(el, style);
-  }
-  return style;
-}
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-var noop = () => {
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var platform = (v) => isDom() && v.test(navigator.platform);
-var isDom = () => !!(typeof window !== "undefined");
-var isMac = () => platform(/^Mac/);
-var isIPhone = () => platform(/^iPhone/);
-var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
-var isIos = () => isIPhone() || isIPad();
-var isLeftClick = (v) => v.button === 0;
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
+function isFrame(element) {
+  return element.localName === "iframe";
 }
-function globalEventBus(node, type, handler, options) {
-  var _a;
-  if (!node)
-    return noop;
-  const hash = JSON.stringify({ type, options });
-  const listenerElements = getListenerElements();
-  const listenerCache = getListenerCache();
-  const group = listenerElements.get(node);
-  if (!listenerElements.has(node)) {
-    const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
-    listenerElements.set(node, group2);
-  } else if (group == null ? void 0 : group.has(hash)) {
-    (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
-  } else {
-    group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
-  }
-  function attach(node2) {
-    var _a2, _b;
-    function listener(event) {
-      var _a3;
-      const group2 = listenerElements.get(node2);
-      (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
-    }
-    if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
-      listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
-      node2.addEventListener(type, listener, options);
-      return;
-    }
-    if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
-      (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
-      node2.addEventListener(type, listener, options);
-    }
-  }
-  attach(node);
-  return function remove() {
-    var _a2, _b, _c, _d;
-    if (!listenerElements.has(node))
-      return;
-    const group2 = listenerElements.get(node);
-    (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
-    if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
-      const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
-      node.removeEventListener(type, listener, options);
-      group2 == null ? void 0 : group2.delete(hash);
-      (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
-      if ((group2 == null ? void 0 : group2.size) === 0) {
-        listenerElements.delete(node);
-        listenerCache.delete(node);
-      }
-    }
-  };
-}
-var t2 = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t2(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t2(fn) === "Function" ? fn() : fn;
-function addDomEvent(target, event, listener, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
-}
-var changeCount = 0;
-var originalBodyPointerEvents;
-function preventBodyPointerEvents(el, opts = {}) {
-  const { disabled = false, document: docProp } = opts;
-  const doc = docProp || document;
-  let isTouchOrPenPressed = false;
-  let isLeftClickPressed = false;
-  function listen() {
-    const onPointerDown = (event) => {
-      const isMouse = event.pointerType === "mouse";
-      isTouchOrPenPressed = !isMouse;
-      isLeftClickPressed = isMouse && isLeftClick(event);
-    };
-    const onPointerUp = () => {
-      isTouchOrPenPressed = false;
-      isLeftClickPressed = false;
-    };
-    return pipe(addDomEvent(doc, "pointerdown", onPointerDown), addDomEvent(doc, "pointerup", onPointerUp));
-  }
-  function reset() {
-    changeCount--;
-    if (changeCount === 0) {
-      doc.body.style.pointerEvents = originalBodyPointerEvents;
-    }
-    if (el) {
-      el.style.pointerEvents = "";
-    }
-  }
-  function apply() {
-    if (disabled)
-      return;
-    if (changeCount === 0) {
-      originalBodyPointerEvents = doc.body.style.pointerEvents;
-    }
-    doc.body.style.pointerEvents = "none";
-    if (el) {
-      el.style.pointerEvents = "auto";
-    }
-    changeCount++;
-    return function() {
-      if (isTouchOrPenPressed) {
-        addDomEvent(doc, "click", reset, { once: true });
-      } else if (isLeftClickPressed) {
-        addDomEvent(doc, "pointerup", reset, { once: true });
-      } else {
-        reset();
-      }
-    };
-  }
-  const cleanups = [];
-  cleanups.push(apply());
-  nextTick(() => {
-    cleanups.push(listen());
-  });
-  return function() {
-    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
-  };
-}
-function getOwnerDocument(el) {
+function getDocument(el) {
   var _a;
   if (isWindow(el))
     return el.document;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-function getNodeName(node) {
-  return isWindow(node) ? "" : node ? node.localName || "" : "";
-}
-function getParent(el) {
-  const doc = getOwnerDocument(el);
-  if (getNodeName(el) === "html")
-    return el;
-  return el.assignedSlot || el.parentElement || doc.documentElement;
+function getEventTarget(event) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
 }
 function contains(parent, child) {
   if (!parent)
@@ -351,259 +75,102 @@ function contains(parent, child) {
 function isHTMLElement(v) {
   return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
 }
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+function isVisible(el) {
+  if (!isHTMLElement(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
 }
-var isDisabled = (el) => {
-  return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
-};
-function isScrollParent(el) {
-  const { overflow, overflowX, overflowY } = getComputedStyle2(el);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+function hasNegativeTabIndex(element) {
+  const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
+  return tabIndex < 0;
 }
-function getScrollParent(el) {
-  if (["html", "body", "#document"].includes(getNodeName(el))) {
-    return getOwnerDocument(el).body;
-  }
-  if (isHTMLElement(el) && isScrollParent(el)) {
-    return el;
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, includeContainer = false) => {
+  if (!container)
+    return [];
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
   }
-  return getScrollParent(getParent(el));
+  const focusableElements = elements.filter(isFocusable);
+  focusableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.splice(i, 1, ...getFocusables(frameBody));
+    }
+  });
+  return focusableElements;
+};
+function isFocusable(element) {
+  if (!element)
+    return false;
+  return element.matches(focusableSelector) && isVisible(element);
 }
-var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
-function preventBodyScroll(opts) {
-  var _a;
-  const { document: docProp, disabled = false, allowPinchZoom } = opts != null ? opts : {};
-  const doc = docProp != null ? docProp : document;
-  const win = (_a = doc == null ? void 0 : doc.defaultView) != null ? _a : window;
-  const viewport = isDom() ? win.visualViewport : null;
-  const docEl = doc.documentElement;
-  function preventScrollStandard() {
-    if (docEl.hasAttribute("scroll-lock"))
-      return;
-    const fn = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), () => docEl.setAttribute("scroll-lock", "true"));
-    return pipe(fn, () => docEl.removeAttribute("scroll-lock"));
+function getTabbables(container, includeContainer) {
+  if (!container)
+    return [];
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const tabbableElements = elements.filter(isTabbable);
+  if (includeContainer && isTabbable(container)) {
+    tabbableElements.unshift(container);
   }
-  function preventScrollMobileSafari() {
-    if (docEl.hasAttribute("scroll-lock"))
-      return;
-    let scrollable;
-    let lastY = 0;
-    let onTouchStart = (e2) => {
-      scrollable = getScrollParent(e2.target);
-      if (scrollable === docEl && scrollable === doc.body) {
-        return;
-      }
-      lastY = e2.changedTouches[0].pageY;
-    };
-    let onTouchMove = (e2) => {
-      if (e2.touches.length === 2 && allowPinchZoom)
-        return;
-      if (!scrollable || scrollable === docEl || scrollable === doc.body) {
-        e2.preventDefault();
-        return;
-      }
-      let y = e2.changedTouches[0].pageY;
-      let scrollTop = scrollable.scrollTop;
-      let bottom = scrollable.scrollHeight - scrollable.clientHeight;
-      if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
-        e2.preventDefault();
-      }
-      lastY = y;
-    };
-    let onTouchEnd = (e2) => {
-      let target = e2.target;
-      if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
-        e2.preventDefault();
-        target.style.transform = "translateY(-2000px)";
-        target.focus();
-        win.requestAnimationFrame(() => {
-          target.style.transform = "";
-        });
-      }
-    };
-    let onFocus = (e2) => {
-      let target = e2.target;
-      if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
-        target.style.transform = "translateY(-2000px)";
-        win.requestAnimationFrame(() => {
-          target.style.transform = "";
-          if (!viewport)
-            return;
-          if (viewport.height < win.innerHeight) {
-            win.requestAnimationFrame(function() {
-              es_default(target, { scrollMode: "if-needed" });
-            });
-          } else {
-            const onResize = () => {
-              es_default(target, { scrollMode: "if-needed" });
-            };
-            addDomEvent(viewport, "resize", onResize, { once: true });
-          }
-        });
-      }
-    };
-    let onWindowScroll = () => {
-      win.scrollTo(0, 0);
-    };
-    let scrollX = win.scrollX;
-    let scrollY = win.scrollY;
-    let restoreStyles = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), setStyle(doc.body, "marginTop", `-${scrollY}px`));
-    win.scrollTo(0, 0);
-    let removeEvents = pipe(addDomEvent(doc, "touchstart", onTouchStart, { passive: false, capture: true }), addDomEvent(doc, "touchmove", onTouchMove, { passive: false, capture: true }), addDomEvent(doc, "touchend", onTouchEnd, { passive: false, capture: true }), addDomEvent(doc, "focus", onFocus, true), addDomEvent(win, "scroll", onWindowScroll), () => docEl.setAttribute("scroll-lock", "true"));
-    return () => {
-      restoreStyles();
-      removeEvents();
-      win.scrollTo(scrollX, scrollY);
-      docEl.removeAttribute("scroll-lock");
-    };
+  tabbableElements.forEach((element, i) => {
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      const allFrameTabbable = getTabbables(frameBody);
+      tabbableElements.splice(i, 1, ...allFrameTabbable);
+    }
+  });
+  if (!tabbableElements.length && includeContainer) {
+    return elements;
   }
-  if (disabled)
-    return noop;
-  return isIos() ? preventScrollMobileSafari() : preventScrollStandard();
-}
-function setStyle(el, key, value) {
-  let cur = el.style[key];
-  el.style[key] = value;
-  return () => {
-    el.style[key] = cur;
-  };
+  return tabbableElements;
 }
-function validateBlur(event, opts) {
-  var _a;
-  const exclude = Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude];
-  const relatedTarget = (_a = event.relatedTarget) != null ? _a : opts.fallback;
-  return exclude.every((el) => !(el == null ? void 0 : el.contains(relatedTarget)));
+function isTabbable(el) {
+  return isFocusable(el) && !hasNegativeTabIndex(el);
 }
-var focusableSelector = /* @__PURE__ */ [
-  "input:not([disabled]):not([type=hidden])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "button:not([disabled])",
-  "embed",
-  "iframe",
-  "object",
-  "a[href]",
-  "area[href]",
-  "[tabindex]",
-  "audio[controls]",
-  "video[controls]",
-  "*[tabindex]:not([aria-disabled])",
-  "[contenteditable]:not([contenteditable=false])",
-  "details > summary:first-of-type"
-].join(",");
-function isHidden(el, until) {
-  const style = getComputedStyle2(el);
-  if (!el || style.getPropertyValue("visibility") === "hidden")
-    return true;
-  while (el) {
-    if (until != null && el === until)
-      return false;
-    if (style.getPropertyValue("display") === "none")
-      return true;
-    el = el.parentElement;
-  }
-  return false;
+function getFirstTabbable(container, includeContainer) {
+  const [first] = getTabbables(container, includeContainer);
+  return first || null;
 }
-var getFocusables = (el, includeContainer = false) => {
-  if (!el)
-    return [];
-  let els = Array.from(el.querySelectorAll(focusableSelector));
-  if (includeContainer && isHTMLElement(el)) {
-    els.unshift(el);
-  }
-  return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
-};
-var isFocusable = (el) => {
-  if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
-    return false;
-  return el == null ? void 0 : el.matches(focusableSelector);
-};
-var getTabbables = (el, includeContainer = false) => {
-  return getFocusables(el, includeContainer).filter(isTabbable);
-};
-var isTabbable = (el) => {
-  return isFocusable(el) && !isDisabled(el) && !isHidden(el);
-};
-function itemById(v, id) {
-  return v.find((node) => node.id === id);
+function getLastTabbable(container, includeContainer) {
+  const elements = getTabbables(container, includeContainer);
+  return elements[elements.length - 1] || null;
 }
-function indexOfId(v, id) {
-  const item = itemById(v, id);
-  return item ? v.indexOf(item) : -1;
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
-};
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
   }
-  return items.find((item) => match(getValueText(item), text));
-}
-function trackPointerDown(doc, onPointerDown) {
-  var _a;
-  const win = (_a = doc.defaultView) != null ? _a : window;
-  const fn = (event) => {
-    if (event.target instanceof win.HTMLElement) {
-      onPointerDown(event.target);
-    }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
   };
-  return addDomEvent(doc, "pointerdown", fn);
 }
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next2 = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
-  }
-  update(search);
-  return next2;
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
 }
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
 
 // src/popover.connect.ts
 var import_popper = require("@zag-js/popper");
 
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
 // ../../utilities/core/dist/index.mjs
-var first = (v) => v[0];
-var last = (v) => v[v.length - 1];
 function nextIndex(v, idx, opts = {}) {
   const { step = 1, loop = true } = opts;
   const next2 = idx + step;
@@ -624,7 +191,6 @@ var runIfFn2 = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
-var cast = (v) => v;
 
 // src/popover.dom.ts
 var dom = {
@@ -632,6 +198,10 @@ var dom = {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
   },
+  getWin: (ctx) => {
+    var _a;
+    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
+  },
   getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
   getRootNode: (ctx) => {
     var _a;
@@ -671,29 +241,32 @@ var dom = {
   getDescriptionEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDescriptionId(ctx)),
   getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
   getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
-  getDocTabbableEls: (ctx) => getTabbables(cast(dom.getDoc(ctx))),
-  getTabbableEls: (ctx) => {
-    const el = dom.getContentEl(ctx);
-    return el ? getTabbables(el) : [];
-  },
-  getFirstTabbableEl: (ctx) => first(dom.getTabbableEls(ctx)),
-  getLastTabbableEl: (ctx) => last(dom.getTabbableEls(ctx)),
+  getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
+  getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
+  getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
+  getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
   getInitialFocusEl: (ctx) => {
-    var _a;
-    return (_a = runIfFn2(ctx.initialFocusEl)) != null ? _a : dom.getFirstFocusableEl(ctx);
+    let el = runIfFn2(ctx.initialFocusEl);
+    if (!el && ctx.autoFocus)
+      el = dom.getFirstFocusableEl(ctx);
+    if (!el)
+      el = dom.getContentEl(ctx);
+    return el;
   }
 };
 
 // src/popover.connect.ts
-function connect(state, send, normalize = normalizeProp) {
+function connect(state, send, normalize) {
   const isOpen = state.matches("open");
-  const pointerdownNode = state.context.pointerdownNode;
+  const currentPlacement = state.context.currentPlacement;
+  const portalled = state.context.currentPortalled;
+  const rendered = state.context.renderedElements;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     measured: !!state.context.isPlacementComplete,
-    placement: state.context.currentPlacement
+    placement: currentPlacement
   });
   return {
-    portalled: state.context.currentPortalled,
+    portalled,
     isOpen,
     open() {
       send("OPEN");
@@ -717,14 +290,17 @@ function connect(state, send, normalize = normalizeProp) {
     triggerProps: normalize.button({
       "data-part": "trigger",
       type: "button",
-      "data-placement": state.context.currentPlacement,
+      "data-placement": currentPlacement,
       id: dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
       "data-expanded": dataAttr(isOpen),
       "aria-controls": dom.getContentId(state.context),
       onClick() {
-        send("TRIGGER_CLICK");
+        send("TOGGLE");
+      },
+      onBlur(event) {
+        send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
       }
     }),
     positionerProps: normalize.element({
@@ -739,34 +315,9 @@ function connect(state, send, normalize = normalizeProp) {
       role: "dialog",
       hidden: !isOpen,
       "data-expanded": dataAttr(isOpen),
-      "aria-labelledby": state.context.isTitleRendered ? dom.getTitleId(state.context) : void 0,
-      "aria-describedby": state.context.isDescriptionRendered ? dom.getDescriptionId(state.context) : void 0,
-      "data-placement": state.context.currentPlacement,
-      onKeyDown(event) {
-        const keyMap = {
-          Escape(event2) {
-            send("ESCAPE");
-            event2.stopPropagation();
-          },
-          Tab(event2) {
-            const type = event2.shiftKey ? "SHIFT_TAB" : "TAB";
-            send({ type, preventDefault: () => event2.preventDefault() });
-          }
-        };
-        const exec = keyMap[event.key];
-        exec == null ? void 0 : exec(event);
-      },
-      onBlur(event) {
-        var _a;
-        const isValidBlur = validateBlur(event, {
-          exclude: [dom.getTriggerEl(state.context), dom.getContentEl(state.context)],
-          fallback: pointerdownNode
-        });
-        if (isValidBlur) {
-          const el = (_a = event.relatedTarget) != null ? _a : pointerdownNode;
-          send({ type: "INTERACT_OUTSIDE", focusable: isFocusable(el) });
-        }
-      }
+      "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
+      "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
+      "data-placement": currentPlacement
     }),
     titleProps: normalize.element({
       "data-part": "title",
@@ -782,28 +333,345 @@ function connect(state, send, normalize = normalizeProp) {
       type: "button",
       "aria-label": "close",
       onClick() {
-        send("CLOSE");
+        send("REQUEST_CLOSE");
       }
     })
   };
 }
 
 // src/popover.machine.ts
+var import_aria_hidden = require("@zag-js/aria-hidden");
 var import_core = require("@zag-js/core");
+
+// ../../utilities/interact-outside/dist/index.mjs
+var runIfFn3 = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+function isWindow2(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument2(el) {
+  var _a;
+  if (isWindow2(el))
+    return el.document;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function getEventTarget2(event) {
+  var _a, _b;
+  return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
+}
+function contains2(parent, child) {
+  if (!parent)
+    return false;
+  return parent === child || isHTMLElement2(parent) && isHTMLElement2(child) && parent.contains(child);
+}
+function isHTMLElement2(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
+function isVisible2(el) {
+  if (!isHTMLElement2(el))
+    return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+}
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isCtrlKey(e) && e.button === 0;
+};
+var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
+function fireCustomEvent(el, type, init) {
+  if (!el)
+    return;
+  const win = getWindow(el);
+  const event = new win.CustomEvent(type, init);
+  return el.dispatchEvent(event);
+}
+var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+function isFocusable2(element) {
+  if (!element)
+    return false;
+  return element.matches(focusableSelector2) && isVisible2(element);
+}
+var isRef2 = (v) => hasProp2(v, "current");
+function addDomEvent2(target, eventName, handler, options) {
+  const node = isRef2(target) ? target.current : runIfFn3(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+var FOCUS_OUTSIDE_EVENT = "focus.outside";
+function trackInteractOutside(node, options) {
+  const { exclude, onFocusOutside, onPointerDownOutside } = options;
+  if (!node)
+    return;
+  const doc = getDocument2(node);
+  const win = getWindow(node);
+  function isEventOutside(event) {
+    const target = getEventTarget2(event);
+    if (!(target instanceof win.HTMLElement)) {
+      return false;
+    }
+    if (!contains2(doc.documentElement, target)) {
+      return false;
+    }
+    if (contains2(node, target)) {
+      return false;
+    }
+    return !(exclude == null ? void 0 : exclude(target));
+  }
+  let clickHandler;
+  function onPointerDown(event) {
+    function handler() {
+      if (!node || !isEventOutside(event))
+        return;
+      if (onPointerDownOutside) {
+        node.addEventListener(POINTER_OUTSIDE_EVENT, onPointerDownOutside, { once: true });
+      }
+      fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: isContextMenuEvent(event),
+          focusable: isFocusable2(getEventTarget2(event))
+        }
+      });
+    }
+    if (event.pointerType === "touch") {
+      doc.removeEventListener("click", handler);
+      clickHandler = handler;
+      doc.addEventListener("click", handler, { once: true });
+    } else {
+      handler();
+    }
+  }
+  const cleanups = /* @__PURE__ */ new Set();
+  const timer = setTimeout(() => {
+    cleanups.add(addDomEvent2(doc, "pointerdown", onPointerDown, true));
+  }, 0);
+  function onFocusin(event) {
+    if (!node || !isEventOutside(event))
+      return;
+    if (onFocusOutside) {
+      node.addEventListener(FOCUS_OUTSIDE_EVENT, onFocusOutside, { once: true });
+    }
+    fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+      bubbles: false,
+      cancelable: true,
+      detail: {
+        originalEvent: event,
+        contextmenu: false,
+        focusable: isFocusable2(getEventTarget2(event))
+      }
+    });
+  }
+  cleanups.add(addDomEvent2(doc, "focusin", onFocusin, true));
+  return () => {
+    clearTimeout(timer);
+    if (clickHandler)
+      doc.removeEventListener("click", clickHandler);
+    cleanups.forEach((fn) => fn());
+  };
+}
+
+// ../../utilities/dismissable/src/escape-keydown.ts
+function trackEscapeKeydown(fn) {
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape")
+      fn == null ? void 0 : fn(event);
+  };
+  return addDomEvent(document, "keydown", handleKeyDown);
+}
+
+// ../../utilities/dismissable/src/layer-stack.ts
+var layerStack = {
+  layers: [],
+  branches: [],
+  count() {
+    return this.layers.length;
+  },
+  pointerBlockingLayers() {
+    return this.layers.filter((layer) => layer.pointerBlocking);
+  },
+  topMostPointerBlockingLayer() {
+    return [...this.pointerBlockingLayers()].slice(-1)[0];
+  },
+  hasPointerBlockingLayer() {
+    return this.pointerBlockingLayers().length > 0;
+  },
+  isBelowPointerBlockingLayer(node) {
+    var _a;
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return (layer == null ? void 0 : layer.node) === node;
+  },
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+  },
+  isInNestedLayer(node, target) {
+    return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+  },
+  isInBranch(target) {
+    return Array.from(this.branches).some((branch) => contains(branch, target));
+  },
+  add(layer) {
+    this.layers.push(layer);
+  },
+  addBranch(node) {
+    this.branches.push(node);
+  },
+  remove(node) {
+    const index = this.indexOf(node);
+    if (index < 0)
+      return;
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layer.dismiss());
+    }
+    this.layers.splice(index, 1);
+  },
+  removeBranch(node) {
+    const index = this.branches.indexOf(node);
+    if (index >= 0)
+      this.branches.splice(index, 1);
+  },
+  indexOf(node) {
+    return this.layers.findIndex((layer) => layer.node === node);
+  },
+  dismiss(node) {
+    var _a;
+    (_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+
+// ../../utilities/dismissable/src/pointer-event-outside.ts
+var originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+  layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  });
+}
+function clearPointerEvent(node) {
+  node.style.pointerEvents = "";
+}
+var DATA_ATTR = "data-inert";
+function disablePointerEventsOutside(node) {
+  const doc = getDocument(node);
+  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    doc.body.style.pointerEvents = "none";
+    doc.body.setAttribute(DATA_ATTR, "");
+  }
+  return () => {
+    if (layerStack.hasPointerBlockingLayer())
+      return;
+    doc.body.style.pointerEvents = originalBodyPointerEvents;
+    doc.body.removeAttribute(DATA_ATTR);
+    if (doc.body.style.length === 0)
+      doc.body.removeAttribute("style");
+  };
+}
+
+// ../../utilities/dismissable/src/dismissable-layer.ts
+function trackDismissableElement(node, options) {
+  if (!node)
+    return;
+  const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
+  const layer = { dismiss: onDismiss, node, pointerBlocking };
+  layerStack.add(layer);
+  assignPointerEventToLayers();
+  function onPointerDownOutside(event) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
+      return;
+    (_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onFocusOutside(event) {
+    var _a, _b;
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isInBranch(target))
+      return;
+    (_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
+    (_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
+    if (event.defaultPrevented)
+      return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
+    onDismiss == null ? void 0 : onDismiss();
+  }
+  function onEscapeKeyDown(event) {
+    var _a;
+    if (!layerStack.isTopMost(node))
+      return;
+    (_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  }
+  function exclude(target) {
+    if (!node)
+      return false;
+    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
+  }
+  const cleanups = [
+    pointerBlocking ? disablePointerEventsOutside(node) : void 0,
+    trackEscapeKeydown(onEscapeKeyDown),
+    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
+  ];
+  return () => {
+    layerStack.remove(node);
+    assignPointerEventToLayers();
+    clearPointerEvent(node);
+    cleanups.forEach((fn) => fn == null ? void 0 : fn());
+  };
+}
+
+// src/popover.machine.ts
 var import_popper2 = require("@zag-js/popper");
-var import_aria_hidden = require("@zag-js/aria-hidden");
+var import_remove_scroll = require("@zag-js/remove-scroll");
 var import_focus_trap = require("focus-trap");
-var { and, or } = import_core.guards;
+var { and, or, not } = import_core.guards;
 function machine(ctx = {}) {
   return (0, import_core.createMachine)({
     id: "popover",
     initial: "unknown",
-    context: __spreadValues({
-      isTitleRendered: true,
-      isDescriptionRendered: true,
-      isAnchorRendered: false,
+    context: __spreadProps(__spreadValues({
       uid: "",
-      closeOnBlur: true,
+      closeOnInteractOutside: true,
       closeOnEsc: true,
       autoFocus: true,
       modal: false,
@@ -811,7 +679,14 @@ function machine(ctx = {}) {
         placement: "bottom"
       }, ctx.positioning),
       currentPlacement: void 0
-    }, ctx),
+    }, ctx), {
+      focusTriggerOnClose: true,
+      renderedElements: {
+        title: true,
+        description: true,
+        anchor: false
+      }
+    }),
     computed: {
       currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
     },
@@ -819,7 +694,7 @@ function machine(ctx = {}) {
       unknown: {
         on: {
           SETUP: {
-            target: "closed",
+            target: ctx.defaultOpen ? "open" : "closed",
             actions: ["setupDocument", "checkRenderedElements"]
           }
         }
@@ -827,61 +702,46 @@ function machine(ctx = {}) {
       closed: {
         entry: ["clearPointerDown", "invokeOnClose"],
         on: {
-          TRIGGER_CLICK: "open",
+          TOGGLE: "open",
           OPEN: "open"
         }
       },
       open: {
         activities: [
-          "trackPointerDown",
           "trapFocus",
           "preventScroll",
           "hideContentBelow",
-          "disableOutsidePointerEvents",
-          "computePlacement"
+          "computePlacement",
+          "trackInteractionOutside",
+          "trackTabKeyDown"
         ],
-        entry: (0, import_core.choose)([
-          {
-            guard: "autoFocus",
-            actions: ["setInitialFocus", "invokeOnOpen"]
-          },
-          { actions: ["focusContent", "invokeOnOpen"] }
-        ]),
+        entry: ["setInitialFocus", "invokeOnOpen"],
         on: {
-          CLOSE: {
+          CLOSE: "closed",
+          REQUEST_CLOSE: {
             target: "closed",
-            actions: "focusTrigger"
+            actions: "focusTriggerIfNeeded"
           },
-          TRIGGER_CLICK: {
-            target: "closed",
-            actions: "focusTrigger"
+          TOGGLE: "closed",
+          TRIGGER_BLUR: {
+            guard: not("isRelatedTargetWithinContent"),
+            target: "closed"
           },
-          ESCAPE: {
-            guard: "closeOnEsc",
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          TAB: {
-            guard: and("isLastTabbableElement", "closeOnBlur", "portalled"),
-            target: "closed",
-            actions: "focusNextTabbableElementAfterTrigger"
-          },
-          SHIFT_TAB: {
-            guard: and(or("isFirstTabbableElement", "isContentFocused"), "closeOnBlur", "portalled"),
-            target: "closed",
-            actions: "focusTrigger"
-          },
-          INTERACT_OUTSIDE: [
+          TAB: [
             {
-              guard: and("closeOnBlur", "isRelatedTargetFocusable"),
-              target: "closed"
+              guard: and("isTriggerFocused", "portalled"),
+              actions: "focusFirstTabbableElement"
             },
             {
-              guard: "closeOnBlur",
+              guard: and("isLastTabbableElement", "closeOnInteractOutside", "portalled"),
               target: "closed",
-              actions: "focusTrigger"
+              actions: "focusNextTabbableElementAfterTrigger"
             }
-          ]
+          ],
+          SHIFT_TAB: {
+            guard: and(or("isFirstTabbableElement", "isContentFocused"), "portalled"),
+            actions: "focusTriggerIfNeeded"
+          }
         }
       }
     }
@@ -889,7 +749,7 @@ function machine(ctx = {}) {
     activities: {
       computePlacement(ctx2) {
         ctx2.currentPlacement = ctx2.positioning.placement;
-        const anchorEl = ctx2.isAnchorRendered ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
+        const anchorEl = ctx2.renderedElements.anchor ? dom.getAnchorEl(ctx2) : dom.getTriggerEl(ctx2);
         return (0, import_popper2.getPlacement)(anchorEl, dom.getPositionerEl(ctx2), __spreadProps(__spreadValues({}, ctx2.positioning), {
           onComplete(data) {
             ctx2.currentPlacement = data.placement;
@@ -901,33 +761,70 @@ function machine(ctx = {}) {
           }
         }));
       },
-      trackPointerDown(ctx2) {
-        return trackPointerDown(dom.getDoc(ctx2), (el) => {
-          ctx2.pointerdownNode = (0, import_core.ref)(el);
+      trackInteractionOutside(ctx2, _evt, { send }) {
+        return trackDismissableElement(dom.getContentEl(ctx2), {
+          pointerBlocking: ctx2.modal,
+          exclude: dom.getTriggerEl(ctx2),
+          onEscapeKeyDown(event) {
+            var _a;
+            (_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
+            if (ctx2.closeOnEsc)
+              return;
+            ctx2.focusTriggerOnClose = true;
+            event.preventDefault();
+          },
+          onInteractOutside(event) {
+            var _a;
+            (_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
+            if (event.defaultPrevented)
+              return;
+            ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
+            if (!ctx2.closeOnInteractOutside) {
+              event.preventDefault();
+            }
+          },
+          onPointerDownOutside(event) {
+            var _a;
+            (_a = ctx2.onPointerDownOutside) == null ? void 0 : _a.call(ctx2, event);
+          },
+          onFocusOutside(event) {
+            var _a;
+            (_a = ctx2.onFocusOutside) == null ? void 0 : _a.call(ctx2, event);
+            if (ctx2.currentPortalled) {
+              event.preventDefault();
+            }
+          },
+          onDismiss() {
+            send({ type: "REQUEST_CLOSE", src: "#interact-outside" });
+          }
         });
       },
-      disableOutsidePointerEvents(ctx2) {
-        const el = dom.getContentEl(ctx2);
-        return preventBodyPointerEvents(el, {
-          document: dom.getDoc(ctx2),
-          disabled: !ctx2.modal
-        });
+      trackTabKeyDown(ctx2, _evt, { send }) {
+        if (ctx2.modal)
+          return;
+        return addDomEvent(dom.getWin(ctx2), "keydown", (event) => {
+          const isTabKey = event.key === "Tab" && !isModifiedEvent(event);
+          if (!isTabKey)
+            return;
+          send({
+            type: event.shiftKey ? "SHIFT_TAB" : "TAB",
+            preventDefault: () => event.preventDefault()
+          });
+        }, true);
       },
       hideContentBelow(ctx2) {
         if (!ctx2.modal)
           return;
-        let unhide;
+        let cleanup;
         nextTick(() => {
-          unhide = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
+          cleanup = (0, import_aria_hidden.ariaHidden)([dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
         });
-        return () => unhide == null ? void 0 : unhide();
+        return () => cleanup == null ? void 0 : cleanup();
       },
       preventScroll(ctx2) {
-        return preventBodyScroll({
-          allowPinchZoom: true,
-          disabled: !ctx2.modal,
-          document: dom.getDoc(ctx2)
-        });
+        if (!ctx2.modal)
+          return;
+        return (0, import_remove_scroll.preventBodyScroll)(dom.getDoc(ctx2));
       },
       trapFocus(ctx2) {
         if (!ctx2.modal)
@@ -947,29 +844,29 @@ function machine(ctx = {}) {
           });
           try {
             trap.activate();
-          } catch (e2) {
+          } catch (e) {
           }
         });
         return () => trap == null ? void 0 : trap.deactivate();
       }
     },
     guards: {
-      closeOnEsc: (ctx2) => !!ctx2.closeOnEsc,
-      autoFocus: (ctx2) => !!ctx2.autoFocus,
-      modal: (ctx2) => !!ctx2.modal,
-      portalled: (ctx2) => !!ctx2.portalled,
-      isRelatedTargetFocusable: (_ctx, evt) => evt.focusable,
-      closeOnBlur: (ctx2) => !!ctx2.closeOnBlur,
+      portalled: (ctx2) => ctx2.currentPortalled,
+      isRelatedTargetWithinContent: (ctx2, evt) => contains(dom.getContentEl(ctx2), evt.target),
+      closeOnInteractOutside: (ctx2) => !!ctx2.closeOnInteractOutside,
       isContentFocused: (ctx2) => dom.getContentEl(ctx2) === dom.getActiveEl(ctx2),
+      isTriggerFocused: (ctx2) => dom.getTriggerEl(ctx2) === dom.getActiveEl(ctx2),
       isFirstTabbableElement: (ctx2) => dom.getFirstTabbableEl(ctx2) === dom.getActiveEl(ctx2),
       isLastTabbableElement: (ctx2) => dom.getLastTabbableEl(ctx2) === dom.getActiveEl(ctx2)
     },
     actions: {
       checkRenderedElements(ctx2) {
         raf(() => {
-          ctx2.isAnchorRendered = !!dom.getAnchorEl(ctx2);
-          ctx2.isTitleRendered = !!dom.getTitleEl(ctx2);
-          ctx2.isDescriptionRendered = !!dom.getDescriptionEl(ctx2);
+          Object.assign(ctx2.renderedElements, {
+            title: !!dom.getTitleEl(ctx2),
+            description: !!dom.getDescriptionEl(ctx2),
+            anchor: !!dom.getAnchorEl(ctx2)
+          });
         });
       },
       setupDocument(ctx2, evt) {
@@ -982,44 +879,44 @@ function machine(ctx = {}) {
       clearPointerDown(ctx2) {
         ctx2.pointerdownNode = null;
       },
-      focusContent(ctx2) {
-        raf(() => {
-          var _a;
-          (_a = dom.getContentEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
       setInitialFocus(ctx2) {
         raf(() => {
           var _a;
           (_a = dom.getInitialFocusEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      focusTrigger(ctx2) {
+      focusTriggerIfNeeded(ctx2) {
+        if (!ctx2.focusTriggerOnClose)
+          return;
         raf(() => {
           var _a;
-          (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
+          return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
+      focusFirstTabbableElement(ctx2, evt) {
+        var _a;
+        evt.preventDefault();
+        (_a = dom.getFirstTabbableEl(ctx2)) == null ? void 0 : _a.focus();
+      },
       invokeOnOpen(ctx2, evt) {
         var _a;
         if (evt.type !== "SETUP") {
-          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, true);
         }
       },
       invokeOnClose(ctx2, evt) {
         var _a;
         if (evt.type !== "SETUP") {
-          (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
+          (_a = ctx2.onOpenChange) == null ? void 0 : _a.call(ctx2, false);
         }
       },
       focusNextTabbableElementAfterTrigger(ctx2, evt) {
         const content = dom.getContentEl(ctx2);
-        const doc = dom.getDoc(ctx2);
         const button = dom.getTriggerEl(ctx2);
         if (!content || !button)
           return;
         const lastTabbable = dom.getLastTabbableEl(ctx2);
-        if (lastTabbable !== doc.activeElement)
+        if (lastTabbable !== dom.getActiveEl(ctx2))
           return;
         let tabbables = dom.getDocTabbableEls(ctx2);
         let elementAfterTrigger = next(tabbables, tabbables.indexOf(button), { loop: false });
@@ -1035,4 +932,3 @@ function machine(ctx = {}) {
     }
   });
 }
-//# sourceMappingURL=index.js.map