@syncfusion/blazor-themes 22.1.34 → 22.1.37

package/SCSS-Themes/material.scss

@@ -5132,7 +5132,7 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -9px;
+      top: -7px;
     }
   }
 
@@ -5173,7 +5173,7 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -8px;
+      top: -7px;
     }
   }
 
@@ -9682,6 +9682,16 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin-left: $outline-small-input-icon-margin-left;
+      margin-right: $zero-value;
+    }
+  }
+
   .e-outline.e-input-group.e-small .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group .e-clear-icon,
@@ -9765,6 +9775,17 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
+    }
+  }
+
   input.e-input.e-bigger.e-outline,
   .e-bigger input.e-input.e-outline,
   .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
@@ -9971,6 +9992,17 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
+    }
+  }
+
   .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
@@ -73091,6 +73123,7 @@ $bigger-splitbar-icon-size: 16px !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -73177,6 +73210,7 @@ $bigger-splitbar-icon-size: 16px !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,
@@ -94461,7 +94495,6 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -94471,6 +94504,16 @@ $editor-btn-icon-color: rgba($grey-light-font, .54) !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -103457,10 +103500,10 @@ $field-list-button-font-weight: 500 !default;
 $field-list-font-family: $font-family !default;
 $field-list-header-background-color: $grey-100 !default;
 $field-list-axis-header-color: $field-list-header-background-color !default;
-$field-list-toggle-bg-color: #fafafa !default;
+$field-list-toggle-bg-color: $grey-50 !default;
 $field-list-default-fill-color: $grey-white !default;
 $field-list-default-border-radius: 4px !default;
-$field-list-drop-hover-color: #9e9e9e !default;
+$field-list-drop-hover-color: $grey-500 !default;
 $field-list-button-font-color: $grey-light-font !default;
 $field-list-button-border-color: rgba($grey-light-font, .12) !default;
 $field-list-button-hover-color: $grey-200 !default;
@@ -103520,7 +103563,7 @@ $field-list-static-bigger-header-icon-wrapper-padding: 7px !default;
 $field-list-toggle-font-color: rgba($grey-light-font, .54) !default;
 $pivot-calculated-icon-opacity: .87 !default;
 $field-list-bigger-button-line-height: 1.1em !default;
-$error-font-color: #f44336 !default;
+$error-font-color: $error-font !default;
 $field-list-excel-member-filter-height: 150px !default;
 $field-list-excel-member-filter-node-limit-height: 145px !default;
 $field-list-excel-filter-height: 248px !default;
@@ -103601,7 +103644,7 @@ $field-list-header-padding-size: 14px !default;
 $field-list-axis-header-padding-size: 5px !default;
 $field-list-selected-color: rgba($header-bg-color, .87) !default;
 $field-list-button-color: $grey-50 !default;
-$field-list-button-back-color: #f5f5f5 !default;
+$field-list-button-back-color: $grey-100 !default;
 $field-list-header-text-transform: none !default;
 $field-list-icon-size: 14px !default;
 $field-list-toggle-icon-size: 17px !default;
@@ -108012,7 +108055,7 @@ $pivotgrid-grp-bg-color: $grey-100 !default;
 $pivotgrid-grp-bg-hover-color: rgba(0, 0, 0, .12) !default;
 $pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !default;
 $pivotgrid-drag-clone-color: $grey-200 !default;
-$pivotgrid-drop-hover-color: #9e9e9e !default;
+$pivotgrid-drop-hover-color: $grey-500 !default;
 $pivotview-grid-content-opacity: .87 !default;
 $pivotview-grid-header-font-size: 13px !default;
 $pivotview-bigger-grid-header-font-size: 13px !default;
@@ -108041,7 +108084,7 @@ $pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
 $pivotgrid-rtl-expand-icon-font-size: 10px !default;
 $pivotgrid-collapse-icon-fonsize: 10px !default;
 $pivotgrid-hover-color: $grey-400 !default;
-$pivotgrid-focus-color: #9e9e9e !default;
+$pivotgrid-focus-color: $grey-500 !default;
 $pivotgrid-button-icon-color: rgba($grey-black, .54) !default;
 $pivotgrid-button-active-icon-color: $pivotgrid-button-icon-color !default;
 $pivotgrid-icon-hover-color: rgba($grey-black, .87) !default;
@@ -108051,7 +108094,7 @@ $pivotgrid-vsort-column-parent-margin: 0 !default;
 $pivotgrid-vsort-row-margin: -8px 0 !default;
 $pivotgrid-vsort-row-parent-margin: 0 !default;
 $pivotgrid-tooltip-padding: 3px 4px !default;
-$pivotgrid-tooltip-fontcolor: #fff !default;
+$pivotgrid-tooltip-fontcolor: $accent-font !default;
 $pivotgrid-tooltip-fontsize: 14px !default;
 $pivotgrid-tooltip-fontfamily: Roboto !default;
 $pivotgrid-member-filter-list-height: 150px !default;
@@ -108149,8 +108192,8 @@ $pivotpager-single-title-font-size: 14px !default;
 $pivotpager-touch-single-title-font-size: 16px !default;
 $pivotpager-single-title-line-height: 2.4em !default;
 $pivotpager-touch-single-title-line-height: 2.8em !default;
-$pivotpager-axis-title-font-color: #9e9e9e !default;
-$pivotpager-size-title-font-color: #424242 !default;
+$pivotpager-axis-title-font-color: $grey-500 !default;
+$pivotpager-size-title-font-color: $grey-800 !default;
 $pivotpager-string-font-touch-size: 14px !default;
 $pivotpager-pager-number-font-weight: 400 !default;
 $pivotpager-v-separator-margin: 8px 16px !default;
@@ -111628,8 +111671,6 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
-            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
           }
           @else {
             border-bottom-right-radius: 0;
@@ -111658,14 +111699,16 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -111809,8 +111852,8 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -111853,6 +111896,8 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -111871,11 +111916,11 @@ $qrybldr-btngrp-brdr-radius: 2px !default;
       & .e-btn.e-btngroup-or-lbl.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-right-radius: 20px;
-          border-top-right-radius: 20px;
         }
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
 
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
@@ -118776,13 +118821,11 @@ $image-editor-contextual-toolbar: $grey-50 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }
@@ -121449,6 +121492,7 @@ $ribbon-overflow-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1p
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {

package/SCSS-Themes/material3-dark.scss

@@ -5400,7 +5400,7 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -9px;
+      top: -7px;
     }
   }
 
@@ -5441,7 +5441,7 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -8px;
+      top: -7px;
     }
   }
 
@@ -9950,6 +9950,16 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin-left: $outline-small-input-icon-margin-left;
+      margin-right: $zero-value;
+    }
+  }
+
   .e-outline.e-input-group.e-small .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group .e-clear-icon,
@@ -10033,6 +10043,17 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
+    }
+  }
+
   input.e-input.e-bigger.e-outline,
   .e-bigger input.e-input.e-outline,
   .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
@@ -10239,6 +10260,17 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
+    }
+  }
+
   .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
@@ -73597,6 +73629,7 @@ $split-bar-hover-border-right: none !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -73683,6 +73716,7 @@ $split-bar-hover-border-right: none !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,
@@ -95039,7 +95073,6 @@ $editor-btn-icon-color: rgba($icon-color) !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -95049,6 +95082,16 @@ $editor-btn-icon-color: rgba($icon-color) !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -112235,8 +112278,6 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
-            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
           }
           @else {
             border-bottom-right-radius: 0;
@@ -112265,14 +112306,16 @@ $qrybldr-icon-color: rgba($icon-color) !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -112416,8 +112459,8 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -112460,6 +112503,8 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -112478,11 +112523,11 @@ $qrybldr-icon-color: rgba($icon-color) !default;
       & .e-btn.e-btngroup-or-lbl.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-right-radius: 20px;
-          border-top-right-radius: 20px;
         }
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
 
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
@@ -119395,13 +119440,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }
@@ -122080,6 +122123,7 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {

package/SCSS-Themes/material3.scss

@@ -5482,7 +5482,7 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -9px;
+      top: -7px;
     }
   }
 
@@ -5523,7 +5523,7 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -8px;
+      top: -7px;
     }
   }
 
@@ -10032,6 +10032,16 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin-left: $outline-small-input-icon-margin-left;
+      margin-right: $zero-value;
+    }
+  }
+
   .e-outline.e-input-group.e-small .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group .e-clear-icon,
@@ -10115,6 +10125,17 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
+    }
+  }
+
   input.e-input.e-bigger.e-outline,
   .e-bigger input.e-input.e-outline,
   .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
@@ -10321,6 +10342,17 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
+    }
+  }
+
   .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
@@ -73679,6 +73711,7 @@ $split-bar-hover-border-right: none !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -73765,6 +73798,7 @@ $split-bar-hover-border-right: none !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,
@@ -95121,7 +95155,6 @@ $editor-btn-icon-color: rgba($icon-color) !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -95131,6 +95164,16 @@ $editor-btn-icon-color: rgba($icon-color) !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -112317,8 +112360,6 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
-            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
           }
           @else {
             border-bottom-right-radius: 0;
@@ -112347,14 +112388,16 @@ $qrybldr-icon-color: rgba($icon-color) !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -112498,8 +112541,8 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -112542,6 +112585,8 @@ $qrybldr-icon-color: rgba($icon-color) !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -112560,11 +112605,11 @@ $qrybldr-icon-color: rgba($icon-color) !default;
       & .e-btn.e-btngroup-or-lbl.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-right-radius: 20px;
-          border-top-right-radius: 20px;
         }
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
 
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
@@ -119477,13 +119522,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }
@@ -122162,6 +122205,7 @@ $ribbon-overflow-box-shadow: $shadow-md !default;
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {

package/SCSS-Themes/pivotview/pivotfieldlist/bootstrap.scss

@@ -71,10 +71,10 @@ $field-list-axis-header-color: $field-list-header-background-color !default;
 $field-list-default-fill-color: $grey-white !default;
 $field-list-default-border-radius: 0 !default;
 $field-list-drop-hover-color: $grey-99 !default;
-$field-list-toggle-bg-color: #f5f5f5 !default;
+$field-list-toggle-bg-color: $grey-f5 !default;
 $field-list-button-font-color: $grey-light-font !default;
 $field-list-button-border-color: $grey-d4 !default;
-$field-list-button-back-color: #f5f5f5 !default;
+$field-list-button-back-color: $grey-f5 !default;
 $field-list-drag-clone-text-color: $grey-light-font !default;
 $field-list-drag-clone-border-radius: 4px !default;
 $field-list-editor-dialog-footer-padding: 15px !default;
@@ -112,7 +112,7 @@ $field-list-button-focus-color: $grey-e6 !default;
 $field-list-button-icon-color: $grey-light-font !default;
 $field-list-icon-hover-color: $grey-light-font !default;
 $field-list-treeview-font-weight: bold !default;
-$error-font-color: #a94442 !default;
+$error-font-color: $brand-danger-dark !default;
 $field-list-excel-member-filter-height: 143px !default;
 $field-list-excel-member-filter-node-limit-height: 140px !default;
 $field-list-excel-filter-height: 234px !default;