@syncfusion/blazor-themes 22.1.34 → 22.1.37

package/SCSS-Themes/ribbon/ribbon/highcontrast.scss

@@ -913,6 +913,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !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/ribbon/ribbon/material-dark.scss

@@ -913,6 +913,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 {

package/SCSS-Themes/ribbon/ribbon/material.scss

@@ -913,6 +913,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/ribbon/ribbon/material3-dark.scss

@@ -913,6 +913,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/ribbon/ribbon/material3.scss

@@ -913,6 +913,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/ribbon/ribbon/tailwind-dark.scss

@@ -913,6 +913,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/ribbon/ribbon/tailwind.scss

@@ -913,6 +913,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/tailwind-dark.scss

@@ -4918,7 +4918,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;
     }
   }
 
@@ -4959,7 +4959,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;
     }
   }
 
@@ -9468,6 +9468,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,
@@ -9551,6 +9561,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,
@@ -9757,6 +9778,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,
@@ -72417,6 +72449,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) {
@@ -72503,6 +72536,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,
@@ -93807,7 +93841,6 @@ $editor-btn-icon-color: $icon-color !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -93817,6 +93850,16 @@ $editor-btn-icon-color: $icon-color !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -110971,8 +111014,6 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -111001,14 +111042,16 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -111152,8 +111195,8 @@ $qrybldr-collapse-brdr-color: $border-light !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 {
@@ -111196,6 +111239,8 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -111214,11 +111259,11 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -118121,13 +118166,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 */
     }
   }
@@ -120794,6 +120837,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/tailwind.scss

@@ -4915,7 +4915,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;
     }
   }
 
@@ -4956,7 +4956,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;
     }
   }
 
@@ -9465,6 +9465,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,
@@ -9548,6 +9558,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,
@@ -9754,6 +9775,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,
@@ -72414,6 +72446,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) {
@@ -72500,6 +72533,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,
@@ -93804,7 +93838,6 @@ $editor-btn-icon-color: $icon-color !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -93814,6 +93847,16 @@ $editor-btn-icon-color: $icon-color !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -110968,8 +111011,6 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -110998,14 +111039,16 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -111149,8 +111192,8 @@ $qrybldr-collapse-brdr-color: $border-light !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 {
@@ -111193,6 +111236,8 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -111211,11 +111256,11 @@ $qrybldr-collapse-brdr-color: $border-light !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;
@@ -118118,13 +118163,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 */
     }
   }
@@ -120791,6 +120834,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/package.json

@@ -1 +1 @@
-{"name":"@syncfusion/blazor-themes","version":"22.1.34","description":"This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.","author":"Syncfusion Inc.","license":"SEE LICENSE IN license","keywords":["Blazor","Blazor Themes","Syncfusion","Syncfusion Blazor","Web components","Themes","Individual Themes","Combined Themes","Syncfusion Blazor SCSS"],"repository":{"type":"git","url":"git@github.com/syncfusion/blazor-samples"}}
+{"name":"@syncfusion/blazor-themes","version":"22.1.37","description":"This package contains the individual component wise SCSS files and single SCSS files for Syncfusion Blazor components.","author":"Syncfusion Inc.","license":"SEE LICENSE IN license","keywords":["Blazor","Blazor Themes","Syncfusion","Syncfusion Blazor","Web components","Themes","Individual Themes","Combined Themes","Syncfusion Blazor SCSS"],"repository":{"type":"git","url":"git@github.com/syncfusion/blazor-samples"}}