🔨 Refactor Popover component

- Refactor Popover component to improve accessibility and usability
- Add `fadeAndZoomIn` transition
- Change `aria-orientation` to `vertical` and `z-` class from `999` to `[999]`
- Add `mouseup` event listener to close the popover

[src/lib/components/Popover/Popover.svelte]
- Remove `slide` transition and replace it with `fadeAndZoomIn`
- Change `expoOut` easing to `duration`
- Add `fadeAndZoomIn` transition
- Change `aria-orientation` to `vertical`
- Add `mouseup` event listener to close the popover
- Change `z-` class from `999` to `[999]`
- Change `bg-` class from `

src/lib/components/Popover/Popover.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { slide, fade } from 'svelte/transition';
-	import { expoOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
 
 	let showPopover: boolean = false;
 	let anchor: HTMLButtonElement | undefined = undefined;
@@ -34,6 +33,20 @@
 			}
 		};
 	}
+
+	function fadeAndZoomIn(node: HTMLElement, { delay = 0, duration = 150 }) {
+		const o = +getComputedStyle(node).opacity;
+
+		return {
+			delay,
+			duration,
+			css: (t: number) => `
+				opacity: ${t * o};
+				transform: scale(${t});
+				transform-origin: 25% 0%;
+			`
+		};
+	}
 </script>
 
 <svelte:window on:resize={initPosition} on:keydown={() => (showPopover = false)} />
@@ -50,7 +63,7 @@
 			aria-labelledby="Title"
 			aria-describedby="Description"
 			aria-orientation="vertical"
-			in:slide={{ duration: 150, easing: expoOut }}
+			in:fadeAndZoomIn={{ duration: 150 }}
 			out:fade={{ duration: 100 }}
 			on:mouseup={() => (showPopover = false)}
 			class="wrapper z-[999] bg-zinc-800 border border-zinc-700 text-zinc-50 rounded shadow-2xl min-w-[180px] max-w-[512px]"