@syncfusion/ej2-splitbuttons 19.4.38 → 19.4.52

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@18.22.0",
+  "_id": "@syncfusion/ej2-splitbuttons@19.4.47",
   "_inBundle": false,
-  "_integrity": "sha512-HnLFIx3gYAL3a8MURQpNU9rOXWUCk10wrp63cxiJVyQ+ZvjdTjEdlkIsIQPY+xExDBdmNWJucuuV9FWow2v+aw==",
+  "_integrity": "sha512-nboptRUnBy6Ja9V57f1to2Zifjy3RhFU+PY/MOxz2BhSWAvz6LWi4Ka1jqYkVV5lGSPF/SegCl7aaBGQpTMQIg==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -31,8 +31,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-18.22.0.tgz",
-  "_shasum": "f73522edaa642fb8d2c82ccdbd7ef65de4b4eb2a",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.4.47.tgz",
+  "_shasum": "26bb4625fe10bb9901610c59566236f93d62102c",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,8 +43,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.38",
-    "@syncfusion/ej2-popups": "~19.4.38"
+    "@syncfusion/ej2-base": "~19.4.52",
+    "@syncfusion/ej2-popups": "~19.4.52"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -87,6 +87,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.38",
+  "version": "19.4.52",
   "sideEffects": false
 }

package/src/common/common-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass } from '@syncfusion/ej2-base';
+import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
 
 /**
  * Interface for a class Item

package/src/common/common.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChildProperty, extend, deleteObject, Property, addClass } from '@syncfusion/ej2-base';
+import { ChildProperty, extend, deleteObject, Property, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * @param {Object} props - Specifies the properties
  * @param {string[]} model - Specifies the model
@@ -114,6 +114,9 @@ export function setBlankIconStyle(popup) {
         return;
     }
     var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');
+    if (isNullOrUndefined(iconLi)) {
+        return;
+    }
     if (iconLi.classList.contains('e-url')) {
         iconLi = iconLi.querySelector('.e-menu-url');
     }

package/src/drop-down-button/drop-down-button-model.d.ts

@@ -1,4 +1,4 @@
-import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
+import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, EmitType } from '@syncfusion/ej2-base';import { addClass, INotifyPropertyChanged, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';import { attributes, Component, closest, select, KeyboardEventArgs, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { classList, removeClass } from '@syncfusion/ej2-base';import { Button } from '@syncfusion/ej2-buttons';import { Popup } from '@syncfusion/ej2-popups';import { SplitButton } from '../split-button/split-button';import { MenuEventArgs, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, upDownKeyHandler } from './../common/common';import { getModel, SplitButtonIconPosition, Item, setBlankIconStyle } from './../common/common';import { ItemModel } from './../common/common-model';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/drop-down-button/drop-down-button.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler } from '@syncfusion/ej2-base';
-import { addClass, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';
+import { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';
 import { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { classList, removeClass } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -504,9 +504,30 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.prototype.openPopUp = function (e) {
         var _this = this;
         if (e === void 0) { e = null; }
+        var isReact = false;
+        var popupElem = this.getPopUpElement();
         if (!this.target) {
             this.createItems(true);
         }
+        else {
+            if (this.activeElem.length > 1) {
+                var splitButton = getComponent(this.activeElem[0], 'split-btn');
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (splitButton.isReact && popupElem.childNodes.length < 1) {
+                    isReact = true;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());
+                }
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.isReact && popupElem.childNodes.length < 1) {
+                    isReact = true;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.appendReactElement(this.getTargetElement(), this.getPopUpElement());
+                }
+            }
+        }
         var ul = this.getULElement();
         this.popupWireEvents();
         var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };

package/styles/bootstrap-dark.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/bootstrap.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/bootstrap5-dark.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;
@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {
@@ -2050,38 +2050,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(33, 178, 111, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(228, 96, 109, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/bootstrap5.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;
@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {
@@ -2050,38 +2050,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(25, 135, 84, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 53, 69, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/drop-down-button/_bootstrap5-definition.scss

@@ -10,7 +10,7 @@ $drop-down-btn-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
-$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-height: 26px !default;
 $drop-down-btn-li-padding: 0 12px !default;
 $drop-down-btn-bigger-li-padding: 0 16px !default;
 $drop-down-btn-small-li-padding: 0 8px !default;

package/styles/drop-down-button/_tailwind-definition.scss

@@ -10,7 +10,7 @@ $drop-down-btn-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
-$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-height: 28px !default;
 $drop-down-btn-li-padding: 0 12px !default;
 $drop-down-btn-bigger-li-padding: 0 16px !default;
 $drop-down-btn-small-li-padding: 0 8px !default;

package/styles/drop-down-button/bootstrap5-dark.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

package/styles/drop-down-button/bootstrap5.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

package/styles/drop-down-button/tailwind-dark.css

@@ -115,8 +115,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 28px;
+  line-height: 28px;
   padding: 0 12px;
 }
 
@@ -134,7 +134,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 28px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

package/styles/drop-down-button/tailwind.css

@@ -115,8 +115,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 28px;
+  line-height: 28px;
   padding: 0 12px;
 }
 
@@ -134,7 +134,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 28px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

package/styles/fabric-dark.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/fabric.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/highcontrast-light.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/highcontrast.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/material-dark.css

@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/material.css

@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/progress-button/_bootstrap5-definition.scss

@@ -10,12 +10,12 @@ $progress-btn-small-spin-btn-padding: 14px !default;
 $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
 $progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor: rgba($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
-$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
-$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
-$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
-$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
-$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
 $btn-flat-primary-path-arc: $white;

package/styles/progress-button/_tailwind-definition.scss

@@ -10,12 +10,12 @@ $progress-btn-small-spin-btn-padding: 14px !default;
 $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
 $progress-btn-color: $secondary-text-color !default;
-$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor: rgba($icon-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($icon-color, .2) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
-$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
-$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
-$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
-$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
-$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger, 1) !default;
 $btn-flat-primary-path-arc: $white;

package/styles/progress-button/bootstrap5-dark.css

@@ -590,38 +590,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(173, 181, 189, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(33, 178, 111, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(228, 96, 109, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/bootstrap5.css

@@ -590,38 +590,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(108, 117, 125, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(13, 110, 253, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(25, 135, 84, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(13, 202, 240, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 193, 7, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(220, 53, 69, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {

package/styles/progress-button/tailwind-dark.css

@@ -593,38 +593,38 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(209, 213, 219, 0.2);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 211, 238, 0.2);
 }
 
 *.e-flat.e-success .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(34, 197, 94, 0.2);
 }
 
 *.e-flat.e-info .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(56, 189, 248, 0.2);
 }
 
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(249, 115, 22, 0.2);
 }
 
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(248, 113, 113, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {