bug: Rating unchecked displays all as checked

[pkpg]

What version of daisyUI are you using?

v4.12.20

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/KFg2Be57Wl

Describe your issue

If none of the stars is checked, all stars display as checked.

[github-actions]

Thank you @pkpg for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[cluk3]

Hey @saadeghi looks like the problem is the following css in src/components/styled/rating.css:

 input:checked ~ input,
  input[aria-checked="true"] ~ input {
    @apply bg-opacity-20;
  }

so when there isn't any input checked the bg-opacity-20 will not apply. I propose to invert the logic to have bg-opacity-20 as default and then apply full opacity to the checked input and the one before:

input:checked, input:has(~ input:checked) {
  @apply bg-opacity-100;
}

I can open a PR myself if you wish!

[saadeghi]

@cluk3 that's right. I already fixed that in v5 alpha.

daisyui/packages/daisyui/src/components/rating.css

Line 28 in 112ea1a

&:has(~ *:checked, ~ *[aria-checked="true"]) {

I will also do a patch tomorrow to fix this in v4.