Updated tab elements

Author: djthorpe

src/index.html

@@ -50,15 +50,16 @@
 
       <div class="container">
         <h1>Tab Group</h1>
-
+        <div style="background-color: var(--grey-10-color); padding: 5px;">
         <wc-tab-group backgroundColor="light">
           <wc-tab name="tab-tables" selected>Tables</wc-tab>
           <wc-tab name="tab-buttons">Buttons</wc-tab>
           <wc-tab name="tab-badges">Badges</wc-tab>
           <wc-tab name="tab-icons">Icons</wc-tab>
-          <wc-tab name="tab-disabled" disabled>Disabled</wc-tab>
+          <wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon> Disabled</wc-tab>
         </wc-tab-group>
       </div>
+    </div>
       <hr>
 
       <div class="container">

src/nav/TabElement.js

@@ -52,7 +52,10 @@ export class TabElement extends LitElement {
   static get styles() {
     return css`
       li {
-        text-align: center;
+        vertical-align: middle;
+      }
+      li.selected {
+        border-bottom: 2px solid var(--error-color);
       }
     `;
   }

src/nav/TabGroupElement.js

@@ -142,11 +142,9 @@ export class TabGroupElement extends LitElement {
     tabs.forEach((tab) => {
       if (tab.name === name && !tab.disabled) {
         if (!tab.selected) {
-          console.log('SELECT', tab.name);
-          tab.selected = true;
+          tab.setAttribute('selected', true);
         }
       } else if (tab.selected) {
-        console.log('DESELECT', tab.name);
         tab.selected = false;
       }
     });