fuzzy search and icon

docs/assets/plugins/search/search.css

@@ -153,7 +153,7 @@ body.site-search-visible {
   border-top: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
-  padding: var(--sl-spacing-small);
+  padding: var(--sl-spacing-x-small);
 }
 
 .site-search__footer small {

docs/assets/plugins/search/search.js

@@ -59,7 +59,9 @@
             placeholder="Search this site"
             size="large"
             clearable
-          ></sl-input>
+          >
+            <sl-icon slot="prefix" name="search"></sl-icon>
+          </sl-input>
         </header>
         <div class="site-search__body">
           <ul class="site-search__results"></ul>
@@ -219,7 +221,7 @@
         await searchIndex;
 
         const hasQuery = query.length > 0;
-        const matches = hasQuery ? searchIndex.search(query) : [];
+        const matches = hasQuery ? searchIndex.search(`${query}~2`) : [];
 
         let hasResults = hasQuery && matches.length > 0;
         siteSearch.classList.toggle('site-search--has-results', hasQuery && hasResults);