@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

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;
@@ -523,7 +556,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 {
@@ -707,7 +740,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;
@@ -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;
@@ -2309,7 +2355,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,
@@ -2355,7 +2401,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),

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;
@@ -2447,7 +2494,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 7px 0 7px 13px;
+  padding: 7px 0 7px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/ribbon/material.css

@@ -213,6 +213,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;
 }
@@ -475,6 +505,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;
@@ -675,7 +708,7 @@
   line-height: 12px;
   height: auto;
   min-height: auto;
-  padding: 11px 1px 9px 2px;
+  padding: 8px 3px 8px 2px;
   margin: 0;
   border: none;
   min-width: auto;
@@ -969,12 +1002,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,
@@ -1246,7 +1283,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,
@@ -1538,6 +1575,16 @@
   border-radius: unset;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #fafafa;
+}
+.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(189, 189, 189)), color-stop(42%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(189, 189, 189) 28%, rgba(255, 255, 255, 0) 42%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: #e0e0e0;
   background: #fafafa;
@@ -2453,7 +2500,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
   font-size: 14px;
   line-height: 22px;
-  padding: 7px 0 7px 13px;
+  padding: 7px 0 7px 8px;
   height: auto;
 }
 .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,

package/styles/ribbon/material3-dark.css

@@ -134,6 +134,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;
 }
@@ -396,6 +426,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;
@@ -596,7 +629,7 @@
   line-height: 16px;
   height: auto;
   min-height: auto;
-  padding: 4px;
+  padding: 4px 4px 4px 2px;
   margin: 0;
   border: none;
   min-width: auto;
@@ -890,12 +923,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,
@@ -1167,7 +1204,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: 36px;
 }
-.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: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1459,6 +1496,17 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgba(var(--color-sf-surface));
+}
+.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(33%, rgba(255, 255, 255, 0)), color-stop(51%, rgba(var(--color-sf-primary-container), 0.5)), color-stop(70%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 33%, rgba(var(--color-sf-primary-container), 0.5) 51%, rgba(255, 255, 255, 0) 70%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
@@ -2398,7 +2446,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
   font-size: 16px;
   line-height: 16px;
-  padding: 10px 10px 10px 2px;
+  padding: 10px 4px 10px 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/material3.css

@@ -136,6 +136,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;
 }
@@ -398,6 +428,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;
@@ -598,7 +631,7 @@
   line-height: 16px;
   height: auto;
   min-height: auto;
-  padding: 4px;
+  padding: 4px 4px 4px 2px;
   margin: 0;
   border: none;
   min-width: auto;
@@ -892,12 +925,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,
@@ -1169,7 +1206,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: 36px;
 }
-.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: 36px;
 }
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1461,6 +1498,17 @@
   border-radius: 4px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+}
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
+  background-color: rgba(var(--color-sf-surface));
+}
+.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(33%, rgba(255, 255, 255, 0)), color-stop(51%, rgba(var(--color-sf-primary-container), 0.5)), color-stop(70%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 33%, rgba(var(--color-sf-primary-container), 0.5) 51%, rgba(255, 255, 255, 0) 70%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
@@ -2400,7 +2448,7 @@
 .e-bigger.e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
   font-size: 16px;
   line-height: 16px;
-  padding: 10px 10px 10px 2px;
+  padding: 10px 4px 10px 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/tailwind-dark.css

@@ -170,6 +170,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;
 }
@@ -432,6 +462,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;
@@ -926,12 +959,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,
@@ -1203,7 +1240,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,
@@ -1495,6 +1532,16 @@
   border-radius: 2px;
 }
 
+.e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
+  background: #374151;
+}
+.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(39%, rgba(255, 255, 255, 0)), color-stop(53%, #232e3e), color-stop(67%, rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, #232e3e 53%, rgba(255, 255, 255, 0) 67%);
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
   border-color: unset;
   background: #374151;