@syncfusion/ej2-navigations 22.2.5 → 22.2.8-184993

package/styles/sidebar/tailwind.scss

@@ -1,3 +1,3 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';

package/styles/tab/_tailwind-definition.scss

@@ -386,7 +386,7 @@ $tab-bgr-fill-focused-wrap-height: $tab-focus-big-fill-height !default;
 $tab-bgr-rtl-icon-right-margin: 0 !default;
 $tab-bgr-background-active-padding: 0 9px !default;
 $tab-bgr-fill-active-item-padding: 0 10px !default;
-$tab-bgr-item-text-margin-bottom: 6px !default;
+$tab-bgr-item-text-margin-bottom: 0 !default;
 
 $tab-nrml-hscroll-items-nav-width: 24px !default;
 $tab-nrml-hscroll-items-bdr-radius: 0 !default;
@@ -444,7 +444,7 @@ $tab-nrml-vertical-indicator-width: 2px !default;
 $tab-nrml-bottom-wrap-before-top: unset !default;
 $tab-nrml-background-vertical-indicator-display: block !default;
 $tab-nrml-background-active-padding: 0 7px !default;
-$tab-nrml-item-text-margin-bottom: 5px !default;
+$tab-nrml-item-text-margin-bottom: 0 !default;
 
 @mixin tbar-alt-btn-animation-after {
   animation: tbar-alt-popup-shadow 1s ease-out 0ms;

package/styles/tab/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import '../toolbar/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';

package/styles/tab/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import '../toolbar/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';

package/styles/tab/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import '../toolbar/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';

package/styles/tab/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import '../toolbar/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'icons/bootstrap5-dark.scss';

package/styles/tab/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import '../toolbar/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';
 @import 'icons/bootstrap5.scss';

package/styles/tab/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import '../toolbar/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';
 @import 'icons/fabric-dark.scss';

package/styles/tab/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import '../toolbar/fabric-definition.scss';
 @import 'fabric-definition.scss';
 @import 'icons/fabric.scss';

package/styles/tab/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import '../toolbar/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';
 @import 'icons/fluent-dark.scss';

package/styles/tab/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import '../toolbar/fluent-definition.scss';
 @import 'fluent-definition.scss';
 @import 'icons/fluent.scss';

package/styles/tab/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import '../toolbar/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'icons/highcontrast-light.scss';

package/styles/tab/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import '../toolbar/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';
 @import 'icons/highcontrast.scss';

package/styles/tab/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 @keyframes tbar-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);

package/styles/tab/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import '../toolbar/material-dark-definition.scss';
 @import 'material-dark-definition.scss';
 @import 'icons/material-dark.scss';

package/styles/tab/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! component's theme wise override definitions and variables */
 @keyframes tbar-popup-shadow {
   0% {

package/styles/tab/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import '../toolbar/material-definition.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';

package/styles/tab/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/tab/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 
 @import '../toolbar/material3-dark-definition.scss';
 @import 'material3-dark-definition.scss';

package/styles/tab/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/tab/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 
 @import '../toolbar/material3-definition.scss';
 @import 'material3-definition.scss';

package/styles/tab/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! Tailwind theme definition's */
 /*! component's theme wise override definitions and variables */
 /*! Horizontal Tab */
@@ -158,7 +157,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-text {
   font-size: 16px;
-  margin-bottom: 6px;
+  margin-bottom: 0;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before {
@@ -1325,7 +1324,7 @@
   -ms-flex-item-align: auto;
       -ms-grid-row-align: auto;
       align-self: auto;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-text {

package/styles/tab/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import '../toolbar/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';

package/styles/tab/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! Tailwind theme definition's */
 /*! component's theme wise override definitions and variables */
 /*! Horizontal Tab */
@@ -158,7 +157,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-text {
   font-size: 16px;
-  margin-bottom: 6px;
+  margin-bottom: 0;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before {
@@ -1325,7 +1324,7 @@
   -ms-flex-item-align: auto;
       -ms-grid-row-align: auto;
       align-self: auto;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-text {

package/styles/tab/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import '../toolbar/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';

package/styles/tailwind-dark.css

@@ -1,17 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* !componenticons */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {
   content: "\e7a9";
@@ -1384,7 +1371,7 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon {
   font-size: 18px;
-  line-height: 18px;
+  line-height: 17px;
 }
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
@@ -1722,7 +1709,7 @@
   min-width: 12px;
   width: auto;
   font-size: 18px;
-  line-height: 16px;
+  line-height: 14px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   padding: 0 4px;
@@ -2774,6 +2761,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #d1d5db;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #4b5563;
   border: 0;
@@ -3753,7 +3743,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-text {
   font-size: 16px;
-  margin-bottom: 6px;
+  margin-bottom: 0;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before {
@@ -4920,7 +4910,7 @@
   -ms-flex-item-align: auto;
       -ms-grid-row-align: auto;
       align-self: auto;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
@@ -9621,19 +9611,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #d1d5db;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #fff;
   outline: 0 solid #4b5563;
   outline-offset: 0;
   background: #4b5563;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #fff;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #fff;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9674,8 +9667,9 @@ ejs-sidebar {
   outline: 0 solid #4b5563;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #4b5563;
   color: #fff;
   outline: 0 solid #4b5563;
@@ -9746,8 +9740,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/tailwind.css

@@ -1,17 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /* !componenticons */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {
   content: "\e7a9";
@@ -1384,7 +1371,7 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon {
   font-size: 18px;
-  line-height: 18px;
+  line-height: 17px;
 }
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
@@ -1722,7 +1709,7 @@
   min-width: 12px;
   width: auto;
   font-size: 18px;
-  line-height: 16px;
+  line-height: 14px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   padding: 0 4px;
@@ -2774,6 +2761,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #6b7280;
 }
+.e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
+  border: 0;
+}
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: #f3f4f6;
   border: 0;
@@ -3753,7 +3743,7 @@
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-text {
   font-size: 16px;
-  margin-bottom: 6px;
+  margin-bottom: 0;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-item.e-ileft:not(.e-icon) .e-tab-icon::before {
@@ -4920,7 +4910,7 @@
   -ms-flex-item-align: auto;
       -ms-grid-row-align: auto;
       align-self: auto;
-  margin-bottom: 5px;
+  margin-bottom: 0;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
@@ -9621,19 +9611,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #6b7280;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected,
-.e-menu-container .e-menu .e-menu-item.e-selected {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
+.e-menu-container .e-menu .e-menu-item.e-selected,
+.e-menu-container .e-menu .e-menu-item.e-active-item {
   color: #111827;
   outline: 0 solid #e5e7eb;
   outline-offset: 0;
   background: #e5e7eb;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
   color: #111827;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
   color: #111827;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9674,8 +9667,9 @@ ejs-sidebar {
   outline: 0 solid #e5e7eb;
   outline-offset: 0;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected,
-.e-menu-container .e-ul .e-menu-item.e-selected {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
+.e-menu-container .e-ul .e-menu-item.e-selected,
+.e-menu-container .e-ul .e-menu-item.e-active-item {
   background-color: #f3f4f6;
   color: #111827;
   outline: 0 solid #f3f4f6;
@@ -9746,8 +9740,9 @@ ejs-sidebar {
 .e-menu-container.e-inherit .e-menu {
   background: inherit;
 }
-.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
+.e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
+.e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
 .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
   background: rgba(0, 0, 0, 0.056);
   color: inherit;

package/styles/toolbar/_bootstrap5-definition.scss

@@ -45,10 +45,10 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 14px !default;
 $tbar-btn-nrml-minwidth: 32px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;
@@ -154,8 +154,8 @@ $tbar-btn-icons-focus-color: $primary-text-color !default;
 $tbar-btn-text-focus-color: $primary-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: $primary-text-color !default;
-$tbar-btn-hover-active-text-color: $primary-text-color !default;
+$tbar-btn-hover-active-icons-color: $tbar-default-icon-color !default;
+$tbar-btn-hover-active-text-color: $content-text-color-alt2 !default;
 $tbar-btn-overlay-opacity: .5 !default;
 $tbar-btn-active-bg: $tbar-active-bg !default;
 $tbar-btn-active-icons-color: $tbar-default-icon-color !default;

package/styles/toolbar/_material3-definition.scss

@@ -45,7 +45,7 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
 $tbar-btn-bgr-minheight: 40px !default;
 $tbar-btn-bgr-line-height: 24px !default;
 $tbar-btn-icon-bgr-line-height: 24px !default;

package/styles/toolbar/_tailwind-definition.scss

@@ -106,10 +106,10 @@ $tbar-btn-nrml-mrgn: 0 !default;
 $tbar-popup-padding: 0 !default;
 $tbar-btn-nrml-minheight: 30px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 17px !default;
 $tbar-btn-nrml-minwidth: 30px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;

package/styles/toolbar/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import '../h-scroll/bootstrap-dark-definition.scss';
 @import '../v-scroll/bootstrap-dark-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';

package/styles/toolbar/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import '../h-scroll/bootstrap-definition.scss';
 @import '../v-scroll/bootstrap-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-definition.scss';

package/styles/toolbar/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import '../h-scroll/bootstrap4-definition.scss';
 @import '../v-scroll/bootstrap4-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap4-definition.scss';

package/styles/toolbar/bootstrap5-dark.css

@@ -99,7 +99,7 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon {
   font-size: 18px;
-  line-height: 18px;
+  line-height: 14px;
 }
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
@@ -437,7 +437,7 @@
   min-width: 12px;
   width: auto;
   font-size: 18px;
-  line-height: 18px;
+  line-height: 14px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   padding: 0 4px;
@@ -883,10 +883,10 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
-  color: #fff;
+  color: #ced4da;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   background: #565e64;

package/styles/toolbar/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import '../h-scroll/bootstrap5-dark-definition.scss';
 @import '../v-scroll/bootstrap5-dark-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';

package/styles/toolbar/bootstrap5.css

@@ -99,7 +99,7 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control .e-icons.e-btn-icon {
   font-size: 18px;
-  line-height: 18px;
+  line-height: 14px;
 }
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-bigger .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
@@ -437,7 +437,7 @@
   min-width: 12px;
   width: auto;
   font-size: 18px;
-  line-height: 18px;
+  line-height: 14px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   padding: 0 4px;
@@ -883,10 +883,10 @@
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons {
-  color: #fff;
+  color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
-  color: #fff;
+  color: #495057;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   background: #565e64;

package/styles/toolbar/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import '../h-scroll/bootstrap5-definition.scss';
 @import '../v-scroll/bootstrap5-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';

package/styles/toolbar/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import '../h-scroll/fabric-dark-definition.scss';
 @import '../v-scroll/fabric-dark-definition.scss';
 @import 'ej2-buttons/styles/button/fabric-dark-definition.scss';

package/styles/toolbar/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import '../h-scroll/fabric-definition.scss';
 @import '../v-scroll/fabric-definition.scss';
 @import 'ej2-buttons/styles/button/fabric-definition.scss';

package/styles/toolbar/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import '../h-scroll/fluent-dark-definition.scss';
 @import '../v-scroll/fluent-dark-definition.scss';
 @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';

package/styles/toolbar/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import '../h-scroll/fluent-definition.scss';
 @import '../v-scroll/fluent-definition.scss';
 @import 'ej2-buttons/styles/button/fluent-definition.scss';

package/styles/toolbar/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import '../h-scroll/highcontrast-light-definition.scss';
 @import '../v-scroll/highcontrast-light-definition.scss';
 @import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';