@syncfusion/blazor-themes 31.1.22 → 31.1.23

package/SCSS-Themes/fluent2-highcontrast.scss

@@ -31744,7 +31744,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;
@@ -31934,6 +31934,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,
@@ -67485,7 +67489,7 @@ $ddl-closer-hooker-font-small: $text-xs !default;
 $ddl-closer-hooker-font-bigger-small: $text-base !default;
 $ddl-chip-font-family: $font-family !default;
 $ddl-closer-margin-top: -2em !default;
-$ddl-closer-margin-top-bigger: -2.3em !default;
+$ddl-closer-margin-top-bigger: -36px !default;
 $ddl-icon-margin-top: -2.3em !default;
 $ddl-clear-margin-top: -2em !default;
 $ddl-icon-margin-top-bigger: -2.1em !default;
@@ -69594,6 +69598,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   }
   
   .e-multi-select-wrapper .e-close-hooker::before {
+    height: 18px;
+    font-size: 18px;
     content: '\e7e7';
     cursor: pointer;
     margin: auto;
@@ -70086,7 +70092,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;
@@ -70097,7 +70103,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' {
@@ -71864,7 +71870,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 {
@@ -71913,7 +71919,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' {
@@ -132289,6 +132295,8 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 31px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -133372,8 +133380,8 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

package/SCSS-Themes/fluent2-lite.scss

@@ -23318,7 +23318,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;
@@ -23508,6 +23508,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,
@@ -50846,7 +50850,7 @@ $ddl-closer-hooker-font-small: $text-xs !default;
 $ddl-closer-hooker-font-bigger-small: $text-base !default;
 $ddl-chip-font-family: $font-family !default;
 $ddl-closer-margin-top: -2em !default;
-$ddl-closer-margin-top-bigger: -2.3em !default;
+$ddl-closer-margin-top-bigger: -36px !default;
 $ddl-icon-margin-top: -2.3em !default;
 $ddl-clear-margin-top: -2em !default;
 $ddl-icon-margin-top-bigger: -2.1em !default;
@@ -52955,6 +52959,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   }
   
   .e-multi-select-wrapper .e-close-hooker::before {
+    height: 18px;
+    font-size: 18px;
     content: '\e7e7';
     cursor: pointer;
     margin: auto;
@@ -102322,6 +102328,8 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 31px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -103405,8 +103413,8 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

package/SCSS-Themes/fluent2.scss

@@ -32516,7 +32516,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;
@@ -32706,6 +32706,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,
@@ -68257,7 +68261,7 @@ $ddl-closer-hooker-font-small: $text-xs !default;
 $ddl-closer-hooker-font-bigger-small: $text-base !default;
 $ddl-chip-font-family: $font-family !default;
 $ddl-closer-margin-top: -2em !default;
-$ddl-closer-margin-top-bigger: -2.3em !default;
+$ddl-closer-margin-top-bigger: -36px !default;
 $ddl-icon-margin-top: -2.3em !default;
 $ddl-clear-margin-top: -2em !default;
 $ddl-icon-margin-top-bigger: -2.1em !default;
@@ -70366,6 +70370,8 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   }
   
   .e-multi-select-wrapper .e-close-hooker::before {
+    height: 18px;
+    font-size: 18px;
     content: '\e7e7';
     cursor: pointer;
     margin: auto;
@@ -70858,7 +70864,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;
@@ -70869,7 +70875,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' {
@@ -72636,7 +72642,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 {
@@ -72685,7 +72691,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' {
@@ -133061,6 +133067,8 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 31px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -134144,8 +134152,8 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

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;
@@ -99165,6 +99170,8 @@ $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' {
@@ -100248,8 +100255,8 @@ $primary-light: #ffd739 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

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' {
@@ -129904,6 +129909,8 @@ $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' {
@@ -130987,8 +130994,8 @@ $primary-light: #ffd739 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

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,
@@ -100131,6 +100135,8 @@ $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' {
@@ -101214,8 +101220,8 @@ $primary-light: $primary-300 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

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' {
@@ -130870,6 +130874,8 @@ $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' {
@@ -131953,8 +131959,8 @@ $primary-light: $primary-300 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

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;
@@ -99875,6 +99879,8 @@ $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' {
@@ -100958,8 +100964,8 @@ $primary-light: $primary-300 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

package/SCSS-Themes/material.scss

@@ -30248,7 +30248,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;
@@ -30438,6 +30438,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,
@@ -65913,7 +65917,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;
@@ -68518,7 +68522,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;
@@ -68529,7 +68533,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' {
@@ -70296,7 +70300,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 {
@@ -70345,7 +70349,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' {
@@ -130614,6 +130618,8 @@ $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' {
@@ -131697,8 +131703,8 @@ $primary-light: $primary-300 !default;
   transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid $primary-light;
-  border-top: 2px solid $primary;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }