Dialog backdrop passes through click events

[Hwacc]

3# 🐛 Bug report

Dialog backdrop can allow click-through when an underlying element explicitly sets pointer-events: auto.

When a Zag Dialog is opened, background content should not be interactive. However, the current pointer-blocking strategy appears to set pointer-events: none on body. If a descendant under the backdrop has pointer-events: auto, that element can still receive clicks even though it is visually covered by the backdrop.

Kind like #1720

💥 Steps to reproduce

1. Open Dialog
2. Try to hover or click the link element

💻 Link to reproduction

See: https://stackblitz.com/edit/3gfyhysi?file=src%2FDialog.tsx

🧐 Expected behavior

When a modal dialog is open, background content should not receive pointer events, regardless of whether descendants explicitly set pointer-events: auto.

The backdrop/positioner should reliably block interaction with all non-dialog content.

🧭 Possible Solution

1. Use an inert-based strategy for modal background suppression, such as suppressOthers() which already in zagjs (suppressOthers is a inert-frist prevented function), instead of relying only on aria-hidden and body-level pointer-events: none.

2. A quick hack way is let your dialog backdrop element has pointer-events: auto to intercept and consume the click event.

🌍 System information

Software	Version(s)
Zag Version	@zag-js/dialog@1.41.2
Browser	Chrome
Operating System	Windows 11

[FrancoKaddour]

The mechanism here is that disablePointerEventsOutside sets body { pointer-events: none } (pointer-event-outside.ts#L57) and relies on inheritance to block background content. But pointer-events inheritance is overridable: any descendant with an explicit pointer-events: auto (common in interactive UI kits) wins over the inherited none from body, so it stays clickable under the backdrop — exactly what the repro shows.

A robust fix would move from inherited pointer-events to the native inert attribute applied to the top-blocking layer's siblings (the approach Radix uses): inert can't be overridden by descendant CSS, and it also blocks focus/AT access, not just pointer. The layer stack already tracks the layer nodes, so the sibling set is derivable; it'd need cleanup + a MutationObserver for dynamically added background nodes. There's a design choice in scope (full inert on siblings vs. keeping pointer-events with a reinforcement), so I wanted to check the preferred direction before opening a PR — happy to implement it with an e2e test covering the pointer-events: auto descendant case.