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

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { anatomy } from './popover.anatomy.mjs';
 export { connect } from './popover.connect.mjs';
 export { machine } from './popover.machine.mjs';
 export { props, splitProps } from './popover.props.mjs';
-export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerValueChangeDetails } from './popover.types.mjs';
+export { PopoverApi as Api, ContentState, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PositionerState, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './popover.types.mjs';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { anatomy } from './popover.anatomy.js';
 export { connect } from './popover.connect.js';
 export { machine } from './popover.machine.js';
 export { props, splitProps } from './popover.props.js';
-export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerValueChangeDetails } from './popover.types.js';
+export { PopoverApi as Api, ContentState, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PositionerState, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './popover.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/popover.connect.js

@@ -33,26 +33,43 @@ __export(popover_connect_exports, {
   connect: () => connect
 });
 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_popover = require("./popover.anatomy.js");
 var dom = __toESM(require("./popover.dom.js"));
 function connect(service, normalize) {
-  const { state, context, send, computed, prop, scope } = service;
+  const { state, context, send, prop, scope } = service;
+  const layer = context.get("layer");
   const translations = prop("translations");
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
-  const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
   const triggerValue = context.get("triggerValue");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getPositionerState() {
+    return { nested: !!layer?.nested, hasNested: !!layer?.hasNested };
+  }
+  function getContentState() {
+    return {
+      open,
+      modal: !!prop("modal"),
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
-    portalled,
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open");
@@ -86,9 +103,11 @@ function connect(service, normalize) {
         dir: prop("dir")
       });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const triggerState = getTriggerState(props);
+      const { current } = triggerState;
       return normalize.button({
         ...import_popover.parts.trigger.attrs(scope.id),
         dir: prop("dir"),
@@ -98,7 +117,7 @@ function connect(service, normalize) {
         "data-value": value,
         "data-current": (0, import_dom_query.dataAttr)(current),
         "aria-haspopup": "dialog",
-        "aria-expanded": value == null ? open : open && current,
+        "aria-expanded": triggerState.open,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -124,28 +143,37 @@ function connect(service, normalize) {
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
         ...import_popover.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: {
+          ...popperStyles.floating,
+          ...(0, import_dismissable.getDismissableLayerStyle)(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...import_popover.parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope),
         tabIndex: -1,
         role: "dialog",
-        "aria-modal": (0, import_dom_query.ariaAttr)(prop("modal")),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-expanded": (0, import_dom_query.dataAttr)(open),
+        "aria-modal": (0, import_dom_query.ariaAttr)(contentState.modal),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-expanded": (0, import_dom_query.dataAttr)(contentState.open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: (0, import_dismissable.getDismissableLayerStyle)(layer, { pointerEvents: true })
       });
     },
     getTitleProps() {

package/dist/popover.connect.mjs

@@ -1,24 +1,41 @@
 // src/popover.connect.ts
+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 { parts } from "./popover.anatomy.mjs";
 import * as dom from "./popover.dom.mjs";
 function connect(service, normalize) {
-  const { state, context, send, computed, prop, scope } = service;
+  const { state, context, send, prop, scope } = service;
+  const layer = context.get("layer");
   const translations = prop("translations");
   const open = state.matches("open");
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
-  const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
   const triggerValue = context.get("triggerValue");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getPositionerState() {
+    return { nested: !!layer?.nested, hasNested: !!layer?.hasNested };
+  }
+  function getContentState() {
+    return {
+      open,
+      modal: !!prop("modal"),
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
-    portalled,
     open,
     setOpen(nextOpen) {
       const open2 = state.matches("open");
@@ -52,9 +69,11 @@ function connect(service, normalize) {
         dir: prop("dir")
       });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const triggerState = getTriggerState(props);
+      const { current } = triggerState;
       return normalize.button({
         ...parts.trigger.attrs(scope.id),
         dir: prop("dir"),
@@ -64,7 +83,7 @@ function connect(service, normalize) {
         "data-value": value,
         "data-current": dataAttr(current),
         "aria-haspopup": "dialog",
-        "aria-expanded": value == null ? open : open && current,
+        "aria-expanded": triggerState.open,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -90,28 +109,37 @@ function connect(service, normalize) {
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
         ...parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...getDismissableLayerAttrs(layer),
+        style: {
+          ...popperStyles.floating,
+          ...getDismissableLayerStyle(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope),
         tabIndex: -1,
         role: "dialog",
-        "aria-modal": ariaAttr(prop("modal")),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-expanded": dataAttr(open),
+        "aria-modal": ariaAttr(contentState.modal),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-expanded": dataAttr(contentState.open),
         "aria-labelledby": rendered.title ? dom.getTitleId(scope) : void 0,
         "aria-describedby": rendered.description ? dom.getDescriptionId(scope) : void 0,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        ...getDismissableLayerAttrs(layer),
+        style: getDismissableLayerStyle(layer, { pointerEvents: true })
       });
     },
     getTitleProps() {

package/dist/popover.machine.js

@@ -48,7 +48,6 @@ var machine = (0, import_core.createMachine)({
       closeOnEscape: true,
       autoFocus: true,
       modal: false,
-      portalled: true,
       restoreFocus: true,
       ...props,
       translations: {
@@ -67,6 +66,9 @@ var machine = (0, import_core.createMachine)({
   },
   context({ bindable, prop, scope }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
@@ -82,13 +84,9 @@ var machine = (0, import_core.createMachine)({
           const triggerElement = dom.getActiveTriggerEl(scope, value);
           onTriggerValueChange({ value, triggerElement });
         }
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -184,16 +182,18 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
-      trackDismissableElement({ send, prop, scope }) {
+      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) {
@@ -219,16 +219,25 @@ var machine = (0, import_core.createMachine)({
         });
       },
       proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal") || !prop("portalled")) return;
+        if (prop("modal")) return;
         const getContentEl2 = () => dom.getContentEl(scope);
-        return (0, import_dom_query.proxyTabFocus)(getContentEl2, {
-          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
-          defer: true,
-          getShadowRoot: true,
-          onFocus(el) {
-            el.focus({ preventScroll: true });
-          }
+        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?.();
+        };
       },
       hideContentBelow({ prop, scope, context }) {
         if (!prop("modal")) return;

package/dist/popover.machine.mjs

@@ -2,7 +2,7 @@
 import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-import { getInitialFocus, proxyTabFocus, raf } from "@zag-js/dom-query";
+import { contains, getInitialFocus, proxyTabFocus, raf } from "@zag-js/dom-query";
 import { trapFocus } from "@zag-js/focus-trap";
 import { getPlacement } from "@zag-js/popper";
 import { preventBodyScroll } from "@zag-js/remove-scroll";
@@ -14,7 +14,6 @@ var machine = createMachine({
       closeOnEscape: true,
       autoFocus: true,
       modal: false,
-      portalled: true,
       restoreFocus: true,
       ...props,
       translations: {
@@ -33,6 +32,9 @@ var machine = createMachine({
   },
   context({ bindable, prop, scope }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
@@ -48,13 +50,9 @@ var machine = createMachine({
           const triggerElement = dom.getActiveTriggerEl(scope, value);
           onTriggerValueChange({ value, triggerElement });
         }
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -150,16 +148,18 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
-      trackDismissableElement({ send, prop, scope }) {
+      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) {
@@ -185,16 +185,25 @@ var machine = createMachine({
         });
       },
       proxyTabFocus({ prop, scope, context }) {
-        if (prop("modal") || !prop("portalled")) return;
+        if (prop("modal")) return;
         const getContentEl2 = () => dom.getContentEl(scope);
-        return proxyTabFocus(getContentEl2, {
-          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
-          defer: true,
-          getShadowRoot: true,
-          onFocus(el) {
-            el.focus({ preventScroll: true });
-          }
+        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?.();
+        };
       },
       hideContentBelow({ prop, scope, context }) {
         if (!prop("modal")) return;

package/dist/popover.props.js

@@ -48,7 +48,6 @@ var props = (0, import_types.createProps)()([
   "onRequestDismiss",
   "open",
   "persistentElements",
-  "portalled",
   "restoreFocus",
   "positioning",
   "translations",

package/dist/popover.props.mjs

@@ -23,7 +23,6 @@ var props = createProps()([
   "onRequestDismiss",
   "open",
   "persistentElements",
-  "portalled",
   "restoreFocus",
   "positioning",
   "translations",

package/dist/popover.types.d.mts

@@ -1,6 +1,6 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+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';
 
@@ -49,13 +49,6 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * @default false
      */
     modal?: boolean | undefined;
-    /**
-     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
-     * of the popover content.
-     *
-     * @default true
-     */
-    portalled?: boolean | undefined;
     /**
      * Whether to automatically set focus on the first focusable
      * content within the popover when opened.
@@ -118,14 +111,12 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
-type ComputedContext = Readonly<{
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+interface PrivateContext {
     /**
-     * The computed value of `portalled`
+     * The computed layer stack state used for declarative styles and attributes.
      */
-    currentPortalled: boolean;
-}>;
-interface PrivateContext {
+    layer: LayerSnapshot | null;
     /**
      * The elements that are rendered on mount
      */
@@ -141,16 +132,12 @@ interface PrivateContext {
      * The trigger value
      */
     triggerValue: string | null;
-    /**
-     * Whether the popover has been positioned
-     */
-    positioned: boolean;
 }
 interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -164,11 +151,57 @@ interface TriggerProps {
      */
     value?: string;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
     /**
-     * Whether the popover is portalled.
+     * The value that identifies this specific trigger
      */
-    portalled: boolean;
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the popover
+     */
+    current: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+}
+interface PositionerState {
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Whether the popover is modal
+     */
+    modal: boolean;
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is open
      */
@@ -192,13 +225,25 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
+    /**
+     * Returns the state of the positioner
+     */
+    getPositionerState: () => PositionerState;
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getTitleProps: () => T["element"];
     getDescriptionProps: () => T["element"];
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, PositionerState, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/dist/popover.types.d.ts

@@ -1,6 +1,6 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { DismissableElementHandlers, PersistentElementOptions } from '@zag-js/dismissable';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+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';
 
@@ -49,13 +49,6 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * @default false
      */
     modal?: boolean | undefined;
-    /**
-     * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
-     * of the popover content.
-     *
-     * @default true
-     */
-    portalled?: boolean | undefined;
     /**
      * Whether to automatically set focus on the first focusable
      * content within the popover when opened.
@@ -118,14 +111,12 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      */
     onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
-type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
-type ComputedContext = Readonly<{
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+interface PrivateContext {
     /**
-     * The computed value of `portalled`
+     * The computed layer stack state used for declarative styles and attributes.
      */
-    currentPortalled: boolean;
-}>;
-interface PrivateContext {
+    layer: LayerSnapshot | null;
     /**
      * The elements that are rendered on mount
      */
@@ -141,16 +132,12 @@ interface PrivateContext {
      * The trigger value
      */
     triggerValue: string | null;
-    /**
-     * Whether the popover has been positioned
-     */
-    positioned: boolean;
 }
 interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -164,11 +151,57 @@ interface TriggerProps {
      */
     value?: string;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
     /**
-     * Whether the popover is portalled.
+     * The value that identifies this specific trigger
      */
-    portalled: boolean;
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the popover
+     */
+    current: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+}
+interface PositionerState {
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the popover is open
+     */
+    open: boolean;
+    /**
+     * Whether the popover is modal
+     */
+    modal: boolean;
+    /**
+     * Whether the popover is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the popover has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is open
      */
@@ -192,13 +225,25 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
+    /**
+     * Returns the state of the positioner
+     */
+    getPositionerState: () => PositionerState;
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getTitleProps: () => T["element"];
     getDescriptionProps: () => T["element"];
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, PositionerState, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/popover",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/popover"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,16 +29,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/aria-hidden": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/dismissable": "2.0.0-next.0",
-    "@zag-js/popper": "2.0.0-next.0",
-    "@zag-js/remove-scroll": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0",
-    "@zag-js/focus-trap": "2.0.0-next.0"
+    "@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"
   },
   "devDependencies": {
     "clean-package": "2.2.0"