Improve docs

src/components/mdSelect/mdSelect.vue

@@ -3,13 +3,18 @@
     class="md-select"
     :class="classes"
     :tabindex="disabled ? null : '0'">
-    <span class="md-select-value" @click="show">{{ value }}</span>
+    <span
+      class="md-select-value"
+      @click="open"
+      @keydown.enter.prevent="open"
+      ref="value">{{ value }}</span>
 
     <div
       class="md-select-menu"
       tabindex="-1"
       ref="menu"
       @keydown.esc.prevent="close"
+      @keydown.tab.prevent="close"
       @keydown.up.prevent="highlightOption(highlighted - 1)"
       @keydown.down.prevent="highlightOption(highlighted + 1)">
       <div class="md-select-menu-container">
@@ -50,16 +55,17 @@
       }
     },
     methods: {
-      show() {
-        this.$refs.menu.focus();
+      open() {
         this.active = true;
         document.addEventListener('click', this.closeOnOffClick);
+        this.$refs.menu.focus();
       },
       close() {
         if (this.active) {
           this.$refs.menu.blur();
           this.active = false;
           document.removeEventListener('click', this.closeOnOffClick);
+          this.$refs.value.focus();
         }
       },
       closeOnOffClick(event) {
@@ -70,6 +76,8 @@
       highlightOption(factor) {
         if (factor >= 1 && factor <= this.optionsAmount) {
           this.highlighted = factor;
+        } else {
+          this.highlighted = 1;
         }
       },
       selectOption(value) {

src/components/mdTabs/mdTabs.scss

@@ -56,8 +56,8 @@ $tab-max-width: 264px;
     background: none;
     transition: $swift-ease-out;
     color: rgba(#fff, .7);
-    font-size: inherit;
     font-family: inherit;
+    font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
 

src/components/mdTabs/mdTabs.vue

@@ -85,6 +85,7 @@
         this.calculateIndicatorPos();
         this.calculateTabPos(this.tabs[this.activeTab].ref, this.activeTab);
         this.setVisibleTab(this.tabs[index].ref);
+        this.$emit('change', index);
       },
       registerTab(options) {
         this.tabs.push(options);

src/docs/components/demo.vue

@@ -39,6 +39,24 @@
     > .md-tabs-content {
       overflow-y: auto;
     }
+
+    .md-tab {
+      max-width: 960px;
+      font-size: 16px;
+      line-height: 1.6em;
+    }
+
+    code:not(.highlight) {
+      margin-left: 1px;
+      margin-right: 1px;
+      padding: 1px 5px;
+      background-color: rgba(#3f51b5, .12);
+      border-radius: 2px;
+      color: #3f51b5;
+      font-family: Hack, Menlo, "Liberation Mono", "Operator Mono", Monaco, Consolas, monospace;
+      letter-spacing: .010em;
+      line-height: 1.5em;
+    }
   }
 </style>
 

src/docs/pages/Tabs.vue

@@ -115,8 +115,11 @@
     </div>
 
     <div slot="api">
-      <h2>Code</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
+      <p>
+      To use Tabs you must wrap all <code>&lt;md-tab&gt;</code> in a <code>&lt;md-tabs&gt;</code> as a direct parent.
+      The <code>&lt;md-tabs&gt;</code> can accept some parameters to modify his styles, like <code>md-fixed</code> and <code>md-centered</code> for example.
+      Each single tab accept a <code>md-label</code> and/or <code>md-icon</code>. You can set the active tab by setting a parameter <code>md-active</code>.
+      </p>
     </div>
   </demo>
 </template>

src/docs/pages/Toolbar.vue

@@ -24,7 +24,7 @@
       </div>
     </md-toolbar>
 
-    <md-toolbar>
+    <md-toolbar class="md-accent">
       <md-button class="md-icon-button">
         <md-icon>menu</md-icon>
       </md-button>
@@ -36,7 +36,7 @@
       </md-button>
     </md-toolbar>
 
-    <md-toolbar>
+    <md-toolbar v-md-theme="'orange'">
       <md-button class="md-icon-button">
         <md-icon>menu</md-icon>
       </md-button>
@@ -47,7 +47,7 @@
       <md-button>Remove</md-button>
     </md-toolbar>
 
-    <md-toolbar>
+    <md-toolbar v-md-theme="'teal'">
       <md-button class="md-icon-button">
         <md-icon>menu</md-icon>
       </md-button>
@@ -58,7 +58,7 @@
       <md-button class="md-raised md-warn">Remove</md-button>
     </md-toolbar>
 
-    <md-toolbar class="md-extended">
+    <md-toolbar class="md-extended" v-md-theme="'green'">
       <div class="md-toolbar-container">
         <md-button class="md-icon-button">
           <md-icon>menu</md-icon>