@syncfusion/blazor-themes 20.4.38 → 20.4.40

package/SCSS-Themes/gantt/gantt/highcontrast.scss

@@ -2104,7 +2104,7 @@ $gantt-masked-table-background-color: #e1dfdd;
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {

package/SCSS-Themes/gantt/gantt/material-dark.scss

@@ -2105,7 +2105,7 @@ $gantt-masked-table-background-color: #e1dfdd;
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {

package/SCSS-Themes/gantt/gantt/material.scss

@@ -2105,7 +2105,7 @@ $gantt-masked-table-background-color: #e1dfdd;
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {

package/SCSS-Themes/gantt/gantt/tailwind-dark.scss

@@ -2109,7 +2109,7 @@ $gantt-masked-table-background-color: rgb(225,223,221);
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {

package/SCSS-Themes/gantt/gantt/tailwind.scss

@@ -2109,7 +2109,7 @@ $gantt-masked-table-background-color: rgb(225,223,221);
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {

package/SCSS-Themes/grids/grid/bootstrap-dark.scss

@@ -2320,7 +2320,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4290,7 +4290,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/bootstrap.scss

@@ -2322,7 +2322,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4292,7 +4292,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/bootstrap4.scss

@@ -2326,7 +2326,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4296,7 +4296,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/bootstrap5-dark.scss

@@ -2320,7 +2320,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4290,7 +4290,12 @@ $grid-dropitems-count-margin-left: -4px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/bootstrap5.scss

@@ -2320,7 +2320,7 @@ $grid-dropitems-count-margin-left: -4px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4290,7 +4290,12 @@ $grid-dropitems-count-margin-left: -4px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/fabric-dark.scss

@@ -2317,7 +2317,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4287,7 +4287,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/fabric.scss

@@ -2317,7 +2317,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4287,7 +4287,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/fluent-dark.scss

@@ -2312,7 +2312,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4282,7 +4282,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/fluent.scss

@@ -2312,7 +2312,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4282,7 +4282,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/highcontrast.scss

@@ -2317,7 +2317,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4287,7 +4287,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/material-dark.scss

@@ -2318,7 +2318,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4288,7 +4288,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/material.scss

@@ -2316,7 +2316,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4286,7 +4286,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/tailwind-dark.scss

@@ -2327,7 +2327,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4297,7 +4297,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/grids/grid/tailwind.scss

@@ -2327,7 +2327,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -4297,7 +4297,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {

package/SCSS-Themes/highcontrast.scss

@@ -59052,6 +59052,11 @@ ejs-multiselect {
   margin-right: 0;
 }
 
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
+  cursor: not-allowed;
+}
+
 
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: $ddl-sel-chip-close;
@@ -73197,7 +73202,7 @@ $grid-dropitems-count-margin-left: -8px !default;
 
     &.e-default tr {
       & td:first-child,
-      & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
+      & :not(.e-rtl) th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
       & th.e-detailheadercell:first-child,
       & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
         border-left-width: 0;
@@ -75167,7 +75172,12 @@ $grid-dropitems-count-margin-left: -8px !default;
 
       .e-movablecontent {
         height: inherit;
-        overflow: hidden;
+        overflow-x: auto;
+        scrollbar-width: none; /* firefox */
+      }
+
+      .e-movablecontent::-webkit-scrollbar {
+        display: none; /* safari, chrome and edge */
       }
 
       .e-frozencontent {
@@ -77791,6 +77801,12 @@ $fe-lg-icon-empty-inner-content-text-align: center !default;
           display: inline-table;
           transform: rotate(180deg);
         }
+
+        .e-toolbar-items .e-toolbar-right .e-toolbar-item .e-dropdown-btn .e-icon-left {
+          @if $fm-skin-name == 'FluentUI' {
+            line-height: $fe-cb-line-height;
+          }
+        }
       }
 
       .e-splitter.e-splitter-horizontal {
@@ -86869,7 +86885,7 @@ $gantt-masked-table-background-color: #e1dfdd;
 
       .e-gantt-child-manualtaskbar {
         background-color: $gantt-manualchild-task-bar;
-        border: $gantt-manualchild-task-bar-border;
+        outline: $gantt-manualchild-task-bar-border;
       }
 
       .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
@@ -112751,6 +112767,7 @@ $rating-label-left-margin: 4px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;
@@ -112857,6 +112874,11 @@ $rating-reset-disabled-icon-color: $disable !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -112910,7 +112932,7 @@ $rating-reset-disabled-icon-color: $disable !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/bootstrap-dark.scss

@@ -9,6 +9,7 @@ $rating-label-top-margin: 8px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $grey-99 !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $grey-99 !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/bootstrap.scss

@@ -9,6 +9,7 @@ $rating-label-top-margin: 8px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $grey-99 !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $grey-99 !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/bootstrap4.scss

@@ -9,6 +9,7 @@ $rating-label-top-margin: 4px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $gray-800 !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $gray-800 !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/bootstrap5-dark.scss

@@ -9,6 +9,7 @@ $rating-label-left-margin: 11px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 18px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 6px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/bootstrap5.scss

@@ -9,6 +9,7 @@ $rating-label-left-margin: 11px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 18px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 6px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/fabric-dark.scss

@@ -9,6 +9,7 @@ $rating-label-left-margin: 8px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 10px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $neutral-quintenary !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $neutral-quintenary !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/SCSS-Themes/inputs/rating/fabric.scss

@@ -9,6 +9,7 @@ $rating-label-left-margin: 8px !default;
 $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;
@@ -115,6 +116,11 @@ $rating-reset-disabled-icon-color: $neutral-quintenary !default;
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -168,7 +174,7 @@ $rating-reset-disabled-icon-color: $neutral-quintenary !default;
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {