Trap keyboard focus in popovers

src/lib/components/shell/BatteryPopover.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { focusTrap } from '#lib/ui/focusTrap';
 	import Icon from '@iconify/svelte';
 	import { slide } from 'svelte/transition';
 	import {
@@ -41,7 +42,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close battery details" onclick={onclose}></button>
-<div class="popover" role="dialog" aria-label="Battery details">
+<div class="popover" role="dialog" aria-modal="true" aria-label="Battery details" tabindex="-1" use:focusTrap>
 	<div class="popover-surface" class:charging={battery.charging} class:low={isLow}>
 		<header class="summary">
 			<span class="battery-icon">

src/lib/components/shell/DiscordPopover.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { focusTrap } from '#lib/ui/focusTrap';
 	import Icon from '@iconify/svelte';
 	import { activityLabels, type DiscordPresence } from '#lib/discord/types';
 
@@ -12,7 +13,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close Discord status" onclick={onclose}></button>
-<div class="popover" role="dialog" aria-label="Discord status">
+<div class="popover" role="dialog" aria-modal="true" aria-label="Discord status" tabindex="-1" use:focusTrap>
 	<div class="popover-surface">
 		<header class="profile">
 			<div class="avatar">

src/lib/components/shell/DonatePopover.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { focusTrap } from '#lib/ui/focusTrap';
 	import Icon from '@iconify/svelte';
 
 	let { donateUrl, discordUrl, onclose }: { donateUrl: string; discordUrl: string; onclose: () => void } = $props();
@@ -11,7 +12,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close donate card" onclick={onclose}></button>
-<div class="popover" role="dialog" aria-label="Support me">
+<div class="popover" role="dialog" aria-modal="true" aria-label="Support me" tabindex="-1" use:focusTrap>
 	<div class="popover-surface">
 		<header class="header">
 			<Icon icon="simple-icons:kofi" width="22" />

src/lib/components/shell/PopupCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { focusTrap } from '#lib/ui/focusTrap';
 	import type { Snippet } from 'svelte';
 
 	let { title, onclose, children }: { title: string; onclose: () => void; children: Snippet } = $props();
@@ -11,7 +12,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close {title}" onclick={onclose}></button>
-<div class="popup" role="dialog" aria-label={title}>
+<div class="popup" role="dialog" aria-modal="true" aria-label={title} tabindex="-1" use:focusTrap>
 	<div class="popup-title">{title}</div>
 	<div class="popup-body">
 		{@render children()}