@syncfusion/blazor-themes 28.1.41 → 28.2.3

package/SCSS-Themes/highcontrast.scss

@@ -20132,10 +20132,8 @@ $badge-warning-font-color: $content-font !default;
 
     &.e-badge-secondary:not(.e-badge-ghost):not([href]),
     &.e-badge-secondary[href]:not(.e-badge-ghost) {
-      @if ($badge-theme == 'bootstrap5.3') {
-        background-color: $badge-secondary-bg-color;
-        color: $badge-secondary-font-color;
-      }
+      background-color: $badge-secondary-bg-color;
+      color: $badge-secondary-font-color;
       
       @if $badge-theme == 'fluent2' {
         border: $badge-secondary-border-color;
@@ -32317,6 +32315,7 @@ $drop-down-btn-disable-text: $disable !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: $hover-bg !default;
@@ -32346,9 +32345,12 @@ $drop-down-btn-ul-border-radius: 0 !default;
 $drop-down-btn-ul-padding: 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 !default;
 $drop-down-btn-ul-small-padding: 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
@@ -32434,7 +32436,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       }
 
       & .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           font-size: $drop-down-btn-small-icon-font-size;
         }
       }
@@ -32443,6 +32445,9 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         @if $skin-name == 'fluent2' {
           font-size: 12px;
         }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+          font-size: $drop-down-btn-small-caret-icon-font-size;
+        }
       }
     }
   }
@@ -32707,7 +32712,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
   .e-dropdown-btn.e-btn {
     .e-caret {
       &::before {
-        content: '\e966';
+        content: '\eb05';
       }
     }
   }
@@ -32735,8 +32740,13 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         padding: $drop-down-btn-vertical-bigger-padding;
       }
       .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
-          font-size: $drop-down-btn-icon-font-size-bigger;
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
+          font-size: $drop-down-btn-small-icon-font-size-bigger;
+        }
+      }
+      .e-btn-icon.e-caret {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
+          font-size: $drop-down-btn-small-caret-icon-font-size-bigger;
         }
       }
     }
@@ -58989,7 +58999,10 @@ $ripple-width: 32px !default;
         }
 
         .e-list-text {
-          @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI') {
+            padding: $treeview-icon-padding;
+          }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
             padding: 0 $treeview-drag-icon-padding;
           }
           @if $skin-name == 'fluent2' {
@@ -59013,9 +59026,6 @@ $ripple-width: 32px !default;
           @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
-            @if ($skin-name == 'FluentUI') {
-              padding-top: 8px;
-            }
           }
         }
       }
@@ -59023,7 +59033,7 @@ $ripple-width: 32px !default;
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        @if ($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3' and $skin-name != 'FluentUI') {
+        @if (($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3') and $skin-name != 'FluentUI') {
           padding: $treeview-drag-icon-padding;
         }
         @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
@@ -84757,7 +84767,12 @@ $grid-checkmark-color: $selection-font !default;
 
     &.e-wrap .e-columnmenu,
     &.e-wrap &.e-rtl .e-columnmenu {
-      line-height: $grid-wrap-line-height;
+      @if $grid-skin == 'material' or $grid-skin == 'material3' {
+        line-height: 3px;
+      }
+      @else {
+        line-height: $grid-wrap-line-height;
+      }
     }
 
     &.e-rtl .e-columnmenu {
@@ -84912,6 +84927,9 @@ $grid-checkmark-color: $selection-font !default;
     }
 
     .e-filterbarcell input {
+      &.e-checkbox{
+        height: 1px;
+      }
       border-radius: $grid-filterbar-border-radius;
       @include grid-border-style-width-font-size-weight(solid, $grid-filterbar-input-border-width, $grid-font-size, normal);
       height: $grid-filterbarcell-text-input;
@@ -86917,7 +86935,7 @@ $grid-checkmark-color: $selection-font !default;
 
 @mixin hover-color-styles($grid-skin, $material, $bootstrap) {
   @if $grid-skin == 'material3' {
-    background-color: $material;
+    background: $material;
   }
   @if $grid-skin == 'bootstrap4' {
     background-color: $bootstrap;
@@ -86928,7 +86946,7 @@ $grid-checkmark-color: $selection-font !default;
 
   #{&}.e-grid,
   #{&}.e-grid-popup {
-    .e-icons:not(.e-btn-icon, .e-check) {
+    .e-icons:not(.e-btn-icon, .e-check, .e-stop) {
       color: $grid-icon-color;
     }
 
@@ -87348,7 +87366,7 @@ $grid-checkmark-color: $selection-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -87359,7 +87377,7 @@ $grid-checkmark-color: $selection-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -87367,7 +87385,7 @@ $grid-checkmark-color: $selection-font !default;
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         @if $grid-skin != 'material3' {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -88116,7 +88134,7 @@ $grid-checkmark-color: $selection-font !default;
 
 @mixin hover-color-styles($grid-skin, $material, $bootstrap) {
   @if $grid-skin == 'material3' {
-    background-color: $material;
+    background: $material;
   }
   @if $grid-skin == 'bootstrap4' {
     background-color: $bootstrap;
@@ -88200,7 +88218,7 @@ $grid-checkmark-color: $selection-font !default;
         .e-rowcell.e-unfreeze,
         .e-rowcell.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -88215,7 +88233,7 @@ $grid-checkmark-color: $selection-font !default;
         .e-rowdragdrop.e-unfreeze,
         .e-rowdragdrop.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -88226,7 +88244,7 @@ $grid-checkmark-color: $selection-font !default;
         .e-rowdragdrop.e-unfreeze,
         .e-rowdragdrop.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -88234,7 +88252,7 @@ $grid-checkmark-color: $selection-font !default;
       &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
           @if $grid-skin != 'material3' {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -88714,6 +88732,9 @@ $grid-checkmark-color: $selection-font !default;
     }
 
     .e-filterbarcell input {
+      &.e-checkbox{
+        height: 1px;
+      }
       height: $grid-bigger-filterbarcell-text-input;
     }
 
@@ -101431,7 +101452,7 @@ $gantt-bigger-treegrid-header-border-height: 63px !default;
 $gantt-header-border-bottom-width: 1px !default;
 $gantt-timeline-top-header-cell-height: 32px !default;
 $gantt-bigger-timeline-top-header-cell-height: 32px !default;
-$progress-handler-background: #222 !default;
+$progress-handler-background: #FFFFFF !default;
 $progress-handler-outline: $hover-font !default;
 $gantt-header-border-radius: 0px !default;
 $gantt-splitter-border-top-right-radius: 0px !default;
@@ -103385,7 +103406,6 @@ $gantt-chartrow-hover-bg-color: $hover-bg !default;
       color: $gantt-context-menu-icon-color !important; /* stylelint-disable-line declaration-no-important */
     }
     @if $skin-name == 'fluent2'{
-      .e-rowcell.e-active,
       .e-menu-item.e-focused,
       .e-menu-item.e-selected {
         .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
@@ -122456,11 +122476,6 @@ $pivotview-touch-header-text-padding: 8px !default;
       -ms-user-select: none;
       user-select: none;
       -webkit-touch-callout: none;
-      align-items: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: inherit;
 
       @if ($skin-name == 'tailwind') {
         padding-left: 12px;

package/SCSS-Themes/material-dark-lite.scss

@@ -13201,10 +13201,8 @@ $badge-warning-font-color: $grey-dark-font !default;
 
     &.e-badge-secondary:not(.e-badge-ghost):not([href]),
     &.e-badge-secondary[href]:not(.e-badge-ghost) {
-      @if ($badge-theme == 'bootstrap5.3') {
-        background-color: $badge-secondary-bg-color;
-        color: $badge-secondary-font-color;
-      }
+      background-color: $badge-secondary-bg-color;
+      color: $badge-secondary-font-color;
       
       @if $badge-theme == 'fluent2' {
         border: $badge-secondary-border-color;
@@ -23202,6 +23200,7 @@ $drop-down-btn-disable-text: rgba($grey-dark-font, .3) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: rgba($grey-white, .1) !default;
@@ -23232,9 +23231,12 @@ $drop-down-btn-ul-border: none !default;
 $drop-down-btn-ul-padding: 8px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 8px 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
@@ -23320,7 +23322,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       }
 
       & .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           font-size: $drop-down-btn-small-icon-font-size;
         }
       }
@@ -23329,6 +23331,9 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         @if $skin-name == 'fluent2' {
           font-size: 12px;
         }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+          font-size: $drop-down-btn-small-caret-icon-font-size;
+        }
       }
     }
   }
@@ -43787,7 +43792,10 @@ $ripple-width: 32px !default;
         }
 
         .e-list-text {
-          @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI') {
+            padding: $treeview-icon-padding;
+          }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
             padding: 0 $treeview-drag-icon-padding;
           }
           @if $skin-name == 'fluent2' {
@@ -43811,9 +43819,6 @@ $ripple-width: 32px !default;
           @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
-            @if ($skin-name == 'FluentUI') {
-              padding-top: 8px;
-            }
           }
         }
       }
@@ -43821,7 +43826,7 @@ $ripple-width: 32px !default;
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        @if ($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3' and $skin-name != 'FluentUI') {
+        @if (($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3') and $skin-name != 'FluentUI') {
           padding: $treeview-drag-icon-padding;
         }
         @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
@@ -63472,7 +63477,12 @@ $grid-checkmark-color: $accent-font !default;
 
     &.e-wrap .e-columnmenu,
     &.e-wrap &.e-rtl .e-columnmenu {
-      line-height: $grid-wrap-line-height;
+      @if $grid-skin == 'material' or $grid-skin == 'material3' {
+        line-height: 3px;
+      }
+      @else {
+        line-height: $grid-wrap-line-height;
+      }
     }
 
     &.e-rtl .e-columnmenu {
@@ -63627,6 +63637,9 @@ $grid-checkmark-color: $accent-font !default;
     }
 
     .e-filterbarcell input {
+      &.e-checkbox{
+        height: 1px;
+      }
       border-radius: $grid-filterbar-border-radius;
       @include grid-border-style-width-font-size-weight(solid, $grid-filterbar-input-border-width, $grid-font-size, normal);
       height: $grid-filterbarcell-text-input;
@@ -65632,7 +65645,7 @@ $grid-checkmark-color: $accent-font !default;
 
 @mixin hover-color-styles($grid-skin, $material, $bootstrap) {
   @if $grid-skin == 'material3' {
-    background-color: $material;
+    background: $material;
   }
   @if $grid-skin == 'bootstrap4' {
     background-color: $bootstrap;
@@ -65643,7 +65656,7 @@ $grid-checkmark-color: $accent-font !default;
 
   #{&}.e-grid,
   #{&}.e-grid-popup {
-    .e-icons:not(.e-btn-icon, .e-check) {
+    .e-icons:not(.e-btn-icon, .e-check, .e-stop) {
       color: $grid-icon-color;
     }
 
@@ -66063,7 +66076,7 @@ $grid-checkmark-color: $accent-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -66074,7 +66087,7 @@ $grid-checkmark-color: $accent-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -66082,7 +66095,7 @@ $grid-checkmark-color: $accent-font !default;
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         @if $grid-skin != 'material3' {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -77925,7 +77938,6 @@ $gantt-chartrow-hover-bg-color: rgb(89 86 86) !default;
       color: $gantt-context-menu-icon-color !important; /* stylelint-disable-line declaration-no-important */
     }
     @if $skin-name == 'fluent2'{
-      .e-rowcell.e-active,
       .e-menu-item.e-focused,
       .e-menu-item.e-selected {
         .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
@@ -94006,11 +94018,6 @@ $pivotview-touch-header-text-padding: 8px !default;
       -ms-user-select: none;
       user-select: none;
       -webkit-touch-callout: none;
-      align-items: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: inherit;
 
       @if ($skin-name == 'tailwind') {
         padding-left: 12px;

package/SCSS-Themes/material-dark.scss

@@ -20447,10 +20447,8 @@ $badge-warning-font-color: $grey-dark-font !default;
 
     &.e-badge-secondary:not(.e-badge-ghost):not([href]),
     &.e-badge-secondary[href]:not(.e-badge-ghost) {
-      @if ($badge-theme == 'bootstrap5.3') {
-        background-color: $badge-secondary-bg-color;
-        color: $badge-secondary-font-color;
-      }
+      background-color: $badge-secondary-bg-color;
+      color: $badge-secondary-font-color;
       
       @if $badge-theme == 'fluent2' {
         border: $badge-secondary-border-color;
@@ -32773,6 +32771,7 @@ $drop-down-btn-disable-text: rgba($grey-dark-font, .3) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: rgba($grey-white, .1) !default;
@@ -32803,9 +32802,12 @@ $drop-down-btn-ul-border: none !default;
 $drop-down-btn-ul-padding: 8px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 8px 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
@@ -32891,7 +32893,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       }
 
       & .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           font-size: $drop-down-btn-small-icon-font-size;
         }
       }
@@ -32900,6 +32902,9 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         @if $skin-name == 'fluent2' {
           font-size: 12px;
         }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+          font-size: $drop-down-btn-small-caret-icon-font-size;
+        }
       }
     }
   }
@@ -33192,8 +33197,13 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         padding: $drop-down-btn-vertical-bigger-padding;
       }
       .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
-          font-size: $drop-down-btn-icon-font-size-bigger;
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
+          font-size: $drop-down-btn-small-icon-font-size-bigger;
+        }
+      }
+      .e-btn-icon.e-caret {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
+          font-size: $drop-down-btn-small-caret-icon-font-size-bigger;
         }
       }
     }
@@ -59625,7 +59635,10 @@ $ripple-width: 32px !default;
         }
 
         .e-list-text {
-          @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI') {
+            padding: $treeview-icon-padding;
+          }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
             padding: 0 $treeview-drag-icon-padding;
           }
           @if $skin-name == 'fluent2' {
@@ -59649,9 +59662,6 @@ $ripple-width: 32px !default;
           @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
-            @if ($skin-name == 'FluentUI') {
-              padding-top: 8px;
-            }
           }
         }
       }
@@ -59659,7 +59669,7 @@ $ripple-width: 32px !default;
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        @if ($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3' and $skin-name != 'FluentUI') {
+        @if (($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3') and $skin-name != 'FluentUI') {
           padding: $treeview-drag-icon-padding;
         }
         @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
@@ -85671,7 +85681,12 @@ $grid-checkmark-color: $accent-font !default;
 
     &.e-wrap .e-columnmenu,
     &.e-wrap &.e-rtl .e-columnmenu {
-      line-height: $grid-wrap-line-height;
+      @if $grid-skin == 'material' or $grid-skin == 'material3' {
+        line-height: 3px;
+      }
+      @else {
+        line-height: $grid-wrap-line-height;
+      }
     }
 
     &.e-rtl .e-columnmenu {
@@ -85826,6 +85841,9 @@ $grid-checkmark-color: $accent-font !default;
     }
 
     .e-filterbarcell input {
+      &.e-checkbox{
+        height: 1px;
+      }
       border-radius: $grid-filterbar-border-radius;
       @include grid-border-style-width-font-size-weight(solid, $grid-filterbar-input-border-width, $grid-font-size, normal);
       height: $grid-filterbarcell-text-input;
@@ -87831,7 +87849,7 @@ $grid-checkmark-color: $accent-font !default;
 
 @mixin hover-color-styles($grid-skin, $material, $bootstrap) {
   @if $grid-skin == 'material3' {
-    background-color: $material;
+    background: $material;
   }
   @if $grid-skin == 'bootstrap4' {
     background-color: $bootstrap;
@@ -87842,7 +87860,7 @@ $grid-checkmark-color: $accent-font !default;
 
   #{&}.e-grid,
   #{&}.e-grid-popup {
-    .e-icons:not(.e-btn-icon, .e-check) {
+    .e-icons:not(.e-btn-icon, .e-check, .e-stop) {
       color: $grid-icon-color;
     }
 
@@ -88262,7 +88280,7 @@ $grid-checkmark-color: $accent-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -88273,7 +88291,7 @@ $grid-checkmark-color: $accent-font !default;
       .e-rowdragdrop.e-unfreeze,
       .e-rowdragdrop.e-fixedfreeze {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -88281,7 +88299,7 @@ $grid-checkmark-color: $accent-font !default;
     &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
       &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         @if $grid-skin != 'material3' {
-          @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
         }
       }
     }
@@ -89035,7 +89053,7 @@ $grid-checkmark-color: $accent-font !default;
 
 @mixin hover-color-styles($grid-skin, $material, $bootstrap) {
   @if $grid-skin == 'material3' {
-    background-color: $material;
+    background: $material;
   }
   @if $grid-skin == 'bootstrap4' {
     background-color: $bootstrap;
@@ -89119,7 +89137,7 @@ $grid-checkmark-color: $accent-font !default;
         .e-rowcell.e-unfreeze,
         .e-rowcell.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -89134,7 +89152,7 @@ $grid-checkmark-color: $accent-font !default;
         .e-rowdragdrop.e-unfreeze,
         .e-rowdragdrop.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -89145,7 +89163,7 @@ $grid-checkmark-color: $accent-font !default;
         .e-rowdragdrop.e-unfreeze,
         .e-rowdragdrop.e-fixedfreeze {
           &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -89153,7 +89171,7 @@ $grid-checkmark-color: $accent-font !default;
       &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
         &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
           @if $grid-skin != 'material3' {
-            @include hover-color-styles($grid-skin, rgb(250 244 244), rgb(236 233 233));
+            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
           }
         }
       }
@@ -89633,6 +89651,9 @@ $grid-checkmark-color: $accent-font !default;
     }
 
     .e-filterbarcell input {
+      &.e-checkbox{
+        height: 1px;
+      }
       height: $grid-bigger-filterbarcell-text-input;
     }
 
@@ -104315,7 +104336,6 @@ $gantt-chartrow-hover-bg-color: rgb(89 86 86) !default;
       color: $gantt-context-menu-icon-color !important; /* stylelint-disable-line declaration-no-important */
     }
     @if $skin-name == 'fluent2'{
-      .e-rowcell.e-active,
       .e-menu-item.e-focused,
       .e-menu-item.e-selected {
         .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
@@ -123418,11 +123438,6 @@ $pivotview-touch-header-text-padding: 8px !default;
       -ms-user-select: none;
       user-select: none;
       -webkit-touch-callout: none;
-      align-items: center;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      height: inherit;
 
       @if ($skin-name == 'tailwind') {
         padding-left: 12px;