@syncfusion/ej2-splitbuttons 21.2.5 → 22.1.34

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.5
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. 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-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@21.2.3",
+  "_id": "@syncfusion/ej2-splitbuttons@19.16.4",
   "_inBundle": false,
-  "_integrity": "sha512-aaTkfYkoS/hBmvS4RAUisx3HdU9/xIPdr98CkoMhW0I0Y1ymVVLs+H6QWUo0yHTJw0rQTkWwNAlpDH8cxD7NkQ==",
+  "_integrity": "sha512-pdd+0KrIvNC36MvqFxzE4EN8ZejyHgtWW7LttFKNwSOEuUmn5lHr3iIq6A4klPezR2KmG5oXDsbMDSLWdIH1wQ==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-21.2.3.tgz",
-  "_shasum": "fd49d6a00019fe2150245e6e649237d1a9486cca",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.16.4.tgz",
+  "_shasum": "e2b23a99127c2bb57ff5540052a4c0f3009348c8",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -45,8 +45,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-popups": "~21.2.4"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-popups": "~22.1.34"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -89,6 +89,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.5",
+  "version": "22.1.34",
   "sideEffects": false
 }

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

@@ -579,6 +579,21 @@ var DropDownButton = /** @class */ (function (_super) {
                 if (ul_1) {
                     ul_1.focus();
                 }
+                if (_this.enableRtl && ul_1.parentElement.style.left !== '0px') {
+                    var wrapperWidth = void 0;
+                    if (_this.element.parentElement && _this.element.parentElement.classList.contains('e-split-btn-wrapper')) {
+                        wrapperWidth = _this.element.parentElement.offsetWidth;
+                    }
+                    else {
+                        wrapperWidth = _this.element.offsetWidth;
+                    }
+                    var popupRect = ul_1.parentElement.offsetWidth - wrapperWidth;
+                    var popupLeft = parseFloat(ul_1.parentElement.style.left) - popupRect;
+                    if (popupLeft < 0) {
+                        popupLeft = 0;
+                    }
+                    ul_1.parentElement.style.left = popupLeft + "px";
+                }
                 var openArgs = { element: ul_1, items: _this.items };
                 _this.trigger('open', openArgs);
             }

package/src/progress-button/progress-button-model.d.ts

@@ -10,8 +10,9 @@ export interface SpinSettingsModel {
      * Specifies the template content to be displayed in a spinner.
      *
      * @default null
+     * @aspType string
      */
-    template?: string;
+    template?: string | Function;
 
     /**
      * Sets the width of a spinner.

package/src/progress-button/progress-button.d.ts

@@ -11,8 +11,9 @@ export declare class SpinSettings extends ChildProperty<SpinSettings> {
      * Specifies the template content to be displayed in a spinner.
      *
      * @default null
+     * @aspType string
      */
-    template: string;
+    template: string | Function;
     /**
      * Sets the width of a spinner.
      *

package/src/split-button/split-button.js

@@ -209,6 +209,9 @@ var SplitButton = /** @class */ (function (_super) {
         }
         this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];
         this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');
+        if (this.disabled) {
+            this.wrapper.classList.add('e-splitbtn-disabled');
+        }
     };
     SplitButton.prototype.setAria = function () {
         attributes(this.element, {
@@ -333,6 +336,13 @@ var SplitButton = /** @class */ (function (_super) {
                         removeClass([this.wrapper], RTL);
                     }
                     break;
+                case 'disabled':
+                    if (newProp.disabled) {
+                        addClass([this.wrapper], 'e-splitbtn-disabled');
+                    }
+                    else {
+                        removeClass([this.wrapper], 'e-splitbtn-disabled');
+                    }
             }
         }
     };

package/styles/bootstrap-dark.css

@@ -1630,9 +1630,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(240, 240, 240, 0);
-}
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #f0f0f0;
 }
@@ -1640,9 +1637,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1650,9 +1644,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1660,9 +1651,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1670,9 +1658,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1680,9 +1665,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1690,9 +1672,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1700,9 +1679,6 @@
   fill: #000;
   stroke: #000;
 }
-.e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0);
-}
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #000;
 }
@@ -1720,9 +1696,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1730,9 +1703,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0);
-}
 .e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1740,9 +1710,6 @@
   fill: #0070f0;
   stroke: #0070f0;
 }
-.e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 112, 240, 0);
-}
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #0070f0;
 }
@@ -1750,9 +1717,6 @@
   fill: #358238;
   stroke: #358238;
 }
-.e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(53, 130, 56, 0);
-}
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #358238;
 }
@@ -1760,9 +1724,6 @@
   fill: #208090;
   stroke: #208090;
 }
-.e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(32, 128, 144, 0);
-}
 .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #208090;
 }
@@ -1770,9 +1731,6 @@
   fill: #f9ad37;
   stroke: #f9ad37;
 }
-.e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(249, 173, 55, 0);
-}
 .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #f9ad37;
 }
@@ -1780,9 +1738,6 @@
   fill: #c12f2f;
   stroke: #c12f2f;
 }
-.e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(193, 47, 47, 0);
-}
 .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #c12f2f;
 }
@@ -1790,9 +1745,6 @@
   fill: #0d47a1;
   stroke: #0d47a1;
 }
-.e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(13, 71, 161, 0);
-}
 .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #0d47a1;
 }
@@ -1806,40 +1758,4 @@
 *.e-danger .e-progress,
 *.e-info .e-progress {
   background: rgba(255, 255, 255, 0.3);
-}
-
-*.e-warning .e-progress {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-*.e-flat.e-primary .e-progress {
-  background: rgba(255, 64, 129, 0.2);
-}
-*.e-flat.e-success .e-progress {
-  background: rgba(77, 132, 29, 0.2);
-}
-*.e-flat.e-info .e-progress {
-  background: rgba(3, 120, 213, 0.2);
-}
-*.e-flat.e-warning .e-progress {
-  background: rgba(193, 87, 0, 0.2);
-}
-*.e-flat.e-danger .e-progress {
-  background: rgba(214, 65, 19, 0.2);
-}
-
-*.e-outline:not(:focus).e-primary .e-progress {
-  background: rgba(0, 112, 240, 0.2);
-}
-*.e-outline:not(:focus).e-success .e-progress {
-  background: rgba(53, 130, 56, 0.2);
-}
-*.e-outline:not(:focus).e-info .e-progress {
-  background: rgba(32, 128, 144, 0.2);
-}
-*.e-outline:not(:focus).e-warning .e-progress {
-  background: rgba(249, 173, 55, 0.2);
-}
-*.e-outline:not(:focus).e-danger .e-progress {
-  background: rgba(193, 47, 47, 0.2);
 }

package/styles/bootstrap.css

@@ -1603,9 +1603,6 @@
   fill: #333;
   stroke: #333;
 }
-.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(51, 51, 51, 0);
-}
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #333;
 }
@@ -1781,10 +1778,6 @@
   background: rgba(255, 255, 255, 0.3);
 }
 
-*.e-warning .e-progress {
-  background: rgba(255, 255, 255, 0.3);
-}
-
 *.e-flat.e-primary .e-progress {
   background: rgba(255, 255, 255, 0.2);
 }

package/styles/bootstrap4.css

@@ -239,6 +239,8 @@
   z-index: 1;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   outline-offset: 0;
@@ -308,6 +310,8 @@
   margin-left: -1px;
   padding-left: 8px;
   padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
   margin-right: 0;
@@ -345,6 +349,8 @@
   line-height: 1;
   padding-bottom: 8px;
   padding-right: 8px;
+  padding-bottom: 4px;
+  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
   padding-bottom: 4px;
@@ -357,6 +363,8 @@
   margin-top: -1px;
   padding-bottom: 8px;
   padding-top: 8px;
+  padding-bottom: 4px;
+  padding-top: 4px;
 }
 .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
   padding-top: 0;
@@ -1618,7 +1626,6 @@
   stroke: #fff;
 }
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: white;
   stroke-width: 1px;
 }
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
@@ -1796,10 +1803,6 @@
   background: rgba(255, 255, 255, 0.25);
 }
 
-*.e-warning .e-progress {
-  background: rgba(33, 37, 41, 0.25);
-}
-
 *.e-flat.e-primary .e-progress {
   background: rgba(255, 255, 255, 0.2);
 }

package/styles/bootstrap5-dark.css

@@ -1627,9 +1627,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
-}
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1805,10 +1802,6 @@
   background: rgba(173, 181, 189, 0.2);
 }
 
-*.e-warning .e-progress {
-  background: rgba(173, 181, 189, 0.2);
-}
-
 *.e-flat.e-primary .e-progress {
   background: rgba(255, 255, 255, 0.2);
 }

package/styles/bootstrap5.css

@@ -1627,9 +1627,6 @@
   fill: #fff;
   stroke: #fff;
 }
-.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(255, 255, 255, 0.7);
-}
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
 }
@@ -1805,10 +1802,6 @@
   background: rgba(108, 117, 125, 0.2);
 }
 
-*.e-warning .e-progress {
-  background: rgba(108, 117, 125, 0.2);
-}
-
 *.e-flat.e-primary .e-progress {
   background: rgba(255, 255, 255, 0.2);
 }

package/styles/button-group/_layout.scss

@@ -8,6 +8,10 @@
     -webkit-flex-direction: row;
     flex-direction: row;
     position: relative;
+    @if $skin-name == 'Material3' {
+      border-radius: $btn-border-radius;
+      box-shadow: $btn-active-box-shadow;
+    }
 
     input:focus+label.e-btn,
     .e-btn:focus,
@@ -44,7 +48,9 @@
     // Sharp corner for sides individual Button and SplitButton
     &:not(.e-rtl):not(.e-vertical) {
       .e-btn {
-        margin-left: $btn-grp-margin-left;
+        @if $skin-name != 'Material3' {
+          margin-left: $btn-grp-margin-left;
+        }
 
         &:not(:first-of-type):not(:last-of-type) {
           border-radius: 0;

package/styles/button-group/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/button-group/_material3-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: rgba($primary) !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_theme.scss

@@ -5,7 +5,7 @@
   .e-btn-group,
   .e-css.e-btn-group {
     &:not(.e-outline) {
-      @if $theme-name != 'Material3' {
+      @if $skin-name != 'Material3' {
         box-shadow: $btn-box-shadow;
       }
     }
@@ -20,6 +20,36 @@
       box-shadow: none;
     }
 
+    @if $skin-name == 'Material3' {
+      .e-btn:focus-visible,
+      input:focus-visible+label.e-btn { // only for keybord
+        box-shadow: $btn-keyboard-focus-box-shadow !important;
+        z-index: 1;
+
+        &.e-primary,
+        &.e-success,
+        &.e-info,
+        &.e-warning,
+        &.e-danger {
+          box-shadow: $btn-keyboard-focus-box-shadow !important;
+          z-index: 1;
+        }
+
+        &.e-outline {
+          box-shadow: $btn-keyboard-focus-box-shadow !important;
+          z-index: 1;
+          &.e-primary,
+          &.e-success,
+          &.e-info,
+          &.e-warning,
+          &.e-danger {
+            box-shadow: $btn-keyboard-focus-box-shadow !important;
+            z-index: 1;
+          }
+        }
+    }
+  }
+
     //Focus state for Normal and Outline GroupButton
     .e-btn:focus,
     input:focus+label.e-btn {
@@ -183,48 +213,84 @@
     input:active+label.e-btn,
     input:checked+label.e-btn {
       @include button-active;
+      @if $skin-name == 'Material3' {
+        box-shadow: none;
+      }
 
       &.e-primary {
         @include primary-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
       }
 
       &.e-success {
         @include success-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
       }
 
       &.e-info {
         @include info-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
       }
 
       &.e-warning {
         @include warning-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
       }
 
       &.e-danger {
         @include danger-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
       }
 
       &.e-outline {
         @include outline-active;
+        @if $skin-name == 'Material3' {
+          box-shadow: none;
+        }
 
         &.e-primary {
           @include outline-primary-active;
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
         }
 
         &.e-success {
           @include outline-success-active;
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
         }
 
         &.e-info {
           @include outline-info-active;
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
         }
 
         &.e-warning {
           @include outline-warning-active;
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
         }
 
         &.e-danger {
           @include outline-danger-active;
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
         }
       }
     }