Event handlers with the on: directive are deprecated in svelte 5

Also bubbling events from HTML elements to the components have to be
done with `onclick` callback props.

src/components/Border.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let hoverable: boolean = false;
+  export let onclick: (() => void) | undefined = undefined;
 
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
@@ -150,7 +151,7 @@
 <div
   style:width={styleWidth}
   class="container"
-  on:click
+  {onclick}
   role="button"
   tabindex="0"
   {style}

src/components/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
+  export let onclick: (() => void) | undefined = undefined;
 
   $: style =
     `--button-color-1: var(--color-fill-${variant});` +
@@ -222,7 +223,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="container" on:click role="button" tabindex="0" {style}>
+<div class="container" {onclick} role="button" tabindex="0" {style}>
   <div class="pixel p1-1"></div>
   <div class="pixel p1-2"></div>
   <div class="pixel p1-3"></div>

src/components/Fill.svelte

@@ -9,6 +9,7 @@
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
+  export let onclick: (() => void) | undefined = undefined;
 
   $: style =
     variant === "transparent"
@@ -82,9 +83,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="container"
-  on:click
   role="button"
   tabindex="0"
+  {onclick}
   {style}
   style:width={styleWidth}
   style:height={styleHeight}>

src/components/Header.svelte

@@ -41,12 +41,12 @@
       <div class="flex-item navigation" style:gap="0.5rem">
         <Icon
           name="arrow-left"
-          on:click={() => {
+          onclick={() => {
             window.history.back();
           }} />
         <Icon
           name="arrow-right"
-          on:click={() => {
+          onclick={() => {
             window.history.forward();
           }} />
       </div>
@@ -67,7 +67,7 @@
         <Border
           slot="toggle"
           let:toggle
-          on:click={toggle}
+          onclick={toggle}
           variant="ghost"
           stylePadding="0 0.25rem"
           styleHeight="32px">

src/components/Icon.svelte

@@ -2,6 +2,7 @@
   import { unreachable } from "@app/lib/utils";
 
   export let size: "16" | "32" = "16";
+  export let onclick: (() => void) | undefined = undefined;
 
   export let name:
     | "arrow-left"
@@ -39,7 +40,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   role="img"
-  on:click
+  {onclick}
   width={size}
   height={size}
   fill="currentColor"

src/components/Link.svelte

@@ -28,6 +28,6 @@
   }
 </style>
 
-<a on:click={navigateToRoute} href={routeToPath(route)}>
+<a onclick={navigateToRoute} href={routeToPath(route)}>
   <slot />
 </a>

src/components/Popover.svelte

@@ -47,7 +47,7 @@
   }
 </style>
 
-<svelte:window on:click={clickOutside} on:touchstart={clickOutside} />
+<svelte:window onclick={clickOutside} on:touchstart={clickOutside} />
 
 <div
   bind:this={thisComponent}

src/components/ThemeSwitch.svelte

@@ -39,7 +39,7 @@
     <Fill
       stylePadding="0 0.5rem"
       variant={$theme === "dark" ? "secondary" : "transparent"}
-      on:click={() => {
+      onclick={() => {
         storeTheme("dark");
       }}>
       <Icon name="moon" />
@@ -49,7 +49,7 @@
     <Fill
       stylePadding="0 0.5rem"
       variant={$theme === "light" ? "secondary" : "transparent"}
-      on:click={() => {
+      onclick={() => {
         storeTheme("light");
       }}>
       <span