Better handling of dialogs/modals/popovers

3 files changed, 14 insertions, 1 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 83d5a9d..dbb4908 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -50,6 +50,7 @@ $breakpoints: (
 @forward 'objects/button' as o-button--*;
 @forward 'objects/card' as o-card--*;
 @forward 'objects/checkbox' as o-checkbox--*;
+@forward 'objects/dialog' as o-dialog--*;
 @forward 'objects/divider' as o-divider--*;
 @forward 'objects/emoji' as o-emoji--*;
 @forward 'objects/figure' as o-figure--*;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index e5dbb38..32fe6b4 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -34,16 +34,22 @@
                 overflow:              hidden;
                 background-color:      transparent;
                 border:                0;
+                pointer-events:        none;
 
                 &::backdrop {
                         background-color: props.get(backdrop.$bg-color);
                         backdrop-filter: blur(props.get(backdrop.$blur));
                 }
 
-                &[open] {
+                &[open],
+                &:popover-open {
                         display: grid;
                 }
 
+                > * {
+                        pointer-events: auto;
+                }
+
                 @include bem.elem('info', 'controls') {
                         position:          absolute;
                         inset-block-start: props.get(vars.$pad);
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index cee1639..c11d396 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -17,6 +17,12 @@
                 html {
                         accent-color:    props.get(core.$theme, --accent, --600);
                         scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+
+                        &:has(dialog[open]),
+                        &:has(.is-modal:popover-open) {
+                                overflow: hidden;
+                                pointer-events: none;
+                        }
                 }
 
                 body {