Update Autocomplete style

1 files changed, 42 insertions, 46 deletions

diff --git a/docs/components.html b/docs/components.html
index ef5f18d..f414d7c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -412,28 +412,24 @@
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input form-input">
-                    <label class="chip">
+                    <span class="chip">
                       Bruce Banner
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
                       <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
                       Thor Odinson
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
                       <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
                       Steve Rogers
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                    </span>
+                    <span class="chip">
+                      <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                       Tony Stark
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip active">
+                    </span>
+                    <span class="chip active">
                       Natasha Romanoff
-                      <button class="btn btn-clear"></button>
-                    </label>
+                    </span>
                     <input class="form-input" type="text" placeholder="" />
                   </div>
                 </div>
@@ -443,15 +439,15 @@
               <div class="form-group">
                 <div class="form-autocomplete">
                   <div class="form-autocomplete-input form-input is-focused">
-                    <label class="chip">
+                    <span class="chip">
                       Bruce Banner
-                      <button class="btn btn-clear"></button>
-                    </label>
-                    <label class="chip">
+                      <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
-                      <button class="btn btn-clear"></button>
-                    </label>
+                      <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>
@@ -501,7 +497,7 @@
     &lt;<span class="tag">label</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">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+      &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">/label</span>&gt;
 
     <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
@@ -998,36 +994,36 @@
           </div>
           <div class="columns">
             <div class="column col-12">
-              <label class="chip">
+              <span class="chip">
                 Crime
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Drama
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Biography
-                <button class="btn btn-clear"></button>
-              </label>
-              <label class="chip">
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
+              <span class="chip">
                 Mystery
-                <button class="btn btn-clear"></button>
-              </label>
+                <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+              </span>
             </div>
             <div class="column col-12">
-              <label class="chip">
+              <span class="chip">
                 <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
                 Tony Stark
-              </label>
-              <label class="chip">
+              </span>
+              <span class="chip">
                 <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
                 Thor Odinson
-              </label>
-              <label class="chip">
+              </span>
+              <span class="chip">
                 <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
                 Steve Rogers
-              </label>
+              </span>
             </div>
           </div>
           <div class="docs-note">
@@ -1035,16 +1031,16 @@
           </div>
 
 <!-- chips example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
   Crime
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;
+  &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">/span</span>&gt;
 
-&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+&lt;<span class="tag">span</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> /&gt;
   Yan Zhu
-  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;</code>
+  &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">/span</span>&gt;</code>
 </pre>
 
         </div>