@syncfusion/ej2-navigations 28.2.6 → 28.2.11

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.6
+*  version : 28.2.11
 *  Copyright Syncfusion Inc. 2001 - 2024. 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-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@28.2.5",
+  "_id": "@syncfusion/ej2-navigations@28.2.6",
   "_inBundle": false,
-  "_integrity": "sha512-J51xSgbW1l08g7Z1W35eUBLRvLuhZtHaWfcqaTP70I1WHp5rPGQTZ+x2mZ8bfJnzwUNY9ftYG4Dh3wYDzC8ijQ==",
+  "_integrity": "sha512-RkklaJQrfLD0e9aBmW82O/liusJ+PJ8eH2x16z6ZsMTxb/8Xq5vDxTAE8ZuLyzvLcpGvIZGWHIbnMRRDWt29mQ==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -40,8 +40,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.2.5.tgz",
-  "_shasum": "0a02933dc258a7fc88bc18f1f15cc35fc845394d",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.2.6.tgz",
+  "_shasum": "be83cbffff5fdeaa3cf8c7e4841d3b898314aca3",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -52,12 +52,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.5",
-    "@syncfusion/ej2-buttons": "~28.2.6",
-    "@syncfusion/ej2-data": "~28.2.3",
-    "@syncfusion/ej2-inputs": "~28.2.3",
+    "@syncfusion/ej2-base": "~28.2.9",
+    "@syncfusion/ej2-buttons": "~28.2.7",
+    "@syncfusion/ej2-data": "~28.2.11",
+    "@syncfusion/ej2-inputs": "~28.2.11",
     "@syncfusion/ej2-lists": "~28.2.3",
-    "@syncfusion/ej2-popups": "~28.2.6"
+    "@syncfusion/ej2-popups": "~28.2.9"
   },
   "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",
@@ -162,6 +162,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.2.6",
+  "version": "28.2.11",
   "sideEffects": false
 }

package/src/common/menu-base.js

@@ -861,6 +861,8 @@ var MenuBase = /** @class */ (function (_super) {
                 this.popupWrapper = this.createElement('div', {
                     className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
                 });
+                this.popupWrapper.setAttribute('role', 'navigation');
+                this.popupWrapper.setAttribute('aria-label', item.text + '-menu-popup');
                 if (this.hamburgerMode) {
                     top = li.offsetHeight;
                     li.appendChild(this.popupWrapper);
@@ -1339,6 +1341,9 @@ var MenuBase = /** @class */ (function (_super) {
                     if (!args.curData.htmlAttributes.role) {
                         args.item.setAttribute('role', 'separator');
                     }
+                    if (!args.curData.htmlAttributes.ariaLabel) {
+                        args.item.setAttribute('aria-label', 'separator');
+                    }
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[_this.getField('separator', level)]) {
@@ -1933,7 +1938,13 @@ var MenuBase = /** @class */ (function (_super) {
         item.splice(idx, 1);
         var uls = this.getWrapper().children;
         if (navIdx.length < uls.length) {
-            detach(uls[navIdx.length].children[idx]);
+            if (this.enableScrolling && !uls[navIdx.length].classList.contains('e-menu-parent')) {
+                var ul = uls[navIdx.length].querySelector('.e-menu-parent');
+                detach(ul.children[idx]);
+            }
+            else {
+                detach(uls[navIdx.length].children[idx]);
+            }
         }
     };
     /**
@@ -2238,7 +2249,13 @@ var MenuBase = /** @class */ (function (_super) {
                             ul.children[idx + 1].classList.add(disabled);
                         }
                         else {
-                            ul.children[idx].classList.add(disabled);
+                            if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
+                                var mainUl = ul.querySelector('.e-menu-parent');
+                                mainUl.children[idx].classList.add(disabled);
+                            }
+                            else {
+                                ul.children[idx].classList.add(disabled);
+                            }
                         }
                     }
                 }
@@ -2276,6 +2293,9 @@ var MenuBase = /** @class */ (function (_super) {
             ul = this.getUlByNavIdx(navIdx.length);
             item = this.getItems(navIdx);
             if (ul) {
+                if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
+                    ul = ul.querySelector('.e-menu-parent');
+                }
                 var validUl = isUniqueId ? ul.children[index].id : item[index].text.toString();
                 if (ishide && validUl === items[i]) {
                     ul.children[index].classList.add(HIDE);
@@ -2335,6 +2355,7 @@ var MenuBase = /** @class */ (function (_super) {
         var navIdx;
         var iitems;
         var menuitem;
+        var parentUl;
         for (var i = 0; i < items.length; i++) {
             navIdx = this.getIndex(text, isUniqueId);
             idx = navIdx.pop();
@@ -2347,11 +2368,23 @@ var MenuBase = /** @class */ (function (_super) {
             if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {
                 idx = isAfter ? idx + 1 : idx;
                 li = this.createItems(iitems).children[idx];
-                var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
+                var ul = parentUl = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
+                if (this.enableScrolling && !ul.classList.contains('e-menu-parent')) {
+                    ul = ul.querySelector('.e-menu-parent');
+                }
                 ul.insertBefore(li, ul.children[idx]);
                 if (i === items.length - 1 && !this.isMenu && ul.style.display === 'block') {
-                    this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
-                    ul.style.display = 'block';
+                    if (this.enableScrolling) {
+                        this.setPosition(null, ul, parseFloat(parentUl.style.top), parseFloat(parentUl.style.left));
+                        var scrollElem = closest(ul, '.e-vscroll');
+                        if (scrollElem) {
+                            scrollElem.style.display = 'block';
+                        }
+                    }
+                    else {
+                        this.setPosition(null, ul, parseFloat(ul.style.top), parseFloat(ul.style.left));
+                        ul.style.display = 'block';
+                    }
                 }
             }
         }

package/styles/bootstrap4-lite.css

@@ -3326,7 +3326,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3336,7 +3336,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4748,7 +4748,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4758,7 +4758,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap4.css

@@ -4007,7 +4007,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4017,7 +4017,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5429,7 +5429,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5439,7 +5439,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5-dark-lite.css

@@ -3347,10 +3347,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3360,7 +3360,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4769,10 +4769,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4782,7 +4782,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5-dark.css

@@ -4041,10 +4041,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4054,7 +4054,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5463,10 +5463,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5476,7 +5476,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5-lite.css

@@ -3347,10 +3347,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3360,7 +3360,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4769,10 +4769,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4782,7 +4782,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5.3-lite.css

@@ -1895,8 +1895,8 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
+          box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
@@ -3400,10 +3400,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -3413,7 +3413,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -4822,10 +4822,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -4835,7 +4835,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5.3.css

@@ -2170,8 +2170,8 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
+          box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
@@ -4094,10 +4094,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4107,7 +4107,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5516,10 +5516,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5529,7 +5529,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/bootstrap5.css

@@ -4041,10 +4041,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4054,7 +4054,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
 .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
@@ -5463,10 +5463,10 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 24px;
-  min-width: 24px;
-  width: 24px;
-  line-height: 24px;
+  height: 20px;
+  min-width: 20px;
+  width: 20px;
+  line-height: 1;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5476,7 +5476,7 @@
 }
 .e-tab-clone-element .e-tab-icon,
 .e-tab-clone-element .e-tab-icon::before {
-  font-size: 14px;
+  font-size: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-icon,

package/styles/fluent2-lite.css

@@ -1749,24 +1749,15 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -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);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-toolbar-icon-color);
+  color: var(--color-sf-icon-color);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-toolbar-icon-color);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-content-bg-color-alt1);
-  -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);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
-  color: var(--color-sf-icon-color);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
   color: var(--color-sf-content-text-color);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -1937,18 +1928,13 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-flyout-bg-color-focus);
   -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);
 }
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-icon-color-hover);
 }
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-flyout-text-color-focus);
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -1969,18 +1955,13 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-content-bg-color-alt1);
   -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);
 }
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-icon-color);
 }
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-content-text-color);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {

package/styles/fluent2.css

@@ -2030,24 +2030,15 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -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);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-toolbar-icon-color);
+  color: var(--color-sf-icon-color);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-toolbar-icon-color);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-content-bg-color-alt1);
-  -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);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
-  color: var(--color-sf-icon-color);
-}
-.e-toolbar .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
   color: var(--color-sf-content-text-color);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
@@ -2218,18 +2209,13 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-flyout-bg-color-focus);
   -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);
 }
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-icon-color-hover);
 }
-.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
+.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-flyout-text-color-focus);
 }
 .e-toolbar .e-toolbar-pop .e-toolbar-item .e-btn:focus {
@@ -2250,18 +2236,13 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible {
-  background: var(--color-sf-content-bg-color-alt1);
   -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);
 }
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-icons {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: var(--color-sf-icon-color);
 }
-.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus-visible .e-tbar-btn-text {
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: var(--color-sf-content-text-color);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {