@syncfusion/ej2-vue-navigations 22.2.5 → 22.2.8-184993

package/styles/appbar/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! AppBar component material-dark theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! AppBar component material theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-navigations/styles/appbar/material3-dark.scss';

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-navigations/styles/appbar/material3.scss';

package/styles/appbar/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");
 /*! AppBar component tailwind theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/appbar/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");
 /*! AppBar component tailwind theme definitions and variables */
 /*! appbar component styles */
 .e-bigger .e-appbar,

package/styles/bootstrap-dark.css

@@ -2601,6 +2601,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #3e98ff;
 }
+.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: transparent;
   border: 0;
@@ -9304,19 +9307,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #f0f0f0;
 }
-.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: #f0f0f0;
   outline: 0 solid #313131;
   outline-offset: 0;
   background: #313131;
 }
-.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: #f0f0f0;
 }
-.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: #f0f0f0;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9357,8 +9363,9 @@ ejs-sidebar {
   outline: 0 solid #505050;
   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: #505050;
   color: #f0f0f0;
   outline: 0 solid #505050;
@@ -9429,8 +9436,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/bootstrap.css

@@ -2605,6 +2605,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #333;
 }
+.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: transparent;
   border: 0;
@@ -9320,19 +9323,22 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #333;
 }
-.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: #333;
   outline: 0 solid #ddd;
   outline-offset: 0;
   background: #ddd;
 }
-.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: #333;
 }
-.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: #333;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9373,8 +9379,9 @@ ejs-sidebar {
   outline: 0 solid #e6e6e6;
   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: #e6e6e6;
   color: #555;
   outline: 0 solid #e6e6e6;
@@ -9445,8 +9452,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/bootstrap4.css

@@ -2604,6 +2604,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #007bff;
 }
+.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: #f8f9fa;
   border: 0;
@@ -9401,20 +9404,23 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: #0056b3;
 }
-.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: #0056b3;
   outline: 0 solid #f2f4f6;
   outline-offset: 0;
   background: transparent;
   background: #f2f4f6;
 }
-.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: #007bff;
 }
-.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: #007bff;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9460,12 +9466,14 @@ ejs-sidebar {
 .e-menu-container .e-ul .e-menu-item.e-focused .e-menu-icon {
   color: #212529;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret,
-.e-menu-container .e-ul .e-menu-item.e-selected .e-caret {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-caret,
+.e-menu-container .e-ul .e-menu-item.e-selected .e-caret,
+.e-menu-container .e-ul .e-menu-item.e-active-item .e-caret {
   color: #fff;
 }
-.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon,
-.e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon {
+.e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-menu-icon,
+.e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon,
+.e-menu-container .e-ul .e-menu-item.e-active-item .e-menu-icon {
   color: #fff;
 }
 .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -9479,8 +9487,9 @@ ejs-sidebar {
   outline: 0 solid #e9ecef;
   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: #007bff;
   color: #fff;
   outline: 0 solid #007bff;
@@ -9562,8 +9571,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;
@@ -9581,8 +9591,9 @@ ejs-sidebar {
 .e-menu-container.e-hamburger ul {
   color: #212529;
 }
-.e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
+.e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-active-item .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
 .e-menu-container.e-hamburger ul .e-selected .e-caret,
+.e-menu-container.e-hamburger ul .e-active-item .e-caret,
 .e-menu-container.e-hamburger ul .e-caret {
   color: #212529;
 }

package/styles/bootstrap5-dark.css

@@ -1281,7 +1281,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,
@@ -1619,7 +1619,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;
@@ -2065,10 +2065,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;
@@ -2672,6 +2672,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #adb5bd;
 }
+.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: none;
   border: 0;
@@ -9469,19 +9472,22 @@ ejs-sidebar {
   outline-offset: 0;
   background: #495057;
 }
-.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 #495057;
   outline-offset: 0;
   background: #495057;
 }
-.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: #adb5bd;
 }
-.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: #adb5bd;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9522,8 +9528,9 @@ ejs-sidebar {
   outline: 0 solid #444c54;
   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: #0d6efd;
   color: #fff;
   outline: 0 solid #0d6efd;
@@ -9594,8 +9601,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/bootstrap5.css

@@ -1281,7 +1281,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,
@@ -1619,7 +1619,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;
@@ -2065,10 +2065,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;
@@ -2672,6 +2672,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #6c757d;
 }
+.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: none;
   border: 0;
@@ -9469,19 +9472,22 @@ ejs-sidebar {
   outline-offset: 0;
   background: #dee2e6;
 }
-.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: #212529;
   outline: 0 solid #dee2e6;
   outline-offset: 0;
   background: #dee2e6;
 }
-.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: #6c757d;
 }
-.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: #6c757d;
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9522,8 +9528,9 @@ ejs-sidebar {
   outline: 0 solid #dee2e6;
   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: #0d6efd;
   color: #fff;
   outline: 0 solid #0d6efd;
@@ -9594,8 +9601,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/breadcrumb/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {

package/styles/breadcrumb/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-navigations/styles/breadcrumb/material3-dark.scss';

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-navigations/styles/breadcrumb/material3.scss';

package/styles/breadcrumb/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");
 /*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {

package/styles/breadcrumb/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");
 /*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {

package/styles/carousel/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! Carousel component material-dark theme definitions and variables */
 .e-carousel .e-previous-icon::before {
   content: "\e904";

package/styles/carousel/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! Carousel component material theme definitions and variables */
 .e-carousel .e-previous-icon::before {
   content: "\e904";

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-navigations/styles/carousel/material3-dark.scss';

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-navigations/styles/carousel/material3.scss';

package/styles/carousel/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");
 /*! Carousel component tailwind theme definitions and variables */
 .e-carousel .e-previous-icon::before {
   content: "\e765";

package/styles/carousel/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");
 /*! Carousel component tailwind theme definitions and variables */
 .e-carousel .e-previous-icon::before {
   content: "\e765";

package/styles/context-menu/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/context-menu/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 hscroll-popup-shadow {
   0% {

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-base/styles/definition/material3-dark.scss';
 @import 'ej2-navigations/styles/context-menu/material3-dark.scss';

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

@@ -1,2 +1,2 @@
-@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-base/styles/definition/material3.scss';
 @import 'ej2-navigations/styles/context-menu/material3.scss';

package/styles/context-menu/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% {

package/styles/context-menu/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% {