diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index 400a770..c4ef9ea 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -17,7 +17,7 @@
         </md-tabs>
       </md-card-area>
 
-      <!-- <button type="button" class="md-codepen" @click.native="editOnCodepen">
+      <!-- <button type="button" class="md-codepen" @click="editOnCodepen">
         <img src="assets/codepen.png" alt="Edit on Codepen">
         <md-tooltip md-direction="left">Edit on codepen</md-tooltip>
       </button> -->
diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index b9797c3..665b240 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-content">
     <md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
-      <md-button class="md-icon-button nav-trigger" @click.native="toggleSidenav">
+      <md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
         <md-icon>menu</md-icon>
       </md-button>
 
diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index 2242640..4af946e 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -46,6 +46,12 @@
                 <md-table-cell>Receive the item index</md-table-cell>
                 <md-table-cell>Triggered when an item is activated.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -123,7 +129,7 @@
             </code-block>
           </div>
         </example-box>
-        
+
         <example-box card-title="Using SVG">
           <div slot="demo">
             <div class="phone-viewport">
@@ -145,7 +151,7 @@
             </code-block>
           </div>
         </example-box>
-        
+
         <example-box card-title="Using Iconsets">
           <div slot="demo">
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"/>
@@ -240,10 +246,10 @@
           <div slot="demo">
             <div class="phone-viewport">
               <md-bottom-bar md-shift :md-theme="playground.theme">
-                <md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
-                <md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
+                <md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
               </md-bottom-bar>
             </div>
           </div>
@@ -252,10 +258,10 @@
             <code-block lang="xml">
               &lt;md-theme :md-name=&quot;playground.theme&quot;&gt;
                 &lt;md-bottom-bar md-shift&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
-                  &lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
+                  &lt;md-bottom-bar-item @click=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
                 &lt;/md-bottom-bar&gt;
               &lt;/div&gt;
             </code-block>
diff --git a/docs/src/pages/components/Buttons.vue b/docs/src/pages/components/Buttons.vue
index f069125..13d67d1 100644
--- a/docs/src/pages/components/Buttons.vue
+++ b/docs/src/pages/components/Buttons.vue
@@ -108,6 +108,24 @@
               </md-table-row>
             </md-table-body>
           </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
       </div>
 
diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
index 7340fd5..198479e 100644
--- a/docs/src/pages/components/Dialog.vue
+++ b/docs/src/pages/components/Dialog.vue
@@ -286,8 +286,8 @@
               <md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Cancel</md-button>
-                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Ok</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
               </md-dialog-actions>
             </md-dialog>
 
@@ -304,13 +304,13 @@
               </md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Cancel</md-button>
-                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Create</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog2')">Cancel</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog2')">Create</md-button>
               </md-dialog-actions>
             </md-dialog>
 
-            <md-button class="md-primary md-raised" id="custom" @click.native="openDialog('dialog1')">Custom</md-button>
-            <md-button class="md-fab md-fab-bottom-right" id="fab" @click.native="openDialog('dialog2')">
+            <md-button class="md-primary md-raised" id="custom" @click="openDialog('dialog1')">Custom</md-button>
+            <md-button class="md-fab md-fab-bottom-right" id="fab" @click="openDialog('dialog2')">
               <md-icon>add</md-icon>
             </md-button>
           </div>
@@ -323,8 +323,8 @@
                 &lt;md-dialog-content&gt;Nemo, nobis necessitatibus ut illo, ducimus ex.&lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
@@ -341,13 +341,13 @@
                 &lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click.native=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click.native=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
                 &lt;md-icon&gt;add&lt;/md-icon&gt;
               &lt;/md-button&gt;
             </code-block>
@@ -391,8 +391,8 @@
               ref="dialog4">
             </md-dialog-alert>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog3')">Alert</md-button>
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog4')">Alert with HTML</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog3')">Alert</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog4')">Alert with HTML</md-button>
           </div>
 
           <div slot="code">
@@ -413,8 +413,8 @@
                 ref=&quot;dialog4&quot;&gt;
               &lt;/md-dialog-alert&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -460,7 +460,7 @@
               ref="dialog5">
             </md-dialog-confirm>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog5')">Confirm</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
           </div>
 
           <div slot="code">
@@ -475,7 +475,7 @@
                 ref=&quot;dialog5&quot;&gt;
               &lt;/md-dialog-confirm&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -523,7 +523,7 @@
               ref="dialog6">
             </md-dialog-prompt>
 
-            <md-button class="md-primary md-raised" @click.native="openDialog('dialog6')">Prompt</md-button>
+            <md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
           </div>
 
           <div slot="code">
@@ -538,7 +538,7 @@
                 ref=&quot;dialog6&quot;&gt;
               &lt;/md-dialog-prompt&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/ImageLoader.vue b/docs/src/pages/components/ImageLoader.vue
index c56d480..870f522 100644
--- a/docs/src/pages/components/ImageLoader.vue
+++ b/docs/src/pages/components/ImageLoader.vue
@@ -30,8 +30,8 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-button class="md-primary md-raised" @click.native="loadImage">Load Image</md-button>
-            <md-button class="md-primary md-raised" @click.native="clearImage">Clear Image</md-button>
+            <md-button class="md-primary md-raised" @click="loadImage">Load Image</md-button>
+            <md-button class="md-primary md-raised" @click="clearImage">Clear Image</md-button>
 
             <div>
               <md-image :md-src="src"></md-image>
@@ -40,8 +40,8 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
 
               &lt;div&gt;
                 &lt;md-image :md-src=&quot;src&quot;&gt;&lt;/md-image&gt;
diff --git a/docs/src/pages/components/List.vue b/docs/src/pages/components/List.vue
index 9e11281..e7fb1fe 100644
--- a/docs/src/pages/components/List.vue
+++ b/docs/src/pages/components/List.vue
@@ -70,7 +70,6 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Disable the item and prevent its actions. Default <code>false</code></md-table-cell>
               </md-table-row>
-              </md-table-row>
 
               <md-table-row>
                 <md-table-cell>md-expand-multiple</md-table-cell>
@@ -95,6 +94,24 @@
               </md-table-row>
             </md-table-body>
           </md-table>
+
+          <md-table slot="events">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Value</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
         </api-table>
 
         <api-table name="md-list-expand">
@@ -858,7 +875,7 @@
               <md-list>
                 <md-list-item>Plain Text</md-list-item>
                 <md-list-item target="_blank" href="https://google.com">Link</md-list-item>
-                <md-list-item @click.native="openAlert">Button</md-list-item>
+                <md-list-item @click="openAlert">Button</md-list-item>
                 <md-list-item>
                   <router-link to="/components/list">Router View</router-link>
                 </md-list-item>
@@ -876,7 +893,7 @@
                   &lt;md-list&gt;
                     &lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
                     &lt;md-list-item target=&quot;_blank&quot; href=&quot;https://google.com&quot;&gt;Link&lt;/md-list-item&gt;
-                    &lt;md-list-item @click.native=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
+                    &lt;md-list-item @click=&quot;openAlert&quot;&gt;Button&lt;/md-list-item&gt;
                     &lt;md-list-item&gt;
                         &lt;router-link to=&quot;/components/list&quot;&gt;Router View&lt;/router-link&gt;
                     &lt;/md-list-item&gt;
@@ -1001,7 +1018,7 @@
                 &lt;md-list&gt;
                   &lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
                   &lt;md-list-item target="_blank" href="https://google.com"&gt;Link&lt;/md-list-item&gt;
-                  &lt;md-list-item @click.native="openAlert"&gt;Button&lt;/md-list-item&gt;
+                  &lt;md-list-item @click="openAlert"&gt;Button&lt;/md-list-item&gt;
                   &lt;md-list-item&gt;
                     &lt;router-link to="/components/list"&gt;Router View&lt;/router-link&gt;
                   &lt;/md-list-item&gt;
diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index af61a55..5ea39cc 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -78,6 +78,12 @@
                 <md-table-cell>None</md-table-cell>
                 <md-table-cell>Triggered when the menu starts to close.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>click</md-table-cell>
+                <md-table-cell>Receive the click event</md-table-cell>
+                <md-table-cell>Triggered when an item is clicked.</md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
 
@@ -523,7 +529,7 @@
               </md-menu-content>
             </md-menu>
 
-            <md-button class="md-raised md-primary" @click.native="$refs.menu.open">Open contact card</md-button>
+            <md-button class="md-raised md-primary" @click="$refs.menu.open">Open contact card</md-button>
           </div>
 
           <div slot="code">
@@ -591,7 +597,7 @@
                 &lt;/md-menu-content&gt;
               &lt;/md-menu&gt;
 
-              &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;$refs.menu.open&quot;&gt;Open contact card&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;$refs.menu.open&quot;&gt;Open contact card&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="sass">
diff --git a/docs/src/pages/components/Progress.vue b/docs/src/pages/components/Progress.vue
index f0767be..00a4885 100644
--- a/docs/src/pages/components/Progress.vue
+++ b/docs/src/pages/components/Progress.vue
@@ -47,7 +47,7 @@
               <md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
             </div>
 
-            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
+            <md-button class="md-primary md-raised" @click="restartProgress">Restart</md-button>
           </div>
 
           <div slot="code">
diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue
index 0f26d0c..33deef7 100644
--- a/docs/src/pages/components/Select.vue
+++ b/docs/src/pages/components/Select.vue
@@ -209,7 +209,7 @@
               </md-input-container>
             </div>
 
-            <md-button class="md-raised md-primary" @click.native="setPulpFiction">Set Pulp Fiction</md-button>
+            <md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
           </div>
 
           <div slot="code">
@@ -279,7 +279,7 @@
                 &lt;/md-input-container&gt;
               &lt;/div&gt;
 
-              &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -322,7 +322,7 @@
             <div>Selected letters: {{ items }}</div>
             <br/>
             <br/>
-            
+
             <div class="field-group">
               <md-input-container>
                 <label for="users">Multiselect with subheaders</label>
@@ -347,7 +347,7 @@
                 </md-select>
               </md-input-container>
             </div>
-            
+
             <div>Selected users: {{ users }}</div>
 
           </div>
@@ -365,9 +365,9 @@
                 &lt;md-select&gt;
               &lt;/md-input-container&gt;
 
-              &lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;              
-              
-              
+              &lt;div&gt;Selected letters: {{ items }}&lt;/div&gt;
+
+
               &lt;md-input-container&gt;
                 &lt;label for=&quot;users&quot;&gt;Users&lt;/label&gt;
                 &lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
diff --git a/docs/src/pages/components/Sidenav.vue b/docs/src/pages/components/Sidenav.vue
index c9f9716..cdeb953 100644
--- a/docs/src/pages/components/Sidenav.vue
+++ b/docs/src/pages/components/Sidenav.vue
@@ -120,7 +120,7 @@
           <div slot="demo">
             <div class="phone-viewport">
               <md-toolbar>
-                <md-button class="md-icon-button" @click.native="toggleLeftSidenav">
+                <md-button class="md-icon-button" @click="toggleLeftSidenav">
                   <md-icon>menu</md-icon>
                 </md-button>
 
@@ -128,7 +128,7 @@
               </md-toolbar>
 
               <div>
-                <md-button class="md-raised md-accent" @click.native="toggleRightSidenav">Toggle right</md-button>
+                <md-button class="md-raised md-accent" @click="toggleRightSidenav">Toggle right</md-button>
                 <p>Open console to see the events</p>
               </div>
 
@@ -149,7 +149,7 @@
                   </div>
                 </md-toolbar>
 
-                <md-button class="md-raised md-accent" @click.native="closeRightSidenav">Close</md-button>
+                <md-button class="md-raised md-accent" @click="closeRightSidenav">Close</md-button>
               </md-sidenav>
             </div>
           </div>
@@ -158,7 +158,7 @@
             <code-block lang="xml">
               &lt;div class=&quot;phone-viewport&quot;&gt;
                 &lt;md-toolbar&gt;
-                  &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;toggleLeftSidenav&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;toggleLeftSidenav&quot;&gt;
                     &lt;md-icon&gt;menu&lt;/md-icon&gt;
                   &lt;/md-button&gt;
 
@@ -166,7 +166,7 @@
                 &lt;/md-toolbar&gt;
 
                 &lt;div&gt;
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
                   &lt;p&gt;Open console to see the events&lt;/p&gt;
                 &lt;/div&gt;
 
@@ -187,7 +187,7 @@
                     &lt;/div&gt;
                   &lt;/md-toolbar&gt;
 
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
                 &lt;/md-sidenav&gt;
               &lt;/div&gt;
             </code-block>
diff --git a/docs/src/pages/components/Snackbar.vue b/docs/src/pages/components/Snackbar.vue
index f3bb0fd..eb11f93 100644
--- a/docs/src/pages/components/Snackbar.vue
+++ b/docs/src/pages/components/Snackbar.vue
@@ -107,7 +107,7 @@
 
               <md-snackbar :md-position="vertical + ' ' + horizontal" ref="snackbar" :md-duration="duration">
                 <span>Connection timeout. Showing limited messages.</span>
-                <md-button class="md-accent" md-theme="light-blue" @click.native="$refs.snackbar.close()">Retry</md-button>
+                <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar.close()">Retry</md-button>
               </md-snackbar>
             </form>
           </div>
@@ -140,7 +140,7 @@
 
                 &lt;md-snackbar :md-position=&quot;vertical + &#039; &#039; + horizontal&quot; ref=&quot;snackbar&quot; :md-duration=&quot;duration&quot;&gt;
                   &lt;span&gt;Connection timeout. Showing limited messages.&lt;/span&gt;
-                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click.native=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
                 &lt;/md-snackbar&gt;
               &lt;/form&gt;
             </code-block>
diff --git a/docs/src/pages/components/Spinner.vue b/docs/src/pages/components/Spinner.vue
index dd35c96..1177eaa 100644
--- a/docs/src/pages/components/Spinner.vue
+++ b/docs/src/pages/components/Spinner.vue
@@ -53,7 +53,7 @@
       <div slot="example">
         <example-box card-title="Determinate">
           <div class="spinner-demo" slot="demo">
-            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
+            <md-button class="md-primary md-raised" @click="restartProgress">Restart</md-button>
             <md-spinner :md-progress="progress" v-if="transition"></md-spinner>
             <md-spinner :md-progress="progress" v-if="transition" class="md-accent"></md-spinner>
             <md-spinner :md-progress="progress" v-if="transition" class="md-warn"></md-spinner>
@@ -111,7 +111,7 @@
         <example-box card-title="Complete Example">
           <div slot="demo">
             <md-theme class="complete-example" md-name="orange">
-              <md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
+              <md-button class="md-fab" @click="restartProgress" :class="{ 'md-primary': done }">
                 <md-icon v-if="!done">cloud_upload</md-icon>
                 <md-icon v-if="done">done</md-icon>
               </md-button>
@@ -123,7 +123,7 @@
           <div slot="code">
             <code-block lang="xml">
               &lt;md-theme class=&quot;complete-example&quot; md-name=&quot;orange&quot;&gt;
-                &lt;md-button class=&quot;md-fab&quot; @click.native=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
+                &lt;md-button class=&quot;md-fab&quot; @click=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
                   &lt;md-icon v-if=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
                   &lt;md-icon v-if=&quot;done&quot;&gt;done&lt;/md-icon&gt;
                 &lt;/md-button&gt;
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index 55d9b01..f57f967 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -420,7 +420,7 @@
             <div class="phone-viewport complete-example">
               <md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
                 <div class="md-toolbar-container">
-                  <md-button class="md-icon-button" @click.native="$refs.sidenav.toggle()">
+                  <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
                     <md-icon>menu</md-icon>
                   </md-button>
 
@@ -590,23 +590,23 @@
                 </md-toolbar>
 
                 <md-list>
-                  <md-list-item @click.native="$refs.sidenav.toggle()" class="md-primary">
+                  <md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
                     <md-icon>insert_drive_file</md-icon> <span>My files</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>people</md-icon> <span>Shared with me</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>access_time</md-icon> <span>Recent</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>start</md-icon> <span>Starred</span>
                   </md-list-item>
 
-                  <md-list-item @click.native="$refs.sidenav.toggle()">
+                  <md-list-item @click="$refs.sidenav.toggle()">
                     <md-icon>delete</md-icon> <span>Trash</span>
                   </md-list-item>
                 </md-list>
@@ -619,7 +619,7 @@
               &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
                 &lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;2&quot; md-theme=&quot;light-blue&quot; class=&quot;md-large&quot;&gt;
                   &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                    &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;menu&lt;/md-icon&gt;
                     &lt;/md-button&gt;
 
@@ -789,23 +789,23 @@
                   &lt;/md-toolbar&gt;
 
                   &lt;md-list&gt;
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
                       &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;people&lt;/md-icon&gt; &lt;span&gt;Shared with me&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;access_time&lt;/md-icon&gt; &lt;span&gt;Recent&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;start&lt;/md-icon&gt; &lt;span&gt;Starred&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
                     &lt;/md-list-item&gt;
                   &lt;/md-list&gt;
diff --git a/src/components/mdBottomBar/mdBottomBarItem.vue b/src/components/mdBottomBar/mdBottomBarItem.vue
index c9ca8b7..6f941db 100644
--- a/src/components/mdBottomBar/mdBottomBarItem.vue
+++ b/src/components/mdBottomBar/mdBottomBarItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
+  <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive(true, $event)" v-if="href">
     <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
@@ -9,7 +9,7 @@
     </span>
   </a>
 
-  <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
+  <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive(true, $event)" v-else>
     <md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
 
     <md-ink-ripple :md-disabled="disabled" />
@@ -49,10 +49,14 @@
       }
     },
     methods: {
-      setActive(active) {
+      setActive(active, $event) {
         if (active) {
           this.$parent.setActive(this);
         }
+
+        if ($event) {
+          this.$emit('click', $event);
+        }
       }
     },
     mounted() {
diff --git a/src/components/mdCard/mdCard.scss b/src/components/mdCard/mdCard.scss
index c6bd72b..284f4d0 100644
--- a/src/components/mdCard/mdCard.scss
+++ b/src/components/mdCard/mdCard.scss
@@ -194,6 +194,7 @@ $card-radius: 2px;
     }
   }
 
+
   .md-card-actions {
     padding: 8px;
     display: flex;
@@ -285,6 +286,8 @@ $card-radius: 2px;
       .md-card-content {
         margin-top: 0 !important;
         opacity: 1;
+        padding: 4px 16px 24px 16px ;
+        height: auto;
       }
     }
 
@@ -300,13 +303,14 @@ $card-radius: 2px;
     }
 
     .md-card-content {
-      padding-top: 4px;
+      height: 0;
+      padding: 0 16px;
       position: relative;
       z-index: 1;
       opacity: 0;
       transform: translate3D(0, 0, 0);
       transition: $swift-ease-out;
-      will-change: margin;
+      will-change: margin, height;
     }
   }
 }
diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme
index 862b024..e740090 100644
--- a/src/components/mdCard/mdCard.theme
+++ b/src/components/mdCard/mdCard.theme
@@ -89,6 +89,15 @@
           background-color: #{'BACKGROUND-CONTRAST-0.4'};
         }
       }
+
+      .md-card-header,
+      .md-card-actions {
+        .md-icon-button:not(.md-primary):not(.md-warn):not(.md-accent) {
+          .md-icon {
+            color: #fff;
+          }
+        }
+      }
     }
 
     .md-card-expand {
diff --git a/src/components/mdCard/mdCardExpand.vue b/src/components/mdCard/mdCardExpand.vue
index 47993d3..2cf4936 100644
--- a/src/components/mdCard/mdCardExpand.vue
+++ b/src/components/mdCard/mdCardExpand.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="md-card-expand" ref="expand">
+  <div class="md-card-expand"
+    ref="expand">
     <slot></slot>
   </div>
 </template>
@@ -7,15 +8,15 @@
 <script>
   export default {
     name: 'md-card-expand',
+    data() {
+      return {
+        trigger: null,
+        content: null
+      };
+    },
     methods: {
-      setContentMargin() {
-        this.content.style.marginTop = -this.content.offsetHeight + 'px';
-      },
       toggle() {
         this.$refs.expand.classList.toggle('md-active');
-      },
-      onWindowResize() {
-        window.requestAnimationFrame(this.setContentMargin);
       }
     },
     mounted() {
@@ -24,17 +25,13 @@
         this.content = this.$el.querySelector('.md-card-content');
 
         if (this.content) {
-          this.setContentMargin();
-
           this.trigger.addEventListener('click', this.toggle);
-          window.addEventListener('resize', this.onWindowResize);
         }
       }, 200);
     },
     destroyed() {
       if (this.content) {
         this.trigger.removeEventListener('click', this.toggle);
-        window.removeEventListener('resize', this.onWindowResize);
       }
     }
   };
diff --git a/src/components/mdCard/mdCardMedia.vue b/src/components/mdCard/mdCardMedia.vue
index c5600ec..4d82321 100644
--- a/src/components/mdCard/mdCardMedia.vue
+++ b/src/components/mdCard/mdCardMedia.vue
@@ -14,11 +14,21 @@
     },
     computed: {
       classes() {
-        let classes = {
-          'md-16-9': this.mdRatio === '16:9' || this.mdRatio === '16/9',
-          'md-4-3': this.mdRatio === '4:3' || this.mdRatio === '4/3',
-          'md-1-1': this.mdRatio === '1:1' || this.mdRatio === '1/1'
-        };
+        let classes = {};
+
+        if (this.mdRatio) {
+          let ratio = [];
+
+          if (this.mdRatio.indexOf(':') !== -1) {
+            ratio = this.mdRatio.split(':');
+          } else if (this.mdRatio.indexOf('/') !== -1) {
+            ratio = this.mdRatio.split('/');
+          }
+
+          if (ratio.length === 2) {
+            classes['md-' + ratio[0] + '-' + ratio[1]] = true;
+          }
+        }
 
         if (this.mdMedium || this.mdBig) {
           classes = {
diff --git a/src/components/mdCheckbox/mdCheckbox.scss b/src/components/mdCheckbox/mdCheckbox.scss
index d9a0331..5918b24 100644
--- a/src/components/mdCheckbox/mdCheckbox.scss
+++ b/src/components/mdCheckbox/mdCheckbox.scss
@@ -8,7 +8,14 @@ $checkbox-touch-size: 48px;
   margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
-  cursor: pointer;
+
+  &:not(.md-disabled) {
+    cursor: pointer;
+
+    .md-checkbox-label {
+      cursor: pointer;
+    }
+  }
 
   .md-checkbox-container {
     width: $checkbox-size;
@@ -78,7 +85,6 @@ $checkbox-touch-size: 48px;
     height: $checkbox-size;
     padding-left: 8px;
     line-height: $checkbox-size;
-    cursor: pointer;
   }
 }
 
diff --git a/src/components/mdChips/mdChip.vue b/src/components/mdChips/mdChip.vue
index 02166de..3a3ae65 100644
--- a/src/components/mdChips/mdChip.vue
+++ b/src/components/mdChips/mdChip.vue
@@ -7,7 +7,7 @@
     <md-button
       class="md-icon-button md-dense md-delete"
       v-if="mdDeletable"
-      @click.native="!disabled && $emit('delete')"
+      @click="!disabled && $emit('delete')"
       @keyup.native.delete="!disabled && $emit('delete')"
       tabindex="-1">
       <md-icon class="md-icon-delete">cancel</md-icon>
diff --git a/src/components/mdChips/mdChips.vue b/src/components/mdChips/mdChips.vue
index 17e9f34..2831f62 100644
--- a/src/components/mdChips/mdChips.vue
+++ b/src/components/mdChips/mdChips.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-input-container class="md-chips" :class="[themeClass, classes]" @click.native="applyInputFocus">
+  <md-input-container class="md-chips" :class="[themeClass, classes]" @click="applyInputFocus">
     <md-chip
       v-for="chip in selectedChips"
       :key="chip"
diff --git a/src/components/mdDialog/presets/mdDialogAlert.vue b/src/components/mdDialog/presets/mdDialogAlert.vue
index 3099da6..969cbeb 100644
--- a/src/components/mdDialog/presets/mdDialogAlert.vue
+++ b/src/components/mdDialog/presets/mdDialogAlert.vue
@@ -6,7 +6,7 @@
     <md-dialog-content v-else>{{ mdContent }}</md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close()">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close()">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdDialog/presets/mdDialogConfirm.vue b/src/components/mdDialog/presets/mdDialogConfirm.vue
index 3f58cf6..da537ca 100644
--- a/src/components/mdDialog/presets/mdDialogConfirm.vue
+++ b/src/components/mdDialog/presets/mdDialogConfirm.vue
@@ -6,8 +6,8 @@
     <md-dialog-content v-else>{{ mdContent }}</md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close('cancel')">{{ mdCancelText }}</md-button>
-      <md-button class="md-primary" @click.native="close('ok')">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
+      <md-button class="md-primary" @click="close('ok')">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdDialog/presets/mdDialogPrompt.vue b/src/components/mdDialog/presets/mdDialogPrompt.vue
index 59039b1..0166ae6 100644
--- a/src/components/mdDialog/presets/mdDialogPrompt.vue
+++ b/src/components/mdDialog/presets/mdDialogPrompt.vue
@@ -19,8 +19,8 @@
     </md-dialog-content>
 
     <md-dialog-actions>
-      <md-button class="md-primary" @click.native="close('cancel')">{{ mdCancelText }}</md-button>
-      <md-button class="md-primary" @click.native="confirmValue">{{ mdOkText }}</md-button>
+      <md-button class="md-primary" @click="close('cancel')">{{ mdCancelText }}</md-button>
+      <md-button class="md-primary" @click="confirmValue">{{ mdOkText }}</md-button>
     </md-dialog-actions>
   </md-dialog>
 </template>
diff --git a/src/components/mdInputContainer/mdAutocomplete.vue b/src/components/mdInputContainer/mdAutocomplete.vue
index e699982..61a75d4 100644
--- a/src/components/mdInputContainer/mdAutocomplete.vue
+++ b/src/components/mdInputContainer/mdAutocomplete.vue
@@ -25,7 +25,7 @@
           v-for="item in items"
           :key="item"
           @keyup.enter="hit(item)"
-          @click.native="hit(item)">
+          @click="hit(item)">
           {{ item[printAttribute] }}
         </md-menu-item>
       </md-menu-content>
diff --git a/src/components/mdInputContainer/mdInput.vue b/src/components/mdInputContainer/mdInput.vue
index 48103b4..1c7650a 100644
--- a/src/components/mdInputContainer/mdInput.vue
+++ b/src/components/mdInputContainer/mdInput.vue
@@ -2,6 +2,7 @@
   <input
     class="md-input"
     :type="type"
+    :name="name"
     :value="value"
     :disabled="disabled"
     :required="required"
diff --git a/src/components/mdInputContainer/mdInputContainer.theme b/src/components/mdInputContainer/mdInputContainer.theme
index bc544e1..3b89b54 100644
--- a/src/components/mdInputContainer/mdInputContainer.theme
+++ b/src/components/mdInputContainer/mdInputContainer.theme
@@ -57,9 +57,5 @@
         color: #{'BACKGROUND-CONTRAST-0.38'};
       }
     }
-
-    .md-icon:not(.md-icon-delete):after {
-      background: #{'BACKGROUND-COLOR'};
-    }
   }
 }
diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue
index ad491b7..aa3ef1a 100644
--- a/src/components/mdInputContainer/mdInputContainer.vue
+++ b/src/components/mdInputContainer/mdInputContainer.vue
@@ -4,11 +4,11 @@
 
     <span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
 
-    <md-button class="md-icon-button md-toggle-password" @click.native="togglePasswordType" v-if="mdHasPassword">
+    <md-button class="md-icon-button md-toggle-password" @click="togglePasswordType" v-if="mdHasPassword">
       <md-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</md-icon>
     </md-button>
 
-    <md-button class="md-icon-button md-clear-input" @click.native="clearInput" v-if="mdClearable && hasValue">
+    <md-button class="md-icon-button md-clear-input" @click="clearInput" v-if="mdClearable && hasValue">
       <md-icon>clear</md-icon>
     </md-button>
   </div>
diff --git a/src/components/mdList/mdListItemButton.vue b/src/components/mdList/mdListItemButton.vue
index 53cf723..3886607 100644
--- a/src/components/mdList/mdListItemButton.vue
+++ b/src/components/mdList/mdListItemButton.vue
@@ -4,7 +4,7 @@
       <slot></slot>
     </div>
 
-    <md-button type="button" class="md-button-ghost" :disabled="disabled"></md-button>
+    <md-button type="button" class="md-button-ghost" @click="$emit('click', $event)" :disabled="disabled"></md-button>
   </li>
 </template>
 
diff --git a/src/components/mdList/mdListItemExpand.vue b/src/components/mdList/mdListItemExpand.vue
index 9fb449b..a2cd850 100644
--- a/src/components/mdList/mdListItemExpand.vue
+++ b/src/components/mdList/mdListItemExpand.vue
@@ -6,7 +6,7 @@
       <md-icon class="md-list-expand-indicator">keyboard_arrow_down</md-icon>
     </div>
 
-    <md-button type="button" class="md-button-ghost" @click.native="toggleExpandList" :disabled="disabled"></md-button>
+    <md-button type="button" class="md-button-ghost" @click="toggleExpandList" :disabled="disabled"></md-button>
 
     <div class="md-list-expand" ref="expand" :class="expandClasses" :style="expandStyles">
       <slot name="expand"></slot>
@@ -67,13 +67,14 @@
           });
         });
       },
-      toggleExpandList() {
+      toggleExpandList($event) {
         if (!this.mdExpandMultiple) {
           this.resetSiblings();
         }
 
         this.calculatePadding();
         this.active = !this.active;
+        this.$emit('click', $event);
       },
       recalculateAfterChange() {
         this.transitionOff = true;
diff --git a/src/components/mdList/mdListItemLink.vue b/src/components/mdList/mdListItemLink.vue
index b59707f..6af936f 100644
--- a/src/components/mdList/mdListItemLink.vue
+++ b/src/components/mdList/mdListItemLink.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="md-list-item" :class="classes">
-    <a class="md-list-item-container md-button" :href="href" :target="target" :disabled="disabled">
+    <a class="md-list-item-container md-button" :href="href" :target="target" @click="$emit('click', $event)" :disabled="disabled">
       <slot />
     </a>
 
diff --git a/src/components/mdMenu/mdMenuItem.vue b/src/components/mdMenu/mdMenuItem.vue
index b3bb535..8fdce2b 100644
--- a/src/components/mdMenu/mdMenuItem.vue
+++ b/src/components/mdMenu/mdMenuItem.vue
@@ -1,7 +1,7 @@
 <template>
   <md-list-item
     class="md-menu-item"
-    @click.native="close"
+    @click="close"
     :class="classes"
     :href="href"
     :target="target"
@@ -62,6 +62,7 @@
             this.parentContent.close();
           }
 
+          this.$emit('click', $event);
           this.$emit('selected', $event);
         }
       }
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index ff3483d..9e15812 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -13,7 +13,7 @@
 
       <md-button
         v-if="mdControls"
-        @click.native="movePrevBoard()">
+        @click="movePrevBoard()">
         <div class="md-board-header-container">
           <md-icon class="md-control">chevron_left</md-icon>
         </div>
@@ -34,12 +34,12 @@
           <md-icon>fiber_manual_record</md-icon>
         </div>
       </button>
-      
+
       <span style="flex: 1"></span>
 
       <md-button
         v-if="mdControls"
-        @click.native="moveNextBoard()">
+        @click="moveNextBoard()">
         <div class="md-board-header-container">
           <md-icon class="md-control">chevron_right</md-icon>
         </div>
@@ -277,7 +277,7 @@
           this.setActiveBoard(this.boardList[target], true);
         } else if (this.mdInfinite) {
           let firstBoard = Object.keys(this.boardList)[0];
-  
+
           this.setActiveBoard(this.boardList[firstBoard], true);
         }
       },
@@ -306,7 +306,7 @@
           const action = difference > 0
             ? 'moveNextBoard'
             : 'movePrevBoard';
-  
+
           if (Math.abs(difference) > this.mdSwipeDistance) {
             this[action]();
           }
diff --git a/src/components/mdRadio/mdRadio.scss b/src/components/mdRadio/mdRadio.scss
index 81a369d..a1ed94b 100644
--- a/src/components/mdRadio/mdRadio.scss
+++ b/src/components/mdRadio/mdRadio.scss
@@ -8,7 +8,14 @@ $radio-touch-size: 48px;
   margin: 16px 8px 16px 0;
   display: inline-flex;
   position: relative;
-  cursor: pointer;
+  
+  &:not(.md-disabled) {
+    cursor: pointer;
+
+    .md-radio-label {
+      cursor: pointer;
+    }
+  }
 
   .md-radio-container {
     width: $radio-size;
@@ -71,7 +78,6 @@ $radio-touch-size: 48px;
     height: $radio-size;
     padding-left: 8px;
     line-height: $radio-size;
-    cursor: pointer;
   }
 }
 
diff --git a/src/components/mdRadio/mdRadio.vue b/src/components/mdRadio/mdRadio.vue
index abb9b68..4d6e083 100644
--- a/src/components/mdRadio/mdRadio.vue
+++ b/src/components/mdRadio/mdRadio.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="md-radio" :class="[themeClass, classes]">
-    <div class="md-radio-container" @click="toggleCheck">
-      <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value" @click="toggleCheck">
+    <div class="md-radio-container" @click.stop="toggleCheck">
+      <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
       <md-ink-ripple :md-disabled="disabled" />
     </div>
 
-    <label :for="id || name" class="md-radio-label" v-if="$slots.default">
+    <label :for="id || name" class="md-radio-label" v-if="$slots.default" @click="toggleCheck">
       <slot></slot>
     </label>
   </div>
diff --git a/src/components/mdSelect/mdOption.vue b/src/components/mdSelect/mdOption.vue
index ff79aa2..d401be9 100644
--- a/src/components/mdSelect/mdOption.vue
+++ b/src/components/mdSelect/mdOption.vue
@@ -2,7 +2,7 @@
   <md-menu-item
     class="md-option"
     :class="classes"
-    @click.native="selectOption"
+    @click="selectOption"
     tabindex="-1">
     <md-checkbox class="md-primary" v-model="check" v-if="parentSelect.multiple">
       <span ref="item">
diff --git a/src/components/mdStepper/mdStep.vue b/src/components/mdStepper/mdStep.vue
index 1ded96a..dcc3838 100644
--- a/src/components/mdStepper/mdStep.vue
+++ b/src/components/mdStepper/mdStep.vue
@@ -3,7 +3,7 @@
     <md-step-header
       v-if="vertical"
       :step="getStepData()"
-      @click.native="setActiveStep()">
+      @click="setActiveStep()">
     </md-step-header>
     <div class="md-step-content" v-if="!vertical || (vertical && isCurrentStep)">
       <slot></slot>
@@ -102,17 +102,17 @@
         if (this.index === 0) {
           return false;
         }
-  
+
         if (!this.parentStepper) {
           return false;
         }
-  
+
         var previousStep = this.parentStepper.getPreviousStep(this.stepId);
-  
+
         if (previousStep !== undefined && !previousStep.editable) {
           return false;
         }
-  
+
         return true;
       },
       continueText() {
@@ -133,7 +133,7 @@
         if (this.vertical) {
           return {};
         }
-  
+
         return {
           width: this.width,
           left: this.left
@@ -172,16 +172,16 @@
     },
     mounted() {
       let stepData = this.getStepData();
-  
+
       this.parentStepper = getClosestVueParent(this.$parent, 'md-stepper');
-  
+
       if (!this.parentStepper) {
         throw new Error('You must wrap the md-step in a md-stepper');
       }
 
       this.mounted = true;
       this.parentStepper.updateStep(stepData);
-  
+
       if (this.mdActive) {
         this.parentStepper.setActiveStep(stepData);
       }
diff --git a/src/components/mdStepper/mdStepper.scss b/src/components/mdStepper/mdStepper.scss
index dd312a7..45d3b50 100644
--- a/src/components/mdStepper/mdStepper.scss
+++ b/src/components/mdStepper/mdStepper.scss
@@ -25,7 +25,7 @@
       display: inline-block;
       vertical-align: middle;
     }
-    
+
     &.md-has-sub-message {
       padding: 15px 24px;
 
@@ -52,7 +52,7 @@
       display: inline-block;
       font-size: 12px;
       margin-right: 8px;
-      width: 24px; 
+      width: 24px;
 
       span {
         display: block;
@@ -64,7 +64,7 @@
     .md-step-title {
       font-size: inherit;
     }
-    
+
     &.md-disabled {
       cursor: default;
       pointer-events: none;
@@ -85,7 +85,7 @@
       height: 104px;
       min-height: 104px;
     }
-    
+
     .md-steps-navigation-container {
       display: flex;
       justify-content: space-between;
@@ -109,11 +109,7 @@
           &.md-has-sub-message {
             padding: 24px;
           }
-
-          .md-step-icon {
-            padding: 0;
-          }
-
+          
           .md-step-icons, .md-step-titles {
             display: block;
           }
@@ -131,7 +127,7 @@
     overflow: hidden;
     position: relative;
     width: 100%;
-    
+
     .md-steps-wrapper {
       bottom: 0;
       left: 0;
@@ -170,7 +166,7 @@
       &:not(:first-of-type) {
         .md-step-header {
           padding-top: 8px;
-        }    
+        }
       }
 
       .md-step-content {
@@ -187,4 +183,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/mdStepper/mdStepper.vue b/src/components/mdStepper/mdStepper.vue
index 6844af8..4bc163b 100644
--- a/src/components/mdStepper/mdStepper.vue
+++ b/src/components/mdStepper/mdStepper.vue
@@ -7,7 +7,7 @@
           :key="step.id"
           :step="step"
           :md-alternate-labels="mdAlternateLabels"
-          @click.native="setActiveStep(step)">
+          @click="setActiveStep(step)">
         </md-step-header>
       </md-step-header-container>
     </md-whiteframe>
@@ -77,32 +77,32 @@
         if (currentIndex === this.stepList.length) {
           return undefined;
         }
-  
+
         var nextStepId = Object.keys(this.stepList)[currentIndex + 1];
         var nextStep = this.stepList[nextStepId];
-  
+
         return nextStep;
       },
       getPreviousStep(id) {
         var currentIndex = this.getStepIndex(id);
-  
+
         if (currentIndex === 0) {
           return undefined;
         }
 
         var previousStepId = Object.keys(this.stepList)[currentIndex - 1];
         var previousStep = this.stepList[previousStepId];
-  
+
         return previousStep;
       },
       getStepsCount() {
         const idList = Object.keys(this.stepList);
-  
+
         return idList.length;
       },
       getStepIndex(id) {
         const idList = Object.keys(this.stepList);
-  
+
         return idList.indexOf(id);
       },
       registerStep(stepData) {
@@ -111,7 +111,7 @@
       moveNextStep() {
         if (this.activeStepNumber < this.getStepsCount() - 1) {
           var nextStep = this.getNextStep(this.activeStep);
-  
+
           this.setActiveStep(nextStep);
         } else {
           this.$emit('completed');
@@ -120,7 +120,7 @@
       movePreviousStep() {
         if (this.activeStepNumber > 0 && this.activeStepNumber < this.getStepsCount()) {
           var prevStep = this.getPreviousStep(this.activeStep);
-  
+
           this.setActiveStep(prevStep);
         }
       },
@@ -128,7 +128,7 @@
         if (this.activeStepNumber > this.getStepIndex(stepData.id) && !stepData.editable) {
           return;
         }
-  
+
         this.activeStep = stepData.id;
         this.activeStepNumber = this.getStepIndex(this.activeStep);
         this.calculatePosition();
@@ -186,7 +186,7 @@
         this.$nextTick(() => {
           if (!this.mdVertical && Object.keys(this.stepList).length) {
             let height = this.stepList[this.activeStep].ref.$el.offsetHeight;
-  
+
             this.contentHeight = height + 'px';
           } else {
             this.contentHeight = 'initial';
diff --git a/src/components/mdTable/mdTableHead.vue b/src/components/mdTable/mdTableHead.vue
index edb084f..20fc782 100644
--- a/src/components/mdTable/mdTableHead.vue
+++ b/src/components/mdTable/mdTableHead.vue
@@ -68,7 +68,7 @@
       initSort() {
         if (this.hasMatchSort()) {
           this.sorted = true;
-          this.sortType = this.parentTable.sortType;
+          this.sortType = this.parentTable.sortType || 'asc';
         }
       }
     },
diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue
index c3063f3..5fa47d3 100644
--- a/src/components/mdTable/mdTablePagination.vue
+++ b/src/components/mdTable/mdTablePagination.vue
@@ -8,11 +8,11 @@
 
     <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ mdTotal }}</span>
 
-    <md-button class="md-icon-button md-table-pagination-previous" @click.native="previousPage" :disabled="currentPage === 1">
+    <md-button class="md-icon-button md-table-pagination-previous" @click="previousPage" :disabled="currentPage === 1">
       <md-icon>keyboard_arrow_left</md-icon>
     </md-button>
 
-    <md-button class="md-icon-button md-table-pagination-next" @click.native="nextPage" :disabled="shouldDisable">
+    <md-button class="md-icon-button md-table-pagination-next" @click="nextPage" :disabled="shouldDisable">
       <md-icon>keyboard_arrow_right</md-icon>
     </md-button>
   </div>
diff --git a/src/components/mdTable/mdTableRow.vue b/src/components/mdTable/mdTableRow.vue
index 346b98e..f5effce 100644
--- a/src/components/mdTable/mdTableRow.vue
+++ b/src/components/mdTable/mdTableRow.vue
@@ -65,7 +65,7 @@
       },
       handleSingleSelection(value) {
         this.parentTable.setRowSelection(value, this.mdItem);
-        this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.rowsCounter;
+        this.parentTable.$children[0].checkbox = this.parentTable.numberOfSelected === this.parentTable.numberOfRows;
       },
       handleMultipleSelection(value) {
         if (this.parentTable.numberOfRows > 25) {
diff --git a/src/components/mdTabs/mdTab.vue b/src/components/mdTabs/mdTab.vue
index 45325c8..6d29253 100644
--- a/src/components/mdTabs/mdTab.vue
+++ b/src/components/mdTabs/mdTab.vue
@@ -14,6 +14,7 @@
       id: [String, Number],
       mdLabel: [String, Number],
       mdIcon: String,
+      mdIconset: String,
       mdActive: Boolean,
       mdDisabled: Boolean,
       mdOptions: {
@@ -47,6 +48,9 @@
       mdIcon() {
         this.updateTabData();
       },
+      mdIconset() {
+        this.updateTabData();
+      },
       mdOptions: {
         deep: true,
         handler() {
@@ -80,6 +84,7 @@
           id: this.tabId,
           label: this.mdLabel,
           icon: this.mdIcon,
+          iconset: this.mdIconset,
           options: this.mdOptions,
           active: this.mdActive,
           disabled: this.mdDisabled,
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index d1333df..08c7d93 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -13,9 +13,13 @@
             @click="setActiveTab(header)"
             ref="tabHeader">
             <md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
+
             <div class="md-tab-header-container">
               <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
+              <md-icon v-else-if="header.iconset" :md-iconset="header.iconset">{{ header.icon }}</md-icon>
+
               <span v-if="header.label">{{ header.label }}</span>
+
               <md-tooltip v-if="header.tooltip" :md-direction="header.tooltipDirection" :md-delay="header.tooltipDelay">{{ header.tooltip }}</md-tooltip>
             </div>
           </button>
@@ -23,9 +27,11 @@
           <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
         </div>
       </div>
+
       <button v-if="mdNavigation && hasNavigationScroll" @click="navigationScrollLeft" class="md-tab-header-navigation-button md-left" :class="navigationLeftButtonClasses">
         <md-icon>keyboard_arrow_left</md-icon>
       </button>
+
       <button v-if="mdNavigation && hasNavigationScroll" @click="navigationScrollRight" class="md-tab-header-navigation-button md-right" :class="navigationRightButtonClasses">
         <md-icon>keyboard_arrow_right</md-icon>
       </button>
@@ -251,7 +257,7 @@
         this.hasNavigationScroll = scrollWidth > clientWidth;
       },
       setActiveTab(tabData) {
-        this.hasIcons = !!tabData.icon;
+        this.hasIcons = !!tabData.icon || !!tabData.iconset;
         this.hasLabel = !!tabData.label;
         this.activeTab = tabData.id;
         this.activeTabNumber = this.getTabIndex(this.activeTab);