Build: Update typesense-minibar to 1.3.1 (web components!)

Ref https://github.com/jquery/typesense-minibar

CONTRIBUTING.md

@@ -7,3 +7,13 @@
 3. Tag commit and push tag.
 
 CI will create the package and upload it to rubygems.org.
+
+## Update vendored dependencies
+
+* typesense-minibar
+
+See also [Makefile](./Makefile).
+
+```sh
+make deps
+```

Makefile

@@ -1,4 +1,4 @@
-MINIBAR_VERSION=1.2.0
+MINIBAR_VERSION=1.3.1
 
 .PHONY: deps
 

_includes/search.html

@@ -1,6 +1,6 @@
-<form role="search" class="tsmb-form"{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %} action="https://duckduckgo.com">
+<typesense-minibar>
+<form role="search"{% if site.amethyst.typesense.search_only_api_key %} data-origin="{{ site.amethyst.typesense.origin | escape }}" data-collection="{{ site.amethyst.typesense.collection | escape }}" data-key="{{ site.amethyst.typesense.search_only_api_key | escape }}" data-foot="true"{% endif %} action="https://duckduckgo.com">
     <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
     <input type="hidden" name="sites" value="{{ site.url | remove_first: 'http://' | remove_first: 'https://' }}">
 </form>
-
-
+</typesense-minibar>

_layouts/wrapper.html

@@ -49,7 +49,7 @@
                 </button>
                 <script type="module">
                 const searchToggle = document.querySelector('.search-toggle');
-                const searchForm = document.querySelector('form[role=search]');
+                const searchForm = document.querySelector('typesense-minibar');
                 const searchInput = searchForm.querySelector('input[type=search]');
                 function searchFn(newState) {
                     searchToggle.setAttribute('aria-expanded', String(newState));

_sass/amethyst.scss

@@ -464,7 +464,7 @@ table {
 
 /* Search */
 
-.tsmb-form {
+typesense-minibar {
     --tsmb-color-base-background: #{lighten($color-accent, 12%)};
     --tsmb-color-primary30: #{$color-accent};
     --tsmb-color-primary50: #{$color-vibrant};
@@ -473,22 +473,26 @@ table {
     --tsmb-color-base50: #{change-color($color-bright, $alpha: 0.6)}; // #a98dc1
     --tsmb-color-base90: #{change-color($color-bright, $alpha: 0.6)};
 
-    width: auto;
     flex: 1;
     align-self: center;
 }
-.tsmb-form:not(:focus-within)::before {
+typesense-minibar form {
+    width: auto;
+}
+typesense-minibar form:not(:focus-within)::before {
   filter: unquote("invert()");
 }
-.tsmb-form input[type="search"] {
+typesense-minibar input[type="search"] {
   border: none;
 }
 @media (max-width: $screen-m) {
-    .tsmb-form {
-        display: none;
+    typesense-minibar {
+        --tsmb-size-input: calc( var(--tsmb-size-base) * 2.0 );
+
         flex: 100%;
         order: 10;
-        --tsmb-size-input: calc( var(--tsmb-size-base) * 2.0 );
+        /* changed by button.search-toggle in wrapper.html */
+        display: none;
     }
 }
 

_sass/typesense-minibar.css

@@ -1,5 +1,6 @@
-/*! https://github.com/jquery/typesense-minibar 1.2.0 */
-.tsmb-form {
+/*! https://github.com/jquery/typesense-minibar 1.3.1 */
+.tsmb-form,
+typesense-minibar {
   --tsmb-size-edge: 1px;
   --tsmb-size-radius: 3px;
   --tsmb-size-highlight: 2px;
@@ -23,15 +24,19 @@
   --tsmb-color-primary30: #390f39;
   --tsmb-color-primary50: #9c3493;
   --tsmb-color-primary90: #fbdbfb;
+}
 
+.tsmb-form,
+typesense-minibar form {
   position: relative;
   width: 20rem;
   max-width: 100%;
   padding: 0;
   color: var(--tsmb-color-base30);
 }
 
-.tsmb-form input[type=search] {
+.tsmb-form input[type=search],
+typesense-minibar input[type=search] {
   box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -46,31 +51,40 @@
   line-height: var(--tsmb-size-input);
 }
 
-.tsmb-form input[type=search]::placeholder {
+.tsmb-form input[type=search]::placeholder,
+typesense-minibar input[type=search]::placeholder {
   color: var(--tsmb-color-base50);
   opacity: 1;
 }
 
-.tsmb-form:focus-within {
+.tsmb-form:focus-within,
+typesense-minibar form:focus-within {
   color: var(--tsmb-color-focus30);
 }
 
-.tsmb-form:focus-within input[type=search] {
+.tsmb-form:focus-within input[type=search],
+typesense-minibar:focus-within input[type=search] {
   background: var(--tsmb-color-focus-background);
 }
 
-.tsmb-form:focus-within input[type=search]::placeholder {
+.tsmb-form:focus-within input[type=search]::placeholder,
+typesense-minibar:focus-within input[type=search]::placeholder {
   color: var(--tsmb-color-focus50);
 }
 
 .tsmb-form input[type=search]::-webkit-search-decoration,
 .tsmb-form input[type=search]::-webkit-search-cancel-button,
 .tsmb-form input[type=search]::-webkit-search-results-button,
-.tsmb-form input[type=search]::-webkit-search-results-decoration {
+.tsmb-form input[type=search]::-webkit-search-results-decoration,
+typesense-minibar input[type=search]::-webkit-search-decoration,
+typesense-minibar input[type=search]::-webkit-search-cancel-button,
+typesense-minibar input[type=search]::-webkit-search-results-button,
+typesense-minibar input[type=search]::-webkit-search-results-decoration {
   display: none;
 }
 
-.tsmb-form::before {
+.tsmb-form::before,
+typesense-minibar form::before {
   content: '';
   background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='654 -372 1664 1664' width='20' height='20'><path d='M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z'/></svg>") 0 50% / contain no-repeat;
   position: absolute;
@@ -128,7 +142,8 @@
   color: var(--tsmb-color-base90);
 }
 
-.tsmb-form [role=listbox] {
+.tsmb-form [role=listbox],
+typesense-minibar [role=listbox] {
   position: absolute;
   z-index: 10;
   right: var(--tsmb-size-listbox-right);
@@ -149,29 +164,35 @@
   border-bottom: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
 
-.tsmb-form [role=option] a {
+.tsmb-form [role=option] a,
+typesense-minibar [role=option] a {
   display: block;
   padding: var(--tsmb-size-base);
   text-decoration: none;
   border-left: var(--tsmb-size-highlight) solid transparent;
 }
 
-.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a {
+.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a,
+typesense-minibar form:not([data-group=true]) [role=option]:not(:first-child) a {
   border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
 }
 
-.tsmb-form[data-group=true] [role=option] a {
+.tsmb-form[data-group=true] [role=option] a,
+typesense-minibar form[data-group=true] [role=option] a {
   margin: 0 var(--tsmb-size-base);
   padding: var(--tsmb-size-sm);
 }
 
 .tsmb-form [role=option] a:hover,
-.tsmb-form [role=option][aria-selected=true] a {
+.tsmb-form [role=option][aria-selected=true] a,
+typesense-minibar [role=option] a:hover,
+typesense-minibar [role=option][aria-selected=true] a {
   background: var(--tsmb-color-primary90);
   border-left-color: var(--tsmb-color-primary50);
 }
 
-.tsmb-form [role=option] mark {
+.tsmb-form [role=option] mark,
+typesense-minibar [role=option] mark {
   background: none;
   color: inherit;
   font-style: normal;

assets/typesense-minibar.js

@@ -1,4 +1,4 @@
-/*! https://github.com/jquery/typesense-minibar 1.2.0 */
+/*! https://github.com/jquery/typesense-minibar 1.3.1 */
 globalThis.tsminibar = function tsminibar (form) {
   const { origin, collection } = form.dataset;
   const group = !!form.dataset.group;
@@ -42,7 +42,7 @@ globalThis.tsminibar = function tsminibar (form) {
   input.addEventListener('input', async function () {
     const query = state.query = input.value;
     if (!query) {
-      state.hits = []; // don't leak old hits on focus
+      state.hits = [];
       state.cursor = -1;
       return close();
     }
@@ -72,7 +72,7 @@ globalThis.tsminibar = function tsminibar (form) {
     }
   });
   form.addEventListener('submit', function (e) {
-    e.preventDefault(); // disable fallback
+    e.preventDefault();
   });
   form.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 12 12" width="20" height="20" aria-hidden="true" class="tsmb-icon-close" style="display: none;"><path d="M9 3L3 9M3 3L9 9"/></svg>');
   form.querySelector('.tsmb-icon-close').addEventListener('click', function () {
@@ -151,9 +151,7 @@ globalThis.tsminibar = function tsminibar (form) {
   function render () {
     listbox.hidden = !state.open;
     form.classList.toggle('tsmb-form--open', state.open);
-    if (state.open) {
-      listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
-    }
+    listbox.innerHTML = (state.hits.map((hit, i) => `<div role="option"${i === state.cursor ? ' aria-selected="true"' : ''}>${hit.lvl0 ? `<div class="tsmb-suggestion_group">${hit.lvl0}</div>` : ''}<a href="${hit.url}" tabindex="-1"><div class="tsmb-suggestion_title">${hit.title}</div><div class="tsmb-suggestion_content">${hit.content}</div></a></div>`).join('') || `<div class="tsmb-empty">${noResults.replace('{}', escape(state.query))}</div>`) + (form.dataset.foot ? '<a href="https://typesense.org" class="tsmb-foot" title="Search by Typesense"></a>' : '');
   }
 
   function moveCursor (offset) {
@@ -166,4 +164,10 @@ globalThis.tsminibar = function tsminibar (form) {
 
   return { form, connect, disconnect };
 };
-document.querySelectorAll('.tsmb-form[data-origin]').forEach(form => tsminibar(form));
+document.querySelectorAll('.tsmb-form[data-origin]').forEach(tsminibar);
+window.customElements.define('typesense-minibar', class extends HTMLElement {
+  connectedCallback () {
+    const form = this.querySelector('form');
+    if (form) tsminibar(form);
+  }
+});