Merge pull request #850 from vuematerial/develop

Develop
2026-03-16 22:10:27 +00:00 · 2017-06-22 07:56:35 -03:00 · 2017-06-22 07:56:35 -03:00 · 32233d2476
commit 32233d2476
parent aec7f58a55 909c879738
45 changed files with 252 additions and 163 deletions
--- 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> -->
--- 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>

--- 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>
--- 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>

--- 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">
--- 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;
--- 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;
--- 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">
--- 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">
--- 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;
--- 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>
--- 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>
--- 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;
--- 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;
--- 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() {
--- 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;
    }
  }
 }
--- 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 {
--- 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);
      }
    }
  };
--- 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 = {
--- 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;
  }
 }

--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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'};
-    }
  }
 }
--- 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>
--- 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>

--- 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;
--- 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>

--- 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);
        }
      }
--- 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]();
          }
--- 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;
  }
 }

--- 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>
--- 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">
--- 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);
      }
--- 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 @@
      }
    }
  }
-}
+}
--- 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';
--- 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';
        }
      }
    },
--- 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>
--- 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) {
--- 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,
--- 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);