fix(rating): address inconsistent behavior in rating hover state

.changeset/spotty-penguins-sort.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/rating": minor
+---
+
+Provides more granular control over the hover behavior of child stars within the rating component to prevent hovering in space adjacent to the component from highlighting all stars.

components/rating/index.css

@@ -98,17 +98,6 @@
 		cursor: default;
 		pointer-events: none;
 	}
-
-	/* When the entire component is hovered, show all solid icons */
-	&:hover {
-		.spectrum-Rating-starActive {
-			display: block;
-		}
-
-		.spectrum-Rating-starInactive {
-			display: none;
-		}
-	}
 }
 
 .spectrum-Rating-input {
@@ -168,6 +157,16 @@
 			display: block;
 		}
 	}
+
+	&.is-hovered {
+		.spectrum-Rating-starActive {
+			display: block;
+		}
+
+		.spectrum-Rating-starInactive {
+			display: none;
+		}
+	}
 }
 
 .spectrum-Rating-starActive,

components/rating/stories/template.js

@@ -19,6 +19,58 @@ export const Template = ({
 	id = getRandomId("rating"),
 } = {}, context = {}) => {
 	const { updateArgs } = context;
+	document.addEventListener("DOMContentLoaded", function() {
+		const rating = document.getElementById(id);
+		if (rating.classList.contains("is-disabled") || rating.classList.contains("is-readOnly")) return;
+		const icons = Array.from(rating.getElementsByClassName("spectrum-Rating-icon"));
+		let hoverIndex = -1;
+		let selectedIndex = -1;
+
+		const updateHoverState = () => {
+			icons.forEach((icon, index) => {
+				const activeStar = icon.querySelector(".spectrum-Rating-starActive");
+				const inactiveStar = icon.querySelector(".spectrum-Rating-starInactive");
+
+				if (index <= hoverIndex) {
+					icon.classList.add("is-hovered");
+					activeStar.style.display = "block";
+					inactiveStar.style.display = "none";
+				}
+				else if (index <= selectedIndex && hoverIndex === -1) {
+					activeStar.style.display = "block";
+					inactiveStar.style.display = "none";
+				}
+				else {
+					icon.classList.remove("is-hovered");
+					activeStar.style.display = "none";
+					inactiveStar.style.display = "block";
+				}
+			});
+		};
+
+		icons.forEach((icon, index) => {
+			if (icon.classList.contains("is-selected")) selectedIndex = index;
+
+			icon.addEventListener("mouseover", function() {
+				hoverIndex = index;
+				updateHoverState();
+			});
+
+			icon.addEventListener("mouseleave", function(event) {
+				if (!rating.contains(event.relatedTarget)) {
+					hoverIndex = -1;
+					updateHoverState();
+				}
+			});
+
+			icon.addEventListener("click", function() {
+				selectedIndex = index;
+				updateHoverState();
+			});
+		});
+
+		updateHoverState();
+	});
 
 	return html`
 		<div