@syncfusion/ej2-navigations 29.2.8 → 30.1.39

package/styles/pager/tailwind.css

@@ -68,6 +68,9 @@
   padding-top: 6px;
   line-height: 18px;
 }
+.e-pager div.e-parentmsgbar span.e-rightalign {
+  text-align: right;
+}
 .e-pager .e-pagesizes {
   display: inline;
 }
@@ -321,6 +324,12 @@
 }
 @media (max-width: 769px) {
   .e-pager {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 13px 0;
   }
   .e-pager div.e-parentmsgbar {
@@ -519,7 +528,8 @@
   .e-pager.e-rtl.e-rtl div.e-parentmsgbar {
     float: initial;
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
+    padding-top: 0;
   }
   .e-pager.e-rtl .e-parentmsgbar {
     float: right;
@@ -807,14 +817,14 @@
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 @media (max-width: 769px) {
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem,

package/styles/pager/tailwind3.css

@@ -71,6 +71,9 @@
   padding-right: 0;
   padding-top: 5px;
 }
+.e-pager div.e-parentmsgbar span.e-rightalign {
+  text-align: right;
+}
 .e-pager .e-pagesizes {
   display: inline;
 }
@@ -296,6 +299,12 @@
 }
 @media (max-width: 769px) {
   .e-pager {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 13px 0;
   }
   .e-pager div.e-parentmsgbar {
@@ -469,7 +478,8 @@
   .e-pager.e-rtl.e-rtl div.e-parentmsgbar {
     float: initial;
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
+    padding-top: 0;
   }
   .e-pager.e-rtl .e-parentmsgbar {
     float: right;
@@ -752,14 +762,14 @@
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 @media (max-width: 769px) {
   .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
   .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
   }
 }
 .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
@@ -831,7 +841,7 @@
 }
 .e-bigger .e-pager.e-adaptive div.e-parentmsgbar,
 .e-pager.e-bigger.e-adaptive div.e-parentmsgbar {
-  margin-top: -5px;
+  margin-top: 0;
 }
 .e-bigger .e-pager.e-adaptive .e-pagerdropdown,
 .e-pager.e-bigger.e-adaptive .e-pagerdropdown {

package/styles/tab/_bootstrap-dark-definition.scss

@@ -154,7 +154,7 @@ $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: $grey-44 !default;
-$tab-fill-focus-bg-color: $grey-44 !default;
+$tab-fill-focus-bg-color: $brand-primary !default;
 $tab-hover-bg-color: $grey !default;
 $tab-active-bg-color: $grey !default;
 $tab-fill-active-bg-color: $brand-primary !default;
@@ -238,7 +238,7 @@ $tab-alt-active-text-color: $brand-primary-font !default;
 $tab-alt-disable-active-text-color: $brand-primary-font !default;
 $tab-alt-hover-text-color: color.adjust($brand-primary, $lightness: 10%) !default;
 $tab-alt-active-hover-text-color: $brand-primary-font !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $brand-primary-font !default;
 $tab-clone-item-bg-color: rgba($grey-light, .87) !default;
 $tab-clone-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
 $tab-icon-container-width: auto !default;
@@ -528,7 +528,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: unset !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_bootstrap-definition.scss

@@ -132,7 +132,7 @@ $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: $grey-lighter !default;
-$tab-fill-focus-bg-color: $grey-lighter !default;
+$tab-fill-focus-bg-color: $brand-primary !default;
 $tab-hover-bg-color: $grey-f5 !default;
 $tab-active-bg-color: $grey-f5 !default;
 $tab-fill-active-bg-color: $brand-primary !default;
@@ -216,7 +216,7 @@ $tab-alt-active-text-color: $brand-primary-font !default;
 $tab-alt-disable-active-text-color: $brand-primary-font !default;
 $tab-alt-hover-text-color: $brand-primary-darken-25 !default;
 $tab-alt-active-hover-text-color: $brand-primary-font !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $brand-primary-font !default;
 $tab-clone-item-bg-color: $grey-white !default;
 $tab-clone-text-color: $brand-primary !default;
 $tab-icon-container-width: auto !default;
@@ -533,7 +533,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: unset !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_bootstrap4-definition.scss

@@ -139,7 +139,7 @@ $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: #eee !default;
-$tab-fill-focus-bg-color: #eee !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: color.adjust($gray-100, $lightness: -2%) !default;
 $tab-active-bg-color: $primary !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -221,7 +221,7 @@ $tab-alt-text-color: $primary !default;
 $tab-alt-disable-text-color: $gray-600 !default;
 $tab-alt-active-text-color: $primary-font !default;
 $tab-alt-active-style-hover-text-color: $gray-900 !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-font !default;
 $tab-alt-disable-active-text-color: $gray-600 !default;
 $tab-alt-hover-text-color: color.adjust($gray-600, $lightness: -7.5%) !default;
 $tab-alt-active-hover-text-color: $primary-font !default;
@@ -541,7 +541,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: transparent !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_bootstrap5-definition.scss

@@ -267,7 +267,7 @@ $tab-ripple-bg-color: rgba($transparent, .12) !default;
 $tab-fill-ripple-bg-color: rgba($transparent, .05) !default;
 $tab-alt-ripple-bg-color: rgba($transparent, .1) !default;
 $tab-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
-$tab-fill-focus-bg-color: rgba($content-bg-color-alt2, .8) !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: $content-bg-color-alt3 !default;
 $tab-active-bg-color: $content-bg-color-alt2 !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -293,7 +293,7 @@ $tab-pop-active-item-text-color: $tab-active-text-color !default;
 $tab-alt-text-color: $primary-lighter !default;
 $tab-alt-disable-text-color: rgba($border-light, .38) !default;
 $tab-alt-active-style-hover-text-color: $content-text-color !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-text-color !default;
 $tab-alt-disable-active-text-color: $content-text-color-alt3 !default;
 $tab-alt-hover-text-color: $primary-text-hover !default;
 $tab-alt-active-hover-text-color: $content-text-color-alt2 !default;
@@ -539,7 +539,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-focused-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: transparent !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_bootstrap5.3-definition.scss

@@ -267,7 +267,7 @@ $tab-ripple-bg-color: rgba($transparent, .12) !default;
 $tab-fill-ripple-bg-color: rgba($transparent, .05) !default;
 $tab-alt-ripple-bg-color: rgba($transparent, .1) !default;
 $tab-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
-$tab-fill-focus-bg-color: rgba($content-bg-color-alt2, .8) !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: $flyout-bg-color-hover !default;
 $tab-active-bg-color: $flyout-bg-color-pressed !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -293,7 +293,7 @@ $tab-pop-active-item-text-color: $tab-active-text-color !default;
 $tab-alt-text-color: $primary-text-color !default;
 $tab-alt-disable-text-color: $primary-text-color !default;
 $tab-alt-active-style-hover-text-color: $content-text-color !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-text-color !default;
 $tab-alt-disable-active-text-color: $content-text-color-alt3 !default;
 $tab-alt-hover-text-color: $primary-text-hover !default;
 $tab-alt-active-hover-text-color: $content-text-color !default;
@@ -540,7 +540,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-alt-active-close-icon-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-focused-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: transparent !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_fabric-definition.scss

@@ -547,7 +547,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-fill-focused-active-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: $tab-alt-wrap-border-color !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_fluent-definition.scss

@@ -21,7 +21,7 @@ $tab-big-fill-height: 48px !default;
 $tab-nrml-fill-height: 44px !default;
 $tab-mob-fill-height: 42px !default;
 $tab-focus-big-fill-height: 42px !default;
-$tab-focus-nrml-fill-height: 32px !default;
+$tab-focus-nrml-fill-height: 44px !default;
 $tab-disable-cnt-opacity: .38 !default;
 $tab-big-tb-icon-height: 72px !default;
 $tab-nrml-tb-icon-height: 62px !default;
@@ -134,7 +134,7 @@ $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: $content-bg-color-alt2 !default;
-$tab-fill-focus-bg-color: $content-bg-color-alt2 !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: $content-bg-color-alt3 !default;
 $tab-active-bg-color: $content-bg-color-alt2 !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -217,7 +217,7 @@ $tab-alt-active-style-hover-text-color: $content-text-color !default;
 $tab-alt-disable-active-text-color: $content-text-color-alt3 !default;
 $tab-alt-hover-text-color: $primary-text-hover !default;
 $tab-alt-active-hover-text-color: $content-text-color-alt2 !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-text-color !default;
 $tab-clone-item-bg-color: $content-bg-color-alt3 !default;
 $tab-clone-text-color: $content-text-color-alt1 !default;
 $tab-icon-container-width: auto !default;
@@ -541,7 +541,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-comb-icon-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-comb-icon-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: unset !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_highcontrast-definition.scss

@@ -571,7 +571,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-fill-focused-active-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: $tab-alt-wrap-border-color !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_material-definition.scss

@@ -549,7 +549,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: unset !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/_tailwind-definition.scss

@@ -132,7 +132,7 @@ $tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
 $tab-big-fill-tb-wrap-height: 50px !default;
 $tab-nrml-fill-tb-wrap-height: 44px !default;
 $tab-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
-$tab-fill-focus-bg-color: rgba($content-bg-color-alt2, .8) !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: $content-bg-color-alt3 !default;
 $tab-active-bg-color: $content-bg-color-alt2 !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -216,7 +216,7 @@ $tab-alt-active-text-color: $primary-text-color !default;
 $tab-alt-disable-active-text-color: rgba($border-light, .38) !default;
 $tab-alt-hover-text-color: $primary-text-hover !default;
 $tab-alt-active-hover-text-color: $primary-bg-color-pressed !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-text !default;
 $tab-clone-item-bg-color: $content-bg-color-alt3 !default;
 $tab-clone-text-color: $content-text-color-alt1 !default;
 $tab-icon-container-width: auto !default;
@@ -552,7 +552,7 @@ $tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
 $tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-alt-active-style-hover-icon-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-hover-text-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-close-icon-color !default;
 $tab-background-indicator-bottom: 1px !default;
 $tab-background-wrap-border-color: unset !default;
 $tab-background-close-hover-color: $tab-alt-text-color !default;

package/styles/tab/_tailwind3-definition.scss

@@ -265,7 +265,7 @@ $tab-ripple-bg-color: rgba($transparent, .12) !default;
 $tab-fill-ripple-bg-color: rgba($transparent, .05) !default;
 $tab-alt-ripple-bg-color: rgba($transparent, .1) !default;
 $tab-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
-$tab-fill-focus-bg-color: rgba($content-bg-color-alt2, .8) !default;
+$tab-fill-focus-bg-color: $primary !default;
 $tab-hover-bg-color: $flyout-bg-color-hover !default;
 $tab-active-bg-color: $flyout-bg-color-pressed !default;
 $tab-fill-active-bg-color: $primary !default;
@@ -291,7 +291,7 @@ $tab-pop-active-item-text-color: $tab-active-text-color !default;
 $tab-alt-text-color: $primary-lighter !default;
 $tab-alt-disable-text-color: $primary-bg-color-disabled !default;
 $tab-alt-active-style-hover-text-color: $content-text-color !default;
-$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
+$tab-alt-active-style-hover-icon-color: $primary-text !default;
 $tab-alt-disable-active-text-color: $content-text-color-alt3 !default;
 $tab-alt-hover-text-color: $primary-text-hover !default;
 $tab-alt-active-hover-text-color: $content-text-color !default;
@@ -538,7 +538,7 @@ $tab-fill-pop-wrap-hover-icon-color: $flyout-text-color-hover !default;
 $tab-fill-pop-wrap-hover-close-color: $flyout-text-color-hover !default;
 $tab-fill-focused-active-tabwrap-focus-border-color: $tab-focused-wrap-focus-border-color !default;
 $tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
-$tab-fill-focused-active-wrap-focus-close-color: $tab-fill-focused-active-wrap-focus-color !default;
+$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-close-icon-color !default;
 $tab-background-indicator-bottom: 0 !default;
 $tab-background-wrap-border-color: transparent !default;
 $tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;

package/styles/tab/bootstrap-dark.css

@@ -2476,14 +2476,14 @@
   color: rgb(36, 138.2, 255);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: #414141;
+  background: #0070f0;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: rgb(0, 40.6, 87);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: rgb(0, 40.6, 87);
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/bootstrap.css

@@ -2476,14 +2476,14 @@
   color: #1f496e;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: #eee;
+  background: #317ab9;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: #1f496e;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #1f496e;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/bootstrap4.css

@@ -2476,18 +2476,18 @@
   color: rgb(0, 86.1, 178.5);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: #eee;
+  background: #007bff;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: rgb(0, 86.1, 178.5);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: rgb(0, 86.1, 178.5);
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: #212529;
+  color: #fff;
 }
 .e-tab.e-background .e-tab-header {
   background: inherit;

package/styles/tab/bootstrap5-dark.css

@@ -2471,14 +2471,14 @@
   color: rgb(10.4, 88, 202.4);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: rgba(52, 58, 64, 0.8);
+  background: #0d6efd;
   border-color: #adb5bd;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: #adb5bd;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #adb5bd;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/bootstrap5.3.css

@@ -2495,18 +2495,18 @@
   color: var(--color-sf-primary);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: rgba(var(--color-sf-content-bg-color-alt2), 0.8);
+  background: var(--color-sf-primary);
   border-color: var(--color-sf-icon-color);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: var(--color-sf-content-bg-color-alt5);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: var(--color-sf-content-bg-color-alt5);
+  color: var(--color-sf-primary-text-color);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: var(--color-sf-content-text-color);
+  color: var(--color-sf-primary-text-color);
 }
 .e-tab.e-background .e-tab-header {
   background: var(--color-sf-primary);

package/styles/tab/bootstrap5.css

@@ -2471,18 +2471,18 @@
   color: rgb(10.4, 88, 202.4);
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: rgba(233, 236, 239, 0.8);
+  background: #0d6efd;
   border-color: #6c757d;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: #adb5bd;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #adb5bd;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: #212529;
+  color: #fff;
 }
 .e-tab.e-background .e-tab-header {
   background: #0d6efd;

package/styles/tab/fabric.css

@@ -2483,7 +2483,7 @@
   color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #333;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/fluent-dark.css

@@ -1492,13 +1492,13 @@
   padding: 0 12px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-text-wrap {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-text-wrap {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus, .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus {
   height: 62px;
@@ -2476,18 +2476,18 @@
   color: #f3f2f1;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: #252423;
+  background: #0078d4;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
-  color: #c8c6c4;
+  color: #1b1a19;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #f3f2f1;
+  color: #1b1a19;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: #c8c6c4;
+  color: #1b1a19;
 }
 .e-tab.e-background .e-tab-header {
   background: #0078d4;

package/styles/tab/fluent.css

@@ -1492,13 +1492,13 @@
   padding: 0 12px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-text-wrap {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-text-wrap {
-  height: 32px;
+  height: 44px;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus, .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus {
   height: 62px;
@@ -2476,18 +2476,18 @@
   color: #201f1e;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: #f3f2f1;
+  background: #0078d4;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
-  color: #3b3a39;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #201f1e;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: #3b3a39;
+  color: #fff;
 }
 .e-tab.e-background .e-tab-header {
   background: #0078d4;

package/styles/tab/highcontrast.css

@@ -2483,7 +2483,7 @@
   color: #000;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #fff;
+  color: #000;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/material.css

@@ -2559,7 +2559,7 @@
   color: white;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: rgba(0, 0, 0, 0.87);
+  color: white;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {

package/styles/tab/tailwind-dark.css

@@ -2530,18 +2530,18 @@
   color: #22d3ee;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: rgba(55, 65, 81, 0.8);
+  background: #22d3ee;
   border-color: unset;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
-  color: #67e8f9;
+  color: #000;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #22d3ee;
+  color: #000;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text,
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-icon {
-  color: #67e8f9;
+  color: #000;
 }
 .e-tab.e-background .e-tab-header {
   background: #22d3ee;