@syncfusion/ej2-navigations 22.2.11 → 23.1.36

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;
@@ -3756,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 {
@@ -4923,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 {
@@ -9624,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,
@@ -9677,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;
@@ -9749,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';

package/styles/toolbar/highcontrast.scss

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

package/styles/toolbar/material-dark.css

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

package/styles/toolbar/material-dark.scss

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

package/styles/toolbar/material.css

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

package/styles/toolbar/material.scss

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

package/styles/toolbar/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;
@@ -493,7 +492,7 @@
   min-width: 18px;
   width: auto;
   font-size: 18px;
-  line-height: 18px;
+  line-height: 16px;
 }
 .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 7px;

package/styles/toolbar/material3-dark.scss

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

package/styles/toolbar/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;
@@ -549,7 +548,7 @@
   min-width: 18px;
   width: auto;
   font-size: 18px;
-  line-height: 18px;
+  line-height: 16px;
 }
 .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 7px;

package/styles/toolbar/material3.scss

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

package/styles/toolbar/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");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {
@@ -99,7 +98,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,
@@ -437,7 +436,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;

package/styles/toolbar/tailwind-dark.scss

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

package/styles/toolbar/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");
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
   0% {
@@ -99,7 +98,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,
@@ -437,7 +436,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;

package/styles/toolbar/tailwind.scss

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

package/styles/treeview/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';

package/styles/treeview/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-inputs/styles/input/bootstrap-definition.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';

package/styles/treeview/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-inputs/styles/input/bootstrap4-definition.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';

package/styles/treeview/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'ej2-inputs/styles/input/bootstrap5-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';

package/styles/treeview/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-inputs/styles/input/bootstrap5-definition.scss';
 @import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';

package/styles/treeview/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'ej2-inputs/styles/input/fabric-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';

package/styles/treeview/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'ej2-inputs/styles/input/fabric-definition.scss';
 @import 'ej2-buttons/styles/check-box/fabric-definition.scss';
 @import 'fabric-definition.scss';

package/styles/treeview/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'ej2-inputs/styles/input/fluent-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';

package/styles/treeview/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'ej2-inputs/styles/input/fluent-definition.scss';
 @import 'ej2-buttons/styles/check-box/fluent-definition.scss';
 @import 'fluent-definition.scss';

package/styles/treeview/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'ej2-inputs/styles/input/highcontrast-light-definition.scss';
 @import 'ej2-buttons/styles/check-box/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';

package/styles/treeview/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-inputs/styles/input/highcontrast-definition.scss';
 @import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';

package/styles/treeview/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/treeview/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'ej2-inputs/styles/input/material-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
 @import 'material-dark-definition.scss';

package/styles/treeview/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {

package/styles/treeview/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'ej2-inputs/styles/input/material-definition.scss';
 @import 'ej2-buttons/styles/check-box/material-definition.scss';
 @import 'material-definition.scss';

package/styles/treeview/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/treeview/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'ej2-inputs/styles/input/material3-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';

package/styles/treeview/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/treeview/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'ej2-inputs/styles/input/material3-definition.scss';
 @import 'ej2-buttons/styles/check-box/material3-definition.scss';

package/styles/treeview/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");
 /* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's tailwind theme wise override definitions and variables */
 /* stylelint-disable */

package/styles/treeview/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'ej2-inputs/styles/input/tailwind-dark-definition.scss';
 @import 'ej2-buttons/styles/check-box/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';

package/styles/treeview/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");
 /* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's tailwind theme wise override definitions and variables */
 /* stylelint-disable */

package/styles/treeview/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'ej2-inputs/styles/input/tailwind-definition.scss';
 @import 'ej2-buttons/styles/check-box/tailwind-definition.scss';
 @import 'tailwind-definition.scss';

package/styles/v-scroll/bootstrap-dark.scss

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

package/styles/v-scroll/bootstrap.scss

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

package/styles/v-scroll/bootstrap4.scss

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

package/styles/v-scroll/bootstrap5-dark.scss

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