@syncfusion/blazor-themes 26.1.35 → 26.1.39

package/SCSS-Themes/fluent2.scss

@@ -226,7 +226,7 @@
 
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
 
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
@@ -605,7 +605,7 @@ $info-outline: mapcolorvariable('info-outline') !default;
 
 $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
 $tooltip-border: mapcolorvariable('tooltip-border') !default;
-$toooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
+$tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
 
 $toast-text-color: mapcolorvariable('toast-text-color') !default;
 $toast-alt-text-color:mapcolorvariable('toase-alt-text-color') !default;
@@ -1050,9 +1050,9 @@ $border-info: $border-info !default;
 $spreadsheet-gridline: $spreadsheet-gridline !default;
 $flyout-border: $flyout-border !default;
 
-$tooltip-bg-color: $white !default;
-$tooltip-border: $white;
-$toooltip-text-color: $grey-14 !default;
+$tooltip-bg-color: $tooltip-bg-color !default;
+$tooltip-border: $tooltip-border;
+$tooltip-text-color: $tooltip-text-color !default;
 $shadow-02: 0 1px 2px 0 rgba($black, .14), 0 0 2px 0 rgba($black, .12) !default;
 $shadow-04: 0 2px 4px 0 rgba($black, .14), 0 0 2px 0 rgba($black, .12) !default;
 $shadow-08: 0 4px 8px 0 rgba($black, .14), 0 0 2px 0 rgba($black, .12) !default;
@@ -1653,7 +1653,7 @@ $switch-box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000 !default;
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -1672,7 +1672,7 @@ $switch-box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000 !default;
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -1735,7 +1735,7 @@ $switch-box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000 !default;
 
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
 
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
@@ -2109,7 +2109,7 @@ $switch-box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000 !default;
 
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
 
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
@@ -3638,7 +3638,7 @@ $acrdn-item-header-hover-border-color: initial !default;
 $acrdn-item-header-active-border: 0 !default;
 $acrdn-item-header-active-border-color: initial !default;
 $acrdn-item-header-focus-border: 0 !default;
-$acrdn-item-header-focus-box-shadow: $shadow-focus-ring1 !default;
+$acrdn-item-header-focus-box-shadow: $keyboard-focus !default;
 $acrdn-item-header-focus-bg: $acrdn-bg-color !default;
 $acrdn-item-header-focus-active-color: $content-text-color !default;
 $acrdn-item-select-exp-hdr-hover-color: $content-text-color !default;
@@ -4254,9 +4254,15 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
 
         &:focus {
           border: $acrdn-item-header-focus-border;
-          box-shadow: $acrdn-item-header-focus-box-shadow;
           background: $acrdn-item-header-focus-bg;
 
+          @if ($skin-name == 'fluent2') {
+            box-shadow: none;
+          }
+          @else {
+            box-shadow: $acrdn-item-header-focus-box-shadow;
+          }
+
           &:active {
 
             .e-icons,
@@ -4266,6 +4272,12 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
             }
           }
         }
+
+        @if ($skin-name == 'fluent2') {
+          &:focus-visible {
+            box-shadow: $acrdn-item-header-focus-box-shadow;
+          }
+        }
       }
 
       &.e-select {
@@ -4372,9 +4384,21 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
           }
 
           &:focus {
-            box-shadow: $acrdn-item-header-focus-box-shadow;
             position: relative;
             z-index: 2;
+
+            @if ($skin-name == 'fluent2') {
+              box-shadow: none;
+            }
+            @else {
+              box-shadow: $acrdn-item-header-focus-box-shadow;
+            }
+          }
+
+          @if ($skin-name == 'fluent2') {
+            &:focus-visible {
+              box-shadow: $acrdn-item-header-focus-box-shadow;
+            }
           }
         }
 
@@ -17243,11 +17267,15 @@ $textarea-float-top: -28px !default;
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
       border-color: $input-group-border-color-focus;
       border-radius: $input-groupo-focus-border-radius;
       box-shadow: $input-group-focus-box-shadow;
     }
+    @if $input-skin-name == 'FluentUI' {
+      border-radius: $input-groupo-focus-border-radius;
+      border-width: 2px;
+    }
   }
 
   .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
@@ -17336,14 +17364,14 @@ $textarea-float-top: -28px !default;
    
   .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       border-color: $input-active-border-color;
     }
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
       -webkit-box-shadow: $input-border-shadow;
       box-shadow: $input-border-shadow;
     }
-    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
+    @if $input-skin-name == 'bootstrap5' {
       box-shadow: $input-group-focus-box-shadow;
     }
   }
@@ -25884,7 +25912,7 @@ $sd-active-li-bg: $secondary-bg-color-pressed !default;
 $sd-active-li-border-color: $secondary-border-color-pressed !default;
 $sd-active-font-color: $secondary-text-color-pressed !default;
 
-@mixin speeddial-popup-styles($padding, $li-margin, $li-text-margin, $speeddial-li-text-height, $li-icon-height, $li-icon-width, $li-icon-font-size, $ul-padding, $sd-li-margin) {
+@mixin speeddial-popup-styles($padding, $li-margin, $li-text-margin, $speeddial-li-text-height, $li-icon-height, $li-icon-width, $li-icon-font-size, $ul-padding, $sd-li-margin, $speeddial-text-li-padding) {
   .e-speeddial-ul {
     padding: $padding;
   }
@@ -25897,6 +25925,14 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
     margin: $li-text-margin;
   }
 
+  .e-speeddial-li.e-speeddial-text-li .e-speeddial-li-text {
+    @if ($skin-name == 'fluent2') {
+      font-size: $li-icon-font-size;
+      line-height: $speeddial-li-text-height;
+      padding: $speeddial-text-li-padding;
+    }
+  }
+
   .e-speeddial-li-text {
     height: $speeddial-li-text-height;
     line-height: $speeddial-li-text-height;
@@ -26020,6 +26056,16 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
       &:not(.e-speeddial-text-li) .e-speeddial-li-text {
         margin: $sd-li-text-margin;
       }
+
+      &.e-speeddial-text-li .e-speeddial-li-text {
+        @if ($skin-name == 'fluent2') {
+          border: 1px solid;
+          border-radius: 20px;
+          font-size: 12px;
+          line-height: 16px;
+          padding: 8px 16px;
+        }
+      }
     }
 
     .e-speeddial-li-text {
@@ -26157,19 +26203,19 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
 
   .e-small.e-speeddial-popup,
   .e-small .e-speeddial-popup {
-    @include speeddial-popup-styles($sd-small-vert-ul-padding, $sd-small-vert-li-margin, $sd-small-li-text-margin, $sd-small-li-text-height, $sd-small-li-icon-height, $sd-small-li-icon-width, $sd-small-li-icon-font-size, $sd-small-horz-ul-padding, $sd-small-horz-li-margin);
+    @include speeddial-popup-styles($sd-small-vert-ul-padding, $sd-small-vert-li-margin, $sd-small-li-text-margin, $sd-small-li-text-height, $sd-small-li-icon-height, $sd-small-li-icon-width, $sd-small-li-icon-font-size, $sd-small-horz-ul-padding, $sd-small-horz-li-margin, 5px 16px);
   }
 
   .e-bigger.e-speeddial-popup,
   .e-bigger .e-speeddial-popup {
-    @include speeddial-popup-styles($sd-bigger-vert-ul-padding, $sd-bigger-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-li-text-height, $sd-bigger-li-icon-height, $sd-bigger-li-icon-width, $sd-bigger-li-icon-font-size, $sd-bigger-horz-ul-padding, $sd-bigger-horz-li-margin);
+    @include speeddial-popup-styles($sd-bigger-vert-ul-padding, $sd-bigger-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-li-text-height, $sd-bigger-li-icon-height, $sd-bigger-li-icon-width, $sd-bigger-li-icon-font-size, $sd-bigger-horz-ul-padding, $sd-bigger-horz-li-margin, 10px 28px);
   }
 
   .e-bigger.e-small.e-speeddial-popup,
   .e-bigger.e-small .e-speeddial-popup,
   .e-bigger .e-small.e-speeddial-popup,
   .e-small .e-bigger.e-speeddial-popup {
-    @include speeddial-popup-styles($sd-bigger-small-vert-ul-padding, $sd-bigger-small-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-small-li-text-height, $sd-bigger-small-li-icon-height, $sd-bigger-small-li-icon-width, $sd-bigger-small-li-icon-font-size, $sd-bigger-small-horz-ul-padding, $sd-bigger-small-horz-li-margin);
+    @include speeddial-popup-styles($sd-bigger-small-vert-ul-padding, $sd-bigger-small-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-small-li-text-height, $sd-bigger-small-li-icon-height, $sd-bigger-small-li-icon-width, $sd-bigger-small-li-icon-font-size, $sd-bigger-small-horz-ul-padding, $sd-bigger-small-horz-li-margin, 8px 24px);
   }
 
   .e-speeddial-overlay {
@@ -26233,6 +26279,13 @@ $sd-active-font-color: $secondary-text-color-pressed !default;
           border-color: $sd-li-border-color;
         }
       }
+      &.e-speeddial-text-li .e-speeddial-li-text {
+        @if ($skin-name == 'fluent2') {
+          background: $secondary-bg-color;
+          box-shadow: $shadow-lg;
+          border-color: $secondary-border-color;
+        }
+      }
     }
     .e-speeddial-li.e-disabled {
       @include speeddial-text-icon-colors($sd-disabled-font-color, $sd-disabled-li-bg, $sd-disabled-li-border-color);
@@ -26488,7 +26541,7 @@ $calendar-focus-box-shadow: none !default;
 $calendar-focus-border-color: none !default;
 $calendar-hover-border-color: $primary-lighter !default;
 $calendar-disable-font-color: $content-text-color-disabled !default;
-$calendar-focused-date-bg-style: $content-bg-color-pressed !default;
+$calendar-focused-date-bg-style: $primary-light !default;
 $calendar-small-title-font-color: $content-text-color-alt1 !default;
 $calendar-title-border-radius: 2px !default;
 $calendar-title-focus-box-shadow: $keyboard-focus !default;
@@ -27474,7 +27527,7 @@ $calendar-selected-month-bg-color: $primary-lighter !default;
         }
       }
       #{if(&, '&', '*')} .e-content.e-year,
-      #{if(&, '&', '*')} .e-content.e-decade, {
+      #{if(&, '&', '*')} .e-content.e-decade {
         #{if(&, '&', '*')} td.e-selected span.e-day {
           @if $skin-name == 'fluent2' {
             font-weight: 600;
@@ -32977,7 +33030,7 @@ $tooltip-mobile-vertical-padding: 12px !default;
 //color variables
 $tooltip-content-bg-color: $tooltip-bg-color !default;
 $tooltip-content-border-color: $tooltip-border !default;
-$tooltip-content-font-color: $toooltip-text-color !default;
+$tooltip-content-font-color: $tooltip-text-color !default;
 $tooltip-default-icon-color: $icon-color !default;
 $tooltip-icon-bg-normal: $secondary-bg-color !default;
 $tooltip-hover-icon-color: $icon-color-hover !default;
@@ -46561,7 +46614,7 @@ $dialog-bigger-footer-button-margin-right: 12px !default;
 $dialog-close-icon-margin-left: 0 !default;
 $dialog-close-icon-width: auto !default;
 $dialog-bigger-close-icon-height: 40px !default;
-$dialog-bigger-close-icon-width: 40px !default;
+$dialog-bigger-close-icon-width: auto !default;
 $dialog-close-icon-top: 0 !default;
 $dialog-bigger-header-content-font-size: 22px !default;
 $dialog-bigger-content-font-size: $text-base !default;
@@ -46576,6 +46629,8 @@ $dialog-headericon-bottom: 0 !default;
 $dialog-resize-handler-width: 15px;
 $dialog-resize-handler-height: 15px;
 $dialog-resize-handler-position: 0;
+$dialog-bigger-header-btn-padding: 7px !default;
+$dialog-header-btn-padding: 7px !default;
 
 //Layout Variables End
 
@@ -46619,18 +46674,10 @@ $dialog-footer-flat-btn-content-color: $secondary-text-color !default;
 $dialog-enable-resize-padding-bottom: 15px !default;
 
 /* stylelint-disable */
-.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
-.e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
 .e-dialog {
-    & .e-dlg-content {
-        border-radius: $dialog-border-radius !important;
-      }
+  & .e-dlg-content {
+    border-radius: $dialog-border-radius !important;
+  }
 }
 
 .e-dlg-overlay {
@@ -46658,12 +46705,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -46837,6 +46878,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -46942,6 +46986,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {
@@ -55623,7 +55670,7 @@ $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 12px !default;
 $treeview-text-margin: 0 !default;
 $treeview-image-size: 18px !default;
-$treeview-image-margin: 0 0 0 6px !default;
+$treeview-image-margin: 0 0 0 12px !default;
 $treeview-navigable-icon-image-margin: 0 8px 0 0 !default;
 $treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
 $treeview-navigable-check-margin-bigger: 0 0 0 12px !default;
@@ -55638,7 +55685,7 @@ $treeview-icon-image-margin: 0 0 0 12px !default;
 $treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
 $treeview-check-margin: 0 0 0 4px !default;
 $treeview-rtl-check-margin: 0 4px 0 0 !default;
-$treeview-check-text-padding: 0 12px !default;
+$treeview-check-text-padding: 0 4px !default;
 $treeview-check-image-margin: 0 0 0 4px !default;
 $treeview-rtl-check-image-margin: 0 4px 0 0 !default;
 $treeview-drop-count-border-size: 1px !default;
@@ -55654,11 +55701,11 @@ $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 $treeview-big-item-height: 40px !default;
 $treeview-big-text-height: 38px !default;
 $treeview-big-input-height: 40px !default;
-$treeview-big-text-padding: 0 12px !default;
+$treeview-big-text-padding: 0 16px !default;
 $treeview-big-input-padding: 0 9px !default;
 $treeview-big-icon-padding: 0px !default;
-$treeview-big-image-margin: 0 0 0 12px !default;
-$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-image-margin: 0 0 0 16px !default;
+$treeview-big-rtl-image-margin: 0 16px 0 0 !default;
 $treeview-big-icon-image-margin: 0 0 0 16px !default;
 $treeview-big-rtl-icon-image-margin: 0 16px 0 0 !default;
 $treeview-big-check-margin: 0 0 0 8px !default;
@@ -55669,7 +55716,7 @@ $treeview-big-root-ul-padding: 0 0 0 16px !default;
 $treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
 $treeview-big-child-ul-padding: 0 0 0 24px !default;
 $treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
-$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-image-text-padding: 0 16px !default;
 $treeview-big-icon-margin: 0 0 0 -16px !default;
 $treeview-big-rtl-icon-margin: 0 -16px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
@@ -55678,7 +55725,7 @@ $treeview-big-drag-icon-font-size: $text-2xl !default;
 $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-big-drag-icon-margin: -6px 0px 5px -9px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
-$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-text-padding: 0 8px !default;
 $treeview-big-check-wrap-width: calc(100% - 29px) !default;
 $treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
 $treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
@@ -55986,7 +56033,7 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }
@@ -58807,635 +58854,645 @@ $step-active-color: $content-bg-color-pressed !default;
 $step-selected-hover-color: $primary-dark !default;
 $step-selected-active-color: $primary-dark !default;
 
-@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
-  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
-    .e-icons.e-step-indicator {
-      font-size: $step-width;
-    }
-    &.e-step-notstarted .e-icons.e-step-indicator {
-      width: $step-width;
-      height: $step-width;
-    }
-  }
-
-  .e-step-container {
-    .e-step,
-    .e-indicator {
-      min-width: $step-width;
-      min-height: $step-width;
-    }
-
-    .e-indicator {
-      font-size: $icon-size;
-    }
-
-    .e-step-text-container,
-    .e-step-label-container {
-      font-size: $text-size;
-    }
-
-    .e-step-content {
-      font-size: $icon-size;
-    }
-
-    .e-step-label-optional {
-      font-size: $optional-size;
-    }
-  }
-  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
-    font-size: $optional-size;
-  }
-}
-
-@include export-module('stepper-layout') {
-  .e-stepper {
-    position: relative;
-    .e-step-selected {
-      .e-text,
-      .e-label {
-        font-weight: $stepper-font-weight;
-      }
-    }
-    &.e-stepper-readonly,
-    .e-step-disabled {
-      cursor: default;
-      pointer-events: none;
-    }
-    &.e-step-type-indicator .e-step-container {
-      &:not(.e-step-item.e-step-label.e-step-text) {
-        .e-icons.e-step-indicator {
-          font-size: $stepper-step-width;
-          border-radius: $stepper-step-radius;
-        }
-      }
-    }
-
-    &.e-step-type-indicator .e-step-content,
-    &.e-step-type-label .e-step-content {
-      padding: 0 8px;
-    }
-
-    //For Blazor Stepper Tooltip
-    .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
-      position: relative;
-    }
-    &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
-      position: unset;
-    }
-    .e-tooltip-wrap.e-stepper-tooltip {
-      display: none;
-      justify-content: center;
-      left: 50%;
-      top: -$stepper-tooltip-tip-bottom-height;
-      transform: translate(-50%, -100%);
-
-      &.e-show-tooltip {
-        display: inline-flex;
-      }
-      .e-tip-content {
-        width: max-content;
-      }
-      .e-arrow-tip.e-tip-bottom {
-        left: 50%;
-        top: 100%;
-        transform: translate(-50%, 0);
-      }
-      .e-arrow-tip-inner.e-tip-bottom {
-        top: -6px;
-      }
-    }
-    .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
-      left: unset;
-      top: 0;
-      transform: translate(0%, -135%);
-    }
-    &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
-      transform: translate(-50%, -115%);
-    }
-    .e-stepper-steps {
-      display: flex;
-      padding: 0;
-      margin: 0;
-      justify-content: space-between;
-      position: relative;
-      align-items: flex-start;
-      .e-step-container,
-      .e-step,
-      .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
-      .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
-      .e-step-label-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .e-step-container {
-      max-width: var(--max-width);
-      list-style-type: none;
-      cursor: pointer;
-      text-align: center;
-      .e-step-label-container,
-      .e-step-text-container {
-        max-width: clamp(100%, 10em, 100%);
-        white-space: nowrap;
-        font-size: $stepper-text-size;
-      }
-      .e-step-label-optional {
-        font-size: $stepper-optional-size;
-        flex-basis: 100%;
-      }
-      .e-step-optional-container {
-        display: flex;
-        flex-direction: column;
-      }
-      .e-step-content {
-        font-size: $stepper-icon-size;
-        line-height: 0;
-      }
-      .e-indicator {
-        font-size: $stepper-icon-size;
-      }
-      &:not(.e-step-text-only) > .e-step-text-container {
-        padding: $stepper-icon-text-padding;
-      }
-      &.e-step-text-only .e-step-text-container,
-      &.e-step-label-only .e-step-label-container {
-        padding: $stepper-text-padding;
-        padding-block: 5px;
-      }
-      &.e-step-text-only.e-step-error .e-step-text-container,
-      &.e-step-text-only.e-step-valid .e-step-text-container,
-      &.e-step-label-only.e-step-error .e-step-label-container,
-      &.e-step-label-only.e-step-valid .e-step-label-container {
-        flex-direction: column;
-        .e-step-validation-icon {
-          position: relative;
-          top: $stepper-validation-position;
-        }
-      }
-      .e-step,
-      .e-indicator {
-        border-radius: $stepper-step-radius;
-        min-width: $stepper-step-width;
-        min-height: $stepper-step-width;
-      }
-    }
-    .e-step-notstarted:not(.e-step-disabled) .e-step,
-    .e-step-notstarted:not(.e-step-disabled) .e-indicator {
-      border: $step-border;
-    }
-    &.e-horizontal {
-      display: block;
-      .e-stepper-steps {
-        flex-direction: row;
-      }
-      &.e-label-before,
-      &.e-label-after {
-        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
-          margin-left: var(--progress-left-position);
-          top: var(--progress-top-position);
-          width: var(--progress-bar-width);
-        }
-      }
-      &.e-label-before.e-rtl,
-      &.e-label-after.e-rtl {
-        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
-          margin-right: var(--progress-left-position);
-          margin-left: unset;
-        }
-      }
-      .e-step-item.e-step-label {
-        gap: 1em;
-        flex-direction: column;
-      }
-      .e-step-item.e-step-label .e-step-label-container {
-        position: relative;
-        &.e-label-before {
-          order: -1;
-        }
-      }
-      &.e-label-start .e-step-text-container {
-        order: $stepper-label-order;
-      }
-      .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
-        position: absolute;
-        top: 2.5em;
-        margin-left: 2.5em;
-      }
-      &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
-      &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
-        margin-right: 2.5em;
-        margin-left: unset;
-      }
-      &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
-        margin-right: unset;
-        margin-left: 2.5em;
-      }
-      &.e-label-before .e-stepper-steps {
-        &:has(.e-step-label-optional) {
-          align-items: flex-end;
-        }
-        .e-step-label-container.e-label-before:has(.e-step-label-optional) {
-          flex-direction: column;
-          gap: .5em;
-        }
-      }
-      .e-text,
-      .e-label,
-      .e-step-label-optional {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .e-step-text.e-step-text-only:has(.e-step-label-optional),
-      .e-step-label.e-step-label-only:has(.e-step-label-optional),
-      .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
-      .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
-      .e-step-label-container.e-label-after:has(.e-step-label-optional),
-      &.e-step-type-indicator .e-step-container {
-        flex-wrap: wrap;
-      }
-      .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
-        margin-top: .5em;
-      }
-      &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
-        margin-top: .2em;
-      }
-    }
-    &.e-vertical {
-      min-height: inherit;
-      display: inline-block;
-      .e-step-label.e-step-label-only,
-      .e-step-template {
-        position: relative;
-      }
-      &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
-        position: absolute;
-      }
-      &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
-        margin-top: $stepper-label-optional;
-        margin-left: 4em;
-      }
-      &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
-        margin-left: unset;
-        margin-right: 4em;
-      }
-      .e-stepper-steps {
-        flex-direction: column;
-        min-height: inherit;
-        float: left;
-        align-items: start;
-        margin: $stepper-ol-padding;
-        justify-content: space-between;
-      }
-      &.e-rtl .e-stepper-steps {
-        float: right;
-      }
-      .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
-      .e-stepper-steps:has(.e-step-text.e-step-text-only),
-      .e-stepper-steps:has(.e-step-label.e-step-label-only),
-      &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
-      &.e-step-type-indicator .e-stepper-steps {
-        align-items: center;
-      }
-      .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
-      .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
-        margin-left: $stepper-text-postion;
-      }
-      &.e-rtl {
-        .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
-        .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
-          margin-left: unset;
-          margin-right: $stepper-text-postion;
-        }
-      }
-      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
-      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
-      .e-step-text-only.e-step-text:has(.e-step-label-optional),
-      .e-step-label-only.e-step-label:has(.e-step-label-optional) {
-        flex-direction: column;
-        .e-step-label-optional {
-          position: unset;
-        }
-      }
-      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
-      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
-        gap: .5em;
-      }
-      &.e-label-before .e-step-item.e-step-label,
-      &.e-label-after .e-step-item.e-step-label {
-        .e-step-label-container.e-label-after:has(.e-step-label-optional) {
-          flex-direction: column;
-          .e-label {
-            line-height: 2em;
-          }
-        }
-        .e-step-label-optional {
-          position: unset;
-        }
-      }
-      .e-step-container {
-        &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
-          position: absolute;
-          .e-step-label-optional {
-            left: $stepper-ol-padding;
-          }
-        }
-        .e-step-label-container.e-label-after .e-step-label-optional {
-          font-size: $stepper-optional-size;
-        }
-        .e-step-label-container.e-label-before .e-label {
-          width: var(--label-width);
-        }
-        &:not(.e-step-text-only) .e-step-text-container {
-          border: none;
-          border-radius: unset;
-          padding: $stepper-text-vert-padding;
-        }
-        &.e-step-text-only .e-step-text-container,
-        &.e-step-label-only .e-step-label-container {
-          position: unset;
-        }
-      }
-      &.e-label-top .e-step-label-optional {
-        padding-bottom: 6px;
-      }
-    }
-    &.e-vertical.e-label-top,
-    &.e-vertical.e-label-bottom {
-      .e-stepper-steps {
-        align-items: center;
-        .e-step-container {
-          flex-direction: column;
-          .e-step-text-container {
-            margin-left: $stepper-ol-padding;
-          }
-        }
-      }
-    }
-    &.e-vertical.e-label-top .e-step-container {
-      .e-step-label-optional,
-      .e-step-text-container {
-        order: $stepper-label-order;
-      }
-    }
-    .e-stepper-progressbar {
-      height: $stepper-progress-bar-height;
-      position: absolute;
-      top: var(--progress-top-position);
-      width: $stepper-progress-value-height;
-
-      >.e-progressbar-value {
-        height: $stepper-progress-value-height;
-        width: var(--progress-value);
-        transition-property: width;
-        transition-duration: var(--duration);
-        transition-delay: var(--delay);
-      }
-    }
-    &.e-vertical .e-stepper-progressbar {
-      min-height: inherit;
-      width: $stepper-progress-bar-height;
-      top: $stepper-ol-padding;
-      left: var(--progress-position);
-
-      >.e-progressbar-value {
-        width: $stepper-progress-value-height;
-        height: var(--progress-value);
-        transition-property: height;
-      }
-    }
-    &.e-vertical.e-rtl .e-stepper-progressbar {
-      right: var(--progress-position);
-      left: unset;
-    }
-    &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
-    .e-step-focus .e-indicator {
-      z-index: 0;
-    }
-    .e-step-template.e-step-focus {
-      outline: $stepper-temp-outline-width;
-    }
-  }
-  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
-    .e-arrow-tip.e-tip-bottom {
-      top: 90% !important; /* stylelint-disable-line declaration-no-important */
-    }
-  }
-  .e-small.e-stepper,
-  .e-small .e-stepper {
-    @include stepper-styles($stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
-  }
-  .e-bigger.e-stepper,
-  .e-bigger .e-stepper {
-    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
-  }
-
-  .e-bigger.e-small.e-stepper,
-  .e-bigger.e-small .e-stepper,
-  .e-bigger .e-small.e-stepper,
-  .e-small .e-bigger.e-stepper {
-    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
-  }
-}
-
-
-@mixin stepper-text-label-colors($step-label-text-color) {
-  .e-text,
-  .e-label {
-    color: $step-label-text-color;
-  }
-}
-
-@include export-module('stepper-theme') {
-  .e-stepper {
-    .e-step-notstarted:not(.e-step-disabled) .e-step,
-    .e-step-notstarted:not(.e-step-disabled) .e-indicator,
-    .e-step-notstarted .e-icons.e-step-indicator {
-      border-color: $step-border-color;
-    }
-    .e-step-label-optional {
-      color: $step-optional-color;
-    }
-    .e-step,
-    .e-indicator {
-      color: $step-color;
-      background: $step-bg-color;
-    }
-    .e-step-indicator {
-      color: transparent;
-    }
-    .e-step-completed .e-step,
-    .e-step-inprogress .e-step,
-    .e-step-completed .e-indicator,
-    .e-step-inprogress .e-indicator,
-    .e-step-completed .e-step-indicator,
-    .e-step-inprogress .e-step-indicator {
-      background: $step-completed-bg-color;
-      color: $step-completed-color;
-    }
-    .e-step-selected .e-indicator {
-      background: $step-completed-bg-color;
-    }
-    .e-step-valid .e-indicator {
-      background: $step-valid-completed-bg-color;
-      color: $step-valid-completed-color;
-    }
-    .e-step-error {
-      .e-indicator {
-        background: $step-error-completed-bg-color;
-        color: $step-error-icon-color;
-      }
-      @include stepper-text-label-colors($step-error-completed-color);
-    }
-    .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
-    .e-step-error .e-indicator:hover {
-      color: $step-color;
-    }
-    .e-step-valid.e-step-text-only,
-    .e-step-valid.e-step-label-only {
-      .e-step-validation-icon {
-        color: $step-valid-icon-only-color;
-      }
-    }
-    .e-step-error.e-step-text-only,
-    .e-step-error.e-step-label-only {
-      .e-step-validation-icon {
-        color: $step-error-icon-only-color;
-      }
-    }
-    @include stepper-text-label-colors($stepper-text-color);
-    .e-step-selected:not(.e-step-error),
-    .e-step-completed:not(.e-step-error) {
-      @include stepper-text-label-colors($step-completed-bg-color);
-    }
-    .e-step-label:not(.e-step-item) .e-step-label-container {
-      background-color: $stepper-outline-color;
-    }
-    .e-step-text-container {
-      background-color: $stepper-outline-color;
-      border-color: transparent;
-    }
-    .e-step-disabled .e-indicator {
-      background: $step-disabled-bg-color;
-      color: $step-disabled-color;
-    }
-    .e-step-disabled .e-text,
-    .e-step-disabled .e-label,
-    .e-step-disabled .e-step-validation-icon {
-      color: $step-disabled-font-color;
-    }
-    &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
-    &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
-    &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
-    &.e-vertical.e-label-top .e-step-label-optional,
-    &.e-vertical.e-label-bottom .e-step-label-optional {
-      background-color: $stepper-outline-color;
-    }
-    .e-stepper-progressbar {
-      background-color: $step-progress-bg-color;
-      >.e-progressbar-value {
-        background-color: $step-progress-value-bg-color;
-      }
-    }
-    &:not(.e-steps-focus) .e-step-selected .e-step {
-      box-shadow: $step-selected-li-shadow;
-    }
-    .e-step-focus .e-step,
-    .e-step-label-only.e-step-focus .e-label,
-    .e-step-text-only.e-step-focus .e-text,
-    .e-step-template.e-step-focus,
-    &:not(.e-steps-focus) :focus-visible .e-step,
-    &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
-    &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
-      box-shadow: $step-keyboard-selected-li-shadow;
-    }
-
-    &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
-    .e-step-valid.e-step-focus .e-step,
-    .e-step-valid.e-step-label-only.e-step-focus .e-label,
-    .e-step-valid.e-step-text-only.e-step-focus .e-text,
-    .e-step-valid.e-step-template.e-step-focus {
-      box-shadow: $step-valid-li-shadow;
-    }
-
-    &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
-    .e-step-error.e-step-focus .e-step,
-    .e-step-error.e-step-label-only.e-step-focus .e-label,
-    .e-step-error.e-step-text-only.e-step-focus .e-text,
-    .e-step-error.e-step-template.e-step-focus {
-      box-shadow: $step-error-li-shadow;
-    }
-
-    .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
-    .e-step-container:not(.e-step-focus).e-step-completed .e-step,
-    &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
-      box-shadow: $step-li-shadow;
-    }
-
-    .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
-    .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
-      border-color: $step-hover-border-color;
-    }
-
-    .e-step-notstarted:not(.e-step-disabled) .e-step:active,
-    .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
-      border-color: $step-active-border-color;
-    }
-
-    &:not(.e-step-type-label) {
-      .e-indicator:hover,
-      .e-step:hover {
-        color: $step-hover-text-color;
-        background: $step-selected-hover-color;
-      }
-    }
-
-    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
-    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
-      color: $step-hover-not-text-color;
-    }
-
-    &:not(.e-step-type-label) {
-      .e-step-selected .e-indicator:active,
-      .e-step-selected .e-step:active {
-        background: $step-selected-active-color;
-      }
-      .e-step-valid.e-step-selected .e-indicator:active,
-      .e-step-valid.e-step-selected .e-step:active {
-        background: $step-valid-completed-bg-color;
-      }
-      .e-step-error.e-step-selected .e-indicator:active,
-      .e-step-error.e-step-selected .e-step:active {
-        background: $step-error-completed-bg-color;
-      }
-    }
-
-    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
-    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
-      background: $step-hover-color;
-    }
-
-    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
-    &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
-      background: $step-active-color;
-    }
-
-    &:not(.e-step-type-label) {
-      .e-step-valid .e-indicator:hover,
-      .e-step-valid .e-step:hover {
-        color: $step-hover-text-color;
-        background: $step-valid-completed-bg-color;
-      }
-      .e-step-error .e-indicator:hover,
-      .e-step-error .e-step:hover {
-        color: $step-hover-text-color;
-        background: $step-error-completed-bg-color;
-      }
-    }
-  }
-}
+@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
+  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
+    .e-icons.e-step-indicator {
+      font-size: $step-width;
+    }
+    &.e-step-notstarted .e-icons.e-step-indicator {
+      width: $step-width;
+      height: $step-width;
+    }
+  }
+
+  .e-step-container {
+    .e-step,
+    .e-indicator {
+      min-width: $step-width;
+      min-height: $step-width;
+    }
+
+    .e-indicator {
+      font-size: $icon-size;
+    }
+
+    .e-step-text-container,
+    .e-step-label-container {
+      font-size: $text-size;
+    }
+
+    .e-step-content {
+      font-size: $icon-size;
+    }
+
+    .e-step-label-optional {
+      font-size: $optional-size;
+    }
+  }
+  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
+    font-size: $optional-size;
+  }
+}
+
+@include export-module('stepper-layout') {
+  .e-stepper {
+    position: relative;
+    .e-step-selected {
+      .e-text,
+      .e-label {
+        font-weight: $stepper-font-weight;
+      }
+    }
+    &.e-linear {
+      .e-step-container {
+        pointer-events: none;
+      }
+      .e-previous:not(.e-step-disabled),
+      .e-next:not(.e-step-disabled),
+      .e-step-selected:not(.e-step-disabled) {
+        pointer-events: auto;
+      }
+    }
+    &.e-stepper-readonly,
+    .e-step-disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+    &.e-step-type-indicator .e-step-container {
+      &:not(.e-step-item.e-step-label.e-step-text) {
+        .e-icons.e-step-indicator {
+          font-size: $stepper-step-width;
+          border-radius: $stepper-step-radius;
+        }
+      }
+    }
+
+    &.e-step-type-indicator .e-step-content,
+    &.e-step-type-label .e-step-content {
+      padding: 0 8px;
+    }
+
+    //For Blazor Stepper Tooltip
+    .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
+    &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
+    &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+      position: relative;
+    }
+    &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+      position: unset;
+    }
+    .e-tooltip-wrap.e-stepper-tooltip {
+      display: none;
+      justify-content: center;
+      left: 50%;
+      top: -$stepper-tooltip-tip-bottom-height;
+      transform: translate(-50%, -100%);
+
+      &.e-show-tooltip {
+        display: inline-flex;
+      }
+      .e-tip-content {
+        width: max-content;
+      }
+      .e-arrow-tip.e-tip-bottom {
+        left: 50%;
+        top: 100%;
+        transform: translate(-50%, 0);
+      }
+      .e-arrow-tip-inner.e-tip-bottom {
+        top: -6px;
+      }
+    }
+    .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
+      left: unset;
+      top: 0;
+      transform: translate(0%, -135%);
+    }
+    &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
+      transform: translate(-50%, -115%);
+    }
+    .e-stepper-steps {
+      display: flex;
+      padding: 0;
+      margin: 0;
+      justify-content: space-between;
+      position: relative;
+      align-items: flex-start;
+      .e-step-container,
+      .e-step,
+      .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
+      .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
+      .e-step-label-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .e-step-container {
+      max-width: var(--max-width);
+      list-style-type: none;
+      cursor: pointer;
+      text-align: center;
+      .e-step-label-container,
+      .e-step-text-container {
+        max-width: clamp(100%, 10em, 100%);
+        white-space: nowrap;
+        font-size: $stepper-text-size;
+      }
+      .e-step-label-optional {
+        font-size: $stepper-optional-size;
+        flex-basis: 100%;
+      }
+      .e-step-optional-container {
+        display: flex;
+        flex-direction: column;
+      }
+      .e-step-content {
+        font-size: $stepper-icon-size;
+        line-height: 0;
+      }
+      .e-indicator {
+        font-size: $stepper-icon-size;
+      }
+      &:not(.e-step-text-only) > .e-step-text-container {
+        padding: $stepper-icon-text-padding;
+      }
+      &.e-step-text-only .e-step-text-container,
+      &.e-step-label-only .e-step-label-container {
+        padding: $stepper-text-padding;
+        padding-block: 5px;
+      }
+      &.e-step-text-only.e-step-error .e-step-text-container,
+      &.e-step-text-only.e-step-valid .e-step-text-container,
+      &.e-step-label-only.e-step-error .e-step-label-container,
+      &.e-step-label-only.e-step-valid .e-step-label-container {
+        flex-direction: column;
+        .e-step-validation-icon {
+          position: relative;
+          top: $stepper-validation-position;
+        }
+      }
+      .e-step,
+      .e-indicator {
+        border-radius: $stepper-step-radius;
+        min-width: $stepper-step-width;
+        min-height: $stepper-step-width;
+      }
+    }
+    .e-step-notstarted:not(.e-step-disabled) .e-step,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator {
+      border: $step-border;
+    }
+    &.e-horizontal {
+      display: block;
+      .e-stepper-steps {
+        flex-direction: row;
+      }
+      &.e-label-before,
+      &.e-label-after {
+        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+          margin-left: var(--progress-left-position);
+          top: var(--progress-top-position);
+          width: var(--progress-bar-width);
+        }
+      }
+      &.e-label-before.e-rtl,
+      &.e-label-after.e-rtl {
+        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+          margin-right: var(--progress-left-position);
+          margin-left: unset;
+        }
+      }
+      .e-step-item.e-step-label {
+        gap: 1em;
+        flex-direction: column;
+      }
+      .e-step-item.e-step-label .e-step-label-container {
+        position: relative;
+        &.e-label-before {
+          order: -1;
+        }
+      }
+      &.e-label-start .e-step-text-container {
+        order: $stepper-label-order;
+      }
+      .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
+        position: absolute;
+        top: 2.5em;
+        margin-left: 2.5em;
+      }
+      &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
+      &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
+        margin-right: 2.5em;
+        margin-left: unset;
+      }
+      &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
+        margin-right: unset;
+        margin-left: 2.5em;
+      }
+      &.e-label-before .e-stepper-steps {
+        &:has(.e-step-label-optional) {
+          align-items: flex-end;
+        }
+        .e-step-label-container.e-label-before:has(.e-step-label-optional) {
+          flex-direction: column;
+          gap: .5em;
+        }
+      }
+      .e-text,
+      .e-label,
+      .e-step-label-optional {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .e-step-text.e-step-text-only:has(.e-step-label-optional),
+      .e-step-label.e-step-label-only:has(.e-step-label-optional),
+      .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+      .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+      .e-step-label-container.e-label-after:has(.e-step-label-optional),
+      &.e-step-type-indicator .e-step-container {
+        flex-wrap: wrap;
+      }
+      .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
+        margin-top: .5em;
+      }
+      &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
+        margin-top: .2em;
+      }
+    }
+    &.e-vertical {
+      min-height: inherit;
+      display: inline-block;
+      .e-step-label.e-step-label-only,
+      .e-step-template {
+        position: relative;
+      }
+      &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
+        position: absolute;
+      }
+      &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
+        margin-top: $stepper-label-optional;
+        margin-left: 4em;
+      }
+      &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
+        margin-left: unset;
+        margin-right: 4em;
+      }
+      .e-stepper-steps {
+        flex-direction: column;
+        min-height: inherit;
+        float: left;
+        align-items: start;
+        margin: $stepper-ol-padding;
+        justify-content: space-between;
+      }
+      &.e-rtl .e-stepper-steps {
+        float: right;
+      }
+      .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
+      .e-stepper-steps:has(.e-step-text.e-step-text-only),
+      .e-stepper-steps:has(.e-step-label.e-step-label-only),
+      &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
+      &.e-step-type-indicator .e-stepper-steps {
+        align-items: center;
+      }
+      .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+      .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+        margin-left: $stepper-text-postion;
+      }
+      &.e-rtl {
+        .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+        .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+          margin-left: unset;
+          margin-right: $stepper-text-postion;
+        }
+      }
+      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
+      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
+      .e-step-text-only.e-step-text:has(.e-step-label-optional),
+      .e-step-label-only.e-step-label:has(.e-step-label-optional) {
+        flex-direction: column;
+        .e-step-label-optional {
+          position: unset;
+        }
+      }
+      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
+      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
+        gap: .5em;
+      }
+      &.e-label-before .e-step-item.e-step-label,
+      &.e-label-after .e-step-item.e-step-label {
+        .e-step-label-container.e-label-after:has(.e-step-label-optional) {
+          flex-direction: column;
+          .e-label {
+            line-height: 2em;
+          }
+        }
+        .e-step-label-optional {
+          position: unset;
+        }
+      }
+      .e-step-container {
+        &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
+          position: absolute;
+          .e-step-label-optional {
+            left: $stepper-ol-padding;
+          }
+        }
+        .e-step-label-container.e-label-after .e-step-label-optional {
+          font-size: $stepper-optional-size;
+        }
+        .e-step-label-container.e-label-before .e-label {
+          width: var(--label-width);
+        }
+        &:not(.e-step-text-only) .e-step-text-container {
+          border: none;
+          border-radius: unset;
+          padding: $stepper-text-vert-padding;
+        }
+        &.e-step-text-only .e-step-text-container,
+        &.e-step-label-only .e-step-label-container {
+          position: unset;
+        }
+      }
+      &.e-label-top .e-step-label-optional {
+        padding-bottom: 6px;
+      }
+    }
+    &.e-vertical.e-label-top,
+    &.e-vertical.e-label-bottom {
+      .e-stepper-steps {
+        align-items: center;
+        .e-step-container {
+          flex-direction: column;
+          .e-step-text-container {
+            margin-left: $stepper-ol-padding;
+          }
+        }
+      }
+    }
+    &.e-vertical.e-label-top .e-step-container {
+      .e-step-label-optional,
+      .e-step-text-container {
+        order: $stepper-label-order;
+      }
+    }
+    .e-stepper-progressbar {
+      height: $stepper-progress-bar-height;
+      position: absolute;
+      top: var(--progress-top-position);
+      width: $stepper-progress-value-height;
+
+      >.e-progressbar-value {
+        height: $stepper-progress-value-height;
+        width: var(--progress-value);
+        transition-property: width;
+        transition-duration: var(--duration);
+        transition-delay: var(--delay);
+      }
+    }
+    &.e-vertical .e-stepper-progressbar {
+      min-height: inherit;
+      width: $stepper-progress-bar-height;
+      top: $stepper-ol-padding;
+      left: var(--progress-position);
+
+      >.e-progressbar-value {
+        width: $stepper-progress-value-height;
+        height: var(--progress-value);
+        transition-property: height;
+      }
+    }
+    &.e-vertical.e-rtl .e-stepper-progressbar {
+      right: var(--progress-position);
+      left: unset;
+    }
+    &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
+    .e-step-focus .e-indicator {
+      z-index: 0;
+    }
+    .e-step-template.e-step-focus {
+      outline: $stepper-temp-outline-width;
+    }
+  }
+  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
+    .e-arrow-tip.e-tip-bottom {
+      top: 90% !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+  .e-small.e-stepper,
+  .e-small .e-stepper {
+    @include stepper-styles($stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
+  }
+  .e-bigger.e-stepper,
+  .e-bigger .e-stepper {
+    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
+  }
+
+  .e-bigger.e-small.e-stepper,
+  .e-bigger.e-small .e-stepper,
+  .e-bigger .e-small.e-stepper,
+  .e-small .e-bigger.e-stepper {
+    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
+  }
+}
+
+
+@mixin stepper-text-label-colors($step-label-text-color) {
+  .e-text,
+  .e-label {
+    color: $step-label-text-color;
+  }
+}
+
+@include export-module('stepper-theme') {
+  .e-stepper {
+    .e-step-notstarted:not(.e-step-disabled) .e-step,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator,
+    .e-step-notstarted .e-icons.e-step-indicator {
+      border-color: $step-border-color;
+    }
+    .e-step-label-optional {
+      color: $step-optional-color;
+    }
+    .e-step,
+    .e-indicator {
+      color: $step-color;
+      background: $step-bg-color;
+    }
+    .e-step-indicator {
+      color: transparent;
+    }
+    .e-step-completed .e-step,
+    .e-step-inprogress .e-step,
+    .e-step-completed .e-indicator,
+    .e-step-inprogress .e-indicator,
+    .e-step-completed .e-step-indicator,
+    .e-step-inprogress .e-step-indicator {
+      background: $step-completed-bg-color;
+      color: $step-completed-color;
+    }
+    .e-step-selected .e-indicator {
+      background: $step-completed-bg-color;
+    }
+    .e-step-valid .e-indicator {
+      background: $step-valid-completed-bg-color;
+      color: $step-valid-completed-color;
+    }
+    .e-step-error {
+      .e-indicator {
+        background: $step-error-completed-bg-color;
+        color: $step-error-icon-color;
+      }
+      @include stepper-text-label-colors($step-error-completed-color);
+    }
+    .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
+    .e-step-error .e-indicator:hover {
+      color: $step-color;
+    }
+    .e-step-valid.e-step-text-only,
+    .e-step-valid.e-step-label-only {
+      .e-step-validation-icon {
+        color: $step-valid-icon-only-color;
+      }
+    }
+    .e-step-error.e-step-text-only,
+    .e-step-error.e-step-label-only {
+      .e-step-validation-icon {
+        color: $step-error-icon-only-color;
+      }
+    }
+    @include stepper-text-label-colors($stepper-text-color);
+    .e-step-selected:not(.e-step-error),
+    .e-step-completed:not(.e-step-error) {
+      @include stepper-text-label-colors($step-completed-bg-color);
+    }
+    .e-step-label:not(.e-step-item) .e-step-label-container {
+      background-color: $stepper-outline-color;
+    }
+    .e-step-text-container {
+      background-color: $stepper-outline-color;
+      border-color: transparent;
+    }
+    .e-step-disabled .e-indicator {
+      background: $step-disabled-bg-color;
+      color: $step-disabled-color;
+    }
+    .e-step-disabled .e-text,
+    .e-step-disabled .e-label,
+    .e-step-disabled .e-step-validation-icon {
+      color: $step-disabled-font-color;
+    }
+    &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
+    &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
+    &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
+    &.e-vertical.e-label-top .e-step-label-optional,
+    &.e-vertical.e-label-bottom .e-step-label-optional {
+      background-color: $stepper-outline-color;
+    }
+    .e-stepper-progressbar {
+      background-color: $step-progress-bg-color;
+      >.e-progressbar-value {
+        background-color: $step-progress-value-bg-color;
+      }
+    }
+    &:not(.e-steps-focus) .e-step-selected .e-step {
+      box-shadow: $step-selected-li-shadow;
+    }
+    .e-step-focus .e-step,
+    .e-step-label-only.e-step-focus .e-label,
+    .e-step-text-only.e-step-focus .e-text,
+    .e-step-template.e-step-focus,
+    &:not(.e-steps-focus) :focus-visible .e-step,
+    &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
+    .e-step-valid.e-step-focus .e-step,
+    .e-step-valid.e-step-label-only.e-step-focus .e-label,
+    .e-step-valid.e-step-text-only.e-step-focus .e-text,
+    .e-step-valid.e-step-template.e-step-focus {
+      box-shadow: $step-valid-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
+    .e-step-error.e-step-focus .e-step,
+    .e-step-error.e-step-label-only.e-step-focus .e-label,
+    .e-step-error.e-step-text-only.e-step-focus .e-text,
+    .e-step-error.e-step-template.e-step-focus {
+      box-shadow: $step-error-li-shadow;
+    }
+
+    .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
+    .e-step-container:not(.e-step-focus).e-step-completed .e-step,
+    &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
+      box-shadow: $step-li-shadow;
+    }
+
+    .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
+      border-color: $step-hover-border-color;
+    }
+
+    .e-step-notstarted:not(.e-step-disabled) .e-step:active,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
+      border-color: $step-active-border-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-indicator:hover,
+      .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-selected-hover-color;
+      }
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      color: $step-hover-not-text-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-step-selected .e-indicator:active,
+      .e-step-selected .e-step:active {
+        background: $step-selected-active-color;
+      }
+      .e-step-valid.e-step-selected .e-indicator:active,
+      .e-step-valid.e-step-selected .e-step:active {
+        background: $step-valid-completed-bg-color;
+      }
+      .e-step-error.e-step-selected .e-indicator:active,
+      .e-step-error.e-step-selected .e-step:active {
+        background: $step-error-completed-bg-color;
+      }
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      background: $step-hover-color;
+    }
+
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
+      background: $step-active-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-step-valid .e-indicator:hover,
+      .e-step-valid .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-valid-completed-bg-color;
+      }
+      .e-step-error .e-indicator:hover,
+      .e-step-error .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-error-completed-bg-color;
+      }
+    }
+  }
+}
 
 
 @include export-module('stepper-fluent2-icons') {
@@ -60335,6 +60392,7 @@ $ddt-item-hover-bg: $content-bg-color-hover !default;
 
       &.e-chip-input {
         width: 0;
+        display: none;
       }
     }
 
@@ -77197,7 +77255,7 @@ $grid-xlfl-skin: $skin-name !default;
       .e-frame {
         margin-bottom: 1px;
         @if $grid-xlfl-skin == 'fluent2' {
-          margin: 0 0 1px 4px;
+          margin-bottom: 8px;
         }
       }
     }
@@ -77345,6 +77403,7 @@ $grid-xlfl-skin: $skin-name !default;
     @if $grid-xlfl-skin == 'fluent2' {
       .e-ftrchk.e-infinitescroll {
         margin-left: 0;
+        padding-left: 0;
       }
     }
 
@@ -77990,7 +78049,7 @@ $grid-rtl-group-sorticon-margin-right: -5px !default;
 $grid-rtl-headercell-border-width: 0 !default;
 $grid-rtl-headercelldiv-padding: 0 .4em 0 4.2em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 .45em !default;
-$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .4em !default;
+$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .33em 0 .4em !default;
 $grid-ungroup-rtl-padding-right: -10px !default;
 $grid-headercelldiv-padding: 0 18px 0 5px !default;
 $grid-headercelldiv-sort-centeralign-padding-right: 5px !default;
@@ -78288,7 +78347,7 @@ $grid-biggerreorderarrow-font-size: $text-xs !default;
 $grid-bigger-drag-count-padding: 2px 6px 2px !default;
 $grid-bigger-drag-count-top: -10px !default;
 $grid-bigger-check-select-all-font-size: $grid-bigger-header-icons-font-size !default;
-$grid-adaptive-sort-clear-button-padding: 8px !default;
+$grid-adaptive-sort-clear-button-padding: 10px !default;
 $grid-cc-margin-top: 1px !default;
 $grid-bigger-rtl-cm-margin: -13px 6px -13px -16px !default;
 $grid-bigger-device-rtl-cm-margin: -18px 6px -13px -16px !default;
@@ -78592,7 +78651,8 @@ $grid-checkmark-color: $primary-text-color !default;
 
     @if $grid-skin == 'fluent2' {
       &.e-device .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
-        margin-left: -4px;
+        margin-left: -5px;
+        margin-top: 4px;
       }
       &.e-rtl.e-device .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
         margin-right: -2px;
@@ -78603,7 +78663,7 @@ $grid-checkmark-color: $primary-text-color !default;
       .e-headercell .e-headercelldiv.e-headerchkcelldiv {
         @if $grid-skin == 'fluent2' {
           margin-bottom: 2px;
-          margin-left: 6px;
+          margin-left: 7px;
         }
       }
 
@@ -78730,8 +78790,9 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     @if $grid-skin == 'fluent2' {
-      .e-ftrchk.e-infinitescroll {
+      .e-checkboxfilter .e-ftrchk.e-infinitescroll {
         margin-left: 0;
+        padding-left: 0;
       }
     }
 
@@ -81135,7 +81196,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     @if $grid-skin == 'fluent2' {
-      .e-ftrchk.e-infinitescroll {
+      .e-checkboxfilter .e-ftrchk.e-infinitescroll {
         padding-left: 0;
         margin-left: 0;
       }
@@ -83147,7 +83208,7 @@ $grid-checkmark-color: $primary-text-color !default;
   }
 
   .e-gridcontent .e-groupcaption {
-    @include grid-line-height-padding-styles(normal, .7em);
+    @include grid-line-height-padding-styles(normal, 0 .7em);
   }
 
   .e-summarycell {
@@ -83739,9 +83800,6 @@ $grid-checkmark-color: $primary-text-color !default;
           background: none;
           border: 0;
           color: $grid-responsive-custom-header-btn-color;
-          @if $grid-skin == 'fluent2' {
-            padding-top: 6px;
-          }
         }
       }
     }
@@ -83828,6 +83886,22 @@ $grid-checkmark-color: $primary-text-color !default;
       & .e-dlg-content {
         padding: 16px;
       }
+
+      @if $grid-xlfl-skin == 'fluent2' {
+        .e-checkbox-wrapper .e-frame {
+          @if $grid-xlfl-skin == 'fluent2' {
+            margin: 0 0 1px 4px;
+          }
+        }
+  
+        .e-radio + label {
+          margin: 0;
+        }
+
+        .e-radio-wrapper .e-xlfl-radio-or {
+          margin-left: 18px;
+        }
+      }
     }
 
     & .e-ressortbutton-parent {
@@ -83922,6 +83996,14 @@ $grid-checkmark-color: $primary-text-color !default;
               min-height: 160px;
               overflow-y: auto;
 
+              &.e-checkbox-infinitescroll {
+                border-top-style: solid;
+                border-top-color: $grid-columnchooser-footer-border-color;
+                border-top-width: 1px;
+                margin-top: 0;
+                overflow-x: hidden;
+              }
+
               & .e-ftrchk {
                 @include grid-top-bottom-padding($grid-bigger-checkbox-padding-topbottom, $grid-bigger-checkbox-padding-topbottom);
                 @if $grid-skin == 'fluent2' {
@@ -83930,6 +84012,29 @@ $grid-checkmark-color: $primary-text-color !default;
               }
             }
           }
+
+          & .e-ftrchk {
+            & .e-chk-hidden {
+              -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+              height: 1px;
+              opacity: 0;
+              width: 1px;
+            }
+
+            & .e-mask {
+              display: inline-block;
+              height: 10px;
+              width: 80%;
+
+              &.e-mask-checkbox-filter-intent {
+                width: 13px;
+              }
+
+              &.e-mask-checkbox-filter-span-intent {
+                margin-left: 8px;
+              }
+            }
+          }
         }
       }
     }
@@ -83944,10 +84049,9 @@ $grid-checkmark-color: $primary-text-color !default;
           & .e-searchbox {
             padding-left: 0;
           }
-          & .e-spinner {
-            & .e-checkboxlist {
-              margin-left: -7px;
-            }
+          & .e-ftrchk.e-infinitescroll,
+          & .e-spinner .e-checkboxlist {
+            margin-left: -7px;
           }
         }
       }
@@ -83995,6 +84099,9 @@ $grid-checkmark-color: $primary-text-color !default;
     @if $grid-skin == 'fluent' {
       padding-top: 3px;
     }
+    @if $grid-skin == 'fluent' {
+      padding-top: 1px;
+    }
     @if $grid-skin == 'bootstrap4' or $grid-skin == 'material' {
       padding-top: 2px;
     }
@@ -84323,6 +84430,11 @@ $grid-checkmark-color: $primary-text-color !default;
       border-color: $grid-header-border-color;
     }
 
+    .e-headercell,
+    .e-detailheadercell {
+      background-color: $grid-header-bg-color;
+    }
+
     .e-gridcontent {
       background-color: $grid-content-bg-color;
     }
@@ -90932,7 +91044,7 @@ $rte-default-character-count-opacity: 1;
 $rte-droparea-line-height: 10;
 $rte-droparea-browsebtn-height: 32px;
 $rte-droparea-browsebtn-padding: 6px 12px 6px 12px;
-$rte-droparea-browsebtn-top: -50px;
+$rte-droparea-browsebtn-top: -120px;
 $rte-big-droparea-browsebtn-top: -120px;
 $rte-insert-dialog-font-size: 14px;
 $rte-big-insert-dialog-font-size: 15px;
@@ -92313,14 +92425,24 @@ $rte-big-img-upload-abort-icon-btn-padding: 18px;
           font-size: 2em;
           font-weight: bold;
           height: 40px;
-          line-height: 40px;
+          @if $skin-name =='fluent2' {
+            line-height: 25px;
+          }
+          @else {
+            line-height: 40px;
+          }
         }
 
         &.e-h2 {
           font-size: 1.5em;
           font-weight: bold;
           height: 40px;
-          line-height: 40px;
+          @if $skin-name =='fluent2' {
+            line-height: 25px;
+          }
+          @else {
+            line-height: 40px;
+          }
         }
 
         &.e-h3 {
@@ -100222,7 +100344,7 @@ $kanban-col-expand-collapse-box-shadow: none !default;
 
   .e-kanban-dialog .e-dialog-edit.e-primary{
     background: $primary-bg-color-hover;
-    color: $primary-border-color-hover;
+    color: $primary-text-color;
   }
 }
 
@@ -108845,7 +108967,7 @@ $field-list-default-header-font-color: $content-text-color-alt1 !default;
 $field-list-tree-icon-color: $icon-color !default;
 $field-list-default-header-icon-font-color: $field-list-default-header-font-color !default;
 $field-list-button-icon-color: $icon-color !default;
-$field-list-icon-hover-color: $icon-color !default;
+$field-list-icon-hover-color: $icon-color-hover !default;
 $field-list-toggle-font-color: $icon-color !default;
 $error-font-color: $danger !default;
 $format-label-font-color: $content-text-color-alt2 !default;
@@ -109372,6 +109494,12 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         &:not(.e-active) {
           .e-list-icon {
             color: $field-list-tree-icon-color;
+
+            @if ($skin-name == 'fluent2') {
+              &:hover {
+                color: $field-list-icon-hover-color;
+              }
+            }
           }
         }
 
@@ -109383,6 +109511,15 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           float: right !important;
           margin: 0 12px 0 0;
           /* stylelint-enable */
+
+          @if ($skin-name == 'fluent2') {
+            &:hover {
+              color: $field-list-icon-hover-color;
+            }
+            &:active {
+              color: $field-list-icon-hover-color;
+            }
+          }
         }
       }
 
@@ -109447,6 +109584,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
         margin-right: 4px;
         pointer-events: auto;
         width: 20px;
+
+        @if ($skin-name == 'fluent2') {
+          font-size: 16px;
+          margin-top: 3px;
+        }
       }
       @if ($skin-name == 'tailwind') {
         &.e-active {
@@ -109814,7 +109956,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
             position: relative;
             top: 3px;
           }
-    
+
+          @if ($skin-name == 'fluent2') {
+            font-size: 20px;
+          }
+          
           @if ($skin-name == 'tailwind') {
             position: relative;
             top: 1px;
@@ -111356,6 +111502,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                 vertical-align: bottom;
                 width: 20px;
 
+                @if ($skin-name =='fluent2') {
+                  font-size: 16px;
+                }
+
                 @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                   margin-right: 4px;
                   padding-left: 8px;
@@ -111636,6 +111786,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
                   height: 20px;
                   width: 20px;
 
+                  @if ($skin-name =='fluent2') {
+                    font-size: 16px;
+                  }
+
                   &.e-disable-drag {
                     cursor: not-allowed;
                     opacity: .4;
@@ -112614,6 +112768,11 @@ $field-list-adaptive-outerdiv-height: 179px !default;
           margin-bottom: $field-list-treeview-drag-bigger-padding !important;
           margin-right: 4px !important;
           width: 24px !important;
+
+          @if ($skin-name =='fluent2') {
+            font-size: 20px !important;
+            margin-bottom: 5px !important;
+          }
         }
 
         .e-calc-measure-icon,
@@ -112715,6 +112874,10 @@ $field-list-adaptive-outerdiv-height: 179px !default;
               .e-drag {
                 font-size: $field-list-bigger-icon-size;
                 width: 24px;
+
+                @if ($skin-name =='fluent2') {
+                  font-size: 20px;
+                }
               }
             }
           }
@@ -113095,7 +113258,6 @@ $field-list-adaptive-outerdiv-height: 179px !default;
     }
 
     .e-pv-filtered::before {
-      color: $primary-dark;
       content: '\e735';
     }
 
@@ -113414,15 +113576,15 @@ $pivotgrid-button-border-color: $chip-border-color !default;
 $pivotgrid-drag-clone-text-color: $pivotgrid-default-font-color !default;
 $pivotgrid-button-background-color: $content-bg-color-alt3 !default;
 $pivotgrid-button-drag-color: $icon-color !default;
-$pivotgrid-hover-color: $content-bg-color-alt2 !default;
-$pivotgrid-focus-color: $content-bg-color-alt4 !default;
+$pivotgrid-hover-color: $content-bg-color-hover !default;
+$pivotgrid-focus-color: $content-bg-color-focus !default;
 $pivotgrid-button-icon-color: $icon-color !default;
 $pivotgrid-button-active-icon-color: $pivotgrid-button-icon-color !default;
-$pivotgrid-icon-hover-color: $icon-color !default;
+$pivotgrid-icon-hover-color: $icon-color-hover !default;
 $pivotgrid-icon-focus-color: $pivotgrid-icon-hover-color !default;
-$pivotgrid-tooltip-fontcolor: $toooltip-text-color !default;
+$pivotgrid-tooltip-fontcolor: $tooltip-text-color !default;
 $pivotgrid-button-font-color: $content-text-color-alt1 !default;
-$pivotgrid-button-acitve-font-color: $content-text-color-alt1 !default;
+$pivotgrid-button-acitve-font-color: $content-text-color-pressed !default;
 $pivotgrid-editor-label-color: $content-text-color-alt1 !default;
 $pivotgrid-editor-label-fill: $content-bg-color-alt1 !default;
 $pivotgrid-header-selection-bg-color: $content-bg-color-alt3 !default;
@@ -113447,8 +113609,8 @@ $pivotgrid-member-editor-search-padding: 1px $pivotgrid-editor-search-padding-si
 $pivotgrid-member-filter-list-padding-size: -22px !default;
 $pivotview-axis-indent-padding: $pivotview-grid-indent-padding !default;
 $pivotview-axis-bigger-indent-padding: $pivotview-grid-bigger-indent-padding !default;
-$pivotgrid-button-font-size: $text-sm !default;
-$pivotgrid-bigger-button-font-size: $text-sm !default;
+$pivotgrid-button-font-size: $text-xs !default;
+$pivotgrid-bigger-button-font-size: $text-base !default;
 $pivotgrid-button-inner-padding: 4px !default;
 $pivotgrid-bigger-button-inner-padding: 5px !default;
 $pivotgrid-bigger-excel-dialog-min-width: 350px !default;
@@ -116591,7 +116753,6 @@ $pivotpager-single-size-title-padding: 8px !default;
     }
 
     .e-pv-filtered::before {
-      color: $primary-dark;
       content: '\e735';
     }
 
@@ -116924,7 +117085,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -116959,9 +117120,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {
@@ -118880,8 +119039,8 @@ $schedule-popup-content-padding: 40px 18px 12px !default;
 $schedule-recurrence-font-size: $text-xs !default;
 $schedule-tbar-bgr-min-height: 48px !default;
 $schedule-tbar-border-bottom-size: 1px solid $border-light !default;
-$schedule-tbar-box-shadow: $shadow-sm !default;
-$schedule-tbar-box-shadow-bottom-margin: 3px !default;
+$schedule-tbar-box-shadow: none !default;
+$schedule-tbar-box-shadow-bottom-margin: 0 !default;
 $schedule-tbar-min-height: 40px !default;
 $schedule-tbar-down-arrow-font-size: $text-lg !default;
 $schedule-tbar-down-arrow-margin-top: 2px !default;
@@ -118919,7 +119078,7 @@ $schedule-header-hover-border-radius: 4px !default;
 $schedule-more-popup-wrapper-border-radius: 6px !default;
 $schedule-box-shadow: 0 1px 0 rgba($color: $black, $alpha: .15) !default;
 $schedule-select-focus-bg-color: $content-bg-color !default;
-$schedule-select-focus-box-shadow: $shadow-focus-ring1 !default;
+$schedule-select-focus-box-shadow: $keyboard-focus !default;
 $schedule-popup-box-shadow-1: $shadow-lg !default;
 $schedule-popup-box-shadow-2: $shadow-lg !default;
 $schedule-popup-box-shadow-3: $shadow-lg !default;
@@ -123075,6 +123234,18 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
   }
 }
 
+@media print {
+  .e-schedule {
+    .e-table-container {
+      display: block;
+    }
+
+    .e-vertical-view .e-content-table thead {
+      break-inside: auto;
+    }
+  }
+}
+
 .e-bigger .e-more-popup-wrapper,
 .e-more-popup-wrapper {
   background: $schedule-popup-bg-color;
@@ -123253,6 +123424,10 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
 @mixin schedule-select-cell-focus-styles {
   @if ($theme-name == 'fluent2') {
     &:focus {
+      background: $content-bg-color-focus;
+    }
+
+    &:focus-visible {
       background: $schedule-select-focus-bg-color;
       box-shadow: $schedule-select-focus-box-shadow;
     }
@@ -124561,6 +124736,14 @@ $image-editor-icon-button: 5px !default;
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {
@@ -124766,12 +124949,18 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
       margin-left: calc(100% - 180px);
     }
+    @if $skin-name == 'fluent2' {
+      margin-left: calc(100% - 188px);
+    }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
 
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -124794,6 +124983,9 @@ $image-editor-icon-button: 5px !default;
     @if $skin-name == 'bootstrap5' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -124891,7 +125083,12 @@ $image-editor-icon-button: 5px !default;
 
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
 
     & .e-btn-group .e-btn {
@@ -124922,10 +125119,10 @@ $image-editor-icon-button: 5px !default;
       }
  
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -124948,6 +125145,12 @@ $image-editor-icon-button: 5px !default;
     }
   }
 
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
@@ -127339,6 +127542,7 @@ $ribbon-dropdown-btn-padding: 0 12px !default;
 $ribbon-dropdown-caret-btn-size: $text-xs !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 0 12px 0 0 !default;
+$ribbon-colorpicker-caret-btn-padding: 0 4px !default;
 $ribbon-items-padding: 0 !default;
 $ribbon-large-items-icon-padding: 8px 0 4px !default;
 $ribbon-large-items-btn-padding: 0 8px !default;
@@ -127366,7 +127570,7 @@ $ribbon-input-height: 18px !default;
 $ribbon-input-weight: $font-weight-normal !default;
 $ribbon-input-icon-size: $text-sm !default;
 $ribbon-input-icon-height: 14px !default;
-$ribbon-input-icon-padding: 9px 13px !default;
+$ribbon-input-icon-padding: 8px 9px !default;
 $ribbon-input-icon-weight: $font-weight-normal !default;
 $ribbon-input-group-border-radius: 4px !default;
 $ribbon-input-group-margin: 0 2px 4px !default;
@@ -127517,6 +127721,7 @@ $ribbon-bigger-menu-blank-icon-padding: 38px !default;
 $ribbon-bigger-dropdown-btn-size: $text-xs !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 0 11px 0 0 !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: 0 6px !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
 $ribbon-bigger-dropdown-caret-btn-height: 14px !default;
 $ribbon-bigger-dropdown-caret-icon-size: $text-base !default;
@@ -128036,6 +128241,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
 
     .e-ribbon-tab-item {
       display: inline-flex;
+
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
 
     .e-ribbon-group {
@@ -128515,6 +128724,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
           }
         }
 
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
+
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -129206,6 +129419,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
           }
         }
 
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
+
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;
@@ -130337,6 +130554,8 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 $header-font-weight: 400 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: unset !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
 
 $multicolumn-grid-small-height: 32px !default;
 $multicolumn-margin-top-small-value: unset !default;
@@ -130353,7 +130572,7 @@ $grid-content-color: $content-text-color !default;
 $grid-content-hover-bg-color: $flyout-bg-color-hover !default;
 $grid-content-active-bg-color: $flyout-bg-color-selected !default;
 $grid-content-active-color: $flyout-text-color-selected !default;
-$grid-footer-bg-color: $transparent !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
 $grid-footer-color: $content-text-color-alt2 !default;
 $grid-group-content-header-color: $content-text-color-alt2 !default;
 $grid-group-content-header-bg-color: $flyout-bg-color !default;
@@ -130387,10 +130606,15 @@ $nodata-border-color: $flyout-border !default;
   }
   .e-multicolumn-list .e-popup-footer {
     vertical-align: middle;
-    border-top: 1px solid;
+    border-style: solid;
+    border-width: $footer-border-width;
     font-size: 14px;
-    height: 38px;
-    padding: 8px 0;
+    height: $multicolumn-grid-height;
+    display: flex;
+    align-items: center;
+  }
+  .e-multicolumn-grid.e-grid {
+    border-width: $grid-border-width;
   }
   .e-input-group.e-multicolumn-list {
     input[readonly].e-input {
@@ -130459,6 +130683,7 @@ $nodata-border-color: $flyout-border !default;
     &.e-multicolumn-list .e-popup-footer {
       font-size: 12px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-small-height;
@@ -130471,6 +130696,7 @@ $nodata-border-color: $flyout-border !default;
     &.e-multicolumn-list .e-popup-footer {
       font-size: 16px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-bigger-height;
@@ -130487,6 +130713,7 @@ $nodata-border-color: $flyout-border !default;
     &.e-multicolumn-list .e-popup-footer {
       font-size: 14px;
     }
+    &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,
     .e-multicolumn-grid .e-emptyrow {
       height: $multicolumn-grid-bigger-small-height;