@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/src/components/popover.css

@@ -0,0 +1,164 @@
+/* ─── Popover ─────────────────────────────────────────────────
+ * Триггер и панель поверх страницы с произвольным содержимым.
+ *
+ *   .so-popover                 корень — обёртка триггера и якорь панели
+ *   .so-popover__panel          панель — Frame, телепортированный в `body`
+ *     .so-popover__handle       полоса жеста, пока он включён
+ *     .so-popover__content      содержимое — прокручивается оно
+ *     .so-popover__close        кнопка закрытия — Button
+ *
+ * Корень — строчный флекс: в строке текста он встаёт строчным элементом и не
+ * рвёт её, во флекс-ряду — обычным элементом ряда. Не `inline-block`: вокруг
+ * строчного триггера он завёл бы строку со своей высотой, и якорь оказался бы
+ * выше триггера. Не `contents`: у такого узла нет прямоугольника, и якорю было
+ * бы нечего мерить. Панель телепортирована, поэтому прямоугольник корня — это
+ * прямоугольник триггера.
+ *
+ * Панель — ряд из двух колонок: содержимое и кнопка закрытия. У кнопки своя
+ * колонка, поэтому содержимое под неё не заходит, и признак «закрываемая»
+ * не нужен: без кнопки колонки нет. Ширина — по содержимому, но не шире
+ * потолка и окна: минус `1rem` — чтобы панель всегда помещалась в окно, сдвиг
+ * `TAnchorPlugin` держит её в окне, только пока она в него помещается. Высота:
+ * панель встаёт на ту сторону от якоря, где места больше, а там его не меньше
+ * половины окна без половины якоря, — поэтому потолок — половина окна с
+ * запасом на якорь и отступ, и длинное содержимое прокручивается, а не уезжает
+ * за край окна вместе с кнопкой закрытия.
+ *
+ * Содержимое просит ширину целиком (`max-content`): панель позиционирована с
+ * `left`, и с шириной по содержимому место под текст было бы от `left` до края
+ * окна — у якоря справа длинный текст сложился бы в узкий столбец. Панель
+ * упирается в свой потолок, и содержимое переносится уже внутри, длинное
+ * слово тоже. Прокручивается содержимое, а не панель: кнопка закрытия в
+ * соседней колонке остаётся на месте. Отступ — внутри прокрутки: у края
+ * прокручиваемой области кольцо фокуса вложенного контрола обрезалось бы.
+ * Таблица прямо в содержимом встаёт закреплённой шапкой к краю, как в теле
+ * окна (`modal.css`).
+ *
+ * Кнопка закрытия — квадрат высоты своего размера в углу со стороны конца
+ * строки.
+ *
+ * Панель внутри контейнера (`contained`): не в `body` у триггера, а у края
+ * ближайшего позиционированного предка (`data-edge`), как выезжающая панель в
+ * контейнере. Раскладка ставит её `absolute` без координат: вдоль края — во
+ * всю его длину, поперёк — по содержимому, но не больше контейнера. Потолков
+ * окна у неё нет: её мера — контейнер. Полоса жеста у неё — у края,
+ * противоположного её краю (панель сверху — полоса снизу, у начала строки —
+ * у конца): зона захвата — поле панели с этой стороны, и содержимое с кнопкой
+ * закрытия она не накрывает. У бокового края полоса — во всю высоту панели,
+ * штрих поперёк строки. Полоса у якоря и закрытая панель — `anchored.css`.
+ *
+ * Потолки, отступ содержимого и кнопки — переменные корня документа;
+ * умолчания — числа темы oren, тема задаёт свои на корне документа.
+ *
+ * Панель у бокового края во время жеста идёт за указателем вбок: сдвиг
+ * плагина жеста (`--so-swipe-offset`, `swipe.css`) — по горизонтали.
+ *
+ * Облик — поверхность, кромка, тень, скругление, вид кнопки закрытия,
+ * проявление, въезд от края, возврат отпущенной и уход смахнутой — рисует
+ * тема. */
+
+:root {
+	--so-popover-max-width: 20rem;
+	--so-popover-max-height: 24rem;
+	--so-popover-padding: 0.5rem;
+	--so-popover-close-offset: 0.5rem;
+}
+
+.so-popover {
+	display: inline-flex;
+}
+
+.so-popover__panel {
+	display: flex;
+	align-items: flex-start;
+	overflow: hidden;
+	max-width: min(var(--so-popover-max-width), calc(100vw - 1rem));
+	max-height: min(var(--so-popover-max-height), calc(50dvh - 1.5rem));
+}
+
+.so-popover__panel[data-contained='true'] {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.so-popover__panel[data-contained='true'][data-edge='top'] {
+	inset: 0 0 auto;
+}
+
+.so-popover__panel[data-contained='true'][data-edge='bottom'] {
+	inset: auto 0 0;
+}
+
+.so-popover__panel[data-contained='true'][data-edge='start'] {
+	inset-block: 0;
+	inset-inline: 0 auto;
+}
+
+.so-popover__panel[data-contained='true'][data-edge='end'] {
+	inset-block: 0;
+	inset-inline: auto 0;
+}
+
+.so-popover__content {
+	align-self: stretch;
+	width: max-content;
+	min-width: 0;
+	padding: var(--so-popover-padding);
+	overflow-y: auto;
+	overflow-wrap: break-word;
+}
+
+:where(.so-popover__content > .so-table__viewport) {
+	--so-table-head-offset: calc(-1 * var(--so-popover-padding));
+}
+
+.so-popover__close {
+	flex-shrink: 0;
+	aspect-ratio: 1;
+	padding-inline: 0;
+	margin-block-start: var(--so-popover-close-offset);
+	margin-inline-end: var(--so-popover-close-offset);
+}
+
+.so-popover__panel:has(> .so-popover__handle)[data-edge='top'] {
+	padding-block-start: 0;
+	padding-block-end: var(--so-target-size);
+}
+
+.so-popover__panel:has(> .so-popover__handle):is([data-edge='start'], [data-edge='end']) {
+	padding-block-start: 0;
+	translate: var(--so-swipe-offset) 0;
+}
+
+.so-popover__panel:has(> .so-popover__handle)[data-edge='start'] {
+	padding-inline-end: var(--so-target-size);
+}
+
+.so-popover__panel:has(> .so-popover__handle)[data-edge='end'] {
+	padding-inline-start: var(--so-target-size);
+}
+
+.so-popover__panel[data-edge='top'] > .so-popover__handle {
+	top: auto;
+	bottom: 0;
+}
+
+.so-popover__panel:is([data-edge='start'], [data-edge='end']) > .so-popover__handle {
+	inset-block: 0;
+	inset-inline: auto;
+	inline-size: var(--so-target-size);
+	block-size: auto;
+}
+
+.so-popover__panel:is([data-edge='start'], [data-edge='end']) > .so-popover__handle::before {
+	inline-size: var(--so-swipe-grip-thickness);
+	block-size: var(--so-swipe-grip-length);
+}
+
+.so-popover__panel[data-edge='start'] > .so-popover__handle {
+	inset-inline-end: 0;
+}
+
+.so-popover__panel[data-edge='end'] > .so-popover__handle {
+	inset-inline-start: 0;
+}

package/src/components/progress-linear.css

@@ -0,0 +1,88 @@
+/*
+ * Linear progress: the root is the track, __range is the determinate fill,
+ * and the root's ::after is the indeterminate segment. Core supplies a percentage
+ * through --so-progress-linear-percent (absent while indeterminate),
+ * data-indeterminate and --orientation-horizontal/--orientation-vertical.
+ *
+ * The track clips its fill and moving segment. Horizontal tracks are blocks,
+ * vertical tracks inline blocks. Default lengths have zero specificity: the
+ * Input minimum width horizontally and Slider length vertically. Thickness uses
+ * the Slider rail scale for the same size. Logical properties fill from inline
+ * start (right in RTL); vertical fill rises from the bottom. Visibility rather
+ * than display allows the determinate fill to resume its transition from zero.
+ * The theme owns colors, rounding, transitions, motion and forced-color appearance.
+ */
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок и
+ * без него обязан выглядеть умолчанием. */
+.so-progress-linear {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-normal);
+	position: relative;
+	overflow: hidden;
+}
+
+.so-progress-linear--orientation-horizontal {
+	display: block;
+	block-size: var(--so-progress-linear-thickness);
+}
+
+.so-progress-linear--orientation-vertical {
+	display: inline-block;
+	inline-size: var(--so-progress-linear-thickness);
+}
+
+.so-progress-linear__range {
+	position: absolute;
+}
+
+.so-progress-linear--orientation-horizontal > .so-progress-linear__range {
+	inset-block: 0;
+	inset-inline-start: 0;
+	inline-size: var(--so-progress-linear-percent, 0%);
+}
+
+.so-progress-linear--orientation-vertical > .so-progress-linear__range {
+	inset-inline: 0;
+	inset-block-end: 0;
+	block-size: var(--so-progress-linear-percent, 0%);
+}
+
+.so-progress-linear[data-indeterminate='true'] > .so-progress-linear__range {
+	visibility: hidden;
+}
+
+.so-progress-linear[data-indeterminate='true']::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+.so-progress-linear--size-sm {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-sm);
+}
+
+.so-progress-linear--size-normal {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-normal);
+}
+
+.so-progress-linear--size-lg {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-lg);
+}
+
+.so-progress-linear--size-xl {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-xl);
+}
+
+.so-progress-linear--size-2xl {
+	--so-progress-linear-thickness: var(--so-slider-rail-size-2xl);
+}
+
+/* Длина по умолчанию — нулевой специфичности: класс или стиль потребителя её
+ * перекрывает, не споря. */
+:where(.so-progress-linear--orientation-horizontal) {
+	min-width: var(--so-input-min-width);
+}
+
+:where(.so-progress-linear--orientation-vertical) {
+	height: var(--so-slider-length);
+}

package/src/components/progress-spinner.css

@@ -0,0 +1,127 @@
+/* ─── ProgressSpinner ─────────────────────────────────────────
+ * Индикатор выполнения кольцом: доля готового, когда она известна, и бег,
+ * когда неизвестна. Модель та же, что у ProgressLinear, своё у кольца —
+ * рисунок.
+ *
+ *   .so-progress-spinner        корень — строчный, диаметр кольца
+ *     svg.so-progress-spinner__ring  рисунок
+ *       .so-progress-spinner__track  дорожка — полное кольцо
+ *       .so-progress-spinner__range  дуга доли
+ *       .so-progress-spinner__runner бегущая дуга, пока доля неизвестна
+ *
+ * От ядра на корне приходят доля готового — `--so-progress-spinner-fraction`
+ * в `style`, число от 0 до 1, без единиц: длину дуги SVG меряет в долях
+ * окружности (`pathLength="1"` в разметке), и доля ложится в штрих как есть;
+ * пока кольцо бежит, переменной нет, — и `data-indeterminate`.
+ *
+ * Рисунок — SVG в разметке: дорожка и две дуги на одной окружности радиуса 7
+ * в поле 16 × 16. Окружности — только штрих: заливка у фигуры SVG по
+ * умолчанию сплошная, и кольцо стало бы кругом. Толщина — 2 в тех же
+ * единицах, восьмая часть диаметра, и кольцо ровно касается краёв поля: 7 +
+ * 2 / 2 = 8. Толщина — доля диаметра, а не пиксели: с диаметром она растёт
+ * сама, и у кольца, которому потребитель задал свой размер, тоже. За край
+ * поля рисунок не обрезается: кольцо касается его, и обрезка срезала бы
+ * сглаживание внешнего края.
+ *
+ * Дуги начинаются сверху: окружность SVG начинается справа, на трёх часах, и
+ * поворот рисунка на четверть назад ставит её начало на двенадцать. Идут они
+ * по часовой в любом направлении письма: кольцо читается как циферблат, а у
+ * кольца строки нет. Поворот — `transform`, а бег, который рисует тема, —
+ * свойство `rotate`: они складываются, и начало дуг от бега не зависит.
+ *
+ * Дуга доли — от начала кольца на долю готового. Промежуток штриха дополняет
+ * дугу до целой окружности, а не равен ей: на 100 % он нулевой, и браузер
+ * рисует кольцо сплошным, без шва на двенадцати. Доля неизвестна — дуга доли
+ * спрятана (`visibility`), а не убрана из отрисовки: когда бег снимут, тема
+ * ведёт её к доле от начала кольца переходом. Вместо неё — бегущая дуга: в
+ * покое она — всё кольцо, сплошным штрихом, как полная доля, а её бег — дугой
+ * в четверть кольца — движение, и его рисует тема.
+ *
+ * Строчный: кольцо встаёт в строку текста и во флекс кнопки рядом с текстом,
+ * и в сжатой кнопке не сжимается. Диаметр — нулевой специфичности: класс или
+ * стиль потребителя его перекрывает, не споря, и толщина вырастает вместе с
+ * ним.
+ *
+ * Диаметр по размеру — переменные корня документа (`sm`…`2xl`); блок берёт
+ * ступень своего размера в `--so-progress-spinner-size`. Умолчания — числа
+ * темы oren, тема задаёт свои на корне документа.
+ *
+ * Облик — цвет дорожки и дуг, переход доли, бег и мерцание и вид в режиме
+ * принудительных цветов — рисует тема. */
+
+:root {
+	--so-progress-spinner-size-sm: 0.75rem;
+	--so-progress-spinner-size-normal: 1rem;
+	--so-progress-spinner-size-lg: 1.25rem;
+	--so-progress-spinner-size-xl: 1.5rem;
+	--so-progress-spinner-size-2xl: 1.75rem;
+}
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок и
+ * без него обязан выглядеть умолчанием. */
+.so-progress-spinner {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-normal);
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.so-progress-spinner__ring {
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+	transform: rotate(-90deg);
+}
+
+.so-progress-spinner__track,
+.so-progress-spinner__range,
+.so-progress-spinner__runner {
+	fill: none;
+	stroke-width: 2;
+}
+
+.so-progress-spinner__range {
+	stroke-dasharray: var(--so-progress-spinner-fraction, 0)
+		calc(1 - var(--so-progress-spinner-fraction, 0));
+}
+
+.so-progress-spinner__runner {
+	visibility: hidden;
+	stroke-dasharray: 1 0;
+}
+
+.so-progress-spinner[data-indeterminate='true']
+	> .so-progress-spinner__ring
+	> .so-progress-spinner__range {
+	visibility: hidden;
+}
+
+.so-progress-spinner[data-indeterminate='true']
+	> .so-progress-spinner__ring
+	> .so-progress-spinner__runner {
+	visibility: visible;
+}
+
+.so-progress-spinner--size-sm {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-sm);
+}
+
+.so-progress-spinner--size-normal {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-normal);
+}
+
+.so-progress-spinner--size-lg {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-lg);
+}
+
+.so-progress-spinner--size-xl {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-xl);
+}
+
+.so-progress-spinner--size-2xl {
+	--so-progress-spinner-size: var(--so-progress-spinner-size-2xl);
+}
+
+:where(.so-progress-spinner) {
+	inline-size: var(--so-progress-spinner-size);
+	block-size: var(--so-progress-spinner-size);
+}

package/src/components/radio-group.css

@@ -0,0 +1,130 @@
+/* ─── RadioGroup.Item ─────────────────────────────────────────
+ * Структура — только у элемента. У контейнера группы её нет намеренно
+ * (решение владельца): радио одной группы стоят где угодно в разметке — в
+ * строках списка, в ячейках таблицы, — и раскладку задаёт потребитель.
+ *
+ * Элемент — `label`: нативное радио, кольцо с точкой и подпись. Радио
+ * визуально скрыто, но остаётся в дереве доступности и в порядке фокуса:
+ * группировку по `name`, стрелки и один Tab-стоп даёт браузер, а клик по
+ * корню-`label` доходит до него сам.
+ *
+ * Сторона кольца по размеру — сторона коробки CheckBox (`check-box.css`):
+ * радио и чекбокс одного размера стоят в форме рядом, и кольцо обязано
+ * совпасть с коробкой. Кегль текста радио и зазор до него — шкала подписи
+ * (`caption.css`), общая с `Label` и `Field`: радио со своим текстом и радио
+ * в подписи выглядят одинаково. Сторона кольца — в переменной
+ * `--so-radio-control-size`: от неё считаются точка и выравнивание по первой
+ * строке подписи.
+ *
+ * Облик — рамка и поверхность кольца, точка и её появление, толщина кольца у
+ * вида `ring`, цвет текста, кольцо фокуса, варианты — рисует тема. */
+
+/* Контрол и подпись в строку. `inline-flex`, как у нативной пары «радио +
+ * подпись»: ширина по содержимому, и клик мимо текста радио не выбирает. Ни
+ * одного `left`/`right` — только `gap` и логические отступы, поэтому в RTL
+ * контрол сам встаёт справа: `dir` приходит на корень. */
+.so-radio-group-item {
+	position: relative;
+	display: inline-flex;
+	align-items: flex-start;
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-radio-group-item--size-sm {
+	--so-radio-control-size: var(--so-check-box-size-sm);
+	gap: var(--so-caption-gap-sm);
+	font-size: var(--so-caption-font-size-sm);
+	line-height: var(--so-caption-line-height-sm);
+}
+
+.so-radio-group-item--size-normal {
+	--so-radio-control-size: var(--so-check-box-size-normal);
+	gap: var(--so-caption-gap-normal);
+}
+
+.so-radio-group-item--size-lg {
+	--so-radio-control-size: var(--so-check-box-size-lg);
+	gap: var(--so-caption-gap-lg);
+	font-size: var(--so-caption-font-size-lg);
+	line-height: var(--so-caption-line-height-lg);
+}
+
+.so-radio-group-item--size-xl {
+	--so-radio-control-size: var(--so-check-box-size-xl);
+	gap: var(--so-caption-gap-xl);
+	font-size: var(--so-caption-font-size-xl);
+	line-height: var(--so-caption-line-height-xl);
+}
+
+.so-radio-group-item--size-2xl {
+	--so-radio-control-size: var(--so-check-box-size-2xl);
+	gap: var(--so-caption-gap-2xl);
+	font-size: var(--so-caption-font-size-2xl);
+	line-height: var(--so-caption-line-height-2xl);
+}
+
+/* Нативное радио скрыто визуально, а не убрано: в дереве доступности и в
+ * порядке фокуса оно остаётся. */
+.so-radio-group-item__input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+.so-radio-group-item__control {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: var(--so-radio-control-size);
+	height: var(--so-radio-control-size);
+}
+
+/* Точка — половина кольца. Стоит всегда, а видна ли она, решает вид темы. */
+.so-radio-group-item__indicator {
+	width: calc(var(--so-radio-control-size) / 2);
+	height: calc(var(--so-radio-control-size) / 2);
+}
+
+/* Подпись. Её может не быть: радио без текста — законный случай, подпись
+ * тогда лежит в соседнем элементе. Пустая обёртка места не занимает, иначе
+ * зазор остался бы рядом с одиноким кольцом.
+ *
+ * `baseline` делает первую строку подписи базовой линией всего элемента: в
+ * строке формы рядом с чужим текстом подпись встаёт с ним на одну линию.
+ * Контрол выше строки (крупный размер при плотном интерлиньяже) — подпись
+ * опускается к его середине. */
+.so-radio-group-item__text {
+	align-self: baseline;
+	margin-block-start: max(0px, (var(--so-radio-control-size) - 1lh) / 2);
+}
+
+.so-radio-group-item__text:empty {
+	display: none;
+}
+
+/* Многострочная подпись: контрол стоит у первой строки, а не посередине
+ * всего текста — опускается к середине строки высотой `1lh`. Без подписи
+ * сдвига нет: одинокое радио ровно в размер коробки CheckBox. */
+.so-radio-group-item:has(> .so-radio-group-item__text:not(:empty)) > .so-radio-group-item__control {
+	margin-block-start: max(0px, (1lh - var(--so-radio-control-size)) / 2);
+}
+
+/* Выключенное — `data-disabled`: ядро пишет его на корне при любом теге.
+ * Гаснет элемент целиком — и контрол, и подпись (`disabled.css`). */
+.so-radio-group-item[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	cursor: default;
+}
+
+.so-radio-group-item[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}

package/src/components/rating.css

@@ -0,0 +1,141 @@
+/* ─── Rating ──────────────────────────────────────────────────
+ * Оценка звёздами: ползунок с одной ручкой, у которого шкала — ряд звёзд.
+ *
+ *   .so-rating                  корень — строчный
+ *     .so-rating__track         дорожка — ряд звёзд
+ *       .so-rating__star        звезда — ячейка ряда, в ней иконка пустой звезды
+ *         .so-rating__star-fill слой заливки — та же иконка, обрезанная по доле
+ *       .so-rating__thumb       ручка — невидимая, во весь ряд
+ *         .so-rating__input     поле — нативный range, прозрачный, во всю ручку
+ *
+ * Доля заливки звезды приходит от ядра переменной в `style` звезды:
+ * `--so-rating-fraction`, число от 0 до 1. Слой заливки — от начала строки на
+ * эту долю звезды: он обрезает иконку, а не сжимает её, и в RTL заливка сама
+ * идёт справа налево, без селектора по направлению. Иконка обоих слоёв — во
+ * всю звезду: и `svg` роли, и иконка из слота, у которой размер свой (шкала
+ * иконок, `components/icon.css`).
+ *
+ * Контракт с плагином указателя — как у Slider: коробка `__track` и есть
+ * шкала, 0 и 1 доли — её края по оси. Поэтому звёзды стоят в ней встык и
+ * равными ячейками, ничего сверх них в ряду нет: доля коробки ложится на
+ * звёзды без остатка, а половина звезды по указателю — ровно половина значка.
+ * Звезда — коробка иконки целиком, с полями, которые оставляет вокруг значка
+ * пакет: зазор между звёздами — поля соседних коробок, своего у ряда нет.
+ *
+ * Корень строчный: оценку ставят в строку текста — «4,5 ★★★★☆ (120)».
+ * Нажатие в любом месте ряда ставит оценку, протяжка не выделяет текст
+ * вокруг. Ручка — невидимая и во весь ряд: в ней поле, а на ней тема рисует
+ * кольцо фокуса — вокруг всех звёзд. Указатель ни она, ни поле не ловят:
+ * наведение и нажатие достаются звёздам и корню, где их ловят плагины. Только
+ * для показа — курсор обычный: нажатие оценку не меняет.
+ *
+ * Шкала размеров — сторона звезды, переменная корня документа по размеру
+ * (`sm`…`2xl`); блок берёт ступень своего размера в `--so-rating-star-size`.
+ * Умолчания — числа темы oren, тема задаёт свои на корне документа.
+ *
+ * Облик — цвет пустой и залитой звезды, вид ошибки, подъём звезды под
+ * указателем, кольцо фокуса и вид в режиме принудительных цветов — рисует
+ * тема. */
+
+:root {
+	--so-rating-star-size-sm: 1.25rem;
+	--so-rating-star-size-normal: 1.5rem;
+	--so-rating-star-size-lg: 1.75rem;
+	--so-rating-star-size-xl: 2rem;
+	--so-rating-star-size-2xl: 2.25rem;
+}
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок и
+ * без него обязан выглядеть умолчанием. */
+.so-rating {
+	--so-rating-star-size: var(--so-rating-star-size-normal);
+	display: inline-flex;
+	vertical-align: middle;
+	-webkit-user-select: none;
+	user-select: none;
+	cursor: pointer;
+}
+
+.so-rating__track {
+	position: relative;
+	display: flex;
+}
+
+.so-rating__star {
+	position: relative;
+	display: flex;
+	flex-shrink: 0;
+	inline-size: var(--so-rating-star-size);
+	block-size: var(--so-rating-star-size);
+}
+
+.so-rating__star-fill {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	display: flex;
+	inline-size: calc(var(--so-rating-fraction, 0) * 100%);
+	overflow: hidden;
+}
+
+/* Слой заливки уже звезды, и иконка в нём не сжимается. */
+.so-rating__star > :not(.so-rating__star-fill),
+.so-rating__star > .so-rating__star-fill > * {
+	flex: none;
+	inline-size: var(--so-rating-star-size);
+	block-size: var(--so-rating-star-size);
+}
+
+.so-rating__thumb {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.so-rating__input {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+	appearance: none;
+	pointer-events: none;
+}
+
+.so-rating:where([data-readonly='true']) {
+	cursor: default;
+}
+
+/* Выключенная — `data-disabled`: ядро пишет его на корне при любом теге.
+ * Гаснет оценка целиком (`disabled.css`) и нажатий не ловит. */
+.so-rating[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+.so-rating[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+.so-rating--size-sm {
+	--so-rating-star-size: var(--so-rating-star-size-sm);
+}
+
+.so-rating--size-normal {
+	--so-rating-star-size: var(--so-rating-star-size-normal);
+}
+
+.so-rating--size-lg {
+	--so-rating-star-size: var(--so-rating-star-size-lg);
+}
+
+.so-rating--size-xl {
+	--so-rating-star-size: var(--so-rating-star-size-xl);
+}
+
+.so-rating--size-2xl {
+	--so-rating-star-size: var(--so-rating-star-size-2xl);
+}