@syncfusion/blazor-themes 31.1.20 → 31.1.22

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

@@ -15313,11 +15313,12 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -43246,7 +43247,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 12px 0 0 !default;
 $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 12px !default;
 $treeview-navigable-rtl-margin-reverse: 0 16px 0 0 !default;
 $treeview-rtl-image-margin: 0 12px 0 0 !default;
-$treeview-image-text-padding: 0 12px !default;
+$treeview-image-text-padding: 8px 12px !default;
 $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 12px !default;
@@ -43268,7 +43269,7 @@ $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 44px !default;
 $treeview-big-text-height: 24px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 16px !default;
+$treeview-big-text-padding: 10px 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
 $treeview-big-image-margin: 0 0 0 16px !default;
@@ -43283,7 +43284,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 16px !default;
+$treeview-big-image-text-padding: 10px 16px !default;
 $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -43590,6 +43591,10 @@ $treeview-item-active-check-color: $primary !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43707,10 +43712,6 @@ $treeview-item-active-check-color: $primary !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -44878,7 +44879,7 @@ $menu-bigger-hscroll-nav-size: 46px !default;
 $menu-bigger-vscroll-nav-size: 32px !default;
 $menu-bigger-scroll-nav-icon-size: $text-lg !default;
 $menu-header-icon-padding: 0 16px !default;
-$menu-icon-li-height: 40px !default;
+$menu-icon-li-height: 44px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
 $menu-li-border-color: $border-light !default;
 $menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
@@ -44988,7 +44989,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -45031,12 +45032,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -63899,7 +63894,8 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -64315,7 +64311,11 @@ $grid-checkmark-color: $primary-text-color !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -82126,7 +82126,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -97410,6 +97410,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -100666,6 +100670,29 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/fluent-dark.scss

@@ -22786,11 +22786,12 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -59153,7 +59154,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 12px 0 0 !default;
 $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 12px !default;
 $treeview-navigable-rtl-margin-reverse: 0 16px 0 0 !default;
 $treeview-rtl-image-margin: 0 12px 0 0 !default;
-$treeview-image-text-padding: 0 12px !default;
+$treeview-image-text-padding: 8px 12px !default;
 $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 12px !default;
@@ -59175,7 +59176,7 @@ $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 44px !default;
 $treeview-big-text-height: 24px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 16px !default;
+$treeview-big-text-padding: 10px 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
 $treeview-big-image-margin: 0 0 0 16px !default;
@@ -59190,7 +59191,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 16px !default;
+$treeview-big-image-text-padding: 10px 16px !default;
 $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -59497,6 +59498,10 @@ $treeview-item-active-check-color: $primary !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59614,10 +59619,6 @@ $treeview-item-active-check-color: $primary !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -60667,8 +60668,7 @@ $treeview-item-active-check-color: $primary !default;
       }
 
       @if $skin-name == 'highcontrast' {
-        padding-top: 11px;
-        padding-bottom: 11px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'material' or $skin-name == 'material-dark' {
@@ -60677,8 +60677,7 @@ $treeview-item-active-check-color: $primary !default;
       }
 
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'bootstrap4' {
@@ -61287,7 +61286,7 @@ $menu-bigger-hscroll-nav-size: 46px !default;
 $menu-bigger-vscroll-nav-size: 32px !default;
 $menu-bigger-scroll-nav-icon-size: $text-lg !default;
 $menu-header-icon-padding: 0 16px !default;
-$menu-icon-li-height: 40px !default;
+$menu-icon-li-height: 44px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
 $menu-li-border-color: $border-light !default;
 $menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
@@ -61397,7 +61396,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -61440,12 +61439,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -86306,7 +86299,8 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -86722,7 +86716,11 @@ $grid-checkmark-color: $primary-text-color !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -109617,7 +109615,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -127516,6 +127514,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -131407,6 +131409,29 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/fluent-lite.scss

@@ -15313,11 +15313,12 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -43246,7 +43247,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 12px 0 0 !default;
 $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 12px !default;
 $treeview-navigable-rtl-margin-reverse: 0 16px 0 0 !default;
 $treeview-rtl-image-margin: 0 12px 0 0 !default;
-$treeview-image-text-padding: 0 12px !default;
+$treeview-image-text-padding: 8px 12px !default;
 $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 12px !default;
@@ -43268,7 +43269,7 @@ $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 44px !default;
 $treeview-big-text-height: 24px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 16px !default;
+$treeview-big-text-padding: 10px 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
 $treeview-big-image-margin: 0 0 0 16px !default;
@@ -43283,7 +43284,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 16px !default;
+$treeview-big-image-text-padding: 10px 16px !default;
 $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -43590,6 +43591,10 @@ $treeview-item-active-check-color: $primary !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -43707,10 +43712,6 @@ $treeview-item-active-check-color: $primary !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -44878,7 +44879,7 @@ $menu-bigger-hscroll-nav-size: 46px !default;
 $menu-bigger-vscroll-nav-size: 32px !default;
 $menu-bigger-scroll-nav-icon-size: $text-lg !default;
 $menu-header-icon-padding: 0 16px !default;
-$menu-icon-li-height: 40px !default;
+$menu-icon-li-height: 44px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
 $menu-li-border-color: $border-light !default;
 $menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
@@ -44988,7 +44989,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -45031,12 +45032,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -63899,7 +63894,8 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -64315,7 +64311,11 @@ $grid-checkmark-color: $primary-text-color !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -82126,7 +82126,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -97410,6 +97410,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -100666,6 +100670,29 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-fluent-icons') {
   .e-query-builder {

package/SCSS-Themes/fluent.scss

@@ -22786,11 +22786,12 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
 @mixin outline-primary-disabled {
   @if $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' {
     background: $btn-outline-primary-disabled-border-color;
+    border-color: $btn-outline-primary-disabled-color;
   }
   @else {
     background: $btn-outline-bgcolor;
+    border-color: $btn-outline-primary-disabled-border-color;
   }
-  border-color: $btn-outline-primary-disabled-border-color;
   box-shadow: $btn-flat-box-shadow;
   color: $btn-outline-primary-disabled-color;
 }
@@ -59153,7 +59154,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 12px 0 0 !default;
 $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 12px !default;
 $treeview-navigable-rtl-margin-reverse: 0 16px 0 0 !default;
 $treeview-rtl-image-margin: 0 12px 0 0 !default;
-$treeview-image-text-padding: 0 12px !default;
+$treeview-image-text-padding: 8px 12px !default;
 $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 12px !default;
@@ -59175,7 +59176,7 @@ $treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 44px !default;
 $treeview-big-text-height: 24px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 16px !default;
+$treeview-big-text-padding: 10px 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
 $treeview-big-image-margin: 0 0 0 16px !default;
@@ -59190,7 +59191,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 16px !default;
+$treeview-big-image-text-padding: 10px 16px !default;
 $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -59497,6 +59498,10 @@ $treeview-item-active-check-color: $primary !default;
               padding-top: 5px;
               padding-bottom: 5px;
             }
+            @if $skin-name == 'bootstrap5' {
+              padding-top: 3px;
+              padding-bottom: 3px;
+            }
           }
         }
       }
@@ -59614,10 +59619,6 @@ $treeview-item-active-check-color: $primary !default;
           margin-top: 4px;
           margin-bottom: 4px;
         }
-        @else if($skin-name == 'bootstrap5') {
-          margin-bottom: 3px;
-          margin-top: 3px;
-        }
         @else {
           margin-bottom: 0;
         }
@@ -60667,8 +60668,7 @@ $treeview-item-active-check-color: $primary !default;
       }
 
       @if $skin-name == 'highcontrast' {
-        padding-top: 11px;
-        padding-bottom: 11px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'material' or $skin-name == 'material-dark' {
@@ -60677,8 +60677,7 @@ $treeview-item-active-check-color: $primary !default;
       }
 
       @if $skin-name == 'FluentUI' {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding: $treeview-big-text-padding;
       }
 
       @if $skin-name == 'bootstrap4' {
@@ -61287,7 +61286,7 @@ $menu-bigger-hscroll-nav-size: 46px !default;
 $menu-bigger-vscroll-nav-size: 32px !default;
 $menu-bigger-scroll-nav-icon-size: $text-lg !default;
 $menu-header-icon-padding: 0 16px !default;
-$menu-icon-li-height: 40px !default;
+$menu-icon-li-height: 44px !default;
 $menu-li-bgcolor: $content-bg-color-alt3 !default;
 $menu-li-border-color: $border-light !default;
 $menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
@@ -61397,7 +61396,7 @@ $menu-caret-color: $cmenu-caret-color !default;
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
               line-height: $menu-icon-li-height;
             }
             @else {
@@ -61440,12 +61439,6 @@ $menu-caret-color: $cmenu-caret-color !default;
             @if $skin-name == 'fluent2' {
               padding: 9px 0;
             }
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
-              line-height: $menu-icon-li-height;
-            }
-            @else {
-              line-height: $menu-li-height;
-            }
           }
         }
       }
@@ -86306,7 +86299,8 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-detailheadercell {
         border-width: $grid-headercell-both-border-width;
       }
-      .e-headercell.e-grid-group-first-cell {
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -86722,7 +86716,11 @@ $grid-checkmark-color: $primary-text-color !default;
     &.e-verticallines,
     &.e-bothlines {
       .e-rowcell.e-grid-group-first-cell,
-      .e-headercell.e-grid-group-first-cell {
+      .e-rowcell.e-first-visible-cell,
+      .e-headercell.e-grid-group-first-cell,
+      .e-headercell.e-first-visible-cell,
+      .e-filterbarcell.e-grid-group-first-cell,
+      .e-filterbarcell.e-first-visible-cell {
         border-left-width: 0;
       }
     }
@@ -109617,7 +109615,7 @@ $toast-close-icon-hover-color: $icon-color-hover !default;
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           left: 0;
           margin-left: 12px;
-          margin-top: 10px;
+          margin-top: 15px;
           padding-bottom: 6px;
           position: absolute;
         }
@@ -127516,6 +127514,10 @@ $pivotview-touch-header-text-padding: 8px !default;
         margin-left: 18px !important;
       }
 
+      .e-toolbar-item.e-template .e-toolbar-template-container {
+        display: flex;
+      }
+
       .e-toolbar-item.e-template,
       .e-toolbar-item:not(.e-separator):not(.e-spacer)
       {
@@ -131407,6 +131409,29 @@ $qryblr-drag-icon-color: $secondary-text-color !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}
+
 
 @include export-module('query-builder-fluent-icons') {
   .e-query-builder {