@syncfusion/ej2-ribbon 24.1.44 → 24.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.44
+*  version : 24.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@24.1.41",
+  "_id": "@syncfusion/ej2-ribbon@24.1.44",
   "_inBundle": false,
-  "_integrity": "sha512-NBr5Cj/aZzyv/xVtzD/JCgb1R1bn48A6AHCcmJl+Bdq3fH8w4G085HP0mYLwX2M8S0EBcKLeUpnaiAqUDo7trw==",
+  "_integrity": "sha512-ATh/cX903EDYFrNVGVp8WJf5Bb+cgft1xqTXF6tsKxUuEKCfm+5EAjXQWWu5qB/gJsX4rOu/zImTbZMgabhETA==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-24.1.41.tgz",
-  "_shasum": "bb6d15afff50ba34c654def48c011271701a480a",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-24.1.44.tgz",
+  "_shasum": "b14c7fceb54d1d85cb6e5b0a96a65596a2058705",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.42",
-    "@syncfusion/ej2-buttons": "~24.1.41",
-    "@syncfusion/ej2-dropdowns": "~24.1.44",
-    "@syncfusion/ej2-lists": "~24.1.41",
-    "@syncfusion/ej2-navigations": "~24.1.41",
-    "@syncfusion/ej2-popups": "~24.1.44",
-    "@syncfusion/ej2-splitbuttons": "~24.1.44"
+    "@syncfusion/ej2-base": "~24.2.3",
+    "@syncfusion/ej2-buttons": "~24.2.3",
+    "@syncfusion/ej2-dropdowns": "~24.2.3",
+    "@syncfusion/ej2-lists": "~24.2.3",
+    "@syncfusion/ej2-navigations": "~24.2.3",
+    "@syncfusion/ej2-popups": "~24.2.3",
+    "@syncfusion/ej2-splitbuttons": "~24.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": "24.1.44",
+  "version": "24.2.3",
   "sideEffects": false
 }

package/src/ribbon/base/ribbon.js

@@ -4129,6 +4129,9 @@ var Ribbon = /** @class */ (function (_super) {
             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);
         }
     };
@@ -4177,6 +4180,7 @@ var Ribbon = /** @class */ (function (_super) {
         this.enableDisableItem(itemId, true);
     };
     Ribbon.prototype.enableDisableItem = function (itemId, isDisabled) {
+        var isUpdated = false;
         var itemProp = getItem(this.tabs, itemId);
         if (!itemProp) {
             return;
@@ -4191,30 +4195,33 @@ var Ribbon = /** @class */ (function (_super) {
         }
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
-            itemEle.classList.toggle(constants.DISABLED_CSS, itemProp.item.disabled);
             var moduleName = this.getItemModuleName(itemProp.item);
+            isUpdated = isDisabled ? !itemEle.classList.contains(constants.DISABLED_CSS) : itemEle.classList.contains(constants.DISABLED_CSS);
             if (moduleName !== 'template') {
-                if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
-                    updateControlDisabled(ele, 'dropdown-btn', isDisabled);
-                    for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        var btnEle = document.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID + i);
-                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                if (isUpdated) {
+                    if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
+                        updateControlDisabled(ele, 'dropdown-btn', isDisabled);
+                        for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            var btnEle = document.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID + i);
+                            updateControlDisabled(btnEle, 'btn', isDisabled);
+                        }
                     }
-                }
-                else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                    for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
-                        var btnEle = ele.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID + i);
-                        updateControlDisabled(btnEle, 'btn', isDisabled);
+                    else if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
+                        for (var i = 0; i < itemProp.item.groupButtonSettings.items.length; i++) {
+                            var btnEle = ele.querySelector('#' + itemId + constants.RIBBON_GROUP_BUTTON_ID + i);
+                            updateControlDisabled(btnEle, 'btn', isDisabled);
+                        }
+                    }
+                    else {
+                        updateControlDisabled(ele, moduleName, isDisabled);
                     }
-                }
-                else {
-                    updateControlDisabled(ele, moduleName, isDisabled);
                 }
             }
             else {
                 ele.classList.toggle(constants.DISABLED_CSS, isDisabled);
                 ele.toggleAttribute('disabled', isDisabled);
             }
+            itemEle.classList.toggle(constants.DISABLED_CSS, itemProp.item.disabled);
         }
     };
     Ribbon.prototype.unwireEvents = function () {

package/src/ribbon/items/ribbon-groupbutton.js

@@ -170,11 +170,11 @@ var RibbonGroupButton = /** @class */ (function () {
                 for (var j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
-                        grpBtnSettings.items[parseInt(j.toString(), 10)].selected = false;
+                        grpBtnSettings.items[parseInt(j.toString(), 10)].setProperties({ selected: false }, true);
                     }
                 }
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
-                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
                 if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
                     this.grpBtnIndex = itemIndex;
                     groupButtonEle = document.querySelector('#' + item.id);
@@ -191,10 +191,10 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
                 if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
                 }
                 else {
-                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = false;
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: false }, true);
                 }
                 var activeEleCount = 0;
                 for (var n = 0; n < grpBtnSettings.items.length; n++) {

package/src/ribbon/models/ribbon-group-button-item.d.ts

@@ -49,4 +49,11 @@ export declare class RibbonGroupButtonItem extends ChildProperty<RibbonGroupButt
      * @event click
      */
     click: EmitType<ClickGroupButtonEventArgs>;
+    /**
+     * @param {Object} prop - Gets the property of group button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
 }

package/src/ribbon/models/ribbon-group-button-item.js

@@ -27,6 +27,15 @@ var RibbonGroupButtonItem = /** @class */ (function (_super) {
     function RibbonGroupButtonItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    /**
+     * @param {Object} prop - Gets the property of group button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonGroupButtonItem.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
     __decorate([
         Property('')
     ], RibbonGroupButtonItem.prototype, "content", void 0);

package/styles/bootstrap-dark.css

@@ -687,6 +687,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1256,6 +1262,16 @@
   font-size: 40px;
   padding: 12px 9px 4px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/bootstrap.css

@@ -692,6 +692,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1261,6 +1267,16 @@
   font-size: 40px;
   padding: 12px 8px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 9px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/bootstrap4.css

@@ -753,6 +753,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1322,6 +1328,16 @@
   font-size: 40px;
   padding: 8px 5px 6px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 6px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/bootstrap5-dark.css

@@ -771,6 +771,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1340,6 +1346,16 @@
   font-size: 32px;
   padding: 8px 3px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/bootstrap5.css

@@ -771,6 +771,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1340,6 +1346,16 @@
   font-size: 32px;
   padding: 8px 3px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/fabric-dark.css

@@ -663,6 +663,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 6px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1232,6 +1238,16 @@
   font-size: 36px;
   padding: 12px 10px 4px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/fabric.css

@@ -661,6 +661,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 5px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1230,6 +1236,16 @@
   font-size: 36px;
   padding: 12px 9px 4px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 9px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/fluent-dark.css

@@ -747,6 +747,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 4px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1316,6 +1322,16 @@
   font-size: 32px;
   padding: 8px 3px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/fluent.css

@@ -747,6 +747,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 4px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1316,6 +1322,16 @@
   font-size: 32px;
   padding: 8px 3px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/highcontrast-light.css

@@ -670,6 +670,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1239,6 +1245,16 @@
   font-size: 36px;
   padding: 12px 8px 0;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/highcontrast.css

@@ -679,6 +679,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1248,6 +1254,16 @@
   font-size: 36px;
   padding: 12px 8px 0;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 8px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/material-dark.css

@@ -732,6 +732,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 7px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1301,6 +1307,16 @@
   font-size: 36px;
   padding: 12px 8px 0;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 6px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/material.css

@@ -765,6 +765,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 7px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1334,6 +1340,16 @@
   font-size: 36px;
   padding: 12px 8px 0;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 6px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,

package/styles/material3-dark.css

@@ -794,6 +794,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-icon-top {
   height: 50%;
 }
+.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 4px;
+}
 .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item > .e-split-btn-wrapper.e-vertical .e-btn,
@@ -1363,6 +1369,16 @@
   font-size: 36px;
   padding: 8px 3px 4px;
 }
+.e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn.e-top-icon-btn,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn.e-top-icon-btn {
+  gap: 9px;
+}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-dropdown-btn .e-caret,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-dropdown-btn .e-caret,