@syncfusion/ej2-angular-navigations 21.2.9 → 22.1.34-ngcc

package/styles/tab/bootstrap5-dark.css

@@ -312,7 +312,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -1443,7 +1443,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -1456,7 +1456,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -1848,6 +1848,11 @@
   height: 32px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 42px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: unset;
 }
@@ -2234,6 +2239,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -2536,7 +2545,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 20px;
+    padding: 0 15px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -2776,7 +2785,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -2789,7 +2798,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -2999,6 +3008,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: inherit;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: inherit;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -3054,8 +3066,8 @@
   content: unset;
   display: unset;
   position: unset;
-  top: unset;
   width: unset;
+  top: unset;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -3067,6 +3079,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #ced4da;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #adb5bd;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #adb5bd;
 }
@@ -3480,6 +3495,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #6c757d;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0d6efd;
   border-radius: 4px;
@@ -3640,6 +3659,10 @@
   margin: 0;
   background: inherit;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #6c757d;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #212529;
   border-color: #0d6efd;

package/styles/tab/bootstrap5-dark.scss

@@ -1,5 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
-@import '../toolbar/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/tab/bootstrap5-dark.scss';

package/styles/tab/bootstrap5.css

@@ -312,7 +312,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -1443,7 +1443,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -1456,7 +1456,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -1848,6 +1848,11 @@
   height: 32px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 42px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: unset;
 }
@@ -2234,6 +2239,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -2536,7 +2545,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 20px;
+    padding: 0 15px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -2776,7 +2785,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -2789,7 +2798,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -2999,6 +3008,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: inherit;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: inherit;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -3054,8 +3066,8 @@
   content: unset;
   display: unset;
   position: unset;
-  top: unset;
   width: unset;
+  top: unset;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -3067,6 +3079,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #495057;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #6c757d;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #6c757d;
 }
@@ -3480,6 +3495,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #adb5bd;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0d6efd;
   border-radius: 4px;
@@ -3640,6 +3659,10 @@
   margin: 0;
   background: inherit;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #adb5bd;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #fff;
   border-color: #0d6efd;

package/styles/tab/bootstrap5.scss

@@ -1,5 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
-@import '../toolbar/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/tab/bootstrap5.scss';

package/styles/tab/fabric-dark.css

@@ -311,7 +311,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -1442,7 +1442,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -1455,7 +1455,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -1847,6 +1847,11 @@
   height: 38px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 50px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: 0;
 }
@@ -2233,6 +2238,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -2535,7 +2544,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 12px;
+    padding: 0 10px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -2775,7 +2784,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -2788,7 +2797,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -2998,6 +3007,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: inherit;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: inherit;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: rgba(248, 248, 248, 0);
 }
@@ -3053,8 +3065,8 @@
   content: "";
   display: block;
   position: absolute;
-  top: 95%;
   width: 100%;
+  top: 95%;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -3066,6 +3078,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #dadada;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #dadada;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #dadada;
 }
@@ -3479,6 +3494,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #6f6c6c;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0074cc;
   border-radius: 0;
@@ -3639,6 +3658,10 @@
   margin: 0;
   background: inherit;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #6f6c6c;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0074cc;
   border-color: #0074cc;

package/styles/tab/fabric-dark.scss

@@ -1,5 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import '../toolbar/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/tab/fabric-dark.scss';

package/styles/tab/fabric.css

@@ -316,7 +316,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -1447,7 +1447,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -1460,7 +1460,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -1852,6 +1852,11 @@
   height: 38px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 50px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: 0;
 }
@@ -2238,6 +2243,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -2540,7 +2549,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 12px;
+    padding: 0 10px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -2780,7 +2789,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -2793,7 +2802,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -3003,6 +3012,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: inherit;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: inherit;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: rgba(0, 0, 0, 0);
 }
@@ -3058,8 +3070,8 @@
   content: "";
   display: block;
   position: absolute;
-  top: 95%;
   width: 100%;
+  top: 95%;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -3071,6 +3083,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #333;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #333;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #333;
 }
@@ -3484,6 +3499,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #a6a6a6;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0078d6;
   border-radius: 0;
@@ -3644,6 +3663,10 @@
   margin: 0;
   background: inherit;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #a6a6a6;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0078d6;
   border-color: #0078d6;

package/styles/tab/fabric.scss

@@ -1,5 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import '../toolbar/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/tab/fabric.scss';

package/styles/tab/fluent-dark.css

@@ -314,7 +314,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -1445,7 +1445,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -1458,7 +1458,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -1850,6 +1850,11 @@
   height: 44px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 48px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: unset;
 }
@@ -2236,6 +2241,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -2538,7 +2547,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 20px;
+    padding: 0 15px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -2778,7 +2787,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -2791,7 +2800,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -3001,6 +3010,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: #292827;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: #292827;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: none;
 }
@@ -3056,8 +3068,8 @@
   content: unset;
   display: unset;
   position: unset;
-  top: unset;
   width: unset;
+  top: unset;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -3069,6 +3081,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #f3f2f1;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #a19f9d;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #a19f9d;
 }
@@ -3482,6 +3497,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #484644;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0078d4;
   border-radius: 0;
@@ -3642,6 +3661,10 @@
   margin: 0;
   background: #1b1a19;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #484644;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: none;
   border-color: unset;

package/styles/tab/fluent-dark.scss

@@ -1,5 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import '../toolbar/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/tab/fluent-dark.scss';