@syncfusion/blazor-themes 31.1.21 → 31.1.23

package/SCSS-Themes/grids/grid/tailwind3-lite.scss

@@ -2364,7 +2364,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;
       }
     }
@@ -2780,7 +2781,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;
       }
     }

package/SCSS-Themes/grids/grid/tailwind3.scss

@@ -2364,7 +2364,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;
       }
     }
@@ -2780,7 +2781,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;
       }
     }

package/SCSS-Themes/highcontrast-lite.scss

@@ -20794,7 +20794,7 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
         bottom: $cbox-ripple-size;
         height: $cbox-ripple-height;
         left: $cbox-ripple-size;
-        pointer-events: none;
+        pointer-events: auto;
         position: absolute;
         right: $cbox-ripple-size;
         top: $cbox-ripple-size;
@@ -20984,6 +20984,10 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
     pointer-events: none;
   }
 
+  .e-overlay .e-checkbox-wrapper .e-ripple-container {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -48133,7 +48137,7 @@ $ddl-icon-margin-top-bigger: -3.1em !default;
 $ddl-small-ddl-icon-top: -2.5em !default;
 $ddl-bigger-small-ddl-icon-top: -2.85em !default;
 $ddl-clear-margin-top: -3.2em !default;
-$ddl-closer-margin-top-bigger: -3.5em !default;
+$ddl-closer-margin-top-bigger: -34px !default;
 $ddl-chip-font-family: inherit !default;
 $ddl-chip-mobile-radius: 0 !default;
 $ddl-chip-sel-mobile-height: 38px !default;
@@ -50292,6 +50296,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
+    font-size: 12px;
     content: '\e7a7';
     cursor: pointer;
     left: $ddl-overall-close-left;
@@ -63482,7 +63487,8 @@ $grid-checkmark-color: $selection-font !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;
       }
     }
@@ -63898,7 +63904,11 @@ $grid-checkmark-color: $selection-font !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;
       }
     }
@@ -81717,7 +81727,7 @@ $toast-close-icon-hover-color: $selection-font !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;
         }
@@ -96976,6 +96986,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)
       {
@@ -99154,6 +99168,10 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -100230,6 +100248,29 @@ $qryblr-drag-icon-color: $content-font !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  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-material-icons') {
   .e-query-builder {

package/SCSS-Themes/highcontrast.scss

@@ -29992,7 +29992,7 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
         bottom: $cbox-ripple-size;
         height: $cbox-ripple-height;
         left: $cbox-ripple-size;
-        pointer-events: none;
+        pointer-events: auto;
         position: absolute;
         right: $cbox-ripple-size;
         top: $cbox-ripple-size;
@@ -30182,6 +30182,10 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
     pointer-events: none;
   }
 
+  .e-overlay .e-checkbox-wrapper .e-ripple-container {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -65544,7 +65548,7 @@ $ddl-icon-margin-top-bigger: -3.1em !default;
 $ddl-small-ddl-icon-top: -2.5em !default;
 $ddl-bigger-small-ddl-icon-top: -2.85em !default;
 $ddl-clear-margin-top: -3.2em !default;
-$ddl-closer-margin-top-bigger: -3.5em !default;
+$ddl-closer-margin-top-bigger: -34px !default;
 $ddl-chip-font-family: inherit !default;
 $ddl-chip-mobile-radius: 0 !default;
 $ddl-chip-sel-mobile-height: 38px !default;
@@ -67703,6 +67707,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
+    font-size: 12px;
     content: '\e7a7';
     cursor: pointer;
     left: $ddl-overall-close-left;
@@ -67878,7 +67883,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
       margin-top: $ddl-closer-margin-top-bigger;
     }
     @if $ddl-multiselect-skin-name == 'fluent2' {
-      margin-top: -2.5em;
+      margin-top: -32px;
     }
     @if $ddl-multiselect-skin-name == 'FluentUI' {
       margin-top: $ddl-bigger-clear-margin-top;
@@ -67889,7 +67894,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
     @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
       margin-top: -2.15em;
     }
-    @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
+    @if $ddl-multiselect-skin-name == 'fabric' {
       margin-top: -3.2em;
     }
     @if $ddl-multiselect-skin-name == 'tailwind' {
@@ -69656,7 +69661,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $skin-name == 'bootstrap4' {
     .e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
     .e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
-      font-size: 14px;
+      font-size: 16px;
     }
     .e-small.e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
     .e-small.e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
@@ -69705,7 +69710,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $skin-name == 'FluentUI' {
     .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
     .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-      margin-top: -1.6em;
+      margin-top: -24px;
     }
   }
   @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
@@ -85887,7 +85892,8 @@ $grid-checkmark-color: $selection-font !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;
       }
     }
@@ -86303,7 +86309,11 @@ $grid-checkmark-color: $selection-font !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;
       }
     }
@@ -109206,7 +109216,7 @@ $toast-close-icon-hover-color: $selection-font !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;
         }
@@ -127080,6 +127090,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)
       {
@@ -129893,6 +129907,10 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -130969,6 +130987,29 @@ $qryblr-drag-icon-color: $content-font !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  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-material-icons') {
   .e-query-builder {

package/SCSS-Themes/inputs/input/bootstrap4-lite.scss

@@ -52,7 +52,7 @@ $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: $zero-value !default;
 $input-focus-padding-bottom: $zero-value !default;
 $input-clear-icon: 10px !default;
-$input-bigger-clear-icon: 12px !default;
+$input-bigger-clear-icon: 16px !default;
 $input-small-clear-icon: 8px !default;
 $input-bigger-small-clear-icon: 12px !default;
 $input-clear-icon-padding: $zero-value !default;

package/SCSS-Themes/inputs/input/bootstrap4.scss

@@ -52,7 +52,7 @@ $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: $zero-value !default;
 $input-focus-padding-bottom: $zero-value !default;
 $input-clear-icon: 10px !default;
-$input-bigger-clear-icon: 12px !default;
+$input-bigger-clear-icon: 16px !default;
 $input-small-clear-icon: 8px !default;
 $input-bigger-small-clear-icon: 12px !default;
 $input-clear-icon-padding: $zero-value !default;

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

@@ -21253,7 +21253,7 @@ $cbox-border-style: solid !default;
         bottom: $cbox-ripple-size;
         height: $cbox-ripple-height;
         left: $cbox-ripple-size;
-        pointer-events: none;
+        pointer-events: auto;
         position: absolute;
         right: $cbox-ripple-size;
         top: $cbox-ripple-size;
@@ -21443,6 +21443,10 @@ $cbox-border-style: solid !default;
     pointer-events: none;
   }
 
+  .e-overlay .e-checkbox-wrapper .e-ripple-container {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -64393,7 +64397,8 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -64809,7 +64814,11 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -82655,7 +82664,7 @@ $toast-icon-hover-border-radius: 50% !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;
         }
@@ -97941,6 +97950,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)
       {
@@ -100121,6 +100134,9 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -101197,6 +101213,29 @@ $qryblr-drag-icon-color: $grey-dark-font !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  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-material-icons') {
   .e-query-builder {

package/SCSS-Themes/material-dark.scss

@@ -30451,7 +30451,7 @@ $cbox-border-style: solid !default;
         bottom: $cbox-ripple-size;
         height: $cbox-ripple-height;
         left: $cbox-ripple-size;
-        pointer-events: none;
+        pointer-events: auto;
         position: absolute;
         right: $cbox-ripple-size;
         top: $cbox-ripple-size;
@@ -30641,6 +30641,10 @@ $cbox-border-style: solid !default;
     pointer-events: none;
   }
 
+  .e-overlay .e-checkbox-wrapper .e-ripple-container {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -68769,7 +68773,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
       margin-top: $ddl-closer-margin-top-bigger;
     }
     @if $ddl-multiselect-skin-name == 'fluent2' {
-      margin-top: -2.5em;
+      margin-top: -32px;
     }
     @if $ddl-multiselect-skin-name == 'FluentUI' {
       margin-top: $ddl-bigger-clear-margin-top;
@@ -68780,7 +68784,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
     @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
       margin-top: -2.15em;
     }
-    @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
+    @if $ddl-multiselect-skin-name == 'fabric' {
       margin-top: -3.2em;
     }
     @if $ddl-multiselect-skin-name == 'tailwind' {
@@ -70547,7 +70551,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $skin-name == 'bootstrap4' {
     .e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
     .e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
-      font-size: 14px;
+      font-size: 16px;
     }
     .e-small.e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
     .e-small.e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
@@ -70596,7 +70600,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $skin-name == 'FluentUI' {
     .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
     .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-      margin-top: -1.6em;
+      margin-top: -24px;
     }
   }
   @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
@@ -86798,7 +86802,8 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -87214,7 +87219,11 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -110144,7 +110153,7 @@ $toast-icon-hover-border-radius: 50% !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;
         }
@@ -128045,6 +128054,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)
       {
@@ -130860,6 +130873,9 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -131936,6 +131952,29 @@ $qryblr-drag-icon-color: $grey-dark-font !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  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-material-icons') {
   .e-query-builder {

package/SCSS-Themes/material-lite.scss

@@ -21050,7 +21050,7 @@ $cbox-border-style: solid !default;
         bottom: $cbox-ripple-size;
         height: $cbox-ripple-height;
         left: $cbox-ripple-size;
-        pointer-events: none;
+        pointer-events: auto;
         position: absolute;
         right: $cbox-ripple-size;
         top: $cbox-ripple-size;
@@ -21240,6 +21240,10 @@ $cbox-border-style: solid !default;
     pointer-events: none;
   }
 
+  .e-overlay .e-checkbox-wrapper .e-ripple-container {
+    pointer-events: none;
+  }
+
   .e-small .e-checkbox-wrapper,
   .e-small.e-checkbox-wrapper,
   .e-small .e-css.e-checkbox-wrapper,
@@ -48502,7 +48506,7 @@ $ddl-delimviewheight-bigger: 34px !default;
 $ddl-closer-hooker-font: 10px !default;
 $ddl-chip-font-family: inherit !default;
 $ddl-closer-margin-top: -2.5em !default;
-$ddl-closer-margin-top-bigger: -3em !default;
+$ddl-closer-margin-top-bigger: -32px !default;
 $ddl-icon-margin-top: -2.1em !default;
 $ddl-clear-margin-top: -2.5em !default;
 $ddl-icon-margin-top-bigger: -2.5em !default;
@@ -64135,7 +64139,8 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -64551,7 +64556,11 @@ $grid-checkmark-color: $accent-font !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;
       }
     }
@@ -82401,7 +82410,7 @@ $toast-icon-hover-border-radius: 50% !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;
         }
@@ -97686,6 +97695,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)
       {
@@ -99865,6 +99878,9 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
+$primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -100941,6 +100957,29 @@ $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
   }
 }
 
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  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-material-icons') {
   .e-query-builder {