@zag-js/popover 2.0.0-next.1 → 2.0.0-next.3

package/dist/popover.connect.js

@@ -36,12 +36,16 @@ module.exports = __toCommonJS(popover_connect_exports);
 var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
+var import_utils = require("@zag-js/utils");
 var import_popover = require("./popover.anatomy.js");
 var dom = __toESM(require("./popover.dom.js"));
+var defaultTranslations = {
+  closeTriggerLabel: "close"
+};
 function connect(service, normalize) {
   const { state, context, send, prop, scope } = service;
   const layer = context.get("layer");
-  const translations = prop("translations");
+  const translations = (0, import_utils.mergeWithDefault)(defaultTranslations, prop("translations"));
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
@@ -72,9 +76,7 @@ function connect(service, normalize) {
   return {
     open,
     setOpen(nextOpen) {
-      const open2 = state.matches("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     triggerValue,
     setTriggerValue(value) {

package/dist/popover.connect.mjs

@@ -2,12 +2,16 @@
 import { getDismissableLayerAttrs, getDismissableLayerStyle } from "@zag-js/dismissable";
 import { ariaAttr, dataAttr, isLeftClick, isSafari } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
+import { mergeWithDefault } from "@zag-js/utils";
 import { parts } from "./popover.anatomy.mjs";
 import * as dom from "./popover.dom.mjs";
+var defaultTranslations = {
+  closeTriggerLabel: "close"
+};
 function connect(service, normalize) {
   const { state, context, send, prop, scope } = service;
   const layer = context.get("layer");
-  const translations = prop("translations");
+  const translations = mergeWithDefault(defaultTranslations, prop("translations"));
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
@@ -38,9 +42,7 @@ function connect(service, normalize) {
   return {
     open,
     setOpen(nextOpen) {
-      const open2 = state.matches("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     triggerValue,
     setTriggerValue(value) {

package/dist/popover.dom.d.mts

@@ -13,9 +13,10 @@ declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
+declare const getArrowEl: (scope: Scope) => HTMLElement | null;
 declare const getTitleEl: (scope: Scope) => HTMLElement | null;
 declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowEl, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };

package/dist/popover.dom.d.ts

@@ -13,9 +13,10 @@ declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
+declare const getArrowEl: (scope: Scope) => HTMLElement | null;
 declare const getTitleEl: (scope: Scope) => HTMLElement | null;
 declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowEl, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };

package/dist/popover.dom.js

@@ -23,6 +23,7 @@ __export(popover_dom_exports, {
   getActiveTriggerEl: () => getActiveTriggerEl,
   getAnchorEl: () => getAnchorEl,
   getAnchorId: () => getAnchorId,
+  getArrowEl: () => getArrowEl,
   getArrowId: () => getArrowId,
   getCloseTriggerId: () => getCloseTriggerId,
   getContentEl: () => getContentEl,
@@ -62,6 +63,7 @@ var getActiveTriggerEl = (scope, value) => {
 };
 var getContentEl = (scope) => scope.query(scope.selector(import_popover.parts.content));
 var getPositionerEl = (scope) => scope.query(scope.selector(import_popover.parts.positioner));
+var getArrowEl = (scope) => scope.query(scope.selector(import_popover.parts.arrow));
 var getTitleEl = (scope) => scope.query(scope.selector(import_popover.parts.title));
 var getDescriptionEl = (scope) => scope.query(scope.selector(import_popover.parts.description));
 var getFocusableEls = (scope) => (0, import_dom_query.getFocusables)(getContentEl(scope));
@@ -71,6 +73,7 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
   getActiveTriggerEl,
   getAnchorEl,
   getAnchorId,
+  getArrowEl,
   getArrowId,
   getCloseTriggerId,
   getContentEl,

package/dist/popover.dom.mjs

@@ -22,6 +22,7 @@ var getActiveTriggerEl = (scope, value) => {
 };
 var getContentEl = (scope) => scope.query(scope.selector(parts.content));
 var getPositionerEl = (scope) => scope.query(scope.selector(parts.positioner));
+var getArrowEl = (scope) => scope.query(scope.selector(parts.arrow));
 var getTitleEl = (scope) => scope.query(scope.selector(parts.title));
 var getDescriptionEl = (scope) => scope.query(scope.selector(parts.description));
 var getFocusableEls = (scope) => getFocusables(getContentEl(scope));
@@ -30,6 +31,7 @@ export {
   getActiveTriggerEl,
   getAnchorEl,
   getAnchorId,
+  getArrowEl,
   getArrowId,
   getCloseTriggerId,
   getContentEl,

package/dist/popover.machine.js

@@ -50,10 +50,6 @@ var machine = (0, import_core.createMachine)({
       modal: false,
       restoreFocus: true,
       ...props,
-      translations: {
-        closeTriggerLabel: "close",
-        ...props.translations
-      },
       positioning: {
         placement: "bottom",
         ...props.positioning
@@ -178,6 +174,7 @@ var machine = (0, import_core.createMachine)({
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+          getArrowElement: () => dom.getArrowEl(scope),
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -185,93 +182,107 @@ var machine = (0, import_core.createMachine)({
           }
         });
       },
-      trackDismissableElement({ send, prop, scope, context }) {
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let restoreFocus = true;
-        return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
-          type: "popover",
-          pointerBlocking: prop("modal"),
-          onLayerChange(layer) {
-            context.set("layer", layer);
-          },
-          exclude: dom.getTriggerEls(scope),
-          defer: true,
-          onEscapeKeyDown(event) {
-            prop("onEscapeKeyDown")?.(event);
-            if (prop("closeOnEscape")) return;
-            event.preventDefault();
-          },
-          onInteractOutside(event) {
-            prop("onInteractOutside")?.(event);
-            if (event.defaultPrevented) return;
-            restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            if (!prop("closeOnInteractOutside")) {
+      trackDismissableElement({ send, prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let restoreFocus = true;
+          return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
+            type: "popover",
+            pointerBlocking: prop("modal"),
+            onLayerChange(layer) {
+              context.set("layer", layer);
+            },
+            exclude: dom.getTriggerEls(scope),
+            defer: true,
+            onEscapeKeyDown(event) {
+              prop("onEscapeKeyDown")?.(event);
+              if (prop("closeOnEscape")) return;
               event.preventDefault();
+            },
+            onInteractOutside(event) {
+              prop("onInteractOutside")?.(event);
+              if (event.defaultPrevented) return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!prop("closeOnInteractOutside")) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside: prop("onPointerDownOutside"),
+            onFocusOutside: prop("onFocusOutside"),
+            persistentElements: prop("persistentElements"),
+            onRequestDismiss: prop("onRequestDismiss"),
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
             }
-          },
-          onPointerDownOutside: prop("onPointerDownOutside"),
-          onFocusOutside: prop("onFocusOutside"),
-          persistentElements: prop("persistentElements"),
-          onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
-          }
+          });
         });
       },
-      proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal")) return;
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let cleanup;
-        const rafCleanup = (0, import_dom_query.raf)(() => {
-          const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-          const contentEl = getContentEl2();
-          if (!triggerEl || !contentEl || (0, import_dom_query.contains)(triggerEl.parentElement, contentEl)) return;
-          cleanup = (0, import_dom_query.proxyTabFocus)(getContentEl2, {
-            triggerElement: triggerEl,
-            getShadowRoot: true,
-            onFocus(el) {
-              el.focus({ preventScroll: true });
-            }
+      proxyTabFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (prop("modal")) return;
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let cleanup;
+          const rafCleanup = (0, import_dom_query.raf)(() => {
+            const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+            const contentEl = getContentEl2();
+            if (!triggerEl || !contentEl || (0, import_dom_query.contains)(triggerEl.parentElement, contentEl)) return;
+            cleanup = (0, import_dom_query.proxyTabFocus)(getContentEl2, {
+              triggerElement: triggerEl,
+              getShadowRoot: true,
+              onFocus(el) {
+                el.focus({ preventScroll: true });
+              }
+            });
           });
+          return () => {
+            rafCleanup();
+            cleanup?.();
+          };
         });
-        return () => {
-          rafCleanup();
-          cleanup?.();
-        };
       },
-      hideContentBelow({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
-        return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
+      hideContentBelow({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const getElements = () => [
+            dom.getContentEl(scope),
+            dom.getActiveTriggerEl(scope, context.get("triggerValue"))
+          ];
+          return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
+        });
       },
-      preventScroll({ prop, scope }) {
-        if (!prop("modal")) return;
-        return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
+      preventScroll({ prop, scope, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          return (0, import_remove_scroll.preventBodyScroll)(scope.getDoc());
+        });
       },
-      trapFocus({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const contentEl = () => dom.getContentEl(scope);
-        return (0, import_focus_trap.trapFocus)(contentEl, {
-          preventScroll: true,
-          returnFocusOnDeactivate: !!prop("restoreFocus"),
-          initialFocus: () => (0, import_dom_query.getInitialFocus)({
-            root: dom.getContentEl(scope),
-            getInitialEl: prop("initialFocusEl"),
-            enabled: prop("autoFocus")
-          }),
-          setReturnFocus: (el) => {
-            const finalFocusEl = prop("finalFocusEl")?.();
-            if (finalFocusEl) return finalFocusEl;
-            const triggerValue = context.get("triggerValue");
-            if (triggerValue) {
-              const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
-              if (activeTriggerEl) return activeTriggerEl;
-            }
-            const fallbackTrigger = dom.getTriggerEls(scope)[0];
-            if (fallbackTrigger) return fallbackTrigger;
-            return el;
-          },
-          getShadowRoot: true
+      trapFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const contentEl = () => dom.getContentEl(scope);
+          const destroy = (0, import_focus_trap.trapFocus)(contentEl, {
+            preventScroll: true,
+            returnFocusOnDeactivate: !!prop("restoreFocus"),
+            initialFocus: () => (0, import_dom_query.getInitialFocus)({
+              root: dom.getContentEl(scope),
+              getInitialEl: prop("initialFocusEl"),
+              enabled: prop("autoFocus")
+            }),
+            setReturnFocus: (el) => {
+              const finalFocusEl = prop("finalFocusEl")?.();
+              if (finalFocusEl) return finalFocusEl;
+              const triggerValue = context.get("triggerValue");
+              if (triggerValue) {
+                const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
+                if (activeTriggerEl) return activeTriggerEl;
+              }
+              const fallbackTrigger = dom.getTriggerEls(scope)[0];
+              if (fallbackTrigger) return fallbackTrigger;
+              return el;
+            },
+            getShadowRoot: true
+          });
+          return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
         });
       }
     },
@@ -281,6 +292,7 @@ var machine = (0, import_core.createMachine)({
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+          getArrowElement: () => dom.getArrowEl(scope),
           ...prop("positioning"),
           ...event.options,
           defer: true,

package/dist/popover.machine.mjs

@@ -16,10 +16,6 @@ var machine = createMachine({
       modal: false,
       restoreFocus: true,
       ...props,
-      translations: {
-        closeTriggerLabel: "close",
-        ...props.translations
-      },
       positioning: {
         placement: "bottom",
         ...props.positioning
@@ -144,6 +140,7 @@ var machine = createMachine({
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         return getPlacement(getTriggerEl, getPositionerEl2, {
+          getArrowElement: () => dom.getArrowEl(scope),
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -151,93 +148,107 @@ var machine = createMachine({
           }
         });
       },
-      trackDismissableElement({ send, prop, scope, context }) {
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let restoreFocus = true;
-        return trackDismissableElement(getContentEl2, {
-          type: "popover",
-          pointerBlocking: prop("modal"),
-          onLayerChange(layer) {
-            context.set("layer", layer);
-          },
-          exclude: dom.getTriggerEls(scope),
-          defer: true,
-          onEscapeKeyDown(event) {
-            prop("onEscapeKeyDown")?.(event);
-            if (prop("closeOnEscape")) return;
-            event.preventDefault();
-          },
-          onInteractOutside(event) {
-            prop("onInteractOutside")?.(event);
-            if (event.defaultPrevented) return;
-            restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            if (!prop("closeOnInteractOutside")) {
+      trackDismissableElement({ send, prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let restoreFocus = true;
+          return trackDismissableElement(getContentEl2, {
+            type: "popover",
+            pointerBlocking: prop("modal"),
+            onLayerChange(layer) {
+              context.set("layer", layer);
+            },
+            exclude: dom.getTriggerEls(scope),
+            defer: true,
+            onEscapeKeyDown(event) {
+              prop("onEscapeKeyDown")?.(event);
+              if (prop("closeOnEscape")) return;
               event.preventDefault();
+            },
+            onInteractOutside(event) {
+              prop("onInteractOutside")?.(event);
+              if (event.defaultPrevented) return;
+              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              if (!prop("closeOnInteractOutside")) {
+                event.preventDefault();
+              }
+            },
+            onPointerDownOutside: prop("onPointerDownOutside"),
+            onFocusOutside: prop("onFocusOutside"),
+            persistentElements: prop("persistentElements"),
+            onRequestDismiss: prop("onRequestDismiss"),
+            onDismiss() {
+              send({ type: "CLOSE", src: "interact-outside", restoreFocus });
             }
-          },
-          onPointerDownOutside: prop("onPointerDownOutside"),
-          onFocusOutside: prop("onFocusOutside"),
-          persistentElements: prop("persistentElements"),
-          onRequestDismiss: prop("onRequestDismiss"),
-          onDismiss() {
-            send({ type: "CLOSE", src: "interact-outside", restoreFocus });
-          }
+          });
         });
       },
-      proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal")) return;
-        const getContentEl2 = () => dom.getContentEl(scope);
-        let cleanup;
-        const rafCleanup = raf(() => {
-          const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-          const contentEl = getContentEl2();
-          if (!triggerEl || !contentEl || contains(triggerEl.parentElement, contentEl)) return;
-          cleanup = proxyTabFocus(getContentEl2, {
-            triggerElement: triggerEl,
-            getShadowRoot: true,
-            onFocus(el) {
-              el.focus({ preventScroll: true });
-            }
+      proxyTabFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (prop("modal")) return;
+          const getContentEl2 = () => dom.getContentEl(scope);
+          let cleanup;
+          const rafCleanup = raf(() => {
+            const triggerEl = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+            const contentEl = getContentEl2();
+            if (!triggerEl || !contentEl || contains(triggerEl.parentElement, contentEl)) return;
+            cleanup = proxyTabFocus(getContentEl2, {
+              triggerElement: triggerEl,
+              getShadowRoot: true,
+              onFocus(el) {
+                el.focus({ preventScroll: true });
+              }
+            });
           });
+          return () => {
+            rafCleanup();
+            cleanup?.();
+          };
         });
-        return () => {
-          rafCleanup();
-          cleanup?.();
-        };
       },
-      hideContentBelow({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
-        return ariaHidden(getElements, { defer: true });
+      hideContentBelow({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const getElements = () => [
+            dom.getContentEl(scope),
+            dom.getActiveTriggerEl(scope, context.get("triggerValue"))
+          ];
+          return ariaHidden(getElements, { defer: true });
+        });
       },
-      preventScroll({ prop, scope }) {
-        if (!prop("modal")) return;
-        return preventBodyScroll(scope.getDoc());
+      preventScroll({ prop, scope, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          return preventBodyScroll(scope.getDoc());
+        });
       },
-      trapFocus({ prop, scope, context }) {
-        if (!prop("modal")) return;
-        const contentEl = () => dom.getContentEl(scope);
-        return trapFocus(contentEl, {
-          preventScroll: true,
-          returnFocusOnDeactivate: !!prop("restoreFocus"),
-          initialFocus: () => getInitialFocus({
-            root: dom.getContentEl(scope),
-            getInitialEl: prop("initialFocusEl"),
-            enabled: prop("autoFocus")
-          }),
-          setReturnFocus: (el) => {
-            const finalFocusEl = prop("finalFocusEl")?.();
-            if (finalFocusEl) return finalFocusEl;
-            const triggerValue = context.get("triggerValue");
-            if (triggerValue) {
-              const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
-              if (activeTriggerEl) return activeTriggerEl;
-            }
-            const fallbackTrigger = dom.getTriggerEls(scope)[0];
-            if (fallbackTrigger) return fallbackTrigger;
-            return el;
-          },
-          getShadowRoot: true
+      trapFocus({ prop, scope, context, watchEffect }) {
+        return watchEffect([() => prop("modal")], () => {
+          if (!prop("modal")) return;
+          const contentEl = () => dom.getContentEl(scope);
+          const destroy = trapFocus(contentEl, {
+            preventScroll: true,
+            returnFocusOnDeactivate: !!prop("restoreFocus"),
+            initialFocus: () => getInitialFocus({
+              root: dom.getContentEl(scope),
+              getInitialEl: prop("initialFocusEl"),
+              enabled: prop("autoFocus")
+            }),
+            setReturnFocus: (el) => {
+              const finalFocusEl = prop("finalFocusEl")?.();
+              if (finalFocusEl) return finalFocusEl;
+              const triggerValue = context.get("triggerValue");
+              if (triggerValue) {
+                const activeTriggerEl = dom.getActiveTriggerEl(scope, triggerValue);
+                if (activeTriggerEl) return activeTriggerEl;
+              }
+              const fallbackTrigger = dom.getTriggerEls(scope)[0];
+              if (fallbackTrigger) return fallbackTrigger;
+              return el;
+            },
+            getShadowRoot: true
+          });
+          return () => destroy({ returnFocus: !!prop("restoreFocus") && !!prop("modal") });
         });
       }
     },
@@ -247,6 +258,7 @@ var machine = createMachine({
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
         const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
         getPlacement(getTriggerEl, getPositionerEl2, {
+          getArrowElement: () => dom.getArrowEl(scope),
           ...prop("positioning"),
           ...event.options,
           defer: true,

package/dist/popover.types.d.mts

@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
 import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
+import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    anchor: string;
-    trigger: string | ((value?: string) => string);
-    content: string;
-    title: string;
-    description: string;
-    closeTrigger: string;
-    positioner: string;
-    arrow: string;
-}>;
+interface ElementIds {
+    anchor?: string | undefined;
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    closeTrigger?: string | undefined;
+    positioner?: string | undefined;
+    arrow?: string | undefined;
+}
 interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -59,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
     /**
      * The element to focus on when the popover is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * Element to receive focus when the popover is closed.
      */
@@ -111,7 +111,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning";
 interface PrivateContext {
     /**
      * The computed layer stack state used for declarative styles and attributes.
@@ -134,7 +134,8 @@ interface PrivateContext {
     triggerValue: string | null;
 }
 interface PopoverSchema {
-    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    props: PopoverProps;
+    defaultPropKey: PropsWithDefault;
     state: "open" | "closed";
     context: PrivateContext;
     computed: {};
@@ -149,7 +150,7 @@ interface TriggerProps {
     /**
      * The value that identifies this specific trigger
      */
-    value?: string;
+    value?: string | undefined;
 }
 interface TriggerState {
     /**

package/dist/popover.types.d.ts

@@ -2,7 +2,7 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 import { DismissableElementHandlers, PersistentElementOptions, LayerSnapshot } from '@zag-js/dismissable';
 import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
-import { PropTypes, RequiredBy, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
+import { PropTypes, CommonProperties, DirectionProperty, MaybeElement } from '@zag-js/types';
 
 interface OpenChangeDetails {
     open: boolean;
@@ -20,16 +20,16 @@ interface TriggerValueChangeDetails {
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    anchor: string;
-    trigger: string | ((value?: string) => string);
-    content: string;
-    title: string;
-    description: string;
-    closeTrigger: string;
-    positioner: string;
-    arrow: string;
-}>;
+interface ElementIds {
+    anchor?: string | undefined;
+    trigger?: (string | ((value?: string) => string)) | undefined;
+    content?: string | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    closeTrigger?: string | undefined;
+    positioner?: string | undefined;
+    arrow?: string | undefined;
+}
 interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
@@ -59,7 +59,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
     /**
      * The element to focus on when the popover is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * Element to receive focus when the popover is closed.
      */
@@ -111,7 +111,7 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning";
 interface PrivateContext {
     /**
      * The computed layer stack state used for declarative styles and attributes.
@@ -134,7 +134,8 @@ interface PrivateContext {
     triggerValue: string | null;
 }
 interface PopoverSchema {
-    props: RequiredBy<PopoverProps, PropsWithDefault>;
+    props: PopoverProps;
+    defaultPropKey: PropsWithDefault;
     state: "open" | "closed";
     context: PrivateContext;
     computed: {};
@@ -149,7 +150,7 @@ interface TriggerProps {
     /**
      * The value that identifies this specific trigger
      */
-    value?: string;
+    value?: string | undefined;
 }
 interface TriggerState {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.3",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,16 +29,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.1",
-    "@zag-js/aria-hidden": "2.0.0-next.1",
-    "@zag-js/core": "2.0.0-next.1",
-    "@zag-js/dom-query": "2.0.0-next.1",
-    "@zag-js/utils": "2.0.0-next.1",
-    "@zag-js/dismissable": "2.0.0-next.1",
-    "@zag-js/popper": "2.0.0-next.1",
-    "@zag-js/remove-scroll": "2.0.0-next.1",
-    "@zag-js/types": "2.0.0-next.1",
-    "@zag-js/focus-trap": "2.0.0-next.1"
+    "@zag-js/anatomy": "2.0.0-next.3",
+    "@zag-js/aria-hidden": "2.0.0-next.3",
+    "@zag-js/core": "2.0.0-next.3",
+    "@zag-js/dom-query": "2.0.0-next.3",
+    "@zag-js/utils": "2.0.0-next.3",
+    "@zag-js/dismissable": "2.0.0-next.3",
+    "@zag-js/popper": "2.0.0-next.3",
+    "@zag-js/remove-scroll": "2.0.0-next.3",
+    "@zag-js/types": "2.0.0-next.3",
+    "@zag-js/focus-trap": "2.0.0-next.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -72,7 +72,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }