@zag-js/popover 1.43.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,25 +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
   });
+  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");
@@ -67,41 +85,39 @@ function connect(service, normalize) {
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(scope),
-        ...import_popover.parts.arrow.attrs,
+        ...import_popover.parts.arrow.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
-        ...import_popover.parts.arrowTip.attrs,
+        ...import_popover.parts.arrowTip.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getAnchorProps() {
       return normalize.element({
-        ...import_popover.parts.anchor.attrs,
-        dir: prop("dir"),
-        id: dom.getAnchorId(scope)
+        ...import_popover.parts.anchor.attrs(scope.id),
+        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,
+        ...import_popover.parts.trigger.attrs(scope.id),
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
         "data-side": currentPlacementSide,
-        id: dom.getTriggerId(scope, value),
-        "data-ownedby": scope.id,
         "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) {
@@ -122,55 +138,62 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       return normalize.element({
-        ...import_popover.parts.indicator.attrs,
+        ...import_popover.parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(scope),
-        ...import_popover.parts.positioner.attrs,
+        ...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,
+        ...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() {
       return normalize.element({
-        ...import_popover.parts.title.attrs,
+        ...import_popover.parts.title.attrs(scope.id),
         id: dom.getTitleId(scope),
         dir: prop("dir")
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...import_popover.parts.description.attrs,
+        ...import_popover.parts.description.attrs(scope.id),
         id: dom.getDescriptionId(scope),
         dir: prop("dir")
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
-        ...import_popover.parts.closeTrigger.attrs,
+        ...import_popover.parts.closeTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getCloseTriggerId(scope),
         type: "button",
         "aria-label": translations.closeTriggerLabel,
         onClick(event) {

package/dist/popover.connect.mjs

@@ -1,23 +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
   });
+  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");
@@ -33,41 +51,39 @@ function connect(service, normalize) {
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(scope),
-        ...parts.arrow.attrs,
+        ...parts.arrow.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
-        ...parts.arrowTip.attrs,
+        ...parts.arrowTip.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getAnchorProps() {
       return normalize.element({
-        ...parts.anchor.attrs,
-        dir: prop("dir"),
-        id: dom.getAnchorId(scope)
+        ...parts.anchor.attrs(scope.id),
+        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,
+        ...parts.trigger.attrs(scope.id),
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
         "data-side": currentPlacementSide,
-        id: dom.getTriggerId(scope, value),
-        "data-ownedby": scope.id,
         "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) {
@@ -88,55 +104,62 @@ function connect(service, normalize) {
     },
     getIndicatorProps() {
       return normalize.element({
-        ...parts.indicator.attrs,
+        ...parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         "data-state": open ? "open" : "closed"
       });
     },
+    getPositionerState,
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(scope),
-        ...parts.positioner.attrs,
+        ...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,
+        ...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() {
       return normalize.element({
-        ...parts.title.attrs,
+        ...parts.title.attrs(scope.id),
         id: dom.getTitleId(scope),
         dir: prop("dir")
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...parts.description.attrs,
+        ...parts.description.attrs(scope.id),
         id: dom.getDescriptionId(scope),
         dir: prop("dir")
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
-        ...parts.closeTrigger.attrs,
+        ...parts.closeTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getCloseTriggerId(scope),
         type: "button",
         "aria-label": translations.closeTriggerLabel,
         onClick(event) {

package/dist/popover.dom.d.mts

@@ -9,7 +9,6 @@ declare const getTitleId: (scope: Scope) => any;
 declare const getDescriptionId: (scope: Scope) => any;
 declare const getCloseTriggerId: (scope: Scope) => any;
 declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
-declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -19,4 +18,4 @@ 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, getTriggerEl, getTriggerEls, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };

package/dist/popover.dom.d.ts

@@ -9,7 +9,6 @@ declare const getTitleId: (scope: Scope) => any;
 declare const getDescriptionId: (scope: Scope) => any;
 declare const getCloseTriggerId: (scope: Scope) => any;
 declare const getAnchorEl: (scope: Scope) => HTMLElement | null;
-declare const getTriggerEl: (scope: Scope) => HTMLElement | null;
 declare const getTriggerEls: (scope: Scope) => HTMLElement[];
 declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 declare const getContentEl: (scope: Scope) => HTMLElement | null;
@@ -19,4 +18,4 @@ 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, getTriggerEl, getTriggerEls, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };

package/dist/popover.dom.js

@@ -35,38 +35,35 @@ __export(popover_dom_exports, {
   getPositionerId: () => getPositionerId,
   getTitleEl: () => getTitleEl,
   getTitleId: () => getTitleId,
-  getTriggerEl: () => getTriggerEl,
   getTriggerEls: () => getTriggerEls,
   getTriggerId: () => getTriggerId
 });
 module.exports = __toCommonJS(popover_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
-var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
+var import_popover = require("./popover.anatomy.js");
+var getAnchorId = (scope) => scope.ids?.anchor ?? `${scope.id}:anchor`;
 var getTriggerId = (scope, value) => {
   const customId = scope.ids?.trigger;
   if (customId != null) return (0, import_utils.isFunction)(customId) ? customId(value) : customId;
-  return value ? `popover:${scope.id}:trigger:${value}` : `popover:${scope.id}:trigger`;
+  return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
 };
-var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
-var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
-var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
-var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
-var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
-var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
-var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
-var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
-var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"]${(0, import_dom_query.getByOwnerId)(scope.id)}`);
+var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
+var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:positioner`;
+var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
+var getTitleId = (scope) => scope.ids?.title ?? `${scope.id}:title`;
+var getDescriptionId = (scope) => scope.ids?.description ?? `${scope.id}:desc`;
+var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `${scope.id}:close`;
+var getAnchorEl = (scope) => scope.query(scope.selector(import_popover.parts.anchor));
+var getTriggerEls = (scope) => scope.queryAll(scope.selector(import_popover.parts.trigger));
 var getActiveTriggerEl = (scope, value) => {
-  if (value == null) {
-    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
-  }
-  return scope.getById(getTriggerId(scope, value));
+  if (value == null) return getTriggerEls(scope)[0];
+  return scope.query(`${scope.selector(import_popover.parts.trigger)}[data-value="${value}"]`);
 };
-var getContentEl = (scope) => scope.getById(getContentId(scope));
-var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
-var getTitleEl = (scope) => scope.getById(getTitleId(scope));
-var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
+var getContentEl = (scope) => scope.query(scope.selector(import_popover.parts.content));
+var getPositionerEl = (scope) => scope.query(scope.selector(import_popover.parts.positioner));
+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));
 var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
 // Annotate the CommonJS export names for ESM import in node:
@@ -86,7 +83,6 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
   getPositionerId,
   getTitleEl,
   getTitleId,
-  getTriggerEl,
   getTriggerEls,
   getTriggerId
 });

package/dist/popover.dom.mjs

@@ -1,31 +1,29 @@
 // src/popover.dom.ts
-import { getByOwnerId, getFocusables, queryAll } from "@zag-js/dom-query";
+import { getFocusables } from "@zag-js/dom-query";
 import { isFunction } from "@zag-js/utils";
-var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
+import { parts } from "./popover.anatomy.mjs";
+var getAnchorId = (scope) => scope.ids?.anchor ?? `${scope.id}:anchor`;
 var getTriggerId = (scope, value) => {
   const customId = scope.ids?.trigger;
   if (customId != null) return isFunction(customId) ? customId(value) : customId;
-  return value ? `popover:${scope.id}:trigger:${value}` : `popover:${scope.id}:trigger`;
+  return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
 };
-var getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
-var getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
-var getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
-var getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
-var getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
-var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
-var getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
-var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
-var getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="popover"][data-part="trigger"]${getByOwnerId(scope.id)}`);
+var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
+var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:positioner`;
+var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
+var getTitleId = (scope) => scope.ids?.title ?? `${scope.id}:title`;
+var getDescriptionId = (scope) => scope.ids?.description ?? `${scope.id}:desc`;
+var getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `${scope.id}:close`;
+var getAnchorEl = (scope) => scope.query(scope.selector(parts.anchor));
+var getTriggerEls = (scope) => scope.queryAll(scope.selector(parts.trigger));
 var getActiveTriggerEl = (scope, value) => {
-  if (value == null) {
-    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
-  }
-  return scope.getById(getTriggerId(scope, value));
+  if (value == null) return getTriggerEls(scope)[0];
+  return scope.query(`${scope.selector(parts.trigger)}[data-value="${value}"]`);
 };
-var getContentEl = (scope) => scope.getById(getContentId(scope));
-var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
-var getTitleEl = (scope) => scope.getById(getTitleId(scope));
-var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
+var getContentEl = (scope) => scope.query(scope.selector(parts.content));
+var getPositionerEl = (scope) => scope.query(scope.selector(parts.positioner));
+var getTitleEl = (scope) => scope.query(scope.selector(parts.title));
+var getDescriptionEl = (scope) => scope.query(scope.selector(parts.description));
 var getFocusableEls = (scope) => getFocusables(getContentEl(scope));
 var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
 export {
@@ -44,7 +42,6 @@ export {
   getPositionerId,
   getTitleEl,
   getTitleId,
-  getTriggerEl,
   getTriggerEls,
   getTriggerId
 };

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
       })),
@@ -85,9 +87,6 @@ var machine = (0, import_core.createMachine)({
       }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -177,8 +176,8 @@ var machine = (0, import_core.createMachine)({
         context.set("currentPlacement", prop("positioning").placement);
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        return (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -186,13 +185,16 @@ var machine = (0, import_core.createMachine)({
           }
         });
       },
-      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"),
-          exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
+          onLayerChange(layer) {
+            context.set("layer", layer);
+          },
+          exclude: dom.getTriggerEls(scope),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -217,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;
@@ -268,8 +279,8 @@ var machine = (0, import_core.createMachine)({
       reposition({ event, prop, scope, context }) {
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        (0, import_popper.getPlacement)(getTriggerEl2, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,

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
       })),
@@ -51,9 +53,6 @@ var machine = createMachine({
       }))
     };
   },
-  computed: {
-    currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled")
-  },
   watch({ track, prop, action }) {
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -143,8 +142,8 @@ var machine = createMachine({
         context.set("currentPlacement", prop("positioning").placement);
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        return getPlacement(getTriggerEl2, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -152,13 +151,16 @@ var machine = createMachine({
           }
         });
       },
-      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"),
-          exclude: [dom.getTriggerEl(scope), ...dom.getTriggerEls(scope)].filter(Boolean),
+          onLayerChange(layer) {
+            context.set("layer", layer);
+          },
+          exclude: dom.getTriggerEls(scope),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -183,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;
@@ -234,8 +245,8 @@ var machine = createMachine({
       reposition({ event, prop, scope, context }) {
         const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        const getTriggerEl2 = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
-        getPlacement(getTriggerEl2, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,

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
      */
@@ -146,7 +137,7 @@ interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -160,11 +151,57 @@ interface TriggerProps {
      */
     value?: string;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
     /**
-     * Whether the popover is portalled.
+     * Whether this trigger is the one that opened the popover
      */
-    portalled: boolean;
+    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
      */
@@ -188,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
      */
@@ -146,7 +137,7 @@ interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
     state: "open" | "closed";
     context: PrivateContext;
-    computed: ComputedContext;
+    computed: {};
     event: EventObject;
     action: string;
     effect: string;
@@ -160,11 +151,57 @@ interface TriggerProps {
      */
     value?: string;
 }
-interface PopoverApi<T extends PropTypes = PropTypes> {
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
     /**
-     * Whether the popover is portalled.
+     * Whether this trigger is the one that opened the popover
      */
-    portalled: boolean;
+    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
      */
@@ -188,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": "1.43.0",
+  "version": "2.0.0-next.1",
   "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": "1.43.0",
-    "@zag-js/aria-hidden": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/dismissable": "1.43.0",
-    "@zag-js/popper": "1.43.0",
-    "@zag-js/remove-scroll": "1.43.0",
-    "@zag-js/types": "1.43.0",
-    "@zag-js/focus-trap": "1.43.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"