Rating

Оцінка зірками — інтерактивна для відгуку й readonly з дробовим заповненням для картки товару.

Два режими в одному компоненті. Інтерактивний — група радіокнопок для форми відгуку. readonly — одне зображення з назвою «Оцінка 4,3 з 5, 128 відгуків», де зірки заповнюються дробово.

Показ у картці товару

Ваза «Теракота»
₴1 450
Чашка «Вершки»
₴390
Миска «Шавлія»
₴620

Зірка оцінки — не попередження, тож не warning, а власна роль --rating у tokens.css. Так бренд може взяти свій відтінок (помаранчевий маркетплейсу), не зачепивши статуси. Світлий #d97706 дає 3.19:1 на білому — вище порогу 3:1 для графічних елементів (WCAG 1.4.11).

API

Props

Назва	Тип	Типово	Опис
`modelValue`	`number`	`null`	Оцінка. `null` — ще не оцінено. Використовуйте через `v-model`.
`size`	lgsmmd	`"md"`	Розмір зірки. На дотику ціль кожної зірки — 44px незалежно від розміру.
`ariaLabel`	`string`	`undefined`	Доступна назва, коли видимого `label` немає.
`name`	`string`	`undefined`	—
`label`	`string`	`undefined`	—
`error`	`string`	`undefined`	Текст помилки. Стан помилки вмикає САМА наявність тексту.
`hint`	`string`	`undefined`	Підказка під зірками. Ховається, коли показано помилку.
`id`	`string`	`undefined`	—
`max`	`number`	`5`	Кількість зірок.
`labels`	`string[]`	`undefined`	Смисл кожного значення: `['Жахливо', 'Погано', 'Нормально', 'Добре', 'Чудово']`. Показується поруч із зірками й додається до назви кожної радіокнопки — «4 з 5: Добре».
`count`	`number`	`undefined`	Кількість відгуків поруч: «(128)». Потрапляє в доступну назву.
`required`	`boolean`	`false`	—
`disabled`	`boolean`	`false`	—
`readonly`	`boolean`	`false`	Лише показ: без полів вводу, дробове значення заповнює зірку частково (4,3 — третина п'ятої). Для карток товару й відгуків.
`showValue`	`boolean`	`false`	Числове значення поруч із зірками: «4,6».
`clearable`	`boolean`	`true`	Дозволити зняти оцінку: повторний клік по обраній зірці, ← на першій або Delete. Вимикайте, коли оцінка обов'язкова.

Події

Назва	Payload	Опис
`update:modelValue`	`[value: number]`	Нова оцінка або `null`, коли оцінку знято. Використовуйте через `v-model`.
`change`	`[value: number]`	Оцінку змінено діями користувача — кліком чи клавішами.

Слоти

Назва	Опис
`icon`	Власний гліф замість зірки (серце, крапка). Рендериться двічі — порожнім і заповненим шаром, тож малюйте `currentColor`.

Коли використовувати

Відгук на товар, доставку, підтримку — оцінка за шкалою з 3–10 рівнів.
Середня оцінка з кількістю відгуків у картці чи списку (readonly).

Коли НЕ використовувати

Для «так/ні» — це перемикач чи дві кнопки, а не зірка.
Для шкали з підписаними, не впорядкованими варіантами — UiRadioGroup.
Для NPS 0–10 — там важливі числа, а не зірки.

Доступність

Інтерактивний режим — справжні <input type="radio"> зі спільним name: форма серіалізує оцінку сама, а скрінрідер оголошує «4 з 5: Добре, радіокнопка, позначено». Одна зупинка Tab на групу — обрана зірка, без оцінки — перша.

Стрілки власні, а не нативні: нативна група радіо зациклюється (→ на п'ятій зірці ставила б «1») і не вміє зняти оцінку. Тут → на останній просто стоїть, ← на першій знімає оцінку (якщо clearable), а Delete знімає з будь-якої. Повторний клік вказівником по обраній зірці теж знімає оцінку — але не Space: клік клавіатурою приходить із target = input, і його компонент не рахує.

На дотику ціль кожної зірки — 44px незалежно від size: зірки не накладаються зонами, як було б із невидимим ::after у щільному ряду. Попередній перегляд під курсором вимкнено для дотику — інакше палець лишав би «тінь» після того, як оцінку вже поставлено.