fix(tour): sync z-index for dialog step

.changeset/spotty-rivers-eat.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/tour": patch
+---
+
+Fix issue where dialog tour step doesn't sync its z-index with the content.

packages/machines/dialog/src/dialog.machine.ts

@@ -1,7 +1,7 @@
 import { ariaHidden } from "@zag-js/aria-hidden"
 import { createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
-import { raf } from "@zag-js/dom-query"
+import { raf, getComputedStyle } from "@zag-js/dom-query"
 import { trapFocus } from "@zag-js/focus-trap"
 import { preventBodyScroll } from "@zag-js/remove-scroll"
 import { compact } from "@zag-js/utils"
@@ -164,9 +164,7 @@ export function machine(userContext: UserDefinedContext) {
             const contentEl = dom.getContentEl(ctx)
             if (!contentEl) return
 
-            const win = dom.getWin(ctx)
-            const styles = win.getComputedStyle(contentEl)
-
+            const styles = getComputedStyle(contentEl)
             const elems = [dom.getPositionerEl(ctx), dom.getBackdropEl(ctx)]
             elems.forEach((node) => {
               node?.style.setProperty("--z-index", styles.zIndex)

packages/machines/tour/src/tour.machine.ts

@@ -1,13 +1,13 @@
 import { createMachine, guards, ref } from "@zag-js/core"
 import { trackDismissableBranch } from "@zag-js/dismissable"
-import { contains, isHTMLElement } from "@zag-js/dom-query"
+import { contains, getComputedStyle, isHTMLElement, raf } from "@zag-js/dom-query"
 import { trapFocus } from "@zag-js/focus-trap"
 import { trackInteractOutside } from "@zag-js/interact-outside"
 import { getPlacement } from "@zag-js/popper"
 import { compact, isEqual, isString, nextIndex, prevIndex } from "@zag-js/utils"
 import { dom } from "./tour.dom"
 import type { MachineContext, MachineState, StepBaseDetails, StepStatus, UserDefinedContext } from "./tour.types"
-import { findStep, findStepIndex, isTooltipStep } from "./utils/step"
+import { findStep, findStepIndex, isDialogStep, isTooltipStep } from "./utils/step"
 import { isEventInRect, offset } from "./utils/rect"
 
 const { and } = guards
@@ -388,10 +388,11 @@ export function machine(userContext: UserDefinedContext) {
 
           ctx.currentPlacement = ctx.step.placement ?? "bottom"
 
+          if (isDialogStep(ctx.step)) return syncZIndex(ctx)
+
           if (!isTooltipStep(ctx.step)) return
 
           const positionerEl = () => dom.getPositionerEl(ctx)
-
           return getPlacement(ctx.resolvedTarget.value, positionerEl, {
             defer: true,
             placement: ctx.step.placement ?? "bottom",
@@ -415,6 +416,27 @@ export function machine(userContext: UserDefinedContext) {
   )
 }
 
+function syncZIndex(ctx: MachineContext) {
+  return raf(() => {
+    // sync z-index of positioner with content
+    const contentEl = dom.getContentEl(ctx)
+    if (!contentEl) return
+
+    const styles = getComputedStyle(contentEl)
+    const positionerEl = dom.getPositionerEl(ctx)
+    const backdropEl = dom.getBackdropEl(ctx)
+
+    if (positionerEl) {
+      positionerEl.style.setProperty("--z-index", styles.zIndex)
+      positionerEl.style.setProperty("z-index", "var(--z-index)")
+    }
+
+    if (backdropEl) {
+      backdropEl.style.setProperty("--z-index", styles.zIndex)
+    }
+  })
+}
+
 const invoke = {
   stepChange(ctx: MachineContext) {
     const effectiveLength = ctx.steps.filter((step) => step.type !== "wait").length

packages/machines/tour/src/utils/step.ts

@@ -7,6 +7,10 @@ export const isTooltipStep = (
   return step?.type === "tooltip"
 }
 
+export const isDialogStep = (step: StepDetails | null) => {
+  return step?.type === "dialog"
+}
+
 export const isTooltipPlacement = (placement: StepPlacement | undefined): placement is Placement => {
   return placement != null && placement != "center"
 }