From 92ff4fc950646dc5549d27f706783af34a989b0f Mon Sep 17 00:00:00 2001
From: Matt Pharoah <mtpharoah@gmail.com>
Date: Fri, 21 Apr 2023 08:56:43 -0400
Subject: [PATCH] Fixed clipPath

---
 src/components/rating/rating.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index ad868caf8..2697ec53c 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -252,9 +252,6 @@ export default class SlRating extends ShoelaceElement {
         <span class="rating__symbols">
           ${counter.map(index => {
             if (displayValue > index && displayValue < index + 1) {
-              const clipLeft = styleMap({ clipPath: `inset(0 ${100 - ((displayValue - index) / 1) * 100}% 0 0)` });
-              const clipRight = styleMap({ clipPath: `inset(0 0 0 ${100 - ((displayValue - index) / 1) * 100}%)` });
-
               // 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.
@@ -268,8 +265,23 @@ export default class SlRating extends ShoelaceElement {
                   role="presentation"
                   @mouseenter=${this.handleMouseEnter}
                 >
-                  <div style=${isRtl ? clipLeft : clipRight}>${unsafeHTML(this.getSymbol(index + 1))}</div>
-                  <div class="rating__partial--filled" style=${isRtl ? clipRight : clipLeft}>
+                  <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>