ladle.css leaks on @reach/dialog inside stories

[nulladdict]

Describe the bug

Hi, thanks for the library. We're happened to use reach-ui dialogs in our components and noticed that they are affected by styles from ladle.css. We tried using { iframed: true } expecting that the iframe is not gonna include ladle.css, but it did, so it did not help.

Reproduction

Here's a stackblitz reproduction. It has two stories: iframed dialog and a regular one. Both are rendered bottom left instead of being centered.

Note, that iframed dialog does include ladle.css, but it fails to load on stackblitz. To reproduce on stackblitz you need to open iframed story in the fullscreen mode. Locally ladle.css loads fine and affects iframed components.

Environment

• OS: any
• Browser any
• Version 4.0.0

Potential fixes

• One idea is to not include ladle.css inside iframed stories.
• Another is to fix styles to only include ladle's dialogs. Here's an example patch we used to temporary fix the problem:

diff --git a/lib/app/ladle.css b/lib/app/ladle.css
index 98358884669ad6efef12930559e7c23381bb79db..c66a33220f9fa69436bc1ce038fab78e619dab3f 100644
--- a/lib/app/ladle.css
+++ b/lib/app/ladle.css
@@ -446,7 +446,7 @@ body {
   }
 }

-div[data-reach-dialog-content] {
+div[data-reach-dialog-content][data-testid="ladle-dialog"] {
   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.16);
   outline: none;
   font-family: Arial, Helvetica, sans-serif;
@@ -461,11 +461,11 @@ div[data-reach-dialog-content] {
   overflow: none;
 }

-div[data-reach-dialog-content] a {
+div[data-reach-dialog-content][data-testid="ladle-dialog"] a {
   color: var(--ladle-color-accent);
 }

-div[data-reach-dialog-overlay] {
+div[data-reach-dialog-overlay]:has([data-testid="ladle-dialog"]) {
   position: fixed;
   top: 0;
   right: 0;
@@ -690,7 +690,7 @@ blockquote.ladle-markdown {
     display: none;
   }

-  div[data-reach-dialog-content] {
+  div[data-reach-dialog-content][data-testid="ladle-dialog"] {
     position: fixed;
     bottom: 49px;
     inset-inline-start: 21px;

[tajo]

Can you open a PR with that patch?