diff --git a/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
index 2ebba2e6..7bb8d28d 100644
--- a/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/DefaultHeaderDropdownAccnt.spec.js.snap
@@ -3,11 +3,11 @@
 exports[`DefaultHeaderDropdownAccnt.vue renders correctly 1`] = `
 <cdropdown-stub
   addmenuclasses="c-dropdown-menu-right"
-  buttonhtml="Dropdown"
   nav="true"
   nocaret="true"
   nopopper="true"
-  variant="primary"
+  placement="bottom-start"
+  togglertext="Dropdown"
 >
    
   <cdropdownheader-stub
diff --git a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
index 5f1abeb7..7a640174 100644
--- a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
@@ -5,23 +5,39 @@ exports[`TheHeader.vue renders correctly 1`] = `
   fixed="true"
 >
   <csidebartoggler-stub
-    class="c-header-toggler c-d-lg-none"
+    class="c-header-toggler c-d-lg-none c-mr-auto"
   />
    
   <clink-stub
     activeclass="c-active"
-    class="c-header-brand"
+    class="c-header-brand,[object Object]"
     event="click"
     exactactiveclass="c-active"
     routertag="a"
     tag="span"
     target="_self"
     to="/"
-    variant="primary"
   >
     <img
       alt="CoreUI Logo"
-      class="c-navbar-brand-full"
+      class="c-navbar-brand-minimized c-d-md-down-none"
+      height="30"
+      src="img/brand/sygnet.svg"
+      style="display: none;"
+      width="30"
+    />
+     
+    <img
+      alt="CoreUI Logo"
+      class="c-navbar-brand-full c-d-md-down-none"
+      height="25"
+      src="img/brand/logo.svg"
+      width="89"
+    />
+     
+    <img
+      alt="CoreUI Logo"
+      class="c-navbar-brand-full c-d-lg-none"
       height="25"
       src="img/brand/logo.svg"
       width="89"
@@ -44,7 +60,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
       to="/dashboard"
-      variant="primary"
     >
       Dashboard
     </cnavitem-stub>
@@ -59,7 +74,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
       to="/users"
-      variant="primary"
     >
       Users
     </cnavitem-stub>
@@ -72,7 +86,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
-      variant="primary"
     >
       Settings
     </cnavitem-stub>
@@ -89,7 +102,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
-      variant="primary"
     >
       <i
         class="cui-bell"
@@ -117,7 +129,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
-      variant="primary"
     >
       <i
         class="cui-list"
@@ -132,7 +143,6 @@ exports[`TheHeader.vue renders correctly 1`] = `
       routertag="a"
       tag="span"
       target="_self"
-      variant="primary"
     >
       <i
         class="cui-location-pin"
diff --git a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
index aa20b88c..ecbbf379 100644
--- a/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheSidebar.spec.js.snap
@@ -11,12 +11,17 @@ exports[`TheSidebar.vue renders correctly 1`] = `
    
   <csidebarform-stub />
    
-  <csidebarnav-stub
-    navitems="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-  />
+  <csidebarnav-stub>
+    <ctreegenerator-stub
+      components="[object Object]"
+      items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+    />
+  </csidebarnav-stub>
    
   <csidebarfooter-stub />
    
-  <csidebarminimizer-stub />
+  <csidebarminimizer-stub
+    class="c-d-md-down-none"
+  />
 </csidebar-stub>
 `;
diff --git a/tests/unit/views/Dashboard.spec.js b/tests/unit/views/Dashboard.spec.js
index 699b4604..07578354 100644
--- a/tests/unit/views/Dashboard.spec.js
+++ b/tests/unit/views/Dashboard.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import { CIconPlugin } from '@coreui/icons/vue'
 import Dashboard from '@/views/Dashboard'
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
index ed9c645a..227d4225 100644
--- a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -234,7 +234,6 @@ exports[`Dashboard.vue renders correctly 1`] = `
             max="100"
             precision="1"
             value="40"
-            variant="primary"
           />
         </ccol-stub>
       </crow-stub>
@@ -941,8 +940,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
           head-variant="light"
           hover="true"
           items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
-          nosorting="true"
-          perpage="10"
+          itemsperpage="10"
+          no-sorting=""
         />
       </ccard-stub>
     </ccol-stub>
diff --git a/tests/unit/views/base/Forms.spec.js b/tests/unit/views/base/Forms.spec.js
index 5bf85172..76b3f672 100644
--- a/tests/unit/views/base/Forms.spec.js
+++ b/tests/unit/views/base/Forms.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Forms from '@/views/base/Forms'
 
diff --git a/tests/unit/views/base/Jumbotrons.spec.js b/tests/unit/views/base/Jumbotrons.spec.js
index 82cfd64a..5325e5ed 100644
--- a/tests/unit/views/base/Jumbotrons.spec.js
+++ b/tests/unit/views/base/Jumbotrons.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Jumbotrons from '@/views/base/Jumbotrons'
 
diff --git a/tests/unit/views/base/ListGroups.spec.js b/tests/unit/views/base/ListGroups.spec.js
index f8b524a6..c8cf3be1 100644
--- a/tests/unit/views/base/ListGroups.spec.js
+++ b/tests/unit/views/base/ListGroups.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import ListGroups from '@/views/base/ListGroups'
 
diff --git a/tests/unit/views/base/Navbars.spec.js b/tests/unit/views/base/Navbars.spec.js
index 00abd61a..fc6618db 100644
--- a/tests/unit/views/base/Navbars.spec.js
+++ b/tests/unit/views/base/Navbars.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Navbars from '@/views/base/Navbars'
 
diff --git a/tests/unit/views/base/Navs.spec.js b/tests/unit/views/base/Navs.spec.js
index 38254b85..12a2a717 100644
--- a/tests/unit/views/base/Navs.spec.js
+++ b/tests/unit/views/base/Navs.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Navs from '@/views/base/Navs'
 
diff --git a/tests/unit/views/base/Paginations.spec.js b/tests/unit/views/base/Paginations.spec.js
index 81be6f81..eec64dec 100644
--- a/tests/unit/views/base/Paginations.spec.js
+++ b/tests/unit/views/base/Paginations.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Paginations from '@/views/base/Paginations'
 
diff --git a/tests/unit/views/base/Popovers.spec.js b/tests/unit/views/base/Popovers.spec.js
index fa7c985a..554b5833 100644
--- a/tests/unit/views/base/Popovers.spec.js
+++ b/tests/unit/views/base/Popovers.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Popovers from '@/views/base/Popovers'
 
diff --git a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
index 52dd2baf..b9c11d74 100644
--- a/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Breadcrumbs.spec.js.snap
@@ -78,12 +78,10 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
                 </a>
               </li>
               <li
-                class="c-breadcrumb-item c-active"
+                class="c-active c-breadcrumb-item"
                 role="presentation"
               >
-                <span
-                  class=""
-                >
+                <span>
                   Library
                 </span>
               </li>
@@ -129,12 +127,10 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
                 </a>
               </li>
               <li
-                class="c-breadcrumb-item c-active"
+                class="c-active c-breadcrumb-item"
                 role="presentation"
               >
-                <span
-                  class=""
-                >
+                <span>
                   Current page
                 </span>
               </li>
@@ -144,11 +140,11 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
               class="c-breadcrumb"
             >
               <li
-                class="c-breadcrumb-item"
+                class="c-font-xl c-breadcrumb-item"
                 role="presentation"
               >
                 <a
-                  class="c-font-xl"
+                  class=""
                   href="#"
                   target="_self"
                 >
@@ -156,11 +152,11 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
                 </a>
               </li>
               <li
-                class="c-breadcrumb-item"
+                class="c-font-xl c-breadcrumb-item"
                 role="presentation"
               >
                 <a
-                  class="c-font-xl"
+                  class=""
                   href="#"
                   target="_self"
                 >
@@ -168,12 +164,10 @@ exports[`Breadcrumbs.vue renders correctly 1`] = `
                 </a>
               </li>
               <li
-                class="c-breadcrumb-item c-active"
+                class="c-active c-font-xl c-text-danger c-breadcrumb-item"
                 role="presentation"
               >
-                <span
-                  class="c-font-xl c-text-danger"
-                >
+                <span>
                   Classes
                 </span>
               </li>
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
index 3692e5e6..fa3d1480 100644
--- a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -9,7 +9,7 @@ exports[`Carousels.vue renders correctly 1`] = `
       class="c-row"
     >
       <div
-        class="c-col-md-12 c-col-lg-9"
+        class="c-col-md-12 c-col-lg-7"
       >
         <div
           class="c-card"
@@ -73,7 +73,7 @@ exports[`Carousels.vue renders correctly 1`] = `
                   class="c-carousel-item c-active"
                 >
                   <img
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
                     src="https://lorempixel.com/1024/480/technics/2/"
                   />
                   <div
@@ -92,7 +92,7 @@ exports[`Carousels.vue renders correctly 1`] = `
                   class="c-carousel-item"
                 >
                   <svg
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
                     style="background-color: grey;"
                   />
                   <div
@@ -111,19 +111,10 @@ exports[`Carousels.vue renders correctly 1`] = `
                   class="c-carousel-item"
                 >
                   <img
-                    class="c-d-block c-w-100 c-h-100 c-img-fluid c-mx-auto"
+                    class="c-d-block c-w-100 c-h-100 c-img-fluid"
                     src="https://lorempixel.com/1024/480/technics/8/"
                   />
-                  <div
-                    class="c-carousel-caption"
-                  >
-                    <h3>
-                      
-                    </h3>
-                    <p>
-                      
-                    </p>
-                  </div>
+                  <!---->
                 </div>
               </div>
               <a
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
index 99e6dc23..379a955a 100644
--- a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -58,7 +58,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Cras justo odio
               </clistgroupitem-stub>
@@ -70,7 +69,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Dapibus ac facilisis in
               </clistgroupitem-stub>
@@ -82,7 +80,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Morbi leo risus
               </clistgroupitem-stub>
@@ -94,7 +91,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Porta ac consectetur ac
               </clistgroupitem-stub>
@@ -106,7 +102,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Vestibulum at eros
               </clistgroupitem-stub>
@@ -152,7 +147,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Cras justo odio
               </clistgroupitem-stub>
@@ -165,7 +159,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Dapibus ac facilisis in
               </clistgroupitem-stub>
@@ -177,7 +170,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Morbi leo risus
               </clistgroupitem-stub>
@@ -189,7 +181,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Porta ac consectetur ac
               </clistgroupitem-stub>
@@ -201,7 +192,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Vestibulum at eros
               </clistgroupitem-stub>
@@ -252,7 +242,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Cras justo odio
               </clistgroupitem-stub>
@@ -264,7 +253,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Dapibus ac facilisis in
               </clistgroupitem-stub>
@@ -276,7 +264,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Morbi leo risus
               </clistgroupitem-stub>
@@ -289,7 +276,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Porta ac consectetur ac
               </clistgroupitem-stub>
@@ -301,7 +287,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Vestibulum at eros
               </clistgroupitem-stub>
@@ -350,7 +335,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Awesome link
               </clistgroupitem-stub>
@@ -364,7 +348,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Link with active state
               </clistgroupitem-stub>
@@ -377,7 +360,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Action links are easy
               </clistgroupitem-stub>
@@ -391,7 +373,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 Disabled link
               </clistgroupitem-stub>
@@ -441,7 +422,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="button"
                 target="_self"
-                variant="primary"
               >
                 Button item
               </clistgroupitem-stub>
@@ -453,7 +433,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="button"
                 target="_self"
-                variant="primary"
               >
                 I am a button
               </clistgroupitem-stub>
@@ -466,7 +445,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="button"
                 target="_self"
-                variant="primary"
               >
                 Disabled button
               </clistgroupitem-stub>
@@ -478,7 +456,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="button"
                 target="_self"
-                variant="primary"
               >
                 This is a button too
               </clistgroupitem-stub>
@@ -527,7 +504,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 
                 Cras justo odio
@@ -554,7 +530,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 
                 Dapibus ac facilisis in
@@ -581,7 +556,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 
                 Morbi leo risus
@@ -645,7 +619,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 This is a default list group item
               </clistgroupitem-stub>
@@ -790,7 +763,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 This is a default list group item
               </clistgroupitem-stub>
@@ -953,7 +925,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Cras justo odio
                   </clistgroupitem-stub>
@@ -966,7 +937,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Dapibus ac facilisis in
                   </clistgroupitem-stub>
@@ -979,7 +949,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Vestibulum at eros
                   </clistgroupitem-stub>
@@ -1014,7 +983,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Cras justo odio
                   </clistgroupitem-stub>
@@ -1027,7 +995,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Dapibus ac facilisis in
                   </clistgroupitem-stub>
@@ -1040,7 +1007,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                     routertag="a"
                     tag="div"
                     target="_self"
-                    variant="primary"
                   >
                     Vestibulum at eros
                   </clistgroupitem-stub>
@@ -1105,7 +1071,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 <div
                   class="c-d-flex c-w-100 c-justify-content-between"
@@ -1144,7 +1109,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 <div
                   class="c-d-flex c-w-100 c-justify-content-between"
@@ -1188,7 +1152,6 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 routertag="a"
                 tag="div"
                 target="_self"
-                variant="primary"
               >
                 <div
                   class="c-d-flex c-w-100 c-justify-content-between"
diff --git a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
index f2539af1..2f06c0d9 100644
--- a/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navbars.spec.js.snap
@@ -77,7 +77,6 @@ exports[`Navbars.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Link
               </cnavitem-stub>
@@ -91,7 +90,6 @@ exports[`Navbars.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Disabled
               </cnavitem-stub>
@@ -130,10 +128,10 @@ exports[`Navbars.vue renders correctly 1`] = `
               </cform-stub>
                
               <cdropdown-stub
-                buttonhtml="Lang"
+                button-html="Lang"
                 nav="true"
                 placement="bottom-end"
-                variant="primary"
+                togglertext="Dropdown"
               >
                 <cdropdownitem-stub
                   activeclass="c-active"
@@ -180,7 +178,7 @@ exports[`Navbars.vue renders correctly 1`] = `
                 buttonhtml=<em>User</em>
                 nav="true"
                 placement="bottom-end"
-                variant="primary"
+                togglertext="Dropdown"
               >
                 <cdropdownitem-stub
                   activeclass="c-active"
@@ -369,7 +367,6 @@ exports[`Navbars.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Home
               </cnavitem-stub>
@@ -382,16 +379,16 @@ exports[`Navbars.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Link
               </cnavitem-stub>
                
               <cdropdown-stub
-                buttonhtml="Lang"
+                button-html="Lang"
                 nav="true"
+                placement="bottom-start"
                 right=""
-                variant="primary"
+                togglertext="Dropdown"
               >
                 <cdropdownitem-stub
                   activeclass="c-active"
@@ -435,10 +432,11 @@ exports[`Navbars.vue renders correctly 1`] = `
               </cdropdown-stub>
                
               <cdropdown-stub
-                buttonhtml="User"
+                button-html="User"
                 nav="true"
+                placement="bottom-start"
                 right=""
-                variant="primary"
+                togglertext="Dropdown"
               >
                 <cdropdownitem-stub
                   activeclass="c-active"
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index 204a5c19..0fae376c 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -51,7 +51,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Active
           </cnavitem-stub>
@@ -64,7 +63,6 @@ exports[`Navs.vue renders correctly 1`] = `
             tag="span"
             target="_self"
             title="Link"
-            variant="primary"
           />
            
           <cnavitem-stub
@@ -74,7 +72,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Another Link
           </cnavitem-stub>
@@ -87,7 +84,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -129,7 +125,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             <i
               class="cui-basket-loaded"
@@ -143,7 +138,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             
             Link
@@ -157,7 +151,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             
             Another Link
@@ -172,7 +165,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -216,7 +208,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             
             Active
@@ -230,7 +221,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             
             Link
@@ -244,7 +234,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             
             Another Link
@@ -259,7 +248,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -303,7 +291,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Active
           </cnavitem-stub>
@@ -315,7 +302,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link
           </cnavitem-stub>
@@ -327,7 +313,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Another Link
           </cnavitem-stub>
@@ -340,7 +325,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -385,7 +369,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Active
           </cnavitem-stub>
@@ -397,7 +380,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link
           </cnavitem-stub>
@@ -409,7 +391,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link with a long name 
           </cnavitem-stub>
@@ -422,7 +403,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -467,7 +447,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Active
           </cnavitem-stub>
@@ -479,7 +458,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link
           </cnavitem-stub>
@@ -491,7 +469,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link with a long name 
           </cnavitem-stub>
@@ -504,7 +481,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Disabled
           </cnavitem-stub>
@@ -548,7 +524,6 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Active
           </cnavitem-stub>
@@ -560,18 +535,16 @@ exports[`Navs.vue renders correctly 1`] = `
             routertag="a"
             tag="span"
             target="_self"
-            variant="primary"
           >
             Link
           </cnavitem-stub>
            
           <cdropdown-stub
             button-content="Dropdown"
-            buttonhtml="Dropdown"
             id="nav7_ddown"
             nav="true"
             placement="bottom-end"
-            variant="primary"
+            togglertext="Dropdown"
           >
             <cdropdownitem-stub
               activeclass="c-active"
@@ -654,7 +627,6 @@ exports[`Navs.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Active
               </cnavitem-stub>
@@ -666,7 +638,6 @@ exports[`Navs.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Link
               </cnavitem-stub>
@@ -678,7 +649,6 @@ exports[`Navs.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Another Link
               </cnavitem-stub>
@@ -691,7 +661,6 @@ exports[`Navs.vue renders correctly 1`] = `
                 routertag="a"
                 tag="span"
                 target="_self"
-                variant="primary"
               >
                 Disabled
               </cnavitem-stub>
diff --git a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
index 096c349e..52cc0525 100644
--- a/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ProgressBars.spec.js.snap
@@ -49,7 +49,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showprogress="true"
           value="73"
-          variant="primary"
         />
          
         <cprogress-stub
@@ -57,7 +56,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           showvalue="true"
-          variant="primary"
         >
           <cprogressbar-stub
             max="100"
@@ -131,7 +129,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="50"
           precision="0"
           value="33.333333333"
-          variant="primary"
         />
          
         <h6>
@@ -144,7 +141,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showvalue="true"
           value="33.333333333"
-          variant="primary"
         />
          
         <h6>
@@ -157,7 +153,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showprogress="true"
           value="33.333333333"
-          variant="primary"
         />
          
         <h6>
@@ -170,7 +165,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="2"
           showvalue="true"
           value="33.333333333"
-          variant="primary"
         />
          
         <h6>
@@ -183,7 +177,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="2"
           showprogress="true"
           value="33.333333333"
-          variant="primary"
         />
       </ccardbody-stub>
     </ccard-stub>
@@ -222,7 +215,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           value="75"
-          variant="primary"
         />
          
         <h6>
@@ -234,7 +226,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           value="75"
-          variant="primary"
         />
          
         <cprogress-stub
@@ -242,7 +233,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           value="75"
-          variant="primary"
         />
          
         <cprogress-stub
@@ -250,7 +240,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           value="75"
-          variant="primary"
         />
       </ccardbody-stub>
     </ccard-stub>
@@ -290,7 +279,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showprogress="true"
           value="75"
-          variant="primary"
         />
          
         <h6>
@@ -304,7 +292,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showprogress="true"
           value="75"
-          variant="primary"
         />
          
         <cprogress-stub
@@ -314,7 +301,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showprogress="true"
           value="75"
-          variant="primary"
         />
          
         <cprogress-stub
@@ -322,7 +308,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           value="75"
-          variant="primary"
         />
       </ccardbody-stub>
     </ccard-stub>
@@ -681,7 +666,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           class="c-mb-3"
           max="100"
           precision="0"
-          variant="primary"
         >
           <cprogressbar-stub
             max="100"
@@ -710,7 +694,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           max="100"
           precision="0"
           showprogress="true"
-          variant="primary"
         >
           <cprogressbar-stub
             max="100"
@@ -740,7 +723,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           precision="0"
           showvalue="true"
           striped="true"
-          variant="primary"
         >
           <cprogressbar-stub
             max="100"
@@ -768,7 +750,6 @@ exports[`ProgressBars.vue renders correctly 1`] = `
           class="c-mb-3"
           max="100"
           precision="0"
-          variant="primary"
         >
           <cprogressbar-stub
             max="100"
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index 0c7ed954..d5819a51 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -2812,8 +2812,8 @@ exports[`Switches.vue renders correctly 1`] = `
             fields="[object Object],[object Object],[object Object]"
             hover="true"
             items="[object Object],[object Object],[object Object]"
-            nosorting="true"
-            perpage="10"
+            itemsperpage="10"
+            no-sorting=""
             striped="true"
           />
         </ccardbody-stub>
diff --git a/tests/unit/views/base/__snapshots__/Table.spec.js.snap b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
index 6c388b43..3e48f2a8 100644
--- a/tests/unit/views/base/__snapshots__/Table.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
@@ -10,8 +10,9 @@ exports[`Table.vue renders correctly 1`] = `
   <ctable-stub
     defaultsorter="[object Object]"
     fields="username,registered,role,status"
+    itemsperpage="10"
     pagination="true"
-    perpage="5"
+    per-page="5"
   />
 </ccard-stub>
 `;
diff --git a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
index 2cf957be..19c62928 100644
--- a/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Tables.spec.js.snap
@@ -52,9 +52,10 @@ exports[`Tables.vue renders correctly 1`] = `
             hover="true"
             indexcolumn="true"
             items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+            itemsperpage="10"
             optionsrow="true"
             pagination="true"
-            perpage="6"
+            per-page="6"
           />
         </ccardbody-stub>
       </ccard-stub>
diff --git a/tests/unit/views/buttons/ButtonGroups.spec.js b/tests/unit/views/buttons/ButtonGroups.spec.js
index 4bd52a19..6d460850 100644
--- a/tests/unit/views/buttons/ButtonGroups.spec.js
+++ b/tests/unit/views/buttons/ButtonGroups.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import ButtonGroups from '@/views/buttons/ButtonGroups'
 
diff --git a/tests/unit/views/buttons/StandardButtons.spec.js b/tests/unit/views/buttons/StandardButtons.spec.js
index 76eb06cf..79267102 100644
--- a/tests/unit/views/buttons/StandardButtons.spec.js
+++ b/tests/unit/views/buttons/StandardButtons.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import StandardButtons from '@/views/buttons/StandardButtons'
 
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
index f7b0f484..fe82c252 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonDropdowns.spec.js.snap
@@ -51,15 +51,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <div>
               <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Dropdown Button"
+                class="c-m-2 c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-secondary"
                 >
-                  Dropdown
+                  Dropdown Button
                 </button>
                 <!---->
                 <div
@@ -122,15 +121,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div>
               <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Dropdown with divider"
+                class="c-m-2 c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-secondary"
                 >
-                  Dropdown
+                  Dropdown with divider
                 </button>
                 <!---->
                 <div
@@ -173,15 +171,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
              
             <div>
               <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Dropdown with header"
+                class="c-m-2 c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-secondary"
                 >
-                  Dropdown
+                  Dropdown with header
                 </button>
                 <!---->
                 <div
@@ -248,15 +245,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <div>
               <div
-                class="c-m-2 c-d-inline-block c-dropdown c-btn-group"
-                toggler-text="Left align"
+                class="c-m-2 c-d-inline-block c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-primary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-primary"
                 >
-                  Dropdown
+                  Left align
                 </button>
                 <!---->
                 <div
@@ -292,15 +288,104 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               </div>
                
               <div
-                class="c-m-2 c-d-inline-block c-dropdown c-btn-group"
-                toggler-text="Right align"
+                class="c-m-2 c-d-inline-block c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-primary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-primary"
                 >
-                  Dropdown
+                  Right align
+                </button>
+                <!---->
+                <div
+                  class="c-dropdown-menu"
+                >
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="c-m-2 c-dropup"
+              >
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="c-btn c-dropdown-toggle c-btn-info"
+                >
+                  Drop-Up
+                </button>
+                <!---->
+                <div
+                  class="c-dropdown-menu"
+                >
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Action
+                  </a>
+                   
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Another action
+                  </a>
+                   
+                  <a
+                    class="c-dropdown-item"
+                    href="#"
+                    role="menuitem"
+                    target="_self"
+                  >
+                    Something else here
+                  </a>
+                </div>
+              </div>
+            </div>
+             
+            <div>
+              <div
+                class="c-m-2 c-dropdown"
+              >
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="c-btn c-dropdown-toggle c-btn-secondary"
+                >
+                  Offset Dropdown
                 </button>
                 <!---->
                 <div
@@ -339,109 +424,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <div>
               <div
                 class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Drop-Up"
               >
                 <button
-                  aria-haspopup="true"
-                  class="c-btn c-btn-info c-dropdown-toggle"
-                  style="cursor: pointer;"
-                >
-                  Dropdown
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-            </div>
-             
-            <div>
-              <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Offset Dropdown"
-              >
-                <button
-                  aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle"
-                  style="cursor: pointer;"
-                >
-                  Dropdown
-                </button>
-                <!---->
-                <div
-                  class="c-dropdown-menu"
-                >
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Another action
-                  </a>
-                   
-                  <a
-                    class="c-dropdown-item"
-                    href="#"
-                    role="menuitem"
-                    target="_self"
-                  >
-                    Something else here
-                  </a>
-                </div>
-              </div>
-            </div>
-             
-            <div>
-              <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Split Dropdown"
-              >
-                <button
-                  aria-haspopup="true"
                   class="c-btn c-btn-secondary"
-                  style="cursor: pointer;"
                 >
-                  Dropdown
+                  Split Dropdown
                 </button>
                 <button
-                  class="c-btn c-btn-secondary c-dropdown-toggle c-dropdown-toggle-split"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-secondary"
                 />
                 <div
                   class="c-dropdown-menu"
@@ -514,14 +506,20 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <div>
               <div
-                class="c-dropdown c-btn-group"
+                class="c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-link c-btn-lg"
-                  style="cursor: pointer;"
+                  class="c-btn c-btn-lg c-btn-link"
                 >
-                  Dropdown
+                  
+                  🔍
+                  <span
+                    class="sr-only"
+                  >
+                    Search
+                  </span>
                 </button>
                 <!---->
                 <div
@@ -592,15 +590,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <div>
               <div
-                class="c-m-2 c-d-inline-block c-dropdown c-btn-group"
-                toggler-text="Large"
+                class="c-m-2 c-d-inline-block c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle c-btn-lg"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-lg c-btn-secondary"
                 >
-                  Dropdown
+                  Large
                 </button>
                 <!---->
                 <div
@@ -637,17 +634,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                
               <div
                 class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Large Split"
               >
                 <button
-                  aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-btn-lg"
-                  style="cursor: pointer;"
+                  class="c-btn c-btn-lg c-btn-secondary"
                 >
-                  Dropdown
+                  Large Split
                 </button>
                 <button
-                  class="c-btn c-btn-secondary c-btn-lg c-dropdown-toggle c-dropdown-toggle-split"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-lg c-btn-secondary"
                 />
                 <div
                   class="c-dropdown-menu"
@@ -684,15 +680,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
               <br />
                
               <div
-                class="c-m-2 c-d-inline-block c-dropdown c-btn-group"
-                toggler-text="Small"
+                class="c-m-2 c-d-inline-block c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-dropdown-toggle c-btn-sm"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-sm c-btn-secondary"
                 >
-                  Dropdown
+                  Small
                 </button>
                 <!---->
                 <div
@@ -729,17 +724,16 @@ exports[`Dropdowns.vue renders correctly 1`] = `
                
               <div
                 class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Small Split"
               >
                 <button
-                  aria-haspopup="true"
-                  class="c-btn c-btn-secondary c-btn-sm"
-                  style="cursor: pointer;"
+                  class="c-btn c-btn-sm c-btn-secondary"
                 >
-                  Dropdown
+                  Small Split
                 </button>
                 <button
-                  class="c-btn c-btn-secondary c-btn-sm c-dropdown-toggle c-dropdown-toggle-split"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="c-dropdown-toggle c-dropdown-toggle-split c-btn c-btn-sm c-btn-secondary"
                 />
                 <div
                   class="c-dropdown-menu"
@@ -812,15 +806,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <div>
               <div
-                class="c-m-2 c-dropdown c-btn-group"
-                toggler-text="Dropdown ARIA"
+                class="c-m-2 c-dropdown"
               >
                 <button
+                  aria-expanded="false"
                   aria-haspopup="true"
-                  class="c-btn c-btn-primary c-dropdown-toggle"
-                  style="cursor: pointer;"
+                  class="c-btn c-dropdown-toggle c-btn-primary"
                 >
-                  Dropdown
+                  Dropdown ARIA
                 </button>
                 <!---->
                 <div
@@ -940,15 +933,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             <!---->
             <!---->
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Primary"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-primary c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-primary"
               >
-                Dropdown
+                Primary
               </button>
               <!---->
               <div
@@ -984,15 +976,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Secondary"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-secondary c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-secondary"
               >
-                Dropdown
+                Secondary
               </button>
               <!---->
               <div
@@ -1028,15 +1019,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Success"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-success c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-success"
               >
-                Dropdown
+                Success
               </button>
               <!---->
               <div
@@ -1072,15 +1062,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Warning"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-warning c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-warning"
               >
-                Dropdown
+                Warning
               </button>
               <!---->
               <div
@@ -1116,15 +1105,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Danger"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-danger c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-danger"
               >
-                Dropdown
+                Danger
               </button>
               <!---->
               <div
@@ -1160,15 +1148,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Info"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-info c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-info"
               >
-                Dropdown
+                Info
               </button>
               <!---->
               <div
@@ -1204,15 +1191,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Light"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-light c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-light"
               >
-                Dropdown
+                Light
               </button>
               <!---->
               <div
@@ -1248,15 +1234,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Dark"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-dark c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-dark"
               >
-                Dropdown
+                Dark
               </button>
               <!---->
               <div
@@ -1292,15 +1277,14 @@ exports[`Dropdowns.vue renders correctly 1`] = `
             </div>
              
             <div
-              class="c-m-0 c-d-inline-block c-dropdown c-btn-group"
-              toggler-text="Link"
+              class="c-m-0 c-d-inline-block c-dropdown"
             >
               <button
+                aria-expanded="false"
                 aria-haspopup="true"
-                class="c-btn c-btn-link c-dropdown-toggle c-btn-sm"
-                style="cursor: pointer;"
+                class="c-btn c-dropdown-toggle c-btn-sm c-btn-link"
               >
-                Dropdown
+                Link
               </button>
               <!---->
               <div
diff --git a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
index a9d5d669..69efc759 100644
--- a/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/ButtonGroups.spec.js.snap
@@ -406,9 +406,10 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
                 </cbutton-stub>
                  
                 <cdropdown-stub
-                  buttonhtml="Dropdown"
+                  placement="bottom-start"
                   right=""
                   text="Menu"
+                  togglertext="Dropdown"
                   variant="success"
                 >
                   <cdropdownitem-stub
@@ -460,10 +461,11 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
                 </cbutton-stub>
                  
                 <cdropdown-stub
-                  buttonhtml="Dropdown"
+                  placement="bottom-start"
                   right=""
                   split="true"
                   text="Split Menu"
+                  togglertext="Dropdown"
                   variant="info"
                 >
                   <cdropdownitem-stub
@@ -848,9 +850,9 @@ exports[`ButtonGroups.vue renders correctly 1`] = `
                  
                 <cdropdown-stub
                   button-content="Menu"
-                  buttonhtml="Dropdown"
                   class="c-mx-1"
                   placement="bottom-end"
+                  togglertext="Dropdown"
                   variant="secondary"
                 >
                   <cdropdownitem-stub
diff --git a/tests/unit/views/icons/CoreUIIcons.spec.js b/tests/unit/views/icons/CoreUIIcons.spec.js
index 7db0a903..2993a58b 100644
--- a/tests/unit/views/icons/CoreUIIcons.spec.js
+++ b/tests/unit/views/icons/CoreUIIcons.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import CoreUIIcons from '@/views/icons/CoreUIIcons'
 
diff --git a/tests/unit/views/icons/Flags.spec.js b/tests/unit/views/icons/Flags.spec.js
index 4dcedc94..a2b6b5a0 100644
--- a/tests/unit/views/icons/Flags.spec.js
+++ b/tests/unit/views/icons/Flags.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import { CIconPlugin } from '@coreui/icons/vue'
 import Flags from '@/views/icons/Flags'
diff --git a/tests/unit/views/notifications/Alerts.spec.js b/tests/unit/views/notifications/Alerts.spec.js
index a366d657..5410e738 100644
--- a/tests/unit/views/notifications/Alerts.spec.js
+++ b/tests/unit/views/notifications/Alerts.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Alerts from '@/views/notifications/Alerts'
 
diff --git a/tests/unit/views/notifications/Modals.spec.js b/tests/unit/views/notifications/Modals.spec.js
index 34f9fcf9..dca62498 100644
--- a/tests/unit/views/notifications/Modals.spec.js
+++ b/tests/unit/views/notifications/Modals.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Modals from '@/views/notifications/Modals'
 
diff --git a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
index 75b9f18e..8bd7ae12 100644
--- a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
@@ -272,7 +272,6 @@ exports[`Alerts.vue renders correctly 1`] = `
                   routertag="a"
                   tag="span"
                   target="_self"
-                  variant="primary"
                 >
                   an example link
                 </clink-stub>
@@ -371,7 +370,7 @@ exports[`Alerts.vue renders correctly 1`] = `
             titletag="h4"
           >
             <calert-stub
-              closebutton=""
+              closebutton="true"
               show="true"
               variant="secondary"
             >
@@ -381,7 +380,7 @@ exports[`Alerts.vue renders correctly 1`] = `
             </calert-stub>
              
             <calert-stub
-              closebutton=""
+              closebutton="true"
               fade="true"
               show="true"
               variant="secondary"
@@ -438,7 +437,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           >
             <div>
               <calert-stub
-                closebutton=""
+                closebutton="true"
                 fade="true"
                 show="10"
                 variant="warning"
@@ -454,7 +453,7 @@ exports[`Alerts.vue renders correctly 1`] = `
               </calert-stub>
                
               <calert-stub
-                closebutton=""
+                closebutton="true"
                 show="10"
                 variant="info"
               >
diff --git a/tests/unit/views/users/User.spec.js b/tests/unit/views/users/User.spec.js
index e120eb11..78cebe96 100644
--- a/tests/unit/views/users/User.spec.js
+++ b/tests/unit/views/users/User.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
 import VueRouter from 'vue-router'
 import CoreuiVue from '@coreui/vue'
 import User from '@/views/users/User'
diff --git a/tests/unit/views/users/Users.spec.js b/tests/unit/views/users/Users.spec.js
index 59ee7fb7..32301ea6 100644
--- a/tests/unit/views/users/Users.spec.js
+++ b/tests/unit/views/users/Users.spec.js
@@ -1,4 +1,4 @@
-import { createLocalVue, shallowMount, mount } from '@vue/test-utils'
+import { createLocalVue, shallowMount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Users from '@/views/users/Users'
 import VueRouter from 'vue-router';
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
index 8fc72c67..cd9c098e 100644
--- a/tests/unit/views/users/__snapshots__/User.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -29,7 +29,7 @@ exports[`User.vue renders correctly 1`] = `
           fields="[object Object],[object Object]"
           fixed="true"
           items="[object Object]"
-          perpage="10"
+          itemsperpage="10"
           small="true"
           striped="true"
         />
@@ -46,7 +46,6 @@ exports[`User.vue renders correctly 1`] = `
           routertag="a"
           target="_self"
           type="button"
-          variant="primary"
         >
           Back
         </cbutton-stub>
diff --git a/tests/unit/views/users/__snapshots__/Users.spec.js.snap b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
index 125e89a8..2e3dea22 100644
--- a/tests/unit/views/users/__snapshots__/Users.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
@@ -20,8 +20,9 @@ exports[`Users.vue renders correctly 1`] = `
         fields="[object Object],[object Object],[object Object],[object Object],[object Object]"
         hover="true"
         items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
+        itemsperpage="10"
         pagination="[object Object]"
-        perpage="5"
+        per-page="5"
         striped="true"
       />
     </ccard-stub>
diff --git a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
index 361265d4..8f04d66e 100644
--- a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
+++ b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
@@ -13,7 +13,6 @@ exports[`Widgets.vue renders correctly 1`] = `
         header="89.9%"
         text="Lorem ipsum..."
         value="25"
-        variant="primary"
       >
         <cprogress-stub
           class="c-progress-xs c-my-3 c-mb-0"
@@ -213,7 +212,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="primary"
       >
@@ -232,7 +231,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="info"
       >
@@ -251,7 +250,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="warning"
       >
@@ -270,7 +269,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="danger"
       >
@@ -291,7 +290,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="primary"
       >
@@ -311,7 +310,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="info"
       >
@@ -331,7 +330,7 @@ exports[`Widgets.vue renders correctly 1`] = `
     >
       <cwidgeticon-stub
         header="$1.999,50"
-        no-icon-padding=""
+        noiconpadding="true"
         text="Income"
         variant="warning"
       >
@@ -393,7 +392,6 @@ exports[`Widgets.vue renders correctly 1`] = `
       header="28%"
       text="Returning Visitors"
       value="25"
-      variant="primary"
     >
       <cicon-stub
         height="36"