@syncfusion/ej2-inputs 21.2.8 → 22.1.34

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

@@ -1,6 +1,7 @@
 $rating-li-font-size: 20px !default;
 $rating-li-padding: 4px !default;
 $rating-li-line-height: 13px !default;
+$rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 0 !default;
 $rating-label-bottom-margin: 4px !default;
 $rating-label-right-margin: 8px !default;
@@ -13,21 +14,21 @@ $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 9px !default;
-$rating-small-li-hover-font-size: 18px !default;
+$rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
 $rating-bigger-li-line-height: 21px !default;
-$rating-bigger-li-hover-font-size: 34px !default;
+$rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
 $rating-bigger-small-li-line-height: 17px !default;
-$rating-bigger-small-li-hover-font-size: 26px !default;
+$rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;

package/styles/rating/_material-definition.scss

@@ -1,6 +1,7 @@
 $rating-li-font-size: 20px !default;
 $rating-li-padding: 4px !default;
 $rating-li-line-height: 13px !default;
+$rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 0 !default;
 $rating-label-bottom-margin: 4px !default;
 $rating-label-right-margin: 8px !default;
@@ -13,21 +14,21 @@ $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 9px !default;
-$rating-small-li-hover-font-size: 18px !default;
+$rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
 $rating-bigger-li-line-height: 21px !default;
-$rating-bigger-li-hover-font-size: 34px !default;
+$rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
 $rating-bigger-small-li-line-height: 17px !default;
-$rating-bigger-small-li-hover-font-size: 26px !default;
+$rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/rating/_material3-definition.scss

@@ -0,0 +1,47 @@
+$rating-li-font-size: 20px !default;
+$rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
+$rating-li-min-width-height: 28px !default;
+$rating-focus-border-radius: 0 !default;
+$rating-label-bottom-margin: 8px !default;
+$rating-label-right-margin: 8px !default;
+$rating-label-top-margin: 4px !default;
+$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: 9px !default;
+$rating-small-li-min-width-height: 24px !default;
+$rating-small-label-font-size: 10px !default;
+$rating-small-label-line-height: 16px !default;
+$rating-small-reset-font-size : 12px !default;
+
+$rating-bigger-li-font-size: 28px !default;
+$rating-bigger-li-line-height: 21px !default;
+$rating-bigger-li-min-width-height: 36px !default;
+$rating-bigger-label-font-size: 14px !default;
+$rating-bigger-label-line-height: 22px !default;
+$rating-bigger-reset-font-size : 24px !default;
+
+$rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
+$rating-bigger-small-li-min-width-height: 32px !default;
+$rating-bigger-small-label-font-size: 12px !default;
+$rating-bigger-small-label-line-height: 18px !default;
+$rating-bigger-small-reset-font-size : 20px !default;
+
+$rating-border-width: 1px !default;
+
+$rating-selected-bg-color: rgba($rating-selected-color) !default;
+$rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-hover-bg-color: $rating-selected-hover-color !default;
+$rating-pressed-bg-color: $rating-pressed-color !default;
+$rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;
+$rating-unrated-disabled-bg-color: $rating-unrated-disabled-color !default;
+$rating-li-focus: rgba($rating-selected-color) !default;
+$rating-reset-icon-color: rgba($icon-color) !default;
+$rating-reset-hover-icon-color: rgba($icon-color-hover) !default;
+$rating-reset-disabled-icon-color: $icon-color-disabled !default;

package/styles/rating/_tailwind-definition.scss

@@ -1,6 +1,7 @@
 $rating-li-font-size: $font-icon-20 !default;
 $rating-li-padding: 4px !default;
 $rating-li-line-height: 3px !default;
+$rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 4px !default;
 $rating-label-bottom-margin: 6px !default;
 $rating-label-right-margin: 10px !default;
@@ -13,18 +14,21 @@ $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
 $rating-small-li-line-height: 10px !default;
+$rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: $text-xxs !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : $font-icon-12 !default;
 
 $rating-bigger-li-font-size: $font-icon-24 !default;
 $rating-bigger-li-line-height: 18px !default;
+$rating-bigger-li-min-width-height: 32px !default;
 $rating-bigger-label-font-size: $text-2xl !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : $font-icon-20 !default;
 
 $rating-bigger-small-li-font-size: $font-icon-22 !default;
 $rating-bigger-small-li-line-height: 15px !default;
+$rating-bigger-small-li-min-width-height: 30px !default;
 $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : $font-icon-18 !default;

package/styles/rating/_theme.scss

@@ -1,7 +1,7 @@
 @include export-module('rating-theme') {
   .e-rating-container {
     .e-rating-item-list {
-      &:focus .e-rating-focus {
+      &:focus-visible:not(:hover) .e-rating-focus {
         outline-color: $rating-li-focus;
         border-radius: $rating-focus-border-radius;
       }
@@ -16,6 +16,7 @@
 
       &.e-disabled {
         color: $rating-reset-disabled-icon-color;
+        opacity: 1;
       }
     }
 
@@ -64,7 +65,12 @@
           /* stylelint-disable property-no-vendor-prefix */
           -webkit-background-clip: text;
           /* stylelint-enable property-no-vendor-prefix */
-          -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
+          @if ($skin-name == 'Material3') {
+            -webkit-text-stroke: $rating-border-width $rating-selected-bg-color;
+          }
+          @else {
+            -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
+          }
         }
       }
 
@@ -76,10 +82,12 @@
           /* stylelint-disable property-no-vendor-prefix */
           -webkit-background-clip: text;
           /* stylelint-enable property-no-vendor-prefix */
-          -webkit-text-stroke: $rating-border-width $rating-pressed-bg-color;
           @if ($skin-name == 'bootstrap4') {
             -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
           }
+          @else {
+            -webkit-text-stroke: $rating-border-width $rating-pressed-bg-color;
+          }
         }
       }
     }
@@ -122,16 +130,20 @@
     }
 
     &.e-disabled {
+      opacity: 1;
       .e-rating-item-container {
         .e-rating-icon {
-          -webkit-text-stroke: $rating-border-width $rating-unrated-disabled-bg-color;
           @if ($skin-name == 'Material3') {
+            -webkit-text-stroke: $rating-border-width transparent;
             background: $rating-unrated-disabled-bg-color;
             background-clip: text;
             /* stylelint-disable property-no-vendor-prefix */
             -webkit-background-clip: text;
             /* stylelint-enable property-no-vendor-prefix */
           }
+          @else{
+            -webkit-text-stroke: $rating-border-width $rating-unrated-disabled-bg-color;
+          }
         }
 
         &.e-rating-selected .e-rating-icon,
@@ -141,28 +153,38 @@
           /* stylelint-disable property-no-vendor-prefix */
           -webkit-background-clip: text;
           /* stylelint-enable property-no-vendor-prefix */
-          -webkit-text-stroke: $rating-border-width $rating-selected-disabled-bg-color;
+          @if ($skin-name == 'Material3') {
+            -webkit-text-stroke: $rating-border-width transparent;
+          }
+          @else{
+            -webkit-text-stroke: $rating-border-width $rating-selected-disabled-bg-color;
+          }
         }
       }
 
       &.e-rtl {
         .e-rating-item-container {
           .e-rating-icon {
-            background: linear-gradient(to left, $rating-unrated-disabled-bg-color var(--rating-value), transparent var(--rating-value));
+            @if ($skin-name == 'Material3') {
+              background: $rating-unrated-disabled-bg-color;
+            }
+            @else{
+              background: linear-gradient(to left, $rating-unrated-disabled-bg-color var(--rating-value), transparent var(--rating-value));
+            }
             background-clip: text;
             /* stylelint-disable property-no-vendor-prefix */
             -webkit-background-clip: text;
             /* stylelint-enable property-no-vendor-prefix */
           }
-        }
 
-        &.e-rating-selected .e-rating-icon,
-        &.e-rating-intermediate .e-rating-icon {
-          background: linear-gradient(to left, $rating-selected-disabled-bg-color var(--rating-value), transparent var(--rating-value));
-          background-clip: text;
-          /* stylelint-disable property-no-vendor-prefix */
-          -webkit-background-clip: text;
-          /* stylelint-enable property-no-vendor-prefix */
+          &.e-rating-selected .e-rating-icon,
+          &.e-rating-intermediate .e-rating-icon {
+            background: linear-gradient(to left, $rating-selected-disabled-bg-color var(--rating-value), transparent var(--rating-value));
+            background-clip: text;
+            /* stylelint-disable property-no-vendor-prefix */
+            -webkit-background-clip: text;
+            /* stylelint-enable property-no-vendor-prefix */
+          }
         }
       }
     }

package/styles/rating/bootstrap-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #676767;
   border-radius: 2px;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #505050;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #505050;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #505050 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/bootstrap.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 9px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 24px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #adadad;
   border-radius: 2px;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #999;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #999;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #999 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/bootstrap4.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 11px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #007bff;
   border-radius: 4px;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #343a40;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -218,7 +221,6 @@
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #dee2e6;
   -webkit-text-stroke: 1px #007bff;
 }
 .e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
@@ -242,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #343a40;
 }
@@ -260,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #343a40 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/bootstrap5-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #0d6efd;
   border-radius: 4px;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #6c757d;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -242,6 +245,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #495057;
 }
@@ -260,7 +266,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #6c757d var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/bootstrap5.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #0d6efd;
   border-radius: 4px;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #adb5bd;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -242,6 +245,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #ced4da;
 }
@@ -260,7 +266,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #adb5bd var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/fabric-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #fff;
   border-radius: 0;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #514f4f;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #514f4f;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #514f4f var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/fabric.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #005ba3;
   border-radius: 0;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #d0d0d0;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #d0d0d0;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #d0d0d0 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/fluent-dark.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #f3f2f1;
   border-radius: 0;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #484644;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #484644;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #484644 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */

package/styles/rating/fluent.css

@@ -34,6 +34,8 @@
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: calc(1em + 8px);
+  min-height: calc(1em + 8px);
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -176,7 +178,7 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
   outline-color: #323130;
   border-radius: 0;
 }
@@ -188,6 +190,7 @@
 }
 .e-rating-container .e-reset.e-disabled {
   color: #a19f9d;
+  opacity: 1;
 }
 .e-rating-container .e-rating-item-container .e-rating-icon {
   -webkit-text-fill-color: transparent;
@@ -241,6 +244,9 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
+.e-rating-container.e-disabled {
+  opacity: 1;
+}
 .e-rating-container.e-disabled .e-rating-item-container .e-rating-icon {
   -webkit-text-stroke: 1px #c8c6c4;
 }
@@ -259,7 +265,7 @@
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
-.e-rating-container.e-disabled.e-rtl.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl.e-rating-intermediate .e-rating-icon {
+.e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-disabled.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: linear-gradient(to left, #c8c6c4 var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */