@syncfusion/ej2-navigations 24.2.8 → 25.1.35

package/styles/tab/icons/_bds.scss

@@ -0,0 +1,92 @@
+@include export-module('tab-bds-icons') {
+
+  /*! tab icons */
+  #{&}.e-tab {
+
+    .e-tab-header {
+
+      .e-close-icon::before {
+        content: '\e7e7';
+        position: relative;
+      }
+    }
+
+    &.e-vertical-icon .e-tab-header {
+
+      @media screen and (max-width: 480px) {
+
+        .e-popup-up-icon::before {
+          content: '\e776';
+        }
+
+        .e-popup-down-icon::before {
+          content: '\e729';
+        }
+      }
+    }
+
+    &.e-vertical-tab {
+
+      .e-tab-header {
+
+        .e-popup-up-icon {
+
+          &::before {
+            content: 'More';
+          }
+
+          &::after {
+            content: '\e776';
+          }
+        }
+
+        .e-popup-down-icon {
+
+          &::before {
+            content: 'More';
+          }
+
+          &::after {
+            content: '\e729';
+          }
+        }
+      }
+
+      &.e-icon-tab {
+
+        .e-tab-header {
+
+          .e-popup-up-icon {
+
+            &::before {
+              content: '';
+            }
+
+            &::after {
+              content: '\e776';
+            }
+          }
+
+          .e-popup-down-icon {
+
+            &::before {
+              content: '';
+            }
+
+            &::after {
+              content: '\e729';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-tab-clone-element {
+
+    .e-close-icon::before {
+      content: '\e7e7';
+      position: relative;
+    }
+  }
+}

package/styles/tailwind-dark.css

@@ -1492,8 +1492,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 5px 6px;
 }
@@ -1850,7 +1850,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -2184,7 +2184,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3169,6 +3168,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -8549,7 +8554,7 @@
 }
 .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
 .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
-  background-color: #4b5563;
+  background-color: #353c46;
   border-color: #4b5563;
 }
 .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
@@ -8596,7 +8601,7 @@
 }
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
-  background-color: #4b5563;
+  background-color: #353c46;
   border-color: #4b5563;
 }
 .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
@@ -10632,6 +10637,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/tailwind.css

@@ -1492,8 +1492,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 5px 6px;
 }
@@ -1850,7 +1850,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -2184,7 +2184,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3169,6 +3168,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10632,6 +10637,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/toolbar/_bds-definition.scss

@@ -0,0 +1,215 @@
+$tbar-skin: $skin-name !default;
+$border-size: 0;
+$border-type: solid;
+$tbar-icons-bgr-font-size: 22px;
+$tbar-separator-bgr-mrgn: 8px 6px;
+$tbar-separator-vertical-bgr-mrgn: 5px 10px;
+$tbar-radius: 0;
+$tbar-separator-nrml-mrgn: 7px 4px;
+$tbar-pop-radius: 4px;
+$tbar-separator-vertical-nrml-mrgn: 3px 7px;
+$tbar-border-size: $border-size;
+$tbar-separator-border-type: $border-type;
+$tbar-pop-box-shadow: $shadow-lg;
+$tbar-hover-border-color: $icon-color;
+$tbar-pressed-border: $tbar-hover-border-color;
+$tbar-zero-value: 0 !default;
+$tbar-border-radius: 4px !default;
+$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$tbar-border-nav-type: solid !default;
+$tbar-btn-box-shadow: none !default;
+
+$tbar-default-bg: $content-bg-color-alt2 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-default-font: $content-text-color !default;
+$tbar-active-bg: $content-bg-color-alt3 !default;
+$tbar-active-icon-color: $icon-color !default;
+$tbar-press-bg: $content-bg-color-alt2 !default;
+$tbar-btn-press-bg: $tbar-press-bg !default;
+$tbar-press-border-color: $border-light !default;
+$tbar-hover-bg:  $content-bg-color-alt4 !default;
+$tbar-hover-font: $content-text-color-alt2 !default;
+$tbar-default-icon-color: $icon-color !default;
+$tbar-pressed-bg: $content-bg-color-alt2 !default;
+$tbar-pressed-font: $content-text-color-alt2 !default;
+$tbar-select-font: $content-text-color-alt2 !default;
+$tbar-default-icon-overlay: $content-text-color-alt2 !default;
+$tbar-separator-border: $border-light !default;
+$tbar-default-border: $border-light !default;
+$tbar-hover-border-color: $icon-color !default;
+$tbar-focus-border-color: $tbar-hover-border-color !default;
+$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-press-font: $content-text-color-alt2 !default;
+
+$tbar-default-font-overlay: $content-text-color-alt2 !default;
+$tbar-active-font-color: $tbar-press-font !default;
+$tbar-border-nav-type: $border-light !default;
+$tbar-border-nav-active-type: $border-light !default;
+$tbar-btn-border: none !default;
+
+$tbar-box-shadow: none !default;
+$tbar-border-type: $border-type !default;
+$tbar-separator-size: 1px !default;
+$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
+$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
+$tbar-popup-border-width: 0 0 0 1px !default;
+$tbar-popup-rtl-border-width: 0 1px 0 0 !default;
+$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
+$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-nrml-size: 48px !default;
+$tbar-bgr-size: 56px !default;
+$tbar-nrml-items-size: 32px !default;
+$tbar-bgr-items-size: 40px !default;
+$tbar-nrml-item-size: 32px !default;
+$tbar-item-height: 32px !default;
+$tbar-item-nrml-minwidth: 28px !default;
+$tbar-bgr-item-size: 49px !default;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+$tbar-item-pop-bg-color: $transparent !default;
+
+$tbar-item-bgr-padding: 8px 4px !default;
+$tbar-item-nrml-padding: 8px 4px !default;
+$tbar-btn-nrml-padding: 0 4px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 8px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-rtl-btn-icn-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-nrml-padding: 4px !default;
+$tbar-rtl-btn-icn-right-bgr-padding: 4px 6px !default;
+$btn-txt-nrml-padding: 8px 4px !default;
+$btn-txt-bgr-padding: 8px 4px !default;
+$btn-rtl-txt-nrml-padding: 8px 4px !default;
+$btn-rtl-txt-bgr-padding: 8px 4px !default;
+
+$tbar-pop-bg: $tbar-default-bg !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 18px !default;
+$tbar-pop-btn-nrml-padding: 6px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
+
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 1px solid $tbar-default-border !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-border-radius: 4px !default;
+$tbar-btn-pressed-box-shadow: none !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-popup-padding: 0 !default;
+$tbar-btn-nrml-minheight: 32px !default;
+$tbar-btn-nrml-line-height: 1 !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
+$tbar-btn-bgr-minheight: 40px !default;
+$tbar-btn-bgr-line-height: 1 !default;
+$tbar-btn-icon-bgr-line-height: 17px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-btn-bgr-minwidth: 40px !default;
+$tbar-separator-nrml-height: 24px !default;
+$tbar-separator-bgr-height: 30px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
+$tbar-btn-icon-nrml-width: 12px !default;
+$tbar-btn-icon-nrml-height: 16px !default;
+$tbar-right-item-line-height: 1 !default;
+$tbar-btn-icon-bgr-width: 13px !default;
+$tbar-nav-nrml-width: 28px !default;
+$tbar-nav-bgr-width: 36px !default;
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 10px !default;
+$tbar-btn-pop-nrml-minheight: 38px !default;
+$tbar-btn-pop-bgr-minheight: 48px !default;
+$tbar-multirow-items-mrgn-bigger: 12.5px !default;
+$tbar-multirow-items-mrgn-small: 10px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
+
+$tbar-bgr-btn-text-font-size: $text-base !default;
+$tbar-bgr-btn-icon-font-size: 20px !default;
+$tbar-bgr-btn-focus-padding: 0 8px !default;
+
+$tbar-nrml-btn-border-radius: 4px !default;
+$tbar-nrml-btn-focus-padding: 0 4px !default;
+$tbar-nrml-btn-focus-outline: 0 !default;
+
+$tbar-btn-icons-focus-color: $icon-color !default;
+$tbar-btn-text-focus-color: $content-text-color !default;
+$tbar-btn-focus-border-color: $tbar-focus-border-color !default;
+$tbar-btn-hover-border-size: $tbar-border-size !default;
+$tbar-btn-hover-active-icons-color: $icon-color !default;
+$tbar-btn-hover-active-text-color: $content-text-color !default;
+$tbar-btn-overlay-opacity: .5 !default;
+$tbar-btn-active-bg: $tbar-press-bg !default;
+$tbar-btn-active-icons-color: $icon-color !default;
+$tbar-btn-active-text-color: $content-text-color !default;
+$tbar-btn-text-color: $content-text-color !default;
+$tbar-btn-pressed-text-color: $secondary-text-color-pressed !default;
+$tbar-btn-pressed-focus-box-shadow: $shadow-sm !default;
+$tbar-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$tbar-flat-btn-active-box-shadow: $shadow-sm !default;
+
+$tbar-ext-btn-focus-padding: 0 4px !default;
+$tbar-ext-btn-icon-padding: 8px 4px !default;
+$tbar-ext-btn-icon-font-size: $text-base !default;
+$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
+$tbar-ext-btn-border: none !default;
+
+$tbar-popup-icon-font-size: $text-lg !default;
+$tbar-popup-text-btn-icon-padding: 0 !default;
+$tbar-popup-bgr-text-btn-icon-padding: 0 !default;
+$tbar-popup-btn-border: none !default;
+$tbar-popup-btn-border-radius: 4px !default;
+$tbar-popup-bgr-height: 38px !default;
+$tbar-popup-bgr-btn-icon-font-size: $text-base !default;
+$tbar-popup-bgr-btn-text-font-size: $text-base !default;
+$tbar-popup-nav-active-border-bottom-right-radius: 0 !default;
+$tbar-popup-nav-active-bg: $tbar-default-bg !default;
+$tbar-popup-nav-active-icons-color: $tbar-default-icon-color !default;
+$tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-color: $tbar-hover-font !default;
+$tbar-popup-nav-hover-icons-color: $icon-color !default;
+$tbar-popup-nav-hover-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
+$tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
+$tbar-popup-nav-hover-active-border-size: 0 !default;
+$tbar-popup-nav-focus-bg: $tbar-hover-bg !default;
+$tbar-popup-nav-focus-color: $tbar-hover-font !default;
+$tbar-popup-nav-focus-border-color: $icon-color !default;
+$tbar-popup-nav-focus-border-size: 0 !default;
+$tbar-popup-btn-bg: $transparent !default;
+$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-hover-box-shadow: none !default;
+$tbar-popup-btn-active-bg: transparent !default;
+$tbar-popup-btn-active-box-shadow: none !default;
+$tbar-popup-btn-focus-bg: $tbar-hover-bg !default;
+$tbar-popup-btn-focus-box-shadow: none !default;
+$tbar-popup-nav-pressed-icons-active-color: $tbar-active-font-color !default;
+$tbar-popup-btn-focus-outline: 0 !default;
+$tbar-popup-nav-pressed-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-border-size: 0 !default;
+$tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
+$tbar-popup-nav-pressed-focus-border-size: 0 !default;
+$tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}
+
+/* stylelint-disable */
+.e-toolbar-pop {
+  padding: 6px !important;
+}

package/styles/toolbar/_layout.scss

@@ -98,7 +98,7 @@
         }
       }
 
-      &:not(.e-separator) {
+      &:not(.e-separator):not(.e-spacer) {
         min-width: $tbar-bgr-item-size;
         padding: $tbar-item-bgr-padding;
       }
@@ -312,7 +312,7 @@
       }
     }
   }
-
+  
   .e-toolbar {
     border-radius: $tbar-radius;
     display: block;
@@ -342,6 +342,7 @@
         }
       }
     }
+  
 
     .e-blazor-toolbar-items {
       position: absolute;
@@ -481,7 +482,7 @@
       vertical-align: middle;
       width: auto;
       flex: 0 0 auto;
-      
+
       &.e-spacer {
         flex-grow: 1;
       }
@@ -545,7 +546,7 @@
         }
       }
 
-      &:not(.e-separator) {
+      &:not(.e-separator):not(.e-spacer) {
         height: inherit;
         min-width: $tbar-item-nrml-minwidth;
         padding: $tbar-item-nrml-padding;
@@ -924,7 +925,7 @@
           }
         }
       }
-
+      
       .e-toolbar-item {
 
         .e-tbar-btn {
@@ -996,10 +997,8 @@
         }
 
         &:not(.e-tbar-pos) {
-
           .e-toolbar-item:first-child {
             margin-left: 0;
-            margin-right: $tbar-item-nrml-mrgn;
           }
         }
 

package/styles/toolbar/bootstrap-dark.css

@@ -101,8 +101,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 2.5px 5px;
 }
@@ -459,7 +459,7 @@
   font-size: 14px;
   padding: 0 12px 0 6px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 4px 2.5px;
@@ -793,7 +793,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 15px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/bootstrap.css

@@ -102,8 +102,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 2.5px 5px;
 }
@@ -460,7 +460,7 @@
   font-size: 14px;
   padding: 0 12px 0 6px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 4px 2.5px;
@@ -794,7 +794,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/bootstrap4.css

@@ -102,8 +102,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 0;
   padding: 8px 2.5px;
 }
@@ -460,7 +460,7 @@
   font-size: 14px;
   padding: 0 6px 0 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 30px;
   padding: 3px 4px;
@@ -794,7 +794,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 12px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/bootstrap5-dark.css

@@ -113,8 +113,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 4px;
 }
@@ -471,7 +471,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -805,7 +805,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/bootstrap5.css

@@ -113,8 +113,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px 6px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 4px;
 }
@@ -471,7 +471,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 28px;
   padding: 4px;
@@ -805,7 +805,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/fabric-dark.css

@@ -101,8 +101,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 0 1.5px;
 }
@@ -459,7 +459,7 @@
   font-size: 14px;
   padding: 0 12px 0 8px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 34px;
   padding: 0 1px;
@@ -793,7 +793,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {

package/styles/toolbar/fabric.css

@@ -102,8 +102,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 0 12px 0 0;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 49px;
   padding: 0 1.5px;
 }
@@ -460,7 +460,7 @@
   font-size: 14px;
   padding: 0 12px 0 8px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 34px;
   padding: 0 1px;
@@ -794,7 +794,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 3px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {