@syncfusion/ej2-angular-ribbon 21.1.37 → 21.2.3-ngcc

package/styles/ribbon/fabric-dark.scss

@@ -1,17 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/fabric-dark-definition.scss';
-@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/fabric-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/fabric-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/fabric-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/fabric-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/fabric-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
+@import 'ej2-ribbon/styles/ribbon/fabric-dark.scss';

package/styles/ribbon/fabric.css

@@ -104,9 +104,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -190,6 +187,9 @@
   height: auto;
   min-height: auto;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
+  box-shadow: none;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -199,6 +199,7 @@
   min-width: auto;
   width: auto;
   border-style: solid;
+  transform: none;
   border-width: 1px;
   border-radius: unset;
   z-index: 3;
@@ -209,6 +210,7 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
+  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -277,6 +279,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 4px;
   height: auto;
@@ -326,6 +331,9 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-right: 30px;
+}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -337,6 +345,9 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-left: 30px;
+}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -558,6 +569,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -676,7 +688,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 7px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -700,22 +713,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 6px 8px;
   font-weight: 600;
   line-height: 24px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 8px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 8px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -868,6 +883,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1082,7 +1103,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 7px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1090,6 +1113,18 @@
   margin: 10px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/ribbon/fabric.scss

@@ -1,17 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import 'ej2-popups/styles/tooltip/fabric-definition.scss';
-@import 'ej2-buttons/styles/button/fabric-definition.scss';
-@import 'ej2-buttons/styles/check-box/fabric-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/fabric-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/fabric-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/fabric-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/fabric-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/fabric-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/fabric-definition.scss';
-@import 'ej2-navigations/styles/context-menu/fabric-definition.scss';
-@import 'ej2-navigations/styles/toolbar/fabric-definition.scss';
-@import 'ej2-navigations/styles/menu/fabric-definition.scss';
-@import 'ej2-navigations/styles/tab/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
+@import 'ej2-ribbon/styles/ribbon/fabric.scss';

package/styles/ribbon/fluent-dark.css

@@ -190,9 +190,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -276,6 +273,9 @@
   height: auto;
   min-height: auto;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
+  box-shadow: none;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -285,6 +285,7 @@
   min-width: auto;
   width: auto;
   border-style: solid;
+  transform: none;
   border-width: 1px;
   border-radius: 2px;
   z-index: 3;
@@ -295,6 +296,7 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
   height: auto;
+  transform: none;
   line-height: 14px;
   padding: 0 5px;
   width: auto;
@@ -363,6 +365,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 1px;
   height: auto;
@@ -412,6 +417,9 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-right: 30px;
+}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-left: 30px;
+}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 3px 5px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 3px 5px;
   font-weight: 600;
   line-height: 18px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 5px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 5px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -954,6 +969,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 3px 7px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
   margin: 7px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 7px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 7px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/ribbon/fluent-dark.scss

@@ -1,17 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/fluent-dark-definition.scss';
-@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/fluent-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/fluent-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/fluent-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/fluent-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/fluent-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
+@import 'ej2-ribbon/styles/ribbon/fluent-dark.scss';

package/styles/ribbon/fluent.css

@@ -190,9 +190,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -276,6 +273,9 @@
   height: auto;
   min-height: auto;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
+  box-shadow: none;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -285,6 +285,7 @@
   min-width: auto;
   width: auto;
   border-style: solid;
+  transform: none;
   border-width: 1px;
   border-radius: 2px;
   z-index: 3;
@@ -295,6 +296,7 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
   height: auto;
+  transform: none;
   line-height: 14px;
   padding: 0 5px;
   width: auto;
@@ -363,6 +365,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 1px;
   height: auto;
@@ -412,6 +417,9 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-right: 30px;
+}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -423,6 +431,9 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-left: 30px;
+}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -644,6 +655,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -762,7 +774,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 3px 5px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -786,22 +799,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 3px 5px;
   font-weight: 600;
   line-height: 18px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 5px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 5px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -954,6 +969,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1168,7 +1189,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 3px 7px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1176,6 +1199,18 @@
   margin: 7px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 7px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 7px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/ribbon/fluent.scss

@@ -1,17 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
-@import 'ej2-popups/styles/tooltip/fluent-definition.scss';
-@import 'ej2-buttons/styles/button/fluent-definition.scss';
-@import 'ej2-buttons/styles/check-box/fluent-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/fluent-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/fluent-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/fluent-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/fluent-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/fluent-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/fluent-definition.scss';
-@import 'ej2-navigations/styles/context-menu/fluent-definition.scss';
-@import 'ej2-navigations/styles/toolbar/fluent-definition.scss';
-@import 'ej2-navigations/styles/menu/fluent-definition.scss';
-@import 'ej2-navigations/styles/tab/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
+@import 'ej2-ribbon/styles/ribbon/fluent.scss';