Add web component support

Web Components are awesome!

They naturally solve the use case of "late", or "dynamic" insertion,
without needing to rely on selecting elements, or manually calling the
undocumented `tsminibar()` function. It just works!

== npm run size ==

JS transerSize (compressed):

* HEAD~1 : 2209
* HEAD   : 2175
* After  : 2248 (+39 B, +1.7%)

CSS:
* HEAD   : 1861
* After  : 1921 (+60 B, +3.2%)

== npm test ==

```
File                  | % Stmts | % Branch | % Funcs | % Lines |
----------------------|---------|----------|---------|---------|
before                |   94.28 |    85.71 |   90.47 |   95.78 |
after                 |   95.41 |    84.72 |   95.23 |   95.95 |
```

Author: Krinkle

README.md

@@ -19,6 +19,7 @@
 * **Accessible**, keyboard navigation, arrow keys, close on `Esc` or outside click
 * **Fast**, leverages preconnect (Resource Hints), LRU memory cache
 * **Easy to install**, fully declarative via HTML (zero-code setup!)
+* **Web Component** ready
 
 ## Getting started
 
@@ -48,12 +49,30 @@ Distribution:
   npm i --save typesense-minibar
   ```
   ```js
+  // CommonJS
   require('typesense-minibar');
+  // ESM
   import 'typesense-minibar';
   ```
 
 ## API
 
+### Web Component
+
+`<typesense-minibar><form>…</form></typesense-minibar>` is equivalent to `<form class="tsmb-form">`.
+
+```html
+<typesense-minibar>
+  <form role="search" action="https://duckduckgo.com"
+      data-origin=""
+      data-collection=""
+      data-key="">
+    <input type="search" name="q" placeholder="Search..." autocomplete="off">
+    <input type="hidden" name="sites" value="example.org">
+  </form>
+</typesense-minibar>
+```
+
 ### Configuration
 
 * ***data-origin*** (Required): Base URL to your Typesense server.
@@ -168,6 +187,19 @@ Notes:
 
 ## FAQ: Troubleshooting
 
+* Why is the form not interactive if I insert it later?
+
+  If you create or insert the element dynamically with JavaScript, it is recommended to write the form as a web component instead, like so:
+  ```html
+  <typescript-minibar>
+    <form ..>..</form>
+  </typescript-minibar>
+  ```
+
+  Web components automatically activate the relevant JavaScript, no matter when they are inserted on the page.
+
+  By default, typescript-minibar.js also makes sure that any `<form class="tsmb-form">` elements on the page are hydrated and activated. This should catch any static element on the page (i.e. before "document ready", or the DOMContentLoaded event). This works internally by levering the fact that script execution is naturally deferred until the document is ready, via the `defer` and `type="module"` attributes on the `<script>` tag.
+
 * How does this prevent JavaScript errors in older browsers? What about ES5?
 
   If you load typesense-minibar.js standalone, make sure you have the `type="module"` attribute on the `<script>` tag. Scripts with this type are naturally ignored by older browsers. The element works fine **without JavaScript**, following the principles of [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). This technique is analogous to "[cutting the mustard](https://responsivenews.tumblr.com/post/18948466399/cutting-the-mustard)".

demo/index.html

@@ -27,6 +27,20 @@
     </form>
   </header>
   <main>
+    <h2>Web Component</h2>
+    <typesense-minibar>
+      <form role="search" data-origin="https://typesense.jquery.com" data-collection="qunitjs_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" action="https://duckduckgo.com">
+        <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
+        <input type="hidden" name="sites" value="qunitjs.com">
+      </form>
+    </typesense-minibar>
+
+    <h2>Class</h2>
+    <form role="search" class="tsmb-form" data-origin="https://typesense.jquery.com" data-collection="qunitjs_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" action="https://duckduckgo.com">
+      <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">
+      <input type="hidden" name="sites" value="qunitjs.com">
+    </form>
+
     <h2>customize layout</h2>
     <form role="search" class="tsmb-form demo-custom-form" data-origin="https://typesense.jquery.com" data-collection="jquery_com" data-key="Zh8mMgohXECel9wjPwqT7lekLSG3OCgz" data-foot="true" data-group="true" action="https://duckduckgo.com">
       <input type="search" name="q" aria-label="Search" placeholder="Search..." autocomplete="off">

test/test.js

@@ -530,4 +530,29 @@ QUnit.module('typesense-minibar', hooks => {
     await new Promise(resolve => setTimeout(resolve));
     assert.strictEqual(document.head.querySelectorAll('link[rel=preconnect]').length, 1, 'preconnect link');
   });
+
+  QUnit.test('Web Component [input, listbox, re-focus]', async assert => {
+    const element = parseHTML('<typesense-minibar><form><input type="search"></form></typesense-minibar>');
+    document.querySelector('#qunit-fixture').append(element);
+    const form = element.querySelector('form');
+    assert.equal(form.className, 'tsmb-form tsmb-form--slash', 'set form class');
+
+    const input = form.firstChild;
+    const listbox = element.querySelector('[role=listbox]');
+
+    mockFetchResponse = API_RESP_FULL_MATCH_SOMETHING;
+    input.value = 'something';
+    await expectRender(form, () => {
+      simulate(input, 'input');
+    });
+    assert.false(listbox.hidden, 'listbox not hidden');
+    assert.equal(listbox.querySelector('mark').outerHTML, '<mark>something</mark>', 'snippet');
+
+    mockFetchResponse = null;
+    simulate(document.body, 'click', { bubbles: true });
+    assert.true(listbox.hidden, 'listbox hidden');
+
+    input.focus();
+    assert.false(listbox.hidden, 'listbox re-opened');
+  });
 });

typesense-minibar.css

@@ -1,5 +1,6 @@
 /*! https://github.com/jquery/typesense-minibar 1.2.0 */
-.tsmb-form {
+.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;

typesense-minibar.js

@@ -92,6 +92,7 @@ globalThis.tsminibar = function tsminibar (form) {
 
   function connect () {
     document.addEventListener('click', onDocClick);
+    form.classList.add('tsmb-form');
     if (form.dataset.slash !== 'false') {
       document.addEventListener('keydown', onDocSlash);
       form.classList.add('tsmb-form--slash');
@@ -164,4 +165,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);
+  }
+});