[6.x] Fix the stars rating field rendering

[jaygeorge]

Description of the Problem

I noticed the star fills were not spaced correctly

What this PR Does

CSS

• Fixes visual alignment, half-star rendering
  • Padding was asymmetric (padding-inline: 0 var(--_pad)); now symmetric (padding-inline: var(--_pad)) so thumb centers align with star slots
• Fix mask geometry

Logic

• Changed the min value to of the first selectable step to — 0.5 or 1 — not 0, which was needed to fix the rendering and padding maths — the range thumb position must correspond to star slot centers.

Behavioral note: A stored value of 0 still means “unrated”, but the slider visually sits at the first star position without showing fill.

So when there’s no rating:

Storage stays null / 0
Slider shows min (first star position) for alignment
CSS hides the fill via --unrated
The user never “selects 0 stars” — they either haven’t rated, or they’ve picked at least half a star.

How to Reproduce

1. This is only noticeable on the frontend form rendering

[duncanmcclean]

This seems to undo a lot of the refactoring from 7827322. What has actually changed?

[jaygeorge]

I noticed 7827322 broke the way the stars worked with an input range, which meant the stars were mis-aligned on the frontend.

This is what Cursor said:

The computed value/min/unrated logic was brought back because the simplified version broke CSS thumb alignment and the unrated empty state. The inline style and inline @input from the refactor were kept. The substantive changes are min/step/unrated behaviour and CSS alignment fixes — not a return to the old architecture for its own sake.

I can try to bring it closer to your refactor…

[jaygeorge]

This looks like a more reasonable diff now—and the stars are working correctly on the rendered form