@syncfusion/ej2-angular-navigations 22.2.11-ngcc → 23.1.36-ngcc

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## [Unreleased]
 
+### TreeView
+
+#### Bug fixes
+
+- `#I496955` - The expanded state not maintained while check the child node has been resolved.
+- `#I488527` - The issue with when holding the mouse left click to select the TreeView nodes has been resolved.
+
+## 22.2.11 (2023-08-29)
+
 ### Carousel
 
 #### Bug Fixes

package/dist/ej2-angular-navigations.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-navigations.umd.js
-*  version : 22.2.11
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-angular-navigations.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-navigations.umd.min.js
-*  version : 22.2.11
+*  version : 23.1.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-angular-navigations@*",
-  "_id": "@syncfusion/ej2-angular-navigations@22.2.8",
+  "_id": "@syncfusion/ej2-angular-navigations@22.21.0",
   "_inBundle": false,
-  "_integrity": "sha512-yzhiauYa0EtHargz7CdDAInKxsBfFQbutZQrm7Tv4tmLnc6TIsuIFliFywJkoM1YZz0kDq+7Qt7Ok96eZZ8jVg==",
+  "_integrity": "sha512-MjXO2P1KfrKQ1c2QQutzbpErqLcrqSYaheQFgTLpvgvZCz6e2IPcKwKmXcofoDd1fe4VBO9t3JJpey0rFUET4g==",
   "_location": "/@syncfusion/ej2-angular-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-angular-navigations/-/ej2-angular-navigations-22.2.8.tgz",
-  "_shasum": "6f76a045dcb95364282d1d6b020c863291f6c3d0",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-angular-navigations/-/ej2-angular-navigations-22.21.0.tgz",
+  "_shasum": "db388734b31915662094ceda93677b8a4f735fa6",
   "_spec": "@syncfusion/ej2-angular-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-angular-base": "~22.2.5",
-    "@syncfusion/ej2-base": "~22.2.10",
-    "@syncfusion/ej2-navigations": "22.2.11"
+    "@syncfusion/ej2-angular-base": "~23.1.36",
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-navigations": "23.1.36"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Angular",
@@ -86,5 +86,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "ej2-angular-navigations.d.ts",
-  "version": "22.2.11-ngcc"
+  "version": "23.1.36-ngcc"
 }

package/schematics/utils/lib-details.d.ts

@@ -1,4 +1,4 @@
 export declare const pkgName = "@syncfusion/ej2-angular-navigations";
-export declare const pkgVer = "^22.2.8";
+export declare const pkgVer = "^22.21.0";
 export declare const moduleName = "AccordionModule, ToolbarModule, ContextMenuModule, BreadcrumbModule, CarouselModule, TabModule, TreeViewModule, SidebarModule, MenuModule, AppBarModule";
-export declare const themeVer = "~22.2.8";
+export declare const themeVer = "~22.21.0";

package/schematics/utils/lib-details.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pkgName = '@syncfusion/ej2-angular-navigations';
-exports.pkgVer = '^22.2.11';
+exports.pkgVer = '^23.1.36';
 exports.moduleName = 'AccordionModule, ToolbarModule, ContextMenuModule, BreadcrumbModule, CarouselModule, TabModule, TreeViewModule, SidebarModule, MenuModule, AppBarModule';
-exports.themeVer = '~22.2.11';
+exports.themeVer = '~23.1.36';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-navigations';
-export const pkgVer = '^22.2.11';
+export const pkgVer = '^23.1.36';
 export const moduleName = 'AccordionModule, ToolbarModule, ContextMenuModule, BreadcrumbModule, CarouselModule, TabModule, TreeViewModule, SidebarModule, MenuModule, AppBarModule';
-export const themeVer = '~22.2.11';
+export const themeVer = '~23.1.36';

package/styles/accordion/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: "\e916";

package/styles/accordion/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override material-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

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

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

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

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

package/styles/accordion/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 tailwind-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

package/styles/accordion/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 tailwind-definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {

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,700");
 /*! 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-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-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

@@ -9307,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,
@@ -9360,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;
@@ -9432,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

@@ -9323,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,
@@ -9376,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;
@@ -9448,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

@@ -9404,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,
@@ -9463,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,
@@ -9482,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;
@@ -9565,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;
@@ -9584,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;
@@ -9472,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,
@@ -9525,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;
@@ -9597,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;
@@ -9472,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,
@@ -9525,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;
@@ -9597,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,700");
 /*! 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-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-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,700");
 /*! 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-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-navigations/styles/carousel/material3.scss';