IMPORTANT: Move Autocomplete to the Experimentals

1 files changed, 4 insertions, 127 deletions

diff --git a/docs/components.html b/docs/components.html
index 45681e5..547a9fb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -119,9 +119,6 @@
                   <a href="components.html">Accordions</a>
                 </li>
                 <li class="menu-item">
-                  <a href="components.html#autocomplete">Autocomplete</a>
-                </li>
-                <li class="menu-item">
                   <a href="components.html#avatars">Avatars</a>
                 </li>
                 <li class="menu-item">
@@ -220,7 +217,10 @@
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="experimentals.html">Calendars</a>
+                  <a href="experimentals.html">Autocomplete</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#calendars">Calendars</a>
                 </li>
                 <li class="menu-item">
                   <a href="experimentals.html#carousels">Carousels</a>
@@ -458,129 +458,6 @@
         </div>
       </div>
 
-      <div id="autocomplete" class="container">
-        <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
-        <div class="docs-note">
-          <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
-        </div>
-        <div class="columns">
-          <div class="column col-9 col-xs-12">
-            <div class="form-group">
-              <div class="form-autocomplete">
-                <div class="form-autocomplete-input form-input">
-                  <span class="chip">
-                    Bruce Banner
-                  </span>
-                  <div class="chip">
-                    <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar">
-                    Thor Odinson
-                  </div>
-                  <div class="chip">
-                    <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar">
-                    Steve Rogers
-                  </div>
-                  <div class="chip">
-                    <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
-                    Tony Stark
-                  </div>
-                  <span class="chip active">
-                    Natasha Romanoff
-                  </span>
-                  <input class="form-input" type="text" placeholder="">
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="column col-9 col-xs-12">
-            <div class="form-group">
-              <div class="form-autocomplete">
-                <div class="form-autocomplete-input form-input is-focused">
-                  <span class="chip">
-                    Bruce Banner
-                    <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-                  </span>
-                  <span class="chip">
-                    <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
-                    Thor Odinson
-                    <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-                  </span>
-                  <div class="has-icon-left">
-                    <input class="form-input" type="text" placeholder="" value="S">
-                    <i class="form-icon loading"></i>
-                  </div>
-                </div>
-                <ul class="menu">
-                  <li class="menu-item">
-                    <a href="#autocomplete">
-                      <div class="tile tile-centered">
-                        <div class="tile-icon">
-                          <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
-                        </div>
-                        <div class="tile-content">
-                          <mark>S</mark>teve Roger<mark>s</mark>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="#autocomplete">
-                      <div class="tile tile-centered">
-                        <div class="tile-icon">
-                          <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>
-                        </div>
-                        <div class="tile-content">
-                          Tony <mark>S</mark>tark
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="docs-note">
-          <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p>
-          <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p>
-        </div>
-
-<!-- autocomplete -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
-  <span class="com">&lt;!-- autocomplete input container --&gt;</span>
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input form-input&quot;</span>&gt;
-
-    <span class="com">&lt;!-- autocomplete chips --&gt;</span>
-    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
-      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span>&gt;
-      Thor Odinson
-      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
-    &lt;<span class="tag">/div</span>&gt;
-
-    <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
-    &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span>&gt;
-  &lt;<span class="tag">/div</span>&gt;
-
-  <span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
-  &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
-    <span class="com">&lt;!-- menu list chips --&gt;</span>
-    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
-      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
-        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
-          &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
-            &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&quot;</span>&gt;
-          &lt;<span class="tag">/div</span>&gt;
-          &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
-            Steve Rogers
-          &lt;<span class="tag">/div</span>&gt;
-        &lt;<span class="tag">/div</span>&gt;
-      &lt;<span class="tag">/a</span>&gt;
-    &lt;<span class="tag">/li</span>&gt;
-  &lt;<span class="tag">/ul</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
-      </div>
-
       <div id="avatars" class="container">
         <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
         <div class="docs-note">