diff --git a/docs/src/pages/Introduction.vue b/docs/src/pages/Introduction.vue
index 68db730..e4432bb 100644
--- a/docs/src/pages/Introduction.vue
+++ b/docs/src/pages/Introduction.vue
@@ -1,31 +1,33 @@
 <template>
   <page-content page-title="Introduction">
     <div class="main-content">
-      <div class="button-actions">
-        <div class="example">
-          <img src="assets/vue-material-example.png" alt="Material Design">
+      <div class="introduction">
+        <div class="button-actions">
+          <div class="example">
+            <img src="assets/vue-material-example.png" alt="Material Design">
+          </div>
+
+          <div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
+
+          <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
+          <md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
         </div>
 
-        <div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
+        <div class="row">
+          <div class="column">
+            <h2 class="md-headline">Material Design</h2>
+            <p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
+          </div>
 
-        <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
-        <md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
-      </div>
+          <div class="column">
+            <h2 class="md-headline">Full-featured</h2>
+            <p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
+          </div>
 
-      <div class="row">
-        <div class="column">
-          <h2 class="md-headline">Material Design</h2>
-          <p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
-        </div>
-
-        <div class="column">
-          <h2 class="md-headline">Full-featured</h2>
-          <p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
-        </div>
-
-        <div class="column">
-          <h2 class="md-headline">Compatible</h2>
-          <p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
+          <div class="column">
+            <h2 class="md-headline">Compatible</h2>
+            <p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
+          </div>
         </div>
       </div>
     </div>
@@ -33,7 +35,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .main-content {
+  .introduction {
     max-width: 960px;
     margin: 0 auto;
   }
diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
index 97e2ca0..a65f878 100644
--- a/docs/src/pages/components/Dialog.vue
+++ b/docs/src/pages/components/Dialog.vue
@@ -528,17 +528,16 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-dialog-confirm
-                :md-title=&quot;confirm.title&quot;
-                :md-content-html=&quot;confirm.contentHtml&quot;
-                :md-ok-text=&quot;confirm.ok&quot;
-                :md-cancel-text=&quot;confirm.cancel&quot;
+              &lt;md-dialog-prompt
+                :md-title=&quot;prompt.title&quot;
+                :md-ok-text=&quot;prompt.ok&quot;
+                :md-cancel-text=&quot;prompt.cancel&quot;
                 @open=&quot;onOpen&quot;
                 @close=&quot;onClose&quot;
-                ref=&quot;dialog5&quot;&gt;
-              &lt;/md-dialog-confirm&gt;
+                ref=&quot;dialog6&quot;&gt;
+              &lt;/md-dialog-prompt&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&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;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/Switch.vue b/docs/src/pages/components/Switch.vue
index 0d92631..d922851 100644
--- a/docs/src/pages/components/Switch.vue
+++ b/docs/src/pages/components/Switch.vue
@@ -96,7 +96,21 @@
 
           <div slot="code">
             <code-block lang="xml">
+              &lt;div&gt;
+                &lt;md-switch v-model=&quot;checked0&quot; id=&quot;my-test0&quot; name=&quot;my-test0&quot;&gt;&lt;/md-switch&gt;
+              &lt;/div&gt;
 
+              &lt;div&gt;
+                &lt;md-switch v-model=&quot;checked1&quot; id=&quot;my-test1&quot; name=&quot;my-test1&quot; class=&quot;md-primary&quot;&gt;Primary Color&lt;/md-switch&gt;
+              &lt;/div&gt;
+
+              &lt;div&gt;
+                &lt;md-switch v-model=&quot;checked2&quot; id=&quot;my-test2&quot; name=&quot;my-test2&quot; class=&quot;md-warn&quot;&gt;Warn Color&lt;/md-switch&gt;
+              &lt;/div&gt;
+
+              &lt;div&gt;
+                &lt;md-switch v-model=&quot;checked3&quot; id=&quot;my-test3&quot; name=&quot;my-test3&quot; disabled&gt;Disabled&lt;/md-switch&gt;
+              &lt;/div&gt;
             </code-block>
           </div>
         </example-box>
@@ -112,7 +126,11 @@
 
           <div slot="code">
             <code-block lang="xml">
+              &lt;md-switch v-model=&quot;checked8&quot; id=&quot;my-test8&quot; name=&quot;my-test8&quot;&gt;Default&lt;/md-switch&gt;
 
+              &lt;form @click.stop.prevent=&quot;submit&quot;&gt;
+                &lt;md-switch type=&quot;submit&quot; v-model=&quot;checked9&quot; id=&quot;my-test9&quot; name=&quot;my-test9&quot; class=&quot;md-primary&quot;&gt;Submit&lt;/md-switch&gt;
+              &lt;/form&gt;
             </code-block>
           </div>
         </example-box>
@@ -138,7 +156,22 @@
 
           <div slot="code">
             <code-block lang="xml">
+              &lt;div v-md-theme=&quot;'orange'&quot;&gt;
+                &lt;md-switch v-model=&quot;checked4&quot; id=&quot;my-test4&quot; name=&quot;my-test4&quot; class=&quot;md-primary&quot;&gt;&lt;/md-switch&gt;
+              &lt;/div&gt;
 
+              &lt;div v-md-theme=&quot;'green'&quot;&gt;
+                &lt;md-switch v-model=&quot;checked5&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; class=&quot;md-primary&quot;&gt;Green Primary Color&lt;/md-switch&gt;
+              &lt;/div&gt;
+
+              &lt;div v-md-theme=&quot;'brown'&quot;&gt;
+                &lt;md-switch v-model=&quot;checked6&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; class=&quot;md-primary&quot;&gt;Brown Primary Color&lt;/md-switch&gt;
+              &lt;/div&gt;
+
+              &lt;div v-md-theme=&quot;'light-blue'&quot;&gt;
+                &lt;md-switch v-model=&quot;checked7&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; class=&quot;md-primary&quot; disabled&gt;Light Blue Primary Color Disabled&lt;/md-switch&gt;
+              &lt;/div&gt;
+            &lt;/div&gt;
             </code-block>
           </div>
         </example-box>
diff --git a/docs/src/pages/components/Whiteframe.vue b/docs/src/pages/components/Whiteframe.vue
index bd0cafb..51fc972 100644
--- a/docs/src/pages/components/Whiteframe.vue
+++ b/docs/src/pages/components/Whiteframe.vue
@@ -22,6 +22,12 @@
                 <md-table-cell><code>Number</code></md-table-cell>
                 <md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-tag</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>The generated html tag <br>Default: <code>div</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
@@ -30,7 +36,7 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-whiteframe>1dp</md-whiteframe>
+            <md-whiteframe md-tag="section">1dp</md-whiteframe>
             <md-whiteframe md-elevation="2">2dp</md-whiteframe>
             <md-whiteframe md-elevation="3">3dp</md-whiteframe>
             <md-whiteframe md-elevation="4">4dp</md-whiteframe>
@@ -58,7 +64,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-whiteframe&gt;1dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-tag=&quot;section&quot;&gt;1dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
               &lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss
index 24449e4..718735a 100644
--- a/src/components/mdDialog/mdDialog.scss
+++ b/src/components/mdDialog/mdDialog.scss
@@ -34,6 +34,8 @@
   min-width: 280px;
   max-width: 80%;
   max-height: 80%;
+  display: flex;
+  flex-flow: column;
   overflow: hidden;
   position: relative;
   z-index: 110;
@@ -67,6 +69,14 @@
 
 .md-dialog-content {
   padding: 0 24px 24px;
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  background: linear-gradient(to bottom, #fff 0, #fff 1px, transparent 1px),
+              linear-gradient(to top, #fff 0, #fff 3px, transparent 3px),
+              linear-gradient(to bottom, rgba(#000, .12) 0, rgba(#000, .12) 1px, transparent 1px),
+              linear-gradient(to top, rgba(#000, .2) 1px, rgba(#000, .2) 2px, transparent 2px);
+  background-attachment: local, local, scroll, scroll;
 
   &:first-child {
     padding-top: 24px;
@@ -91,8 +101,19 @@
   min-height: 52px;
   padding: 8px 8px 8px 24px;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
+  position: relative;
+
+  &:before {
+    height: 1px;
+    position: absolute;
+    top: -1px;
+    right: 0;
+    left: 0;
+    background-color: #fff;
+    content: " ";
+  }
 
   .md-button {
     min-width: 64px;
diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss
index f3b09d0..1a6a16f 100644
--- a/src/components/mdInputContainer/mdInputContainer.scss
+++ b/src/components/mdInputContainer/mdInputContainer.scss
@@ -62,8 +62,8 @@ $input-size: 32px;
     min-height: 32px;
     max-height: 230px;
     padding: 5px 0;
-    line-height: 1.3em;
     resize: none;
+    line-height: 1.3em;
   }
 
   .md-error {
@@ -193,7 +193,7 @@ $input-size: 32px;
   }
 
   &.md-has-select:hover {
-    .md-select:after {
+    .md-select:not(.md-disabled):after {
       color: rgba(#000, .87);
     }
   }
diff --git a/src/components/mdInputContainer/mdTextarea.vue b/src/components/mdInputContainer/mdTextarea.vue
index 3001a20..df0a895 100644
--- a/src/components/mdInputContainer/mdTextarea.vue
+++ b/src/components/mdInputContainer/mdTextarea.vue
@@ -18,6 +18,13 @@
 
   export default {
     mixins: [common],
+    watch: {
+      value() {
+        this.$nextTick(() => {
+          autosize.update(this.$el);
+        });
+      }
+    },
     mounted() {
       this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
 
diff --git a/src/components/mdSelect/mdSelect.scss b/src/components/mdSelect/mdSelect.scss
index 677d0a9..821d1d6 100644
--- a/src/components/mdSelect/mdSelect.scss
+++ b/src/components/mdSelect/mdSelect.scss
@@ -43,6 +43,16 @@ $select-height: 32px;
     }
   }
 
+  &.md-disabled {
+    pointer-events: none;
+    user-select: none;
+    user-drag: none;
+
+    &:after {
+      color: rgba(#000, .38);
+    }
+  }
+
   select {
     position: absolute;
     left: -999em;
diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue
index 94a8287..78c6f9a 100644
--- a/src/components/mdSelect/mdSelect.vue
+++ b/src/components/mdSelect/mdSelect.vue
@@ -8,7 +8,7 @@
       </md-menu-content>
     </md-menu>
 
-    <select :name="name" :id="id" :required="required" tabindex="-1">
+    <select :name="name" :id="id" :required="required" :disabled="disabled" tabindex="-1">
       <option :value="value">{{ value }}</option>
     </select>
   </div>
@@ -43,6 +43,8 @@
     },
     computed: {
       classes() {
+        console.log(this.disabled);
+
         return {
           'md-disabled': this.disabled
         };
@@ -58,9 +60,27 @@
     watch: {
       value(value) {
         this.setTextAndValue(value);
+      },
+      disabled() {
+        this.setParentDisabled();
+      },
+      required() {
+        this.setParentRequired();
+      },
+      placeholder() {
+        this.setParentPlaceholder();
       }
     },
     methods: {
+      setParentDisabled() {
+        this.parentContainer.isDisabled = this.disabled;
+      },
+      setParentRequired() {
+        this.parentContainer.isRequired = this.required;
+      },
+      setParentPlaceholder() {
+        this.parentContainer.hasPlaceholder = !!this.placeholder;
+      },
       getSingleValue(value) {
         let output = {};
 
@@ -144,6 +164,9 @@
       this.setTextAndValue(this.value);
 
       if (this.parentContainer) {
+        this.setParentDisabled();
+        this.setParentRequired();
+        this.setParentPlaceholder();
         this.parentContainer.setValue(this.value);
         this.parentContainer.hasSelect = true;
       }
diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue
index 1302c8c..205ba4f 100644
--- a/src/components/mdTable/mdTablePagination.vue
+++ b/src/components/mdTable/mdTablePagination.vue
@@ -6,13 +6,13 @@
       <md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
     </md-select>
 
-    <span>{{ (currentSize - currentSize + 1) * currentPage }}-{{ currentSize }} {{ mdSeparator }} {{ mdTotal }}</span>
+    <span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ totalItems }}</span>
 
-    <md-button class="md-icon-button md-table-pagination-previous" @click="changePage" :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="changePage" :disabled="currentSize * currentPage >= totalItems">
+    <md-button class="md-icon-button md-table-pagination-next" @click="nextPage" :disabled="currentSize * currentPage >= totalItems">
       <md-icon>keyboard_arrow_right</md-icon>
     </md-button>
   </div>
@@ -45,6 +45,7 @@
     },
     data() {
       return {
+        subTotal: 0,
         currentSize: parseInt(this.mdSize, 10),
         currentPage: parseInt(this.mdPage, 10),
         totalItems: !isNaN(this.mdTotal) && Number.MAX_SAFE_INTEGER
@@ -58,6 +59,9 @@
     methods: {
       emitPaginationEvent() {
         if (this.canFireEvents) {
+          const sub = this.currentPage * this.currentSize;
+
+          this.subTotal = sub > this.mdTotal ? this.mdTotal : sub;
           this.$emit('pagination', {
             size: this.currentSize,
             page: this.currentPage
@@ -70,8 +74,16 @@
           this.emitPaginationEvent();
         }
       },
-      changePage() {
+      previousPage() {
         if (this.canFireEvents) {
+          this.currentPage--;
+          this.$emit('page', this.currentPage);
+          this.emitPaginationEvent();
+        }
+      },
+      nextPage() {
+        if (this.canFireEvents) {
+          this.currentPage++;
           this.$emit('page', this.currentPage);
           this.emitPaginationEvent();
         }
@@ -79,6 +91,7 @@
     },
     mounted() {
       this.$nextTick(() => {
+        this.subTotal = this.currentPage * this.currentSize;
         this.mdPageOptions = this.mdPageOptions || [10, 25, 50, 100];
         this.currentSize = this.mdPageOptions[0];
         this.canFireEvents = true;
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index 07a0ab8..d14d0af 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="md-tabs" :class="tabClasses">
-    <md-whiteframe :md-elevation="mdElevation">
-      <div class="md-tabs-navigation" :class="navigationClasses" ref="tabNavigation">
-        <button
-          v-for="header in tabList"
-          :key="header.id"
-          type="button"
-          class="md-tab-header"
-          :class="getHeaderClass(header)"
-          :disabled="header.disabled"
-          @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>
-            <span v-if="header.label">{{ header.label }}</span>
-          </div>
-        </button>
+    <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
+      <button
+        v-for="header in tabList"
+        :key="header.id"
+        type="button"
+        class="md-tab-header"
+        :class="getHeaderClass(header)"
+        :disabled="header.disabled"
+        @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>
+          <span v-if="header.label">{{ header.label }}</span>
+        </div>
+      </button>
 
-        <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
-      </div>
+      <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
     </md-whiteframe>
 
     <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
@@ -128,7 +126,7 @@
           attributeOldValue: true,
           characterDataOldValue: true
         });
-        this.navigationObserver.observe(this.$refs.tabNavigation, {
+        this.navigationObserver.observe(this.$refs.tabNavigation.$el, {
           attributes: true
         });
       },
@@ -151,10 +149,15 @@
 
         this.contentWidth = width * this.activeTabNumber + 'px';
 
-        Object.values(this.tabList).forEach((tab, index) => {
+        let index = 0;
+
+        for (const tabId in this.tabList) {
+          let tab = this.tabList[tabId];
+
           tab.ref.width = width + 'px';
           tab.ref.left = width * index + 'px';
-        });
+          index++;
+        }
       },
       calculateContentHeight() {
         this.$nextTick(() => {
@@ -188,6 +191,7 @@
         this.activeTab = tabData.id;
         this.activeTabNumber = this.getTabIndex(this.activeTab);
         this.calculatePosition();
+        this.$emit('change', this.activeTabNumber);
       }
     },
     mounted() {
diff --git a/src/components/mdTooltip/mdTooltip.vue b/src/components/mdTooltip/mdTooltip.vue
index 359864b..c42a74f 100644
--- a/src/components/mdTooltip/mdTooltip.vue
+++ b/src/components/mdTooltip/mdTooltip.vue
@@ -59,11 +59,11 @@
     },
     methods: {
       removeTooltips() {
-        const tooltips = [...document.querySelectorAll('.md-tooltip')];
+        const tooltips = [...this.rootElement.querySelectorAll('.md-tooltip')];
 
         tooltips.forEach((tooltip) => {
           if (tooltip.parentNode) {
-            this.rootElement.removeChild(tooltip);
+            tooltip.parentNode.removeChild(tooltip);
           }
         });
 
diff --git a/src/components/mdWhiteframe/mdWhiteframe.vue b/src/components/mdWhiteframe/mdWhiteframe.vue
index b01de09..5d28c63 100644
--- a/src/components/mdWhiteframe/mdWhiteframe.vue
+++ b/src/components/mdWhiteframe/mdWhiteframe.vue
@@ -1,40 +1,37 @@
-<template>
-  <div class="md-whiteframe" :class="classes">
-    <slot></slot>
-  </div>
-</template>
-
 <style lang="scss" src="./mdWhiteframe.scss"></style>
 
 <script>
   export default {
     props: {
-      mdElevation: [String, Number]
-    },
-    data() {
-      return {
-        elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
-      };
-    },
-    watch: {
-      mdElevation() {
-        this.elevation = this.mdElevation;
+      mdElevation: {
+        type: [String, Number],
+        default: 1
+      },
+      mdTag: {
+        type: String,
+        default: 'div'
       }
     },
     computed: {
       classes() {
-        let numberedElevation = parseInt(this.elevation, 10);
+        let numberedElevation = parseInt(this.mdElevation, 10);
         let elevationClass = 'md-whiteframe-';
 
         if (!isNaN(numberedElevation) && typeof numberedElevation === 'number') {
           elevationClass += numberedElevation;
           elevationClass += 'dp';
-        } else if (this.elevation.indexOf('dp') > -1) {
-          elevationClass += this.elevation;
+        } else if (this.mdElevation.indexOf('dp') > -1) {
+          elevationClass += this.mdElevation;
         }
 
         return elevationClass;
       }
+    },
+    render(createElement) {
+      return createElement(this.mdTag, {
+        staticClass: 'md-whiteframe',
+        class: this.classes
+      }, this.$slots.default);
     }
   };
 </script>