Merge branch 'mpharoah/sl-rating-perf' of github.com:mpharoah/shoelace into mpharoah-mpharoah/sl-rating-perf

src/components/rating/rating.styles.ts

@@ -43,12 +43,19 @@ export default css`
     padding: var(--symbol-spacing);
   }
 
-  .rating__symbols--indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .rating__symbol--active,
+  .rating__partial--filled {
     color: var(--symbol-color-active);
-    pointer-events: none;
+  }
+
+  .rating__partial-symbol-container {
+    position: relative;
+  }
+
+  .rating__partial--filled {
+    position: absolute;
+    top: var(--symbol-spacing);
+    left: var(--symbol-spacing);
   }
 
   .rating__symbol {
@@ -79,7 +86,7 @@ export default css`
 
   /* Forced colors mode */
   @media (forced-colors: active) {
-    .rating__symbols--indicator {
+    .rating__symbol--active {
       color: SelectedItem;
     }
   }

src/components/rating/rating.ts

@@ -249,16 +249,51 @@ export default class SlRating extends ShoelaceElement {
         @mousemove=${this.handleMouseMove}
         @touchmove=${this.handleTouchMove}
       >
-        <span class="rating__symbols rating__symbols--inactive">
+        <span class="rating__symbols">
           ${counter.map(index => {
-            // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
-            // false to prevent the hover state from confusing them as they move the mouse out of the control. This
-            // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
+            if (displayValue > index && displayValue < index + 1) {
+              // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
+              // false to prevent the hover state from confusing them as they move the mouse out of the control. This
+              // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
+              return html`
+                <span
+                  class=${classMap({
+                    rating__symbol: true,
+                    'rating__partial-symbol-container': true,
+                    'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
+                  })}
+                  role="presentation"
+                  @mouseenter=${this.handleMouseEnter}
+                >
+                  <div
+                    style=${styleMap({
+                      clipPath: isRtl
+                        ? `inset(0 ${(displayValue - index) * 100}% 0 0)`
+                        : `inset(0 0 0 ${(displayValue - index) * 100}%)`
+                    })}
+                  >
+                    ${unsafeHTML(this.getSymbol(index + 1))}
+                  </div>
+                  <div
+                    class="rating__partial--filled"
+                    style=${styleMap({
+                      clipPath: isRtl
+                        ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)`
+                        : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
+                    })}
+                  >
+                    ${unsafeHTML(this.getSymbol(index + 1))}
+                  </div>
+                </span>
+              `;
+            }
+
             return html`
               <span
                 class=${classMap({
                   rating__symbol: true,
-                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
+                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+                  'rating__symbol--active': displayValue >= index + 1
                 })}
                 role="presentation"
                 @mouseenter=${this.handleMouseEnter}
@@ -268,30 +303,6 @@ export default class SlRating extends ShoelaceElement {
             `;
           })}
         </span>
-
-        <span class="rating__symbols rating__symbols--indicator">
-          ${counter.map(index => {
-            return html`
-              <span
-                class=${classMap({
-                  rating__symbol: true,
-                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
-                })}
-                style=${styleMap({
-                  clipPath:
-                    displayValue > index + 1
-                      ? 'none'
-                      : isRtl
-                      ? `inset(0 0 0 ${100 - ((displayValue - index) / 1) * 100}%)`
-                      : `inset(0 ${100 - ((displayValue - index) / 1) * 100}% 0 0)`
-                })}
-                role="presentation"
-              >
-                ${unsafeHTML(this.getSymbol(index + 1))}
-              </span>
-            `;
-          })}
-        </span>
       </div>
     `;
   }