@zag-js/popover 1.38.2 → 1.39.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 } from './popover.types.mjs';
+export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, 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 } from './popover.types.js';
+export { PopoverApi as Api, ElementIds, IntlTranslations, PopoverMachine as Machine, OpenChangeDetails, PopoverProps as Props, PopoverService as Service, TriggerProps, TriggerValueChangeDetails } from './popover.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/types';

package/dist/popover.anatomy.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
-declare const parts: Record<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/popover.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
-declare const parts: Record<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger">;
+declare const parts: Record<"content" | "title" | "anchor" | "arrow" | "arrowTip" | "trigger" | "indicator" | "positioner" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/popover.connect.js

@@ -44,6 +44,7 @@ function connect(service, normalize) {
   const currentPlacement = context.get("currentPlacement");
   const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
+  const triggerValue = context.get("triggerValue");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
     placement: currentPlacement
@@ -56,6 +57,10 @@ function connect(service, normalize) {
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "TRIGGER_VALUE.SET", value });
+    },
     reposition(options = {}) {
       send({ type: "POSITIONING.SET", options });
     },
@@ -81,15 +86,20 @@ function connect(service, normalize) {
         id: dom.getAnchorId(scope)
       });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
       return normalize.button({
         ...import_popover.parts.trigger.attrs,
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
-        id: dom.getTriggerId(scope),
+        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": open,
+        "aria-expanded": value == null ? open : open && current,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -100,7 +110,8 @@ function connect(service, normalize) {
         },
         onClick(event) {
           if (event.defaultPrevented) return;
-          send({ type: "TOGGLE" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "TOGGLE", value });
         },
         onBlur(event) {
           send({ type: "TRIGGER_BLUR", target: event.relatedTarget });

package/dist/popover.connect.mjs

@@ -10,6 +10,7 @@ function connect(service, normalize) {
   const currentPlacement = context.get("currentPlacement");
   const portalled = computed("currentPortalled");
   const rendered = context.get("renderedElements");
+  const triggerValue = context.get("triggerValue");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
     placement: currentPlacement
@@ -22,6 +23,10 @@ function connect(service, normalize) {
       if (open2 === nextOpen) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "TRIGGER_VALUE.SET", value });
+    },
     reposition(options = {}) {
       send({ type: "POSITIONING.SET", options });
     },
@@ -47,15 +52,20 @@ function connect(service, normalize) {
         id: dom.getAnchorId(scope)
       });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
       return normalize.button({
         ...parts.trigger.attrs,
         dir: prop("dir"),
         type: "button",
         "data-placement": currentPlacement,
-        id: dom.getTriggerId(scope),
+        id: dom.getTriggerId(scope, value),
+        "data-ownedby": scope.id,
+        "data-value": value,
+        "data-current": dataAttr(current),
         "aria-haspopup": "dialog",
-        "aria-expanded": open,
+        "aria-expanded": value == null ? open : open && current,
         "data-state": open ? "open" : "closed",
         "aria-controls": dom.getContentId(scope),
         onPointerDown(event) {
@@ -66,7 +76,8 @@ function connect(service, normalize) {
         },
         onClick(event) {
           if (event.defaultPrevented) return;
-          send({ type: "TOGGLE" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "TRIGGER_VALUE.SET" : "TOGGLE", value });
         },
         onBlur(event) {
           send({ type: "TRIGGER_BLUR", target: event.relatedTarget });

package/dist/popover.dom.d.mts

@@ -1,7 +1,7 @@
 import { Scope } from '@zag-js/core';
 
 declare const getAnchorId: (scope: Scope) => any;
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
 declare const getPositionerId: (scope: Scope) => any;
 declare const getArrowId: (scope: Scope) => any;
@@ -9,7 +9,8 @@ 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;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
 declare const getTitleEl: (scope: Scope) => HTMLElement | null;
@@ -17,4 +18,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, 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

@@ -1,7 +1,7 @@
 import { Scope } from '@zag-js/core';
 
 declare const getAnchorId: (scope: Scope) => any;
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
 declare const getPositionerId: (scope: Scope) => any;
 declare const getArrowId: (scope: Scope) => any;
@@ -9,7 +9,8 @@ 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;
 declare const getPositionerEl: (scope: Scope) => HTMLElement | null;
 declare const getTitleEl: (scope: Scope) => HTMLElement | null;
@@ -17,4 +18,4 @@ declare const getDescriptionEl: (scope: Scope) => HTMLElement | null;
 declare const getFocusableEls: (scope: Scope) => HTMLElement[];
 declare const getFirstFocusableEl: (scope: Scope) => HTMLElement;
 
-export { getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEl, getTriggerId };
+export { getActiveTriggerEl, getAnchorEl, getAnchorId, getArrowId, getCloseTriggerId, getContentEl, getContentId, getDescriptionEl, getDescriptionId, getFirstFocusableEl, getFocusableEls, getPositionerEl, getPositionerId, getTitleEl, getTitleId, getTriggerEls, getTriggerId };

package/dist/popover.dom.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/popover.dom.ts
 var popover_dom_exports = {};
 __export(popover_dom_exports, {
+  getActiveTriggerEl: () => getActiveTriggerEl,
   getAnchorEl: () => getAnchorEl,
   getAnchorId: () => getAnchorId,
   getArrowId: () => getArrowId,
@@ -34,13 +35,18 @@ __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 getTriggerId = (scope) => scope.ids?.trigger ?? `popover:${scope.id}:trigger`;
+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`;
+};
 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`;
@@ -48,7 +54,10 @@ 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.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
 var getTitleEl = (scope) => scope.getById(getTitleId(scope));
@@ -57,6 +66,7 @@ var getFocusableEls = (scope) => (0, import_dom_query.getFocusables)(getContentE
 var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getActiveTriggerEl,
   getAnchorEl,
   getAnchorId,
   getArrowId,
@@ -71,6 +81,6 @@ var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
   getPositionerId,
   getTitleEl,
   getTitleId,
-  getTriggerEl,
+  getTriggerEls,
   getTriggerId
 });

package/dist/popover.dom.mjs

@@ -1,7 +1,12 @@
 // src/popover.dom.ts
-import { getFocusables } from "@zag-js/dom-query";
+import { getFocusables, queryAll } from "@zag-js/dom-query";
+import { isFunction } from "@zag-js/utils";
 var getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
-var getTriggerId = (scope) => scope.ids?.trigger ?? `popover:${scope.id}:trigger`;
+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`;
+};
 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`;
@@ -9,7 +14,10 @@ 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.getDoc(), `[data-scope="popover"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 var getContentEl = (scope) => scope.getById(getContentId(scope));
 var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
 var getTitleEl = (scope) => scope.getById(getTitleId(scope));
@@ -17,6 +25,7 @@ var getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
 var getFocusableEls = (scope) => getFocusables(getContentEl(scope));
 var getFirstFocusableEl = (scope) => getFocusableEls(scope)[0];
 export {
+  getActiveTriggerEl,
   getAnchorEl,
   getAnchorId,
   getArrowId,
@@ -31,6 +40,6 @@ export {
   getPositionerId,
   getTitleEl,
   getTitleId,
-  getTriggerEl,
+  getTriggerEls,
   getTriggerId
 };

package/dist/popover.machine.js

@@ -64,13 +64,23 @@ var machine = (0, import_core.createMachine)({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "closed";
   },
-  context({ bindable }) {
+  context({ bindable, prop, scope }) {
     return {
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
       renderedElements: bindable(() => ({
         defaultValue: { title: true, description: true }
+      })),
+      triggerValue: bindable(() => ({
+        defaultValue: prop("defaultTriggerValue") ?? null,
+        value: prop("triggerValue"),
+        onChange(value) {
+          const onTriggerValueChange = prop("onTriggerValueChange");
+          if (!onTriggerValueChange) return;
+          const triggerElement = dom.getActiveTriggerEl(scope, value);
+          onTriggerValueChange({ value, triggerElement });
+        }
       }))
     };
   },
@@ -83,6 +93,11 @@ var machine = (0, import_core.createMachine)({
     });
   },
   entry: ["checkRenderedElements"],
+  on: {
+    "TRIGGER_VALUE.SET": {
+      actions: ["setTriggerValue", "reposition"]
+    }
+  },
   states: {
     closed: {
       on: {
@@ -93,21 +108,21 @@ var machine = (0, import_core.createMachine)({
         TOGGLE: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["invokeOnOpen", "setTriggerValue"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "setInitialFocus"]
+            actions: ["invokeOnOpen", "setTriggerValue", "setInitialFocus"]
           }
         ],
         OPEN: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["invokeOnOpen", "setTriggerValue"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "setInitialFocus"]
+            actions: ["invokeOnOpen", "setTriggerValue", "setInitialFocus"]
           }
         ]
       }
@@ -159,9 +174,10 @@ var machine = (0, import_core.createMachine)({
     effects: {
       trackPositioning({ context, prop, scope }) {
         context.set("currentPlacement", prop("positioning").placement);
-        const anchorEl = dom.getAnchorEl(scope) ?? dom.getTriggerEl(scope);
+        const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return (0, import_popper.getPlacement)(anchorEl, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -175,7 +191,7 @@ var machine = (0, import_core.createMachine)({
         return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
           type: "popover",
           pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEl(scope),
+          exclude: dom.getTriggerEls(scope),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -199,11 +215,11 @@ var machine = (0, import_core.createMachine)({
           }
         });
       },
-      proxyTabFocus({ prop, scope }) {
+      proxyTabFocus({ prop, scope, context }) {
         if (prop("modal") || !prop("portalled")) return;
         const getContentEl2 = () => dom.getContentEl(scope);
         return (0, import_dom_query.proxyTabFocus)(getContentEl2, {
-          triggerElement: dom.getTriggerEl(scope),
+          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
           defer: true,
           getShadowRoot: true,
           onFocus(el) {
@@ -211,9 +227,9 @@ var machine = (0, import_core.createMachine)({
           }
         });
       },
-      hideContentBelow({ prop, scope }) {
+      hideContentBelow({ prop, scope, context }) {
         if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getTriggerEl(scope)];
+        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
         return (0, import_aria_hidden.ariaHidden)(getElements, { defer: true });
       },
       preventScroll({ prop, scope }) {
@@ -235,9 +251,10 @@ var machine = (0, import_core.createMachine)({
     },
     actions: {
       reposition({ event, prop, scope, context }) {
-        const anchorEl = dom.getAnchorEl(scope) ?? dom.getTriggerEl(scope);
+        const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        (0, import_popper.getPlacement)(anchorEl, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,
@@ -247,6 +264,10 @@ var machine = (0, import_core.createMachine)({
           }
         });
       },
+      setTriggerValue({ context, event }) {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
       checkRenderedElements({ context, scope }) {
         (0, import_dom_query.raf)(() => {
           Object.assign(context.get("renderedElements"), {
@@ -266,11 +287,11 @@ var machine = (0, import_core.createMachine)({
           element?.focus({ preventScroll: true });
         });
       },
-      setFinalFocus({ event, scope }) {
+      setFinalFocus({ event, scope, context }) {
         const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
         if (restoreFocus != null && !restoreFocus) return;
         (0, import_dom_query.raf)(() => {
-          const element = dom.getTriggerEl(scope);
+          const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
           element?.focus({ preventScroll: true });
         });
       },

package/dist/popover.machine.mjs

@@ -30,13 +30,23 @@ var machine = createMachine({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "closed";
   },
-  context({ bindable }) {
+  context({ bindable, prop, scope }) {
     return {
       currentPlacement: bindable(() => ({
         defaultValue: void 0
       })),
       renderedElements: bindable(() => ({
         defaultValue: { title: true, description: true }
+      })),
+      triggerValue: bindable(() => ({
+        defaultValue: prop("defaultTriggerValue") ?? null,
+        value: prop("triggerValue"),
+        onChange(value) {
+          const onTriggerValueChange = prop("onTriggerValueChange");
+          if (!onTriggerValueChange) return;
+          const triggerElement = dom.getActiveTriggerEl(scope, value);
+          onTriggerValueChange({ value, triggerElement });
+        }
       }))
     };
   },
@@ -49,6 +59,11 @@ var machine = createMachine({
     });
   },
   entry: ["checkRenderedElements"],
+  on: {
+    "TRIGGER_VALUE.SET": {
+      actions: ["setTriggerValue", "reposition"]
+    }
+  },
   states: {
     closed: {
       on: {
@@ -59,21 +74,21 @@ var machine = createMachine({
         TOGGLE: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["invokeOnOpen", "setTriggerValue"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "setInitialFocus"]
+            actions: ["invokeOnOpen", "setTriggerValue", "setInitialFocus"]
           }
         ],
         OPEN: [
           {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["invokeOnOpen", "setTriggerValue"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen", "setInitialFocus"]
+            actions: ["invokeOnOpen", "setTriggerValue", "setInitialFocus"]
           }
         ]
       }
@@ -125,9 +140,10 @@ var machine = createMachine({
     effects: {
       trackPositioning({ context, prop, scope }) {
         context.set("currentPlacement", prop("positioning").placement);
-        const anchorEl = dom.getAnchorEl(scope) ?? dom.getTriggerEl(scope);
+        const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return getPlacement(anchorEl, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           defer: true,
           onComplete(data) {
@@ -141,7 +157,7 @@ var machine = createMachine({
         return trackDismissableElement(getContentEl2, {
           type: "popover",
           pointerBlocking: prop("modal"),
-          exclude: dom.getTriggerEl(scope),
+          exclude: dom.getTriggerEls(scope),
           defer: true,
           onEscapeKeyDown(event) {
             prop("onEscapeKeyDown")?.(event);
@@ -165,11 +181,11 @@ var machine = createMachine({
           }
         });
       },
-      proxyTabFocus({ prop, scope }) {
+      proxyTabFocus({ prop, scope, context }) {
         if (prop("modal") || !prop("portalled")) return;
         const getContentEl2 = () => dom.getContentEl(scope);
         return proxyTabFocus(getContentEl2, {
-          triggerElement: dom.getTriggerEl(scope),
+          triggerElement: dom.getActiveTriggerEl(scope, context.get("triggerValue")),
           defer: true,
           getShadowRoot: true,
           onFocus(el) {
@@ -177,9 +193,9 @@ var machine = createMachine({
           }
         });
       },
-      hideContentBelow({ prop, scope }) {
+      hideContentBelow({ prop, scope, context }) {
         if (!prop("modal")) return;
-        const getElements = () => [dom.getContentEl(scope), dom.getTriggerEl(scope)];
+        const getElements = () => [dom.getContentEl(scope), dom.getActiveTriggerEl(scope, context.get("triggerValue"))];
         return ariaHidden(getElements, { defer: true });
       },
       preventScroll({ prop, scope }) {
@@ -201,9 +217,10 @@ var machine = createMachine({
     },
     actions: {
       reposition({ event, prop, scope, context }) {
-        const anchorEl = dom.getAnchorEl(scope) ?? dom.getTriggerEl(scope);
+        const anchorEl = dom.getAnchorEl(scope);
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        getPlacement(anchorEl, getPositionerEl2, {
+        const getTriggerEl = () => anchorEl ?? dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
           defer: true,
@@ -213,6 +230,10 @@ var machine = createMachine({
           }
         });
       },
+      setTriggerValue({ context, event }) {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
       checkRenderedElements({ context, scope }) {
         raf(() => {
           Object.assign(context.get("renderedElements"), {
@@ -232,11 +253,11 @@ var machine = createMachine({
           element?.focus({ preventScroll: true });
         });
       },
-      setFinalFocus({ event, scope }) {
+      setFinalFocus({ event, scope, context }) {
         const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
         if (restoreFocus != null && !restoreFocus) return;
         raf(() => {
-          const element = dom.getTriggerEl(scope);
+          const element = dom.getActiveTriggerEl(scope, context.get("triggerValue"));
           element?.focus({ preventScroll: true });
         });
       },

package/dist/popover.props.js

@@ -30,6 +30,8 @@ var props = (0, import_types.createProps)()([
   "autoFocus",
   "closeOnEscape",
   "closeOnInteractOutside",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
   "getRootNode",
   "id",
@@ -41,13 +43,14 @@ var props = (0, import_types.createProps)()([
   "onInteractOutside",
   "onOpenChange",
   "onPointerDownOutside",
+  "onTriggerValueChange",
   "onRequestDismiss",
-  "defaultOpen",
   "open",
   "persistentElements",
   "portalled",
   "positioning",
-  "translations"
+  "translations",
+  "triggerValue"
 ]);
 var splitProps = (0, import_utils.createSplitProps)(props);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/popover.props.mjs

@@ -5,6 +5,8 @@ var props = createProps()([
   "autoFocus",
   "closeOnEscape",
   "closeOnInteractOutside",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
   "getRootNode",
   "id",
@@ -16,13 +18,14 @@ var props = createProps()([
   "onInteractOutside",
   "onOpenChange",
   "onPointerDownOutside",
+  "onTriggerValueChange",
   "onRequestDismiss",
-  "defaultOpen",
   "open",
   "persistentElements",
   "portalled",
   "positioning",
-  "translations"
+  "translations",
+  "triggerValue"
 ]);
 var splitProps = createSplitProps(props);
 export {

package/dist/popover.types.d.mts

@@ -7,12 +7,22 @@ import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag
 interface OpenChangeDetails {
     open: boolean;
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
 type ElementIds = Partial<{
     anchor: string;
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
     title: string;
     description: string;
@@ -84,6 +94,19 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * Use when you don't need to control the open state of the popover.
      */
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
 type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning" | "translations";
 type ComputedContext = Readonly<{
@@ -104,6 +127,10 @@ interface PrivateContext {
      * The computed placement (maybe different from initial placement)
      */
     currentPlacement?: Placement | undefined;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
 }
 interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
@@ -117,6 +144,12 @@ interface PopoverSchema {
 }
 type PopoverService = Service<PopoverSchema>;
 type PopoverMachine = Machine<PopoverSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is portalled.
@@ -130,6 +163,14 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
      * Function to open or close the popover
      */
     setOpen: (open: boolean) => void;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
     /**
      * Function to reposition the popover
      */
@@ -137,7 +178,7 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
     getPositionerProps: () => T["element"];
     getContentProps: () => T["element"];
@@ -146,4 +187,4 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService };
+export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };

package/dist/popover.types.d.ts

@@ -7,12 +7,22 @@ import { PropTypes, RequiredBy, CommonProperties, DirectionProperty } from '@zag
 interface OpenChangeDetails {
     open: boolean;
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 interface IntlTranslations {
     closeTriggerLabel?: string | undefined;
 }
 type ElementIds = Partial<{
     anchor: string;
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
     title: string;
     description: string;
@@ -84,6 +94,19 @@ interface PopoverProps extends CommonProperties, DirectionProperty, DismissableE
      * Use when you don't need to control the open state of the popover.
      */
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
 type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "positioning" | "translations";
 type ComputedContext = Readonly<{
@@ -104,6 +127,10 @@ interface PrivateContext {
      * The computed placement (maybe different from initial placement)
      */
     currentPlacement?: Placement | undefined;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
 }
 interface PopoverSchema {
     props: RequiredBy<PopoverProps, PropsWithDefault>;
@@ -117,6 +144,12 @@ interface PopoverSchema {
 }
 type PopoverService = Service<PopoverSchema>;
 type PopoverMachine = Machine<PopoverSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface PopoverApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the popover is portalled.
@@ -130,6 +163,14 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
      * Function to open or close the popover
      */
     setOpen: (open: boolean) => void;
+    /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
     /**
      * Function to reposition the popover
      */
@@ -137,7 +178,7 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getAnchorProps: () => T["element"];
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getIndicatorProps: () => T["element"];
     getPositionerProps: () => T["element"];
     getContentProps: () => T["element"];
@@ -146,4 +187,4 @@ interface PopoverApi<T extends PropTypes = PropTypes> {
     getCloseTriggerProps: () => T["button"];
 }
 
-export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService };
+export type { ElementIds, IntlTranslations, OpenChangeDetails, PopoverApi, PopoverMachine, PopoverProps, PopoverSchema, PopoverService, TriggerProps, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popover",
-  "version": "1.38.2",
+  "version": "1.39.1",
   "description": "Core logic for the popover widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.38.2",
-    "@zag-js/aria-hidden": "1.38.2",
-    "@zag-js/core": "1.38.2",
-    "@zag-js/dom-query": "1.38.2",
-    "@zag-js/utils": "1.38.2",
-    "@zag-js/dismissable": "1.38.2",
-    "@zag-js/popper": "1.38.2",
-    "@zag-js/remove-scroll": "1.38.2",
-    "@zag-js/types": "1.38.2",
-    "@zag-js/focus-trap": "1.38.2"
+    "@zag-js/anatomy": "1.39.1",
+    "@zag-js/aria-hidden": "1.39.1",
+    "@zag-js/core": "1.39.1",
+    "@zag-js/dom-query": "1.39.1",
+    "@zag-js/utils": "1.39.1",
+    "@zag-js/dismissable": "1.39.1",
+    "@zag-js/popper": "1.39.1",
+    "@zag-js/remove-scroll": "1.39.1",
+    "@zag-js/types": "1.39.1",
+    "@zag-js/focus-trap": "1.39.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"