@syncfusion/ej2-navigations 30.1.37 → 30.1.41

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;

package/styles/tab/tailwind.css

@@ -2530,18 +2530,18 @@
   color: #4f46e5;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
-  background: rgba(243, 244, 246, 0.8);
+  background: #4f46e5;
   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: #3730a3;
+  color: #fff;
 }
 .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-close-icon {
-  color: #4f46e5;
+  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: #3730a3;
+  color: #fff;
 }
 .e-tab.e-background .e-tab-header {
   background: #4f46e5;

package/styles/tab/tailwind3.css

@@ -2476,18 +2476,18 @@
   color: var(--color-sf-content-text-color-alt1);
 }
 .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);
 }
 .e-tab.e-background .e-tab-header {
   background: var(--color-sf-primary);

package/styles/tailwind-dark-lite.css

@@ -1660,6 +1660,9 @@
 .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-right: 8px;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+  margin-left: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -1690,6 +1693,7 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 0;
+  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:last-child {
   margin-left: 8px;
@@ -1697,11 +1701,13 @@
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
 }
-.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
+.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child {
+  margin-right: 0;
+}
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
   margin-right: 0;
+  margin-left: 8px;
 }
-.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:first-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:first-child {
   margin-right: 8px;
 }
@@ -2873,6 +2879,12 @@
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   padding: 4px 0;
 }
+.e-contextmenu-wrapper ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon,
+.e-contextmenu-container ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
   font-family: "Inter";
@@ -5676,18 +5688,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;