Rating fixes:

- readonly class not added to a "readonly" .rating element, making the stars to grow when hovering
- hovering over a readonly or disabled rating now shows a default cursor, not pointer (since you cannot click on it)

Author: vladrusu

js/src/rating.js

@@ -34,6 +34,7 @@ const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
 
 const CLASS_NAME_ACTIVE = 'active'
 const CLASS_NAME_DISABLED = 'disabled'
+const CLASS_NAME_READONLY = 'readonly'
 const CLASS_NAME_RATING = 'rating'
 const CLASS_NAME_RATING_ITEM = 'rating-item'
 const CLASS_NAME_RATING_ITEM_ICON = 'rating-item-icon'
@@ -355,6 +356,10 @@ class Rating extends BaseComponent {
       this._element.classList.add(CLASS_NAME_DISABLED)
     }
 
+    if (this._config.readOnly) {
+      this._element.classList.add(CLASS_NAME_READONLY)
+    }
+
     this._element.setAttribute('role', 'radiogroup')
     Array.from({ length: this._config.itemCount }, (_, index) => this._createRatingItem(index))
   }

scss/_rating.scss

@@ -18,7 +18,9 @@
 
   &:not(.disabled):not(.readonly) {
     .rating-item {
-      cursor: pointer;
+      .rating-item-label {
+        cursor: pointer;
+      }
 
       &:hover {
         transform: var(--#{$prefix}rating-item-scale-transform);
@@ -47,7 +49,7 @@
   font-size: var(--#{$prefix}rating-item-height);
   line-height: 0;
   color: var(--#{$prefix}rating-item-color);
-  cursor: pointer;
+  cursor: default;  // has cursor pointer only if the rating is not disabled or readonly (see above)
 
   * {
     pointer-events: none;
@@ -83,7 +85,7 @@
 .rating-item-icon {
   width: var(--#{$prefix}rating-item-height);
   height: var(--#{$prefix}rating-item-height);
-  cursor: pointer;
+  //cursor: pointer;  // has the cursor of rating-item-label (parent)
   background-color: var(--#{$prefix}rating-item-color);
   mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat;
 }