Componentes

Stars

Componente read-only de exibição de estrelas. Sempre 5 estrelas, preenchidas até Math.round(value). Diferente do StarRating interativo — este só exibe, sem input. Usado no Feed Card, Grid Cell e listas.

Visão geral

Coleção

Kind of Blue

Miles Davis

Dark Side of the Moon

Pink Floyd

Thriller

Michael Jackson

Clube da Esquina

Milton Nascimento

Abbey Road

The Beatles

Anatomia

value = 3.5 → Math.round → 4

Estrela preenchida

fill:#C8F53C stroke:#C8F53C stroke-width:2 · w-3.5 h-3.5 (14×14px). Aparece até Math.round(value).

Estrela vazia

fill:none stroke:#C8F53C stroke-width:2 · mesmo tamanho. Aparece das restantes até 5.

Container

display:flex gap:2px align-items:center. Sempre 5 estrelas. Sem label de valor — o visual comunica.

Variantes de valor

value = 1.0

→ 1 preenchida

value = 2.0

→ 2 preenchidas

value = 3.0

→ 3 preenchidas

value = 3.5

→ 4 preenchidas (arredonda)

value = 4.0

→ 4 preenchidas

value = 5.0

→ 5 preenchidas

Do / Don't

Em card de coleção (read-only)

Faça Use Stars (read-only) em cards, listas e feeds onde o usuário apenas visualiza a avaliação. Reserve StarRating (interativo) para inputs de avaliação.

Estrelas em laranja

Estrelas em azul

Evite Não use cores diferentes de #C8F53C para estrelas ativas. Laranja e azul fogem da paleta do DiSco e quebram a consistência visual do sistema.

Specs

Propriedade	Valor
Tamanho por estrela	`14×14px` (`w-3.5 h-3.5`)
Gap entre estrelas	`2px`
Preenchida fill	`#C8F53C`
Preenchida stroke	`#C8F53C`, `stroke-width:2`
Vazia fill	`none`
Vazia stroke	`#C8F53C`, `stroke-width:2`
Lógica de preenchimento	`Math.round(value)` estrelas preenchidas
Total de estrelas	Sempre 5
Interatividade	Nenhuma — somente exibição (read-only)

Diferença do StarRating: O componente star-rating.html aceita input do usuário (tap em estrela para avaliar). O Stars é puramente read-only e não possui estado de hover ou seleção.