@syncfusion/ej2-ribbon 30.2.4 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.4
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-ribbon",
-  "version": "30.2.4",
+  "version": "31.1.22",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,13 +9,13 @@
   "es2015": "./dist/es6/ej2-ribbon.es5.js",
   "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~30.2.4",
-    "@syncfusion/ej2-buttons": "~30.2.4",
-    "@syncfusion/ej2-dropdowns": "~30.2.4",
-    "@syncfusion/ej2-lists": "~30.2.4",
-    "@syncfusion/ej2-navigations": "~30.2.4",
-    "@syncfusion/ej2-popups": "~30.2.4",
-    "@syncfusion/ej2-splitbuttons": "~30.2.4"
+    "@syncfusion/ej2-base": "~31.1.22",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-dropdowns": "~31.1.22",
+    "@syncfusion/ej2-lists": "~31.1.17",
+    "@syncfusion/ej2-navigations": "~31.1.20",
+    "@syncfusion/ej2-popups": "~31.1.20",
+    "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { ColorPicker } from '@syncfusion/ej2-inputs';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -27,6 +27,7 @@ import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSpl
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
 import { Popup } from '@syncfusion/ej2-popups';
+import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 /**
@@ -396,13 +397,21 @@ var Ribbon = /** @class */ (function (_super) {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            var activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
-            if (!isNullOrUndefined(activePopup) && activePopup.length) {
-                for (var i = 0; i < activePopup.length; i++) {
-                    var dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            var colorPickerPopups = document.querySelectorAll('.e-ribbon .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker, .e-ribbon-group-overflow-ddb .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker');
+            activePopups.forEach(function (popup) {
+                var dropDownBtn = getInstance(popup, DropDownButton);
+                if (dropDownBtn) {
                     dropDownBtn.toggle();
                 }
-            }
+            });
+            colorPickerPopups.forEach(function (picker) {
+                var colorPickerObj = getInstance(picker, ColorPicker);
+                if (colorPickerObj) {
+                    colorPickerObj.toggle();
+                    colorPickerObj.refresh();
+                }
+            });
         }
         var galleryPopupEle = document.querySelector('.e-ribbon-gallery-popup.e-popup-open');
         if (galleryPopupEle) {

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

@@ -121,6 +121,11 @@ var RibbonSplitButton = /** @class */ (function () {
             }
         };
         var target;
+        splitbutton.beforeOpen = function (e) {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitbutton.beforeClose = function (e) {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(_this, e);
@@ -163,6 +168,11 @@ var RibbonSplitButton = /** @class */ (function () {
         cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeOpen = function (e) {
+            if (item.splitButtonSettings.beforeOpen) {
+                item.splitButtonSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitbutton.beforeClose = function (e) {
             if (item.splitButtonSettings.beforeClose) {
                 item.splitButtonSettings.beforeClose.call(_this, e);
@@ -250,6 +260,7 @@ var RibbonSplitButton = /** @class */ (function () {
                 (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
             control.cssClass = prop.cssClass;
         }
+        delete prop.beforeOpen;
         delete prop.open;
         delete prop.click;
         delete prop.close;

package/styles/bds-lite.css

@@ -1118,6 +1118,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1323,6 +1329,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bds.css

@@ -1118,6 +1118,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1323,6 +1329,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-dark-lite.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-dark.css

@@ -877,6 +877,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1082,6 +1088,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap-lite.css

@@ -879,6 +879,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1084,6 +1090,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap.css

@@ -879,6 +879,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1084,6 +1090,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap4-lite.css

@@ -93,6 +93,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -921,6 +929,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1126,6 +1140,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap4.css

@@ -93,6 +93,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -921,6 +929,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1126,6 +1140,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-dark-lite.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-dark.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5-lite.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.3-lite.css

@@ -956,6 +956,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1161,6 +1167,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.3.css

@@ -956,6 +956,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1161,6 +1167,9 @@
   margin: 8px 0 8px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/bootstrap5.css

@@ -952,6 +952,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1157,6 +1163,9 @@
   margin: 7px 0 7px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-dark-lite.css

@@ -853,6 +853,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1058,6 +1064,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-dark.css

@@ -853,6 +853,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1058,6 +1064,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric-lite.css

@@ -854,6 +854,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1059,6 +1065,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fabric.css

@@ -854,6 +854,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1059,6 +1065,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent-dark-lite.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;

package/styles/fluent-dark.css

@@ -944,6 +944,12 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-wrapper .e-colorpicker-popup.e-ribbon-control,
+.e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-colorpicker-container .e-colorpicker-popup.e-ribbon-control {
+  z-index: unset !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-ribbon.e-rbn .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item:not(:has(.e-ribbon-template)) .e-split-btn-wrapper {
   border: 1px solid transparent;
@@ -1149,6 +1155,9 @@
   margin: 9px 0 9px 12px;
   padding: 0;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper .e-frame {
+  margin: unset;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
   padding: 0;
   width: 100%;