CoreRating
Примеры использования и документация.
Оценка по шкале звёзд: одним кликом или стрелкой пользователь выражает впечатление, а hover заранее показывает, что получится. Отзывы о товарах, контенте и качестве сервиса; в readonly — компактный показ уже выставленной оценки. Иконка любая: звезда из коллекции проекта или сердце из Iconify.
Интерактив — один слайдер по APG: фокус и клавиатура живут на контейнере (←→↑↓ — ±1, Home/End — края шкалы), aria-valuetext объявляет значение словами («3 из 5»); клик/тап по иконке — быстрый путь для мыши, а повторный клик по текущей последней снимает её — стандарт UX рейтингов. Hover-превью подсвечивает иконки до наведённой, не трогая модель.
Readonly — role="img" с локализованной подписью («Оценка: N из M») и нейтральным цветом без выделения. flow — активные иконки наполняются переливающимся градиентом по фазам: градиент «плывёт» по ряду, а не мигает синхронно; в readonly — статичный градиент вместо нейтрального цвета. jsonLd — opt-in эмиссия schema.org AggregateRating в head: ratingCount обязателен для валидности у Google, id связывает с родительской сущностью; узел эмитится только при рейтинге > 0, несколько рейтингов на странице не конфликтуют (уникальные ключи).
интерактив: 3 — стрелки ←→/↑↓ и Home/End на фокусе, клик по текущей последней снимает
readonly · нейтральный цвет · gap 4
readonly · size 14
color="success"
color="danger"
color="info"
color="secondary"
interactive · пара по умолчанию
своя пара --rating-flow-a/-b
--rating-flow-image · мультистоп
--rating-flow-image · readonly
readonly + flow (вместо нейтрального)
сложность: 2 из 3
lucide:thumbs-up · readonly
mdi:ghost · readonly · size 24