@syncfusion/ej2-navigations 19.3.54 → 19.4.40

package/styles/toolbar/bootstrap-dark.css

@@ -110,7 +110,6 @@
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
   line-height: inherit;
-  line-height: inherit;
 }
 
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
@@ -242,23 +241,15 @@
   line-height: 34px;
 }
 
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 6px;
 }
@@ -365,23 +356,15 @@
   padding: 1px 7px;
 }
 
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
+.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 6px;
 }
@@ -587,15 +570,7 @@
   line-height: 25px;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0 1.5px;
 }
 
@@ -1067,15 +1042,7 @@
   line-height: 27px;
 }
 
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
+.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0 1.5px;
 }
 
@@ -1304,6 +1271,10 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #131313;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #2a2a2a;

package/styles/toolbar/bootstrap.css

@@ -113,7 +113,6 @@
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
   line-height: inherit;
-  line-height: inherit;
 }
 
 .e-bigger .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
@@ -245,23 +244,15 @@
   line-height: 34px;
 }
 
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 6px;
 }
@@ -368,23 +359,15 @@
   padding: 1px 7px;
 }
 
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
+.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
-.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
-}
-
-.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-bigger .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
+.e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
 .e-toolbar.e-bigger.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 6px;
 }
@@ -590,15 +573,7 @@
   line-height: 25px;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0 1.5px;
 }
 
@@ -1070,15 +1045,7 @@
   line-height: 27px;
 }
 
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
+.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0 1.5px;
 }
 
@@ -1307,6 +1274,10 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #f8f8f8;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #d4d4d4;

package/styles/toolbar/bootstrap4.css

@@ -121,7 +121,6 @@
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
-  line-height: 32px;
   line-height: inherit;
 }
 
@@ -253,27 +252,16 @@
   line-height: 34px;
 }
 
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
-  padding: 0 6px;
-  padding: 0 4.5px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
-.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
-  padding: 0 6px;
-  padding: 0 4.5px;
-}
-
-.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus,
+.e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
-  padding: 0 6px;
   padding: 0 4.5px;
 }
 
@@ -593,15 +581,7 @@
   line-height: 26px;
 }
 
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover {
-  padding: 0 1.5px;
-}
-
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:focus, .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0 1.5px;
 }
 
@@ -1270,6 +1250,8 @@
   border-color: #6c757d;
   border-radius: 4px;
   color: #fff;
+  border: 1px solid #6c757d;
+  box-shadow: 0 0 0 3px rgba(130, 138, 145, 0.5);
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
@@ -1318,6 +1300,10 @@
   background: #fff;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #f8f9fa;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #6c757d;

package/styles/toolbar/bootstrap5-dark.css

@@ -10,6 +10,7 @@
 }
 
 /*! component's theme wise override definitions and variables */
+/*! Toolbar's bootstrap5 theme wise override definitions and variables */
 /*! toolbar icons */
 .e-toolbar .e-popup-down-icon::before {
   content: '\e729';
@@ -241,7 +242,7 @@
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon {
-  padding: 0;
+  padding-bottom: 3px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
@@ -695,10 +696,9 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: auto;
+  height: 38px;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 38px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1015,7 +1015,7 @@
 }
 
 .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
-  padding: 0;
+  padding-bottom: 5px;
 }
 
 .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1241,7 +1241,7 @@
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
-  background: #343a40;
+  background: #565e64;
   border-color: #444c54;
   border-radius: 0;
   box-shadow: none;
@@ -1258,10 +1258,9 @@
 }
 
 .e-toolbar .e-toolbar-pop {
-  background: #282d31;
+  background: #343a40;
   border: 0 solid #444c54;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
-  background: #343a40;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {

package/styles/toolbar/bootstrap5.css

@@ -10,6 +10,7 @@
 }
 
 /*! component's theme wise override definitions and variables */
+/*! Toolbar's bootstrap5 theme wise override definitions and variables */
 /*! toolbar icons */
 .e-toolbar .e-popup-down-icon::before {
   content: '\e729';
@@ -241,7 +242,7 @@
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon {
-  padding: 0;
+  padding-bottom: 3px;
 }
 
 .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
@@ -695,10 +696,9 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: auto;
+  height: 38px;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 38px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1015,7 +1015,7 @@
 }
 
 .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
-  padding: 0;
+  padding-bottom: 5px;
 }
 
 .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
@@ -1241,7 +1241,7 @@
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
-  background: #e9ecef;
+  background: #565e64;
   border-color: #dee2e6;
   border-radius: 0;
   box-shadow: none;
@@ -1258,10 +1258,9 @@
 }
 
 .e-toolbar .e-toolbar-pop {
-  background: #f8f9fa;
+  background: #fff;
   border: 0 solid #dee2e6;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
-  background: #fff;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {

package/styles/toolbar/fabric-dark.css

@@ -1245,6 +1245,10 @@
   outline: none;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #333232;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #514f4f;

package/styles/toolbar/fabric.css

@@ -1246,6 +1246,10 @@
   outline: none;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #fff;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #d1ebff;

package/styles/toolbar/highcontrast-light.css

@@ -1250,7 +1250,6 @@
   border-radius: 0;
   box-shadow: none;
   color: #000;
-  color: #000;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active .e-icons,
@@ -1272,6 +1271,10 @@
   outline: none;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #fff;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #400074;

package/styles/toolbar/highcontrast.css

@@ -1251,7 +1251,6 @@
   border-radius: 0;
   box-shadow: none;
   color: #000;
-  color: #000;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active .e-icons,
@@ -1273,6 +1272,10 @@
   outline: none;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #000;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #ffd939;

package/styles/toolbar/icons/_fluent.scss

@@ -0,0 +1,16 @@
+
+@include export-module('toolbar-fluent-icons') {
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e7ae';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e7ae';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_tailwind.scss

@@ -1,16 +1,16 @@
-
-@include export-module('toolbar-tailwind-icons') {
-  /*! toolbar icons */
-  #{&}.e-toolbar {
-
-    .e-popup-down-icon::before {
-      content: '\e706';
-      line-height: normal;
-    }
-
-    .e-popup-up-icon::before {
-      content: '\e752';
-      line-height: normal;
-    }
-  }
-}
+
+@include export-module('toolbar-tailwind-icons') {
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e706';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e752';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/material-dark.css

@@ -721,7 +721,6 @@
   height: auto;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 36px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1273,6 +1272,10 @@
   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.21);
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #212121;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: rgba(255, 255, 255, 0.1);

package/styles/toolbar/material.css

@@ -721,10 +721,9 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: auto;
+  height: 36px;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 36px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1276,6 +1275,10 @@
   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.21);
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #fafafa;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: rgba(0, 0, 0, 0.12);

package/styles/toolbar/tailwind-dark.css

@@ -695,10 +695,9 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: auto;
+  height: 38px;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 38px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1219,14 +1218,14 @@
   background: #4b5563;
   border-color: #d1d5db;
   border-radius: 0;
-  color: #9ca3af;
+  color: #fff;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #4b5563;
   border-color: #d1d5db;
   border-radius: 0;
-  color: #9ca3af;
+  color: #fff;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
@@ -1234,7 +1233,7 @@
   border-color: #4b5563;
   border-radius: 0;
   box-shadow: none;
-  color: #9ca3af;
+  color: #fff;
 }
 
 .e-toolbar .e-tbar-btn.e-btn .e-icons {
@@ -1245,7 +1244,6 @@
   background: #374151;
   border: 0 solid #4b5563;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  background: #374151;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {
@@ -1260,6 +1258,10 @@
   background: #4b5563;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #374151;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #374151;

package/styles/toolbar/tailwind.css

@@ -695,10 +695,9 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: auto;
+  height: 38px;
   -ms-flex-pack: center;
       justify-content: center;
-  height: 38px;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item > * {
@@ -1219,14 +1218,14 @@
   background: #e5e7eb;
   border-color: #6b7280;
   border-radius: 0;
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #e5e7eb;
   border-color: #6b7280;
   border-radius: 0;
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
@@ -1234,7 +1233,7 @@
   border-color: #e5e7eb;
   border-radius: 0;
   box-shadow: none;
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-toolbar .e-tbar-btn.e-btn .e-icons {
@@ -1245,7 +1244,6 @@
   background: #f3f4f6;
   border: 0 solid #e5e7eb;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  background: #fff;
 }
 
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {
@@ -1260,6 +1258,10 @@
   background: #e5e7eb;
 }
 
+.e-toolbar.e-extended-toolbar .e-toolbar-pop {
+  background: #f3f4f6;
+}
+
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active,
 .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav) {
   background: #f3f4f6;