@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

package/styles/ribbon/fabric-dark.css

@@ -48,6 +48,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -310,6 +340,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -501,7 +534,7 @@
   line-height: 22px;
   height: auto;
   min-height: auto;
-  padding: 5px 0 5px 12px;
+  padding: 5px 0 5px 8px;
 }
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -804,12 +837,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1081,7 +1118,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 34px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 34px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1373,6 +1410,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #333232;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(29%, rgb(74, 72, 72)), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(74, 72, 72) 29%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #333232;
@@ -2287,7 +2334,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 9px 0 9px 13px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/ribbon/fabric.css

@@ -49,6 +49,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -311,6 +341,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -502,7 +535,7 @@
   line-height: 22px;
   height: auto;
   min-height: auto;
-  padding: 5px 0 5px 13px;
+  padding: 5px 0 5px 8px;
 }
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -805,12 +838,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1082,7 +1119,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 34px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 34px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1374,6 +1411,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #fff;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, rgb(200, 200, 200)), color-stop(60%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(200, 200, 200) 38%, rgba(255, 255, 255, 0) 60%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: #dadada;
   background: #fff;
@@ -2288,7 +2335,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 9px 0 9px 13px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/ribbon/fluent-dark.css

@@ -139,6 +139,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -401,6 +431,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -895,12 +928,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1172,7 +1209,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 34px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 34px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1464,6 +1501,16 @@
   border-radius: 2px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #252423;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(255, 255, 255, 0)), color-stop(46%, #1b1a19), color-stop(57%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, #1b1a19 46%, rgba(255, 255, 255, 0) 57%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #252423;

package/styles/ribbon/fluent.css

@@ -139,6 +139,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -401,6 +431,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -895,12 +928,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1172,7 +1209,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 34px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 34px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1464,6 +1501,16 @@
   border-radius: 2px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #f3f2f1;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(255, 255, 255, 0)), color-stop(46%, #fff), color-stop(57%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, #fff 46%, rgba(255, 255, 255, 0) 57%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #f3f2f1;

package/styles/ribbon/fluent2.css

@@ -73,7 +73,7 @@
 
 .e-ddl.e-popup {
   border: 0;
-  border-radius: 8px;
+  border-radius: 4px;
   -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
   margin-top: 4px;
@@ -187,6 +187,36 @@
   display: block;
   border-radius: 4px;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -449,6 +479,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -459,7 +492,7 @@
 }
 .e-ribbon.e-rbn .e-ribbon-group {
   position: relative;
-  padding-top: 6px;
+  padding-top: 4px;
   height: 130px;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
@@ -640,7 +673,7 @@
   line-height: 18px;
   height: auto;
   min-height: auto;
-  padding: 6px 0 6px 10px;
+  padding: 6px 0 6px 8px;
 }
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -649,7 +682,7 @@
   line-height: 14px;
   height: auto;
   min-height: auto;
-  padding: 8px 9px;
+  padding: 6px 4px 6px 2px;
   margin: 0;
   border: none;
   min-width: auto;
@@ -824,7 +857,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  max-width: 11ch;
+  max-width: 12ch;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -943,12 +976,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1250,7 +1287,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 37px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 37px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1508,10 +1545,6 @@
   background-size: contain;
   background-position: center;
 }
-.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  padding: 0;
-  margin: 2px 12px 2px 2px;
-}
 
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
@@ -1546,6 +1579,16 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: var(--color-sf-content-bg-color-alt2);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(217, 217, 217);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, var(--color-sf-content-bg-color-alt2)), color-stop(60%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, var(--color-sf-content-bg-color-alt2) 38%, rgba(255, 255, 255, 0) 60%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: var(--color-sf-ribbon-border-color);
   background: var(--color-sf-content-bg-color-alt2);
@@ -2512,7 +2555,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 16px;
   line-height: 22px;
-  padding: 9px 0 9px 12px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
@@ -2521,7 +2564,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
   font-size: 18px;
   line-height: 18px;
-  padding: 11px 12px;
+  padding: 8px 2px;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,
 .e-bigger .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,

package/styles/ribbon/highcontrast-light.css

@@ -65,6 +65,36 @@
   display: block;
   border-radius: unset;
 }
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
+  min-width: 52px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
+  display: none;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
+  min-width: 120px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
+  height: 20px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
+  border-radius: 4px;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  gap: 30px;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  padding: 10px;
+  overflow: hidden;
+}
 .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
   overflow: hidden;
 }
@@ -327,6 +357,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
+  gap: 16px;
+}
 .e-ribbon.e-rbn .e-ribbon-tab-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -518,7 +551,7 @@
   line-height: 22px;
   height: auto;
   min-height: auto;
-  padding: 7px 0 7px 12px;
+  padding: 7px 0 7px 8px;
 }
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -702,7 +735,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  max-width: 10ch;
+  max-width: 12ch;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -821,12 +854,16 @@
   pointer-events: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
-.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
   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 {
+.e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .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,
+.e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1098,7 +1135,7 @@
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
   padding-right: 38px;
 }
-.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
+.e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
   margin-right: 38px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1390,6 +1427,15 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #fff;
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgb(0, 0, 0);
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
+  background-image: linear-gradient(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: #757575;
   background: #fff;
@@ -2304,7 +2350,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 9px 0 9px 12px;
+  padding: 9px 0 9px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
@@ -2350,7 +2396,7 @@
   font-size: 16px;
   line-height: 24px;
   padding: 0 5px;
-  max-width: 10ch;
+  max-width: 12ch;
 }
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
 .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),