From 45ebebb0655faff5be6ed6997e1f33f020794681 Mon Sep 17 00:00:00 2001
From: Antonio Ventilii <antonio.ventilii@dfinity.org>
Date: Thu, 11 Sep 2025 16:53:16 +0200
Subject: [PATCH 1/2] feat: Migrate Backdrop to Svelte 5

---
 src/lib/components/Backdrop.svelte        | 22 +++++++++++++++-------
 src/lib/components/ContentBackdrop.svelte |  2 +-
 src/lib/components/Modal.svelte           |  2 +-
 src/lib/components/Popover.svelte         |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Backdrop.svelte b/src/lib/components/Backdrop.svelte
index 77b2f679f..c860104f7 100644
--- a/src/lib/components/Backdrop.svelte
+++ b/src/lib/components/Backdrop.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import { fade } from "svelte/transition";
   import { i18n } from "$lib/stores/i18n";
+  import { stopPropagation } from "$lib/utils/event-modifiers.utils";
   import { handleKeyPress } from "$lib/utils/keyboard.utils";
 
-  export let disablePointerEvents = false;
-  export let invisible = false;
+  interface Props {
+    disablePointerEvents?: boolean;
+    invisible?: boolean;
+    onClose?: () => void;
+  }
+
+  let {
+    disablePointerEvents = false,
+    invisible = false,
+    onClose,
+  }: Props = $props();
 
-  const dispatch = createEventDispatcher();
-  const close = () => dispatch("nnsClose");
+  const close = () => onClose?.();
 
   const FADE_IN_DURATION = 75 as const;
   const FADE_OUT_DURATION = 250 as const;
@@ -20,10 +28,10 @@
   class:visible={!invisible}
   aria-label={$i18n.core.close}
   data-tid="backdrop"
+  onclick={stopPropagation(close)}
+  onkeypress={($event) => handleKeyPress({ $event, callback: close })}
   role="button"
   tabindex="-1"
-  on:click|stopPropagation={close}
-  on:keypress={($event) => handleKeyPress({ $event, callback: close })}
   in:fade|global={{ duration: FADE_IN_DURATION }}
   out:fade|global={{ duration: FADE_OUT_DURATION }}
 ></div>
diff --git a/src/lib/components/ContentBackdrop.svelte b/src/lib/components/ContentBackdrop.svelte
index ee6d0004b..a315a0680 100644
--- a/src/lib/components/ContentBackdrop.svelte
+++ b/src/lib/components/ContentBackdrop.svelte
@@ -4,5 +4,5 @@
 </script>
 
 {#if $layoutMenuOpen}
-  <Backdrop on:nnsClose={() => layoutMenuOpen.set(false)} />
+  <Backdrop onClose={() => layoutMenuOpen.set(false)} />
 {/if}
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index c0dda531d..b799a48a8 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -65,7 +65,7 @@
     {role}
     transition:fade|global={{ duration: 25 }}
   >
-    <Backdrop {disablePointerEvents} on:nnsClose={() => onClose?.()} />
+    <Backdrop {disablePointerEvents} {onClose} />
     <div
       class={`wrapper ${role}`}
       in:fade|global={{ duration: FADE_IN_DURATION }}
diff --git a/src/lib/components/Popover.svelte b/src/lib/components/Popover.svelte
index b8e02b0e5..35b97c088 100644
--- a/src/lib/components/Popover.svelte
+++ b/src/lib/components/Popover.svelte
@@ -42,7 +42,7 @@
   >
     <Backdrop
       invisible={invisibleBackdrop}
-      on:nnsClose={() => (visible = false)}
+      onClose={() => (visible = false)}
     />
     <div
       class="wrapper"

From 0c343d31fff90277f896fb2a1fbdf1eba7294ae5 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 11 Sep 2025 14:54:54 +0000
Subject: [PATCH 2/2] Updating formatting

---
 src/lib/components/Popover.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/components/Popover.svelte b/src/lib/components/Popover.svelte
index 35b97c088..8aceb96f9 100644
--- a/src/lib/components/Popover.svelte
+++ b/src/lib/components/Popover.svelte
@@ -40,10 +40,7 @@
     on:keypress
     transition:fade|global
   >
-    <Backdrop
-      invisible={invisibleBackdrop}
-      onClose={() => (visible = false)}
-    />
+    <Backdrop invisible={invisibleBackdrop} onClose={() => (visible = false)} />
     <div
       class="wrapper"
       class:rtl={direction === "rtl"}