From 42a9720adf75f3bc9e2c0d96f416dcc6706a81c7 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 28 Feb 2026 17:15:59 +0100
Subject: Update dialog

---
 src/objects/_dialog.scss      | 32 ++++++++++++++++++++++++++++++++
 src/objects/_dialog.vars.scss | 10 ++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 479bcc6..5a323bb 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -7,11 +7,13 @@
 @use 'dialog.vars' as vars;
 
 @use 'backdrop.vars' as backdrop;
+@use 'divider.vars' as divider;
 
 @mixin styles {
 	@include materialize-at-root(meta.module-variables('vars'));
 
 	@include bem.object('dialog') {
+		display:          none;
 		box-sizing:       border-box;
 		inline-size:      100%;
 		max-inline-size:  none;
@@ -28,10 +30,40 @@
 			backdrop-filter: blur(props.get(backdrop.$blur));
 		}
 
+		&[open],
+	 	&:popover-open {
+			display:        flex;
+			flex-direction: column;
+		}
+
 		@include bem.elem('content') {
 			pointer-events:   auto;
 			border-radius:    props.get(vars.$rounding);
 			background-color: props.get(vars.$bg-color);
 		}
+
+		@include bem.elem('header') {
+			display:     flex;
+			align-items: center;
+			padding:     props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
+		}
+
+		@include bem.elem('divider') {
+			margin-inline: props.get(vars.$body--pad-i);
+
+			@include bem.next-elem('body') {
+				padding-block-start: calc(props.get(vars.$body--pad-b) - props.get(divider.$margin-b));
+			}
+		}
+
+		@include bem.elem('body') {
+			padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i);
+
+			&::before {
+				display:       block;
+				margin-block:  -100em 100em;
+				content:       '';
+			}
+		}
 	}
 }
diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss
index 5fd2fbd..490dc40 100644
--- a/src/objects/_dialog.vars.scss
+++ b/src/objects/_dialog.vars.scss
@@ -3,8 +3,14 @@
 @use '../core.vars' as core;
 @use '../layouts/container.vars' as container;
 
-$pad-b:    props.def(--o-dialog--pad-b, props.get(container.$pad-b)) !default;
+$pad-b:    props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
 $pad-i:    props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
 $rounding: props.def(--o-dialog--rounding, props.get(core.$rounding)) !default;
 
-$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), 'color') !default;
+$border-width: props.def(--o-dialog--border-width, props.get(core.$border-width--thin)) !default;
+
+$body--pad-b: props.def(--o-dialog--body--pad-b, props.get(container.$pad-i)) !default;
+$body--pad-i: props.def(--o-dialog--body--pad-i, props.get(container.$pad-i)) !default;
+
+$bg-color:     props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), 'color') !default;
+$border-color: props.def(--o-dialog--border-color, props.get(core.$theme, --border-mute), 'color') !default;
-- 
cgit v1.2.3-70-g09d2