From df178c161629913c433a4bb1c2f44978bbded169 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20L=C3=A1z=C3=A1r?= Date: Sat, 25 Apr 2026 00:24:05 +0200 Subject: [PATCH 1/3] feat: support native dialog/popover elements --- examples/shared/dialog.html | 380 ++++++++++++++++++ examples/vanilla/index.html | 2 + packages/core/src/bridge.ts | 89 ++++ packages/core/src/core.ts | 182 +++++++++ .../core/test/cross-origin-dialog.test.ts | 303 ++++++++++++++ packages/core/test/dialog.test.ts | 268 ++++++++++++ packages/core/test/fixtures/dialog.html | 33 ++ 7 files changed, 1257 insertions(+) create mode 100644 examples/shared/dialog.html create mode 100644 packages/core/test/cross-origin-dialog.test.ts create mode 100644 packages/core/test/dialog.test.ts create mode 100644 packages/core/test/fixtures/dialog.html diff --git a/examples/shared/dialog.html b/examples/shared/dialog.html new file mode 100644 index 0000000..871389e --- /dev/null +++ b/examples/shared/dialog.html @@ -0,0 +1,380 @@ + + + + + + Dialog / Popover projection + + + +

Top-layer projection test

+

+ Verifies that <dialog>.showModal() and the + popover API escape the <virtual-frame> stacking / + clipping context via the browser's top layer. +

+ +
+
+

Native <dialog>

+

Modal. Should cover the entire host viewport — not just the frame.

+ +
+ +
+

Popover API

+

Non-modal. Should appear above everything with no manual z-index.

+ +
+ +
+

Nested in clipped parent

+

+ Dialog triggered from inside an overflow: hidden ancestor. + The top layer should still let it escape. +

+
+
+ +
+
+
+
+ +
+

Event log

+

Events fire on the source iframe — interactions on the projection are proxied.

+
Waiting for events…
+
+ + + +

Sign-in required

+

+ This dialog was opened via showModal(). If you're reading this inside + the projection and it covers the whole page, top-layer escape works. +

+
+ + +
+
+ + +
+ + + +
+

I'm a popover

+

Opened via the popovertarget attribute. ESC or click-outside closes me.

+ +
+ + + + diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html index 88e0c26..a8cbaaf 100644 --- a/examples/vanilla/index.html +++ b/examples/vanilla/index.html @@ -174,6 +174,7 @@

How it works

+