@syncfusion/blazor-themes 22.1.34 → 22.1.37

package/SCSS-Themes/inputs/input/tailwind-dark.scss

@@ -1793,7 +1793,7 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
   .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;
     }
   }
 
@@ -1834,7 +1834,7 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
   .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;
     }
   }
 
@@ -6343,6 +6343,16 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,
@@ -6426,6 +6436,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,
@@ -6632,6 +6653,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,

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

@@ -1793,7 +1793,7 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
   .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;
     }
   }
 
@@ -1834,7 +1834,7 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
   .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;
     }
   }
 
@@ -6343,6 +6343,16 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,
@@ -6426,6 +6436,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,
@@ -6632,6 +6653,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
     }
   }
 
+  .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,

package/SCSS-Themes/layouts/splitter/bootstrap-dark.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/bootstrap.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/bootstrap4.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/bootstrap5-dark.scss

@@ -483,6 +483,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) {
@@ -569,6 +570,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,

package/SCSS-Themes/layouts/splitter/bootstrap5.scss

@@ -483,6 +483,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) {
@@ -569,6 +570,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,

package/SCSS-Themes/layouts/splitter/fabric-dark.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/fabric.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/fluent-dark.scss

@@ -483,6 +483,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -569,6 +570,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,

package/SCSS-Themes/layouts/splitter/fluent.scss

@@ -483,6 +483,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -569,6 +570,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,

package/SCSS-Themes/layouts/splitter/highcontrast.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/material-dark.scss

@@ -478,6 +478,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) {
@@ -564,6 +565,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,

package/SCSS-Themes/layouts/splitter/material.scss

@@ -479,6 +479,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) {
@@ -565,6 +566,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,

package/SCSS-Themes/layouts/splitter/material3-dark.scss

@@ -483,6 +483,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) {
@@ -569,6 +570,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,

package/SCSS-Themes/layouts/splitter/material3.scss

@@ -483,6 +483,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) {
@@ -569,6 +570,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,

package/SCSS-Themes/layouts/splitter/tailwind-dark.scss

@@ -483,6 +483,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -569,6 +570,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,

package/SCSS-Themes/layouts/splitter/tailwind.scss

@@ -483,6 +483,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -569,6 +570,7 @@ $split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,

package/SCSS-Themes/material-dark.scss

@@ -5118,7 +5118,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;
     }
   }
 
@@ -5159,7 +5159,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;
     }
   }
 
@@ -9668,6 +9668,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,
@@ -9751,6 +9761,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,
@@ -9957,6 +9978,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,
@@ -73364,6 +73396,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) {
@@ -73450,6 +73483,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,
@@ -94749,7 +94783,6 @@ $editor-btn-icon-color: $grey-dark-font !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -94759,6 +94792,16 @@ $editor-btn-icon-color: $grey-dark-font !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -103735,7 +103778,7 @@ $field-list-toggle-border-color: rgba($grey-black, .12) !default;
 $field-list-border-type: $border-type !default;
 $field-list-border-size: $border-size !default;
 $field-list-table-background-color: rgba($grey-black, .42) !default;
-$field-list-default-bg-color: #424242 !default;
+$field-list-default-bg-color: $grey-800 !default;
 $field-list-default-padding-size: 8px !default;
 $field-list-title-padding-size: 20px !default;
 $field-list-title-font-size: 18px !default;
@@ -103745,7 +103788,7 @@ $field-list-button-font-weight: 500 !default;
 $field-list-font-family: $font-family !default;
 $field-list-header-background-color: $grey-900 !default;
 $field-list-axis-header-color: $field-list-header-background-color !default;
-$field-list-toggle-bg-color: #424242 !default;
+$field-list-toggle-bg-color: $grey-800 !default;
 $field-list-default-fill-color: $grey-white !default;
 $field-list-default-border-radius: 4px !default;
 $field-list-drop-hover-color: $grey-600 !default;
@@ -103889,7 +103932,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-700 !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;
@@ -108320,7 +108363,7 @@ $pivotgrid-default-border-radius: 4px !default;
 $pivotgrid-button-icon-size: 12px !default;
 $pivotgrid-bigger-button-icon-size: 14px !default;
 $pivotgrid-button-border-radius: 25px !default;
-$pivotgrid-button-background-color: #424242 !default;
+$pivotgrid-button-background-color: $grey-800 !default;
 $pivotgrid-editor-dialog-footer-padding: 10px !default;
 $pivotgrid-button-drag-color: $accent !default;
 $pivotgrid-expand-icon-fontsize: 10px !default;
@@ -108442,8 +108485,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;
@@ -111922,8 +111965,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;
@@ -111952,14 +111993,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;
@@ -112103,8 +112146,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 {
@@ -112147,6 +112190,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;
@@ -112165,11 +112210,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;
@@ -119070,13 +119115,11 @@ $image-editor-contextual-toolbar: $grey-900 !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 */
     }
   }
@@ -121743,6 +121786,7 @@ $ribbon-overflow-box-shadow: 0 3px 8px 0 rgba($grey-black, .26) !default;
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {