@syncfusion/ej2-ribbon 25.1.35 → 25.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.35
+*  version : 25.2.3
 *  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/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@21.29.0",
+  "_id": "@syncfusion/ej2-ribbon@25.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-VYJvBTL4kiCK3QCcu6kdGp8ymjBNjEk1AaJVIZbqJdyp4r3sJCBqy6SAymQ9pM6woSvFMplL37Bj/IyIGe/yRw==",
+  "_integrity": "sha512-BEmNtlHqDnj/tXBeToshBFyA9vPjECL7e/qPQIClCGrsd10pIoHVCf9z0R2Nu2ew5lf318YJx8rXrHk7+4alSQ==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.29.0.tgz",
-  "_shasum": "62a1aec44f748a1b923e70e0b5a1bbf54e230458",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-25.1.35.tgz",
+  "_shasum": "ce6dc54e5b11f41316391525a5ee7b9ce24e007f",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~25.1.35",
-    "@syncfusion/ej2-buttons": "~25.1.35",
-    "@syncfusion/ej2-dropdowns": "~25.1.35",
-    "@syncfusion/ej2-lists": "~25.1.35",
-    "@syncfusion/ej2-navigations": "~25.1.35",
-    "@syncfusion/ej2-popups": "~25.1.35",
-    "@syncfusion/ej2-splitbuttons": "~25.1.35"
+    "@syncfusion/ej2-base": "~25.2.3",
+    "@syncfusion/ej2-buttons": "~25.2.3",
+    "@syncfusion/ej2-dropdowns": "~25.2.3",
+    "@syncfusion/ej2-lists": "~25.2.3",
+    "@syncfusion/ej2-navigations": "~25.2.3",
+    "@syncfusion/ej2-popups": "~25.2.3",
+    "@syncfusion/ej2-splitbuttons": "~25.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "25.1.35",
+  "version": "25.2.3",
   "sideEffects": false
 }

package/src/ribbon/base/ribbon.d.ts

@@ -228,6 +228,9 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private initialPropsData;
     private hiddenElements;
     private hiddenGroups;
+    private itemsModel;
+    private targetTabs;
+    private isUpdateItems;
     /** @hidden */
     keysPress: string;
     /** @hidden */

package/src/ribbon/base/ribbon.js

@@ -64,7 +64,10 @@ var Ribbon = /** @class */ (function (_super) {
         this.hiddenElements = {};
         this.keyTipElements = {};
         this.hiddenGroups = [];
+        this.itemsModel = [];
+        this.targetTabs = {};
         this.isAddRemove = false;
+        this.isUpdateItems = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
             rightarrow: 'rightarrow',
@@ -575,6 +578,19 @@ var Ribbon = /** @class */ (function (_super) {
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex, isContextual: isContextual };
         this.setProperties({ selectedTab: selectedIndex }, true);
         this.calculateHiddenElementsWidth(selectedIndex);
+        if (this.isUpdateItems) {
+            for (var i = 0; i < this.itemsModel.length; i++) {
+                var item = this.itemsModel[parseInt(i.toString(), 10)];
+                if (this.selectedTab === this.targetTabs[item.id]) {
+                    this.updateItem(item);
+                    this.itemsModel.splice(i, 1);
+                    i--;
+                }
+            }
+            if (this.itemsModel.length === 0) {
+                this.isUpdateItems = false;
+            }
+        }
         this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Classic' && this.ribbonGalleryModule) {
             this.ribbonGalleryModule.checkAvailableHeight(selectedIndex, e.selectedContent.firstChild);
@@ -4392,96 +4408,111 @@ var Ribbon = /** @class */ (function (_super) {
         //Check whether the tab items are rendered
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + itemProp.group.id);
-        var groupContainer = groupEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
-        var itemContainer = null;
-        var itemEle = null;
-        var dropdownElement;
-        var dropdown;
-        if (contentEle.innerHTML !== '') {
-            if (this.activeLayout === RibbonLayout.Simplified) {
-                dropdownElement = itemProp.group.enableGroupOverflow ?
-                    contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
-                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
-            }
-            if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
-                itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
-                itemEle = dropdown.target.querySelector('#' + itemId);
-                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
-                    var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
-                    if (collectionEle) {
-                        collectionEle.appendChild(itemContainer);
+        if (groupEle) {
+            var groupContainer = groupEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
+            var itemContainer = null;
+            var itemEle = null;
+            var dropdownElement = void 0;
+            var dropdown = void 0;
+            if (contentEle.innerHTML !== '') {
+                if (this.activeLayout === RibbonLayout.Simplified) {
+                    dropdownElement = itemProp.group.enableGroupOverflow ?
+                        contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
+                    dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+                }
+                if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
+                    itemEle = dropdown.target.querySelector('#' + itemId);
+                    if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                        var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                        if (collectionEle) {
+                            collectionEle.appendChild(itemContainer);
+                        }
                     }
                 }
-            }
-            else {
-                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
-                itemEle = contentEle.querySelector('#' + itemId);
-                if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
-                    itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
-                }
-                if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
-                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
-                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
-                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                else {
+                    itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                    itemEle = contentEle.querySelector('#' + itemId);
+                    if (itemProp.item.type === 'GroupButton' && this.activeLayout === RibbonLayout.Classic) {
+                        itemEle = contentEle.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID);
+                    }
+                    if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
+                        this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                        if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton) ||
+                            (item.type === RibbonItemType.GroupButton) || (item.type === RibbonItemType.Gallery)) {
+                            this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                        }
                     }
                 }
-            }
-            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
-            if (item.cssClass) {
-                if (itemProp.item.cssClass) {
-                    itemContainer.classList.remove(itemProp.item.cssClass);
+                // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+                if (item.cssClass) {
+                    if (itemProp.item.cssClass) {
+                        itemContainer.classList.remove(itemProp.item.cssClass);
+                    }
                 }
-            }
-            this.destroyFunction(itemProp.item, itemEle);
-            itemEle.remove();
-            var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
-            if (removeCss) {
-                removeClass([itemContainer], removeCss);
-            }
-        }
-        var ribbonItem = itemProp.item;
-        ribbonItem.setProperties(item, true);
-        this.validateItemSize();
-        if (contentEle.innerHTML !== '') {
-            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
-                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
-            }
-            else {
-                itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
-            }
-            // To avoid undefined items condition is added
-            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
-                itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
-                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
-            }
-            var size = ribbonItem.activeSize;
-            if (this.activeLayout === 'Simplified') {
-                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
-                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                ribbonItem.setProperties({ activeSize: size }, true);
-            }
-            if (size & RibbonItemSize.Large) {
-                itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
-            }
-            else {
-                itemContainer.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
-            }
-            this.createRibbonItem(ribbonItem, itemContainer);
-            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
-                if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
-                    this.removeOverflowButton(dropdown);
+                this.destroyFunction(itemProp.item, itemEle);
+                itemEle.remove();
+                var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+                if (removeCss) {
+                    removeClass([itemContainer], removeCss);
                 }
             }
-            if (this.selectedTab === itemProp.tabIndex) {
-                this.refreshLayout();
-            }
-            if (item.cssClass) {
-                itemContainer.classList.add(ribbonItem.cssClass);
-            }
-            if (!(ribbonItem.disabled) && itemContainer.classList.contains(constants.DISABLED_CSS)) {
-                itemContainer.classList.remove(constants.DISABLED_CSS);
+            var ribbonItem = itemProp.item;
+            ribbonItem.setProperties(item, true);
+            this.validateItemSize();
+            if (contentEle.innerHTML !== '') {
+                if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                    itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                }
+                else {
+                    itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
+                }
+                // To avoid undefined items condition is added
+                if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                    itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
+                    this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+                }
+                var size = ribbonItem.activeSize;
+                if (this.activeLayout === 'Simplified') {
+                    size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                        (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                    ribbonItem.setProperties({ activeSize: size }, true);
+                }
+                if (size & RibbonItemSize.Large) {
+                    itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+                }
+                else {
+                    if (size & RibbonItemSize.Medium) {
+                        itemContainer.classList.add(constants.RIBBON_MEDIUM_ITEM);
+                    }
+                    else {
+                        itemContainer.classList.add(constants.RIBBON_SMALL_ITEM);
+                    }
+                }
+                this.createRibbonItem(ribbonItem, itemContainer);
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0 ||
+                        (dropdown.target.childElementCount === 1 &&
+                            this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                if (this.selectedTab === itemProp.tabIndex) {
+                    this.refreshLayout();
+                }
+                if (item.cssClass) {
+                    itemContainer.classList.add(ribbonItem.cssClass);
+                }
+                if (!(ribbonItem.disabled) && itemContainer.classList.contains(constants.DISABLED_CSS)) {
+                    itemContainer.classList.remove(constants.DISABLED_CSS);
+                }
+                this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
             }
-            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+        else {
+            this.isUpdateItems = true;
+            this.itemsModel.push(item);
+            this.targetTabs[item.id] = itemProp.tabIndex;
         }
     };
     Ribbon.prototype.removeItemElement = function (contentEle, item, dropdown) {
@@ -4615,6 +4646,8 @@ var Ribbon = /** @class */ (function (_super) {
         this.hiddenGroups = [];
         this.hiddenElements = {};
         this.keyTipElements = {};
+        this.itemsModel = [];
+        this.targetTabs = {};
         remove(this.element.querySelector('#' + this.element.id + constants.TAB_ID));
         this.element.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH);

package/styles/bootstrap-dark.css

@@ -909,7 +909,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/bootstrap.css

@@ -914,7 +914,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/bootstrap4.css

@@ -975,7 +975,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/bootstrap5-dark.css

@@ -993,7 +993,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/bootstrap5.css

@@ -993,7 +993,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/fabric-dark.css

@@ -885,7 +885,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
@@ -1798,7 +1798,7 @@
   border-color: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
-  background: #dadada;
+  background: #333232;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
   color: #38a9ff;
@@ -1951,12 +1951,12 @@
 }
 .e-ribbon-backstage-popup .e-ribbon-backstage-template,
 .e-ribbon-backstage-popup .e-ribbon-backstage-content {
-  background: #dadada;
+  background: #333232;
 }
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
-  background: #dadada;
+  background: #333232;
   border-color: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(.e-disabled) .e-checkbox-wrapper .e-label,

package/styles/fabric.css

@@ -883,7 +883,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/fluent-dark.css

@@ -969,7 +969,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/fluent.css

@@ -969,7 +969,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/highcontrast-light.css

@@ -892,7 +892,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/highcontrast.css

@@ -901,7 +901,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/material-dark.css

@@ -954,7 +954,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/material.css

@@ -987,7 +987,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/material3-dark.css

@@ -1016,7 +1016,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
@@ -2622,7 +2622,7 @@
 }
 
 .e-ribbon-keytip {
-  background-color: rgba(var(--color-sf-black));
+  background-color: rgba(var(--color-sf-inverse-surface));
   color: rgba(var(--color-sf-inverse-on-surface));
 }
 

package/styles/material3.css

@@ -1072,7 +1072,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
@@ -2678,7 +2678,7 @@
 }
 
 .e-ribbon-keytip {
-  background-color: rgba(var(--color-sf-black));
+  background-color: rgba(var(--color-sf-inverse-surface));
   color: rgba(var(--color-sf-inverse-on-surface));
 }
 

package/styles/ribbon/_fabric-dark-definition.scss

@@ -255,7 +255,7 @@ $ribbon-bigger-rtl-button-icon-padding: 11px 16px 11px 12px !default;
 $ribbon-bigger-caret-icon-padding: 0 12px !default;
 $ribbon-bigger-rtl-caret-icon-padding: 0 12px !default;
 
-$ribbon-header-bg-color: $neutral-light-font !default;
+$ribbon-header-bg-color: $neutral-lighter !default;
 $ribbon-border-color: unset !default;
 $ribbon-group-seperator-color: $neutral-quintenary !default;
 $ribbon-group-border-color: $neutral-quintenary !default;

package/styles/ribbon/_layout.scss

@@ -890,7 +890,7 @@
   }
 
   .e-ribbon-group-overflow-ddb {
-    &.e-dropdown-popup {
+    &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
       min-width: 190px;
     }
     .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/_material3-definition.scss

@@ -339,8 +339,8 @@ $ribbon-popup-common-box-shadow: $shadow-md !default;
 $ribbon-filemenu-popup-border-radius: 4px !default;
 $ribbon-contextual-tab-color: $ribbon-active-tab-indicator-color !default;
 $ribbon-contextual-tab-background: rgba($content-bg-color-selected) !default;
-$ribbon-keytip-background-color: rgba($black) !default;
-$ribbon-keytip-color: rgba($content-text-color-inverse) !default;
+$ribbon-keytip-background-color: rgba($tooltip-bg-color) !default;
+$ribbon-keytip-color: rgba($tooltip-text-color) !default;
 $ribbon-gallery-popup-background-color: rgba($content-bg-color) !default;
 $ribbon-gallery-item-background-color: $transparent !default;
 $ribbon-gallery-item-selected-color: rgba($content-bg-color-selected) !default;

package/styles/ribbon/bootstrap-dark.css

@@ -909,7 +909,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/bootstrap.css

@@ -914,7 +914,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/bootstrap4.css

@@ -975,7 +975,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/bootstrap5-dark.css

@@ -993,7 +993,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/bootstrap5.css

@@ -993,7 +993,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/fabric-dark.css

@@ -885,7 +885,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
@@ -1798,7 +1798,7 @@
   border-color: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
-  background: #dadada;
+  background: #333232;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
   color: #38a9ff;
@@ -1951,12 +1951,12 @@
 }
 .e-ribbon-backstage-popup .e-ribbon-backstage-template,
 .e-ribbon-backstage-popup .e-ribbon-backstage-content {
-  background: #dadada;
+  background: #333232;
 }
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
-  background: #dadada;
+  background: #333232;
   border-color: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-item:not(.e-disabled) .e-checkbox-wrapper .e-label,

package/styles/ribbon/fabric.css

@@ -883,7 +883,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {

package/styles/ribbon/fluent-dark.css

@@ -969,7 +969,7 @@
   padding: 0 0 0 2px;
 }
 
-.e-ribbon-group-overflow-ddb.e-dropdown-popup {
+.e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
   min-width: 190px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {