@syncfusion/ej2-angular-inputs 20.4.42 → 20.4.48

package/styles/bootstrap-dark.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6830,6 +6831,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 2px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6809,6 +6810,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 2px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap4.css

@@ -2124,6 +2124,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6963,6 +6964,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap5-dark.css

@@ -2213,6 +2213,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7113,6 +7114,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/bootstrap5.css

@@ -2213,6 +2213,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7113,6 +7114,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 4px;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/color-picker/_layout.scss

@@ -744,12 +744,26 @@
           & .e-slider-track {
             background: linear-gradient(to left, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
           }
+
+          & .e-handle {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
         }
 
         & .e-preview-container {
           margin-left: 0;
           margin-right: $cpicker-preview-margin-left;
         }
+
+        & .e-opacity-slider {
+          & .e-handle-first {
+            @if $skin-name == 'FluentUI' {
+              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
 
       & .e-selected-value {

package/styles/color-picker/fluent-dark.css

@@ -470,10 +470,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;

package/styles/color-picker/fluent.css

@@ -470,10 +470,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;

package/styles/fabric-dark.css

@@ -2081,6 +2081,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6759,6 +6760,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/fabric.css

@@ -2081,6 +2081,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6759,6 +6760,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/fluent-dark.css

@@ -2049,6 +2049,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6557,10 +6558,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;
@@ -6888,6 +6895,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;
@@ -6926,7 +6937,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: center;
       justify-content: center;
   left: 50%;
-  top: -8px;
+  top: -12.5px;
   transform: translate(-50%, -100%);
 }
 .e-rating-container .e-tooltip-wrap.e-rating-tooltip.e-show-tooltip {

package/styles/fluent.css

@@ -2049,6 +2049,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -6557,10 +6558,16 @@ body.e-colorpicker-overflow {
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
+.e-rtl .e-container .e-slider-preview .e-hue-slider .e-handle {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-slider-preview .e-preview-container {
   margin-left: 0;
   margin-right: 4.205%;
 }
+.e-rtl .e-container .e-slider-preview .e-opacity-slider .e-handle-first {
+  top: calc(66% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-rtl .e-container .e-selected-value .e-float-input {
   margin-left: 2.75%;
   margin-right: 0;
@@ -6888,6 +6895,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;
@@ -6926,7 +6937,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: center;
       justify-content: center;
   left: 50%;
-  top: -8px;
+  top: -12.5px;
   transform: translate(-50%, -100%);
 }
 .e-rating-container .e-tooltip-wrap.e-rating-tooltip.e-show-tooltip {

package/styles/highcontrast-light.css

@@ -2197,6 +2197,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7075,6 +7076,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/highcontrast.css

@@ -2197,6 +2197,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -7075,6 +7076,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/input/_layout.scss

@@ -3036,6 +3036,7 @@
 
   input.e-input.e-rtl#{$css},
   .e-input-group.e-rtl input.e-input,
+  .e-input-group.e-control-container.e-rtl input.e-control,
   .e-input-group.e-control-wrapper.e-rtl input.e-input,
   .e-float-input.e-rtl input,
   .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/bootstrap-dark.css

@@ -2114,6 +2114,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/bootstrap.css

@@ -2114,6 +2114,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/bootstrap4.css

@@ -2114,6 +2114,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/bootstrap5-dark.css

@@ -2203,6 +2203,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/bootstrap5.css

@@ -2203,6 +2203,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/fabric-dark.css

@@ -2071,6 +2071,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/fabric.css

@@ -2071,6 +2071,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/fluent-dark.css

@@ -2039,6 +2039,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/fluent.css

@@ -2039,6 +2039,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/highcontrast-light.css

@@ -2187,6 +2187,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/highcontrast.css

@@ -2187,6 +2187,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/material-dark.css

@@ -2415,6 +2415,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/material.css

@@ -2423,6 +2423,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/tailwind-dark.css

@@ -2179,6 +2179,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/input/tailwind.css

@@ -2179,6 +2179,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,

package/styles/material-dark.css

@@ -2425,6 +2425,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -14743,6 +14744,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/material.css

@@ -2433,6 +2433,7 @@ textarea.e-input,
 
 input.e-input.e-rtl,
 .e-input-group.e-rtl input.e-input,
+.e-input-group.e-control-container.e-rtl input.e-control,
 .e-input-group.e-control-wrapper.e-rtl input.e-input,
 .e-float-input.e-rtl input,
 .e-float-input.e-control-wrapper.e-rtl input,
@@ -14783,6 +14784,10 @@ body.e-colorpicker-overflow {
 .e-rating-container .e-reset.e-disabled {
   cursor: default;
 }
+.e-rating-container .e-reset:focus-visible {
+  outline: 1px solid;
+  border-radius: 0;
+}
 .e-rating-container .e-rating-label {
   font-size: 12px;
   line-height: 18px;

package/styles/rating/_bootstrap-dark-definition.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;

package/styles/rating/_bootstrap-definition.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;

package/styles/rating/_bootstrap4-definition.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;

package/styles/rating/_bootstrap5-definition.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;

package/styles/rating/_fabric-dark-definition.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;

package/styles/rating/_fabric-definition.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;

package/styles/rating/_fluent-definition.scss

@@ -9,6 +9,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: 12.5px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;

package/styles/rating/_fusionnew-definition.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;

package/styles/rating/_highcontrast-definition.scss

@@ -9,6 +9,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;

package/styles/rating/_highcontrast-light-definition.scss

@@ -9,6 +9,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;

package/styles/rating/_layout.scss

@@ -69,6 +69,11 @@
       &.e-disabled {
         cursor: default;
       }
+
+      &:focus-visible{
+        outline: 1px solid;
+        border-radius: $rating-focus-border-radius;
+      }
     }
 
     .e-rating-label {
@@ -122,7 +127,7 @@
       display: none;
       justify-content: center;
       left: 50%;
-      top: -8px;
+      top: -$rating-tooltip-tip-bottom-height;
       transform: translate(-50%, -100%);
 
       &.e-show-tooltip {

package/styles/rating/_material-dark-definition.scss

@@ -9,6 +9,7 @@ $rating-label-left-margin: 6px !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: 9px !default;

package/styles/rating/_material-definition.scss

@@ -9,6 +9,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: 9px !default;

package/styles/rating/_material3-definition.scss

@@ -9,6 +9,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: 9px !default;