@syncfusion/ej2-navigations 26.1.41 → 26.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.41
+*  version : 26.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. 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/hotfix/26.1.35_Vol2.txt

@@ -0,0 +1 @@
+hotfix/26.1.35_Vol2

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@26.1.40",
+  "_id": "@syncfusion/ej2-navigations@26.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-bNvzAXiKLPBSAqfAAuSU83QR22+MmChfjd4/Zo68LP5DmXA3C10ktVjZFInWidVM3YCHzZIPjl5yroIp3MEDzQ==",
+  "_integrity": "sha512-4qEwEcykQV3bXbXSRVKb1Ed9XtXrOkoL3pmgz0Ytsn7lsOggS3ek/R0JiybJWZPtNXOcMY5tXl+EiWpccxEs2w==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-26.1.40.tgz",
-  "_shasum": "b8be523a6913f09ca49e23192f9dacec5d434972",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-26.1.41.tgz",
+  "_shasum": "1af29a3e99fc8304789d0a7b6f3720afd63f5883",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.40",
-    "@syncfusion/ej2-data": "~26.1.41",
-    "@syncfusion/ej2-inputs": "~26.1.41",
-    "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-popups": "~26.1.41"
+    "@syncfusion/ej2-base": "~26.2.5",
+    "@syncfusion/ej2-buttons": "~26.2.5",
+    "@syncfusion/ej2-data": "~26.2.5",
+    "@syncfusion/ej2-inputs": "~26.2.5",
+    "@syncfusion/ej2-lists": "~26.2.5",
+    "@syncfusion/ej2-popups": "~26.2.5"
   },
   "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",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.41",
+  "version": "26.2.5",
   "sideEffects": false
 }

package/src/treeview/treeview.js

@@ -1076,11 +1076,11 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {
         if (!isNOU(nodes)) {
+            nodes.reverse();
             for (var len = nodes.length - 1; len >= 0; len--) {
                 var liEle = this.getElement(nodes[parseInt(len.toString(), 10)]);
                 if (isNOU(liEle)) {
-                    var node = nodes[len - (nodes.length - 1)]
-                        ? nodes[len - (nodes.length - 1)].toString()
+                    var node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString()
                         : nodes[parseInt(len.toString(), 10)]
                             ? nodes[parseInt(len.toString(), 10)].toString()
                             : null;
@@ -4311,7 +4311,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         for (var i = 0, objlen = obj.length; i < objlen; i++) {
             var nodeId = getValue(mapper.id, obj[parseInt(i.toString(), 10)]);
-            if (obj[parseInt(i.toString(), 10)] && nodeId && nodeId.toString() === id) {
+            if (obj[parseInt(i.toString(), 10)] && !isNOU(nodeId) && nodeId.toString() === id) {
                 if (remove) {
                     removedData = obj.splice(i, 1);
                 }

package/styles/accordion/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/appbar/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/bootstrap-dark.css

@@ -7823,7 +7823,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e230";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap.css

@@ -7826,7 +7826,8 @@
 /*! TreeView's bootstrap theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e230";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap4.css

@@ -7825,7 +7825,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e70b";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap5-dark.css

@@ -7863,7 +7863,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/bootstrap5.css

@@ -7863,7 +7863,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/breadcrumb/_layout.scss

@@ -170,9 +170,11 @@
         &:focus-visible {
           @if $skin-name == 'fluent2' {
             box-shadow: $secondary-shadow-focus;
+            color: $breadcrumb-item-color !important; /* stylelint-disable-line declaration-no-important */
 
-            & .e-breadcrumb-icon {
-              color: $icon-color;
+            & .e-breadcrumb-icon,
+            &.e-breadcrumb-url .e-breadcrumb-icon {
+              color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
             }
           }
         }

package/styles/breadcrumb/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -1151,9 +1151,10 @@
 .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible {
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
+  color: var(--color-sf-content-text-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon {
-  color: var(--color-sf-icon-color);
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible.e-breadcrumb-url .e-breadcrumb-icon {
+  color: var(--color-sf-icon-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-breadcrumb .e-breadcrumb-item span.e-breadcrumb-text {
   cursor: default;

package/styles/carousel/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/context-menu/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/fabric-dark.css

@@ -7823,7 +7823,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22e";
 }
 .e-treeview .e-sibling::before {

package/styles/fabric.css

@@ -7825,7 +7825,8 @@
 /*! TreeView's fabric theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22e";
 }
 .e-treeview .e-sibling::before {

package/styles/fluent-dark.css

@@ -7850,7 +7850,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/fluent.css

@@ -7850,7 +7850,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {

package/styles/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -9312,7 +9312,8 @@
 /*! TreeView's theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e75c";
 }
 .e-treeview .e-sibling::before {
@@ -10329,7 +10330,7 @@ ejs-sidebar {
 
 .e-backdrop,
 .e-sidebar-overlay {
-  background-color: rgba(var(--color-sf-overlay-bg-color), 0.4);
+  background-color: var(--color-sf-overlay-bg-color);
   height: 100%;
   left: 0;
   pointer-events: auto;
@@ -11671,9 +11672,10 @@ ejs-sidebar {
 .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible {
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
+  color: var(--color-sf-content-text-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon {
-  color: var(--color-sf-icon-color);
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible .e-breadcrumb-icon, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus-visible.e-breadcrumb-url .e-breadcrumb-icon {
+  color: var(--color-sf-icon-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-breadcrumb .e-breadcrumb-item span.e-breadcrumb-text {
   cursor: default;

package/styles/h-scroll/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);

package/styles/highcontrast-light.css

@@ -7817,7 +7817,8 @@
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22e";
 }
 .e-treeview .e-sibling::before {

package/styles/highcontrast.css

@@ -7825,7 +7825,8 @@
 /*! TreeView's high contrast theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22e";
 }
 .e-treeview .e-sibling::before {

package/styles/material-dark.css

@@ -8000,7 +8000,8 @@
 }
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22f";
 }
 .e-treeview .e-sibling::before {

package/styles/material.css

@@ -8021,7 +8021,8 @@
 /*! TreeView's material theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
-.e-treeview .e-list-item div.e-icons::before {
+.e-treeview .e-list-item div.e-icons.e-icon-expandable::before,
+.e-treeview .e-list-item div.e-icons.e-icon-collapsible::before {
   content: "\e22f";
 }
 .e-treeview .e-sibling::before {