From bc1d8d34c342fc3fba19d5dda00bd25e93b82075 Mon Sep 17 00:00:00 2001
From: Thanatat Tamtan <acoshift@gmail.com>
Date: Mon, 12 Jun 2023 13:32:24 +0700
Subject: [PATCH 1/2] dialog

---
 .../_components/ModalSelectProject.svelte     | 18 ++++---
 src/style/_theme.scss                         |  4 +-
 src/style/main.scss                           | 53 +++++++++++++++++++
 3 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/src/routes/_components/ModalSelectProject.svelte b/src/routes/_components/ModalSelectProject.svelte
index 56145e99..789e9f83 100644
--- a/src/routes/_components/ModalSelectProject.svelte
+++ b/src/routes/_components/ModalSelectProject.svelte
@@ -6,7 +6,9 @@
 	export let projects
 
 	$: project = $page.url.searchParams.get('project')
-	let isActive = false
+
+	/** @type {HTMLDialogElement} */
+	let dialog
 
 	/**
 	 * @param {string} sid
@@ -26,17 +28,17 @@
 	}
 
 	export function open () {
-		isActive = true
+		dialog.showModal()
 	}
 
 	function close () {
-		isActive = false
+		dialog.close()
 	}
 </script>
 
-<div class="nm-modal" on:click|self={close} class:is-active={isActive} aria-hidden="true">
-	<div class="nm-modal-panel">
-		<div class="nm-modal-close" on:click|self={close} on:keypress={close} tabindex="0" role="button">✕</div>
+<dialog bind:this={dialog} on:click|self={close} aria-hidden="true">
+	<div class="panel">
+		<div class="close" on:click|self={close} on:keypress={close} tabindex="0" role="button">✕</div>
 		<h4>Projects</h4>
 
 		<div class="nm-table-container _mgt-6">
@@ -71,7 +73,7 @@
 			</table>
 		</div>
 	</div>
-</div>
+</dialog>
 
 <style lang="scss">
 	.nm-table-container {
@@ -84,7 +86,7 @@
 		padding-bottom: 0.5rem;
 	}
 
-	.nm-modal-panel {
+	.panel {
 		box-shadow: 0 15px 15px 0 rgba(43, 43, 43, 0.1);
 		width: 100%;
 		max-width: 48rem;
diff --git a/src/style/_theme.scss b/src/style/_theme.scss
index 47061f9b..ce1595cd 100644
--- a/src/style/_theme.scss
+++ b/src/style/_theme.scss
@@ -127,7 +127,7 @@
 		0 4rem 4rem hsl(var(--bsd-hsl) / 0.15);
   }
 
-[data-theme=dark] {
+[data-theme=dark], ::backdrop {
 	--lo-container-side-padding: 24px;
 	--lo-page-aside-content--aside-width: 18.75rem;
 	--form-element-small-font-size: 0.75rem;
@@ -183,7 +183,7 @@
 	--modal-panel-background: hsl(var(--hsl-base-300));
 }
 
-[data-theme=light] {
+[data-theme=light], ::backdrop {
 	--hue-primary: 333;
 	--hsl-primary: var(--hue-primary) 80% 65%;
 	--hsl-primary-active: var(--hue-primary) 80% 58%;
diff --git a/src/style/main.scss b/src/style/main.scss
index 8abdf73b..86136255 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -269,3 +269,56 @@ pre {
 		overflow-y: auto;
 	}
 }
+
+dialog {
+	padding: 0;
+	background: transparent;
+	border: 0;
+	color: inherit;
+
+	&::backdrop {
+		background: var(--modal-background);
+	}
+
+	.panel {
+		position: relative;
+		width: 100%;
+		margin-top: 1rem;
+		max-width: 48rem;
+		padding: 1.5rem;
+		-webkit-transition: all .16s ease-in-out;
+		transition: all .16s ease-in-out;
+		-webkit-transform: translate3d(0, -12px, 0);
+		transform: translate3d(0, -12px, 0);
+		border-radius: 0.75rem;
+		background: var(--modal-panel-background, hsl(var(--hsl-base-100)));
+		-webkit-box-shadow: var(--box-shadow-200);
+		box-shadow: var(--box-shadow-200);
+	}
+
+	.close {
+		font-weight: 600;
+		position: absolute;
+		top: .5rem;
+		right: .5rem;
+		display: -webkit-box;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-align: center;
+		-ms-flex-align: center;
+		align-items: center;
+		-webkit-box-pack: center;
+		-ms-flex-pack: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		cursor: pointer;
+		color: hsl(var(--hsl-content)/0.7);
+		border-radius: 0.5rem;
+		background: hsl(var(--hsl-base-300)/0.5);
+
+		&:hover {
+			background: hsl(var(--hsl-base-300)/0.8);
+		}
+	}
+}

From 102b423575d2389dbb4c108271ca63a35553975e Mon Sep 17 00:00:00 2001
From: Thanatat Tamtan <acoshift@gmail.com>
Date: Mon, 12 Jun 2023 13:39:14 +0700
Subject: [PATCH 2/2] remove tabindex

---
 src/routes/_components/ModalSelectProject.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/_components/ModalSelectProject.svelte b/src/routes/_components/ModalSelectProject.svelte
index 789e9f83..56a614e0 100644
--- a/src/routes/_components/ModalSelectProject.svelte
+++ b/src/routes/_components/ModalSelectProject.svelte
@@ -38,7 +38,7 @@
 
 <dialog bind:this={dialog} on:click|self={close} aria-hidden="true">
 	<div class="panel">
-		<div class="close" on:click|self={close} on:keypress={close} tabindex="0" role="button">✕</div>
+		<div class="close" on:click|self={close} on:keypress={close}>✕</div>
 		<h4>Projects</h4>
 
 		<div class="nm-table-container _mgt-6">
@@ -60,7 +60,6 @@
 						</td>
 						<td>
 							<div on:click={() => setProject(it.project)} on:keypress={() => setProject(it.project)}
-								tabindex="0" role="link"
 								class="_tdcrt-udl _cs-pt _cl-primary:hover"
 								style="font-weight: 500">
 								{it.name}