npm - @syncfusion/blazor-themes - Versions diffs - 24.1.45 → 24.1.47 - Mend

@syncfusion/blazor-themes 24.1.45 → 24.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/SCSS-Themes/pdfviewer/pdfviewer/material3.scss CHANGED Viewed

@@ -2264,8 +2264,6 @@ $pv-search-btn-width-big: 32px !default;
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:hover,
-  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
-  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
   .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
@@ -2286,6 +2284,20 @@ $pv-search-btn-width-big: 32px !default;
       color: $pv-item-selection-color;
     }
   }
+  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
+  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus
+  {
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $pv-icon-color;
+    }
+    @if $skin-name == 'FluentUI' {
+      color: $pv-item-selection-color;
+    }
+  }
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,

package/SCSS-Themes/pdfviewer/pdfviewer/tailwind-dark.scss CHANGED Viewed

@@ -2265,8 +2265,6 @@ $pv-eye-icon-margin-top: 3px !default;
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:hover,
-  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
-  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
   .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
@@ -2287,6 +2285,20 @@ $pv-eye-icon-margin-top: 3px !default;
       color: $pv-item-selection-color;
     }
   }
+  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
+  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus
+  {
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $pv-icon-color;
+    }
+    @if $skin-name == 'FluentUI' {
+      color: $pv-item-selection-color;
+    }
+  }
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,

package/SCSS-Themes/pdfviewer/pdfviewer/tailwind.scss CHANGED Viewed

@@ -2265,8 +2265,6 @@ $pv-eye-icon-margin-top: 3px !default;
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:hover,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:hover,
-  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
-  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
   .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
   .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
@@ -2287,6 +2285,20 @@ $pv-eye-icon-margin-top: 3px !default;
       color: $pv-item-selection-color;
     }
   }
+  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
+  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus
+  {
+    @if $skin-name == 'bootstrap4' {
+      color: $pv-icon-color-hover;
+    }
+    @if $skin-name == 'bootstrap5' {
+      color: $pv-icon-color;
+    }
+    @if $skin-name == 'FluentUI' {
+      color: $pv-item-selection-color;
+    }
+  }
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
   .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,

package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 6px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 2px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
 $ribbon-bigger-large-items-btn-padding: 0 6px !default;
 $ribbon-bigger-large-items-btn-size: 14px !default;
 $ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/bootstrap.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 6px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: 14px !default;
 $ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-large-items-btn-gap: 9px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 5px 6px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
 $ribbon-bigger-large-items-btn-padding: 0 3px !default;
 $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
+$ribbon-bigger-large-items-btn-gap: 6px !default;
 $ribbon-bigger-items-padding: 1px !default;
 $ribbon-bigger-items-btn-size: 16px !default;
 $ribbon-bigger-items-height: 24px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 18px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 18px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 12px 7px 4px !default;
+$ribbon-large-items-btn-gap: 6px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: 14px !default;
 $ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/fabric.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 12px 5px 4px !default;
+$ribbon-large-items-btn-gap: 5px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 6px !default;
 $ribbon-bigger-large-items-btn-size: 14px !default;
 $ribbon-bigger-large-items-btn-height: 22px !default;
+$ribbon-bigger-large-items-btn-gap: 9px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/fluent-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
 $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-btn-gap: 4px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 2px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 125% !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 125% !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/fluent.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
 $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-btn-gap: 4px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 2px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 125% !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 125% !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

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

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 22px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 12px 10px 4px !default;
+$ribbon-large-items-btn-gap: 8px !default;
 $ribbon-items-border: 2px solid !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/material-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 6px !default;
+$ribbon-large-items-btn-gap: 7px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
+$ribbon-bigger-large-items-btn-gap: 6px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

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

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: 32px !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 6px !default;
+$ribbon-large-items-btn-gap: 7px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: unset !default;
 $ribbon-items-font-weight: 400 !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: 16px !default;
 $ribbon-bigger-large-items-btn-height: 24px !default;
+$ribbon-bigger-large-items-btn-gap: 6px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: 14px !default;
 $ribbon-bigger-items-height: 22px !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: unset !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/material3-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 15px !default;
 $ribbon-large-items-icon-size: $text-4xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 4px 3px !default;
+$ribbon-large-items-btn-gap: 4px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 3px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-large-items-btn-gap: 9px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 18px !default;
@@ -931,6 +933,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1556,6 +1562,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/material3.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-height: 15px !default;
 $ribbon-large-items-icon-size: $text-4xl !default;
 $ribbon-large-items-max-width: 10ch !default;
 $ribbon-large-items-icon-padding: 4px 3px !default;
+$ribbon-large-items-btn-gap: 4px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
 $ribbon-bigger-large-items-btn-padding: 0 3px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 18px !default;
+$ribbon-bigger-large-items-btn-gap: 9px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 18px !default;
@@ -931,6 +933,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1556,6 +1562,10 @@ $ribbon-filemenu-popup-border-radius: 4px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {

package/SCSS-Themes/ribbon/ribbon/tailwind-dark.scss CHANGED Viewed

@@ -57,6 +57,7 @@ $ribbon-large-items-btn-padding: 0 2px !default;
 $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
 $ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-btn-gap: 4px !default;
 $ribbon-items-border: none !default;
 $ribbon-items-border-radius: 4px !default;
 $ribbon-items-font-weight: $font-weight-normal !default;
@@ -153,6 +154,7 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
 $ribbon-bigger-large-items-btn-padding: 0 5px !default;
 $ribbon-bigger-large-items-btn-size: $text-sm !default;
 $ribbon-bigger-large-items-btn-height: 125% !default;
+$ribbon-bigger-large-items-btn-gap: 8px !default;
 $ribbon-bigger-items-padding: 2px !default;
 $ribbon-bigger-items-btn-size: $text-sm !default;
 $ribbon-bigger-items-height: 125% !default;
@@ -932,6 +934,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
           .e-icon-top {
             height: 50%;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-large-items-btn-gap;
+          }
         }
         & > .e-split-btn-wrapper.e-vertical .e-btn {
@@ -1557,6 +1563,10 @@ $ribbon-filemenu-popup-border-radius: 2px !default;
             font-size: $ribbon-bigger-large-items-icon-size;
             padding: $ribbon-bigger-large-items-icon-padding;
           }
+          &.e-top-icon-btn {
+            gap: $ribbon-bigger-large-items-btn-gap;
+          }
         }
         .e-dropdown-btn {