@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

package/styles/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/material3-dark-lite.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));

package/styles/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/material3-lite.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));

package/styles/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/_bds-definition.scss

@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-md !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, transparent 15%, rgb(248, 249, 250) 38%, transparent 60%) !default;
+$ribbon-skeleton-bg-color: $content-bg-color-alt2 !default;

package/styles/ribbon/_bootstrap-dark-definition.scss

@@ -233,7 +233,7 @@ $ribbon-bigger-input-items-size: 14px !default;
 $ribbon-bigger-input-items-height: 22px !default;
 $ribbon-bigger-input-items-btn-size: 16px !default;
 $ribbon-bigger-input-items-btn-height: 16px !default;
-$ribbon-bigger-input-padding: 9px 0 9px 12px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
 $ribbon-bigger-input-icon-padding: 12px 4px 12px 2px !default;
 $ribbon-bigger-input-group-margin: 0 0 4px !default;
 $ribbon-bigger-dropdown-btn-padding: 0 17px !default;
@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $brand-primary-font !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(80, 80, 80) 28%, rgba(255, 255, 255, 0) 42%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_bootstrap-definition.scss

@@ -233,7 +233,7 @@ $ribbon-bigger-input-items-size: 14px !default;
 $ribbon-bigger-input-items-height: 22px !default;
 $ribbon-bigger-input-items-btn-size: 16px !default;
 $ribbon-bigger-input-items-btn-height: 16px !default;
-$ribbon-bigger-input-padding: 9px 0 9px 12px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
 $ribbon-bigger-input-icon-padding: 12px 4px 12px 2px !default;
 $ribbon-bigger-input-group-margin: 0 0 4px !default;
 $ribbon-bigger-dropdown-btn-padding: 0 18px !default;
@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $grey-white !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_bootstrap4-definition.scss

@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $white !default;
 $ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($black, .175) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, $gray-500 28%, rgba(255, 255, 255, 0) 42%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_bootstrap5-definition.scss

@@ -58,7 +58,7 @@ $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 2px 4px !default;
 $ribbon-large-items-btn-height: 18px !default;
 $ribbon-large-items-icon-size: $text-2xl !default;
-$ribbon-large-items-max-width: 10ch !default;
+$ribbon-large-items-max-width: 12ch !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
 $ribbon-large-items-btn-gap: 5px !default;
 $ribbon-large-items-min-width-height: 24px !default;
@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $primary-text-color !default;
 $ribbon-gallery-popup-box-shadow: $shadow-lg !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, $content-bg-color-alt1 38%, rgba(255, 255, 255, 0) 60%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_bootstrap5.3-definition.scss

@@ -86,7 +86,7 @@ $ribbon-input-height: 18px !default;
 $ribbon-input-weight: 400 !default;
 $ribbon-input-icon-size: $text-xs !default;
 $ribbon-input-icon-height: 12px !default;
-$ribbon-input-icon-padding: 7px 6px 7px 13px !default;
+$ribbon-input-icon-padding: 7px 4px 7px 2px !default;
 $ribbon-input-icon-weight: 400 !default;
 $ribbon-input-group-border-radius: 4px !default;
 $ribbon-input-group-margin: 0 0 4px !default;
@@ -234,7 +234,7 @@ $ribbon-bigger-input-items-height: 22px !default;
 $ribbon-bigger-input-items-btn-size: $text-xs !default;
 $ribbon-bigger-input-items-btn-height: 12px !default;
 $ribbon-bigger-input-padding: 6px 0 6px 8px !default;
-$ribbon-bigger-input-icon-padding: 11px 8px 11px 2px !default;
+$ribbon-bigger-input-icon-padding: 11px 4px 11px 2px !default;
 $ribbon-bigger-input-group-margin: 0 0 4px !default;
 $ribbon-bigger-dropdown-btn-padding: 0 13px !default;
 $ribbon-bigger-menu-blank-icon-padding: 44px !default;
@@ -405,3 +405,5 @@ $ribbon-gallery-item-selected-icons-color: $content-text-color-selected !default
 $ribbon-gallery-popup-box-shadow: $shadow-lg !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, $content-bg-color-alt1 38%, rgba(255, 255, 255, 0) 60%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_fabric-dark-definition.scss

@@ -80,7 +80,7 @@ $ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: 12px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;
 $ribbon-input-group-height: 32px !default;
-$ribbon-input-padding: 5px 0 5px 12px !default;
+$ribbon-input-padding: 5px 0 5px 8px !default;
 $ribbon-input-size: 14px !default;
 $ribbon-input-height: 22px !default;
 $ribbon-input-weight: 400 !default;
@@ -233,7 +233,7 @@ $ribbon-bigger-input-items-size: 14px !default;
 $ribbon-bigger-input-items-height: 22px !default;
 $ribbon-bigger-input-items-btn-size: 12px !default;
 $ribbon-bigger-input-items-btn-height: 12px !default;
-$ribbon-bigger-input-padding: 9px 0 9px 13px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
 $ribbon-bigger-input-icon-padding: 14px 4px 14px 2px !default;
 $ribbon-bigger-input-group-margin: 0 0 4px !default;
 $ribbon-bigger-dropdown-btn-padding: 0 18px !default;
@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: 0 2px 5px 0 rgba($shadow, .26) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(74, 72, 72) 29%, rgba(255, 255, 255, 0) 42%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;

package/styles/ribbon/_fabric-definition.scss

@@ -80,7 +80,7 @@ $ribbon-items-min-width-height: 16px !default;
 $ribbon-items-checkbox-size: 14px !default;
 $ribbon-items-checkbox-padding: 0 8px !default;
 $ribbon-input-group-height: 32px !default;
-$ribbon-input-padding: 5px 0 5px 13px !default;
+$ribbon-input-padding: 5px 0 5px 8px !default;
 $ribbon-input-size: 14px !default;
 $ribbon-input-height: 22px !default;
 $ribbon-input-weight: 400 !default;
@@ -233,7 +233,7 @@ $ribbon-bigger-input-items-size: 14px !default;
 $ribbon-bigger-input-items-height: 22px !default;
 $ribbon-bigger-input-items-btn-size: 12px !default;
 $ribbon-bigger-input-items-btn-height: 12px !default;
-$ribbon-bigger-input-padding: 9px 0 9px 13px !default;
+$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
 $ribbon-bigger-input-icon-padding: 14px 4px 14px 2px !default;
 $ribbon-bigger-input-group-margin: 0 0 4px !default;
 $ribbon-bigger-dropdown-btn-padding: 0 17px !default;
@@ -406,3 +406,5 @@ $ribbon-gallery-item-selected-icons-color: $ribbon-items-icon-color !default;
 $ribbon-gallery-popup-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !default;
 $ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
 $ribbon-items-focus-box-shadow: none !default;
+$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(200, 200, 200) 38%, rgba(255, 255, 255, 0) 60%) !default;
+$ribbon-skeleton-bg-color: rgba(217, 217, 217, 1) !default;