@syncfusion/ej2-ribbon 27.2.2 → 28.2.3

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;
@@ -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;

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

@@ -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 {
@@ -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: 7px 8px 9px 12px;
-}
 
 .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);

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;
@@ -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;

package/styles/ribbon/highcontrast.css

@@ -31,7 +31,7 @@
 .e-ddl.e-popup .e-content.e-nodata {
   background-color: #000;
 }
-.e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
+.e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {
@@ -70,6 +70,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;
 }
@@ -332,6 +362,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;
@@ -826,12 +859,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,
@@ -1103,7 +1140,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,
@@ -1395,6 +1432,15 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #000;
+}
+.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: #969696;
   background: #000;

package/styles/ribbon/icons/_tailwind3.scss

@@ -0,0 +1,9 @@
+@include export-module('ribbon-tailwind3-icons') {
+  .e-ribbon {
+    & .e-drop-icon {
+      &::before {
+        content: '\e729';
+      }
+    }
+  }
+}

package/styles/ribbon/material-dark.css

@@ -208,6 +208,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;
 }
@@ -470,6 +500,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;
@@ -964,12 +997,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,
@@ -1241,7 +1278,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,
@@ -1533,6 +1570,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #212121;
+}
+.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(28%, rgb(117, 117, 117)), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(117, 117, 117) 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: #757575;
   background: #212121;