Component Request
Add a CSS-only star rating component. This is a common UI pattern in review sections, product pages, and feedback forms that currently has no EaseMotion equivalent.
Proposed classes
.ease-stars — wrapper (contains 5 <input type="radio"> + <label> pairs).ease-stars__star — individual star label (☆ → ★ on fill).ease-stars--readonly — display-only variant (no interaction, uses --ease-stars-value: 3.5 for partial fill).ease-stars--sm / --lg — size variants
Animation
On hover: stars fill left-to-right with a colour transition (color from grey to gold) using the CSS sibling selector trick (input:checked ~ label / label:hover ~ label).
CSS custom properties
--ease-stars-color — filled star colour (default: #f59e0b)--ease-stars-empty-color — unfilled star colour (default: #d1d5db)--ease-stars-size — star size (default: 1.5rem)--ease-stars-gap — gap between stars (default: 0.25rem)--ease-stars-duration — fill transition speed (default: 0.15s)
Accessibility: role="radiogroup" with aria-label="Rating", each radio has a visible label.
prefers-reduced-motion: Disable transition, apply fill instantly.
File: components/star-rating.css
Component Request
Add a CSS-only star rating component. This is a common UI pattern in review sections, product pages, and feedback forms that currently has no EaseMotion equivalent.
Proposed classes
.ease-stars— wrapper (contains 5<input type="radio">+<label>pairs).ease-stars__star— individual star label (☆ → ★ on fill).ease-stars--readonly— display-only variant (no interaction, uses--ease-stars-value: 3.5for partial fill).ease-stars--sm / --lg— size variantsAnimation
On hover: stars fill left-to-right with a colour transition (
colorfrom grey to gold) using the CSS sibling selector trick (input:checked ~ label/label:hover ~ label).CSS custom properties
--ease-stars-color— filled star colour (default: #f59e0b)--ease-stars-empty-color— unfilled star colour (default: #d1d5db)--ease-stars-size— star size (default: 1.5rem)--ease-stars-gap— gap between stars (default: 0.25rem)--ease-stars-duration— fill transition speed (default: 0.15s)Accessibility:
role="radiogroup"witharia-label="Rating", each radio has a visible label.prefers-reduced-motion: Disable transition, apply fill instantly.
File:
components/star-rating.css