search styles

docs/assets/plugins/search/search.css

@@ -107,6 +107,11 @@ body.site-search-visible {
   margin: 0;
 }
 
+.site-search__results small {
+  display: block;
+  color: rgb(var(--sl-color-neutral-600));
+}
+
 .site-search__result {
   padding: 0;
   margin: 0;
@@ -121,7 +126,7 @@ body.site-search-visible {
 .site-search__result-icon {
   flex: 0 0 auto;
   display: flex;
-  color: rgb(var(--sl-color-neutral-300));
+  color: rgb(var(--sl-color-neutral-400));
   font-size: var(--sl-font-size-x-large);
 }
 
@@ -129,11 +134,6 @@ body.site-search-visible {
   flex: 1 1 auto;
 }
 
-.site-search__results small {
-  display: block;
-  color: rgb(var(--sl-color-neutral-600));
-}
-
 .site-search__empty {
   display: none;
   border-top: solid 1px rgb(var(--sl-color-neutral-200));

docs/assets/plugins/search/search.js

@@ -236,7 +236,7 @@
 
           if (page.url.includes('getting-started/')) icon = 'lightbulb';
           if (page.url.includes('resources/')) icon = 'book';
-          if (page.url.includes('components/')) icon = 'box';
+          if (page.url.includes('components/')) icon = 'puzzle';
           if (page.url.includes('tokens/')) icon = 'palette2';
           if (page.url.includes('utilities/')) icon = 'wrench';
           if (page.url.includes('tutorials/')) icon = 'joystick';
@@ -244,7 +244,7 @@
           a.href = $docsify.routerMode === 'hash' ? `/#/${page.url}` : `/${page.url}`;
           a.innerHTML = `
             <div class="site-search__result-icon">
-              <sl-icon name="${icon}"></sl-icon>
+              <sl-icon name="${icon}" aria-hidden="true"></sl-icon>
             </div>
             <div class="site-search__result__details">
               <h3>${page.title}</h3>

docs/getting-started/overview.md

@@ -123,4 +123,5 @@ Special thanks to the following projects and individuals that help make Shoelace
 - Positioning of menus, tooltips, et al is handled by [Popper.js](https://popper.js.org/)
 - Animations are courtesy of [animate.css](https://animate.style/)
 - QR codes are generated with [qr-creator](https://github.com/nimiq/qr-creator)
+- Search is powered by [Lunr](https://lunrjs.com/)
 - The Shoelace logo was designed with a single shoelace by [Adam K Olson](https://twitter.com/adamkolson)