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

package/src/components/input.css

@@ -0,0 +1,189 @@
+/* ─── Input ───────────────────────────────────────────────────
+ * Поле ввода в строку — коробка поля семьи Input: слот `leading` у начала
+ * поля, ввод, слот `trailing` у конца. Ввод растёт на всё место между
+ * слотами, слоты стоят у краёв, а стороны логические: в RTL `leading` стоит
+ * справа, и поле слота у него справа.
+ *
+ *   .so-input                 корень — коробка поля
+ *     .so-input__leading      слот у начала
+ *     input                   ввод, без класса
+ *     .so-input__trailing     слот у конца
+ *       .so-input__clear      кнопка очистки, первой в слоте — Button
+ *
+ * Геометрия поля — значениями, а не процентами: высота размера
+ * (`--so-input-height`, правила размера), рамка, просвет слота от рамки и
+ * строка слота — высота размера без рамки и двух просветов. В строку встают
+ * слоты и теги в них (`components/tags.css`) и кнопка очистки — квадрат в
+ * строку слота. Процентом от поля нельзя: поле Select с тегами растёт по
+ * строкам тегов, а процент от поля с авто-высотой не разрешается — тег и
+ * очистка взяли бы высоту размера целиком.
+ *
+ * Шкала поля — переменные корня документа по размеру (`sm`…`2xl`): высота,
+ * кегль и интерлиньяж текста, отступ текста от рамки. Шкала — не только
+ * Input: по ней стоят поля той же семьи — Textarea (`textarea.css`) и
+ * NumberInput (`number-input.css`), — и в одной форме они вровень по высоте и
+ * по началу текста. Кегля у `normal` нет: поле берёт кегль места.
+ * Интерлиньяж шкалы — строка многострочного поля: у поля в строку она во всю
+ * высоту поля. Умолчания — числа темы oren; тема задаёт свои на корне
+ * документа.
+ *
+ * Рамку рисует тема, и её толщину база не объявляет: без темы рамки нет.
+ * Толщину тема задаёт на блоке (`--so-input-border`, контракт), и строка
+ * слота считается без неё.
+ *
+ * Облик — рамка, поверхность, скругление, кольцо фокуса, подсказка пустого
+ * поля, вид кнопки очистки, цвет точки обязательного поля, варианты и
+ * ошибка — рисует тема. */
+
+:root {
+	--so-input-height-sm: 1.75rem;
+	--so-input-height-normal: 2rem;
+	--so-input-height-lg: 2.25rem;
+	--so-input-height-xl: 2.5rem;
+	--so-input-height-2xl: 2.75rem;
+
+	/* The text of a field counts from the font of the place, which `normal`
+	 * takes as is: `sm` is 2px smaller, `lg`, `xl` and `2xl` 2px, 4px and 8px
+	 * larger — 14 / 16 / 18 / 20 / 24px at a 16px place, 12 / 14 / 16 / 18 /
+	 * 22px at 14px. `em` resolves where the variable is read, against the
+	 * parent, that is the place the part stands in. */
+	--so-input-font-size-sm: calc(1em - 0.125rem);
+	--so-input-line-height-sm: calc(1.25 / 0.875);
+	--so-input-line-height-normal: 1.5;
+	--so-input-font-size-lg: calc(1em + 0.125rem);
+	--so-input-line-height-lg: calc(1.75 / 1.125);
+	--so-input-font-size-xl: calc(1em + 0.25rem);
+	--so-input-line-height-xl: calc(1.75 / 1.25);
+	--so-input-font-size-2xl: calc(1em + 0.5rem);
+	--so-input-line-height-2xl: calc(2 / 1.5);
+
+	--so-input-indent-sm: 0.375rem;
+	--so-input-indent-normal: 0.5rem;
+	--so-input-indent-lg: 0.625rem;
+	--so-input-indent-xl: 0.75rem;
+	--so-input-indent-2xl: 0.875rem;
+
+	--so-input-slot-gap: 3px;
+	--so-input-slot-padding: 0.25rem;
+	--so-input-slot-spacing: 0.25rem;
+
+	--so-input-min-width: 10rem;
+	--so-input-text-min-width: 4rem;
+}
+
+/* Строка по центру. `inline-flex` сжимается по содержимому, и минимум
+ * ширины держит поле в узком контейнере: без него оно уходило в полосу.
+ * `relative` — опора точки обязательного поля (`required.css`). */
+.so-input {
+	--so-input-slot-row: calc(
+		var(--so-input-height) - 2 * var(--so-input-border, 0px) - 2 * var(--so-input-slot-gap)
+	);
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	height: var(--so-input-height);
+	min-width: var(--so-input-min-width);
+}
+
+/* Выключенное поле гаснет коробкой целиком — с вводом, иконками слотов и
+ * кнопками (`disabled.css`). Корень — `div`, и `:disabled` у него не
+ * срабатывает: выключено вложенное поле, и выключенность читается с него. Его
+ * тег фиксирован, поэтому псевдокласс на нём надёжен, а нативный `disabled`
+ * поля ставит и выключенный предок `<fieldset>`. Поле — прямой ребёнок корня:
+ * ввод в слоте (разметка потребителя) выключенность поля не решает. Нажатия
+ * коробка не гасит: в слотах — разметка потребителя. */
+.so-input:has(> input:disabled) {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-input:has(> input:disabled) > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Ввод — всё место между слотами, но не уже своего минимума: в узком поле
+ * уступают слоты. Строка ввода — во всю высоту поля, и текст стоит по центру
+ * коробки. */
+.so-input input {
+	width: 100%;
+	min-width: var(--so-input-text-min-width);
+	line-height: var(--so-input-height);
+}
+
+.so-input input:disabled {
+	cursor: default;
+}
+
+/* Высота слота — строка поля, а не процент от него: у поля Select с тегами
+ * высота авто. */
+.so-input__leading,
+.so-input__trailing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--so-input-slot-spacing);
+	height: var(--so-input-slot-row);
+}
+
+.so-input__leading {
+	padding-inline-start: var(--so-input-slot-padding);
+}
+
+.so-input__trailing {
+	padding-inline-end: var(--so-input-slot-padding);
+}
+
+/* Кнопка очистки — первой в слоте у конца, квадрат со стороной в строку
+ * слота: на том же просвете от рамки, что и содержимое слотов, и на любом
+ * размере не выше строки. Поля шкалы Button у неё нет. Не сжимается: в узком
+ * поле уступает ввод, а не кнопка. Цель на мелком размере ей добирает зона
+ * нажатия (`target.css`). */
+.so-input__clear {
+	flex-shrink: 0;
+	padding-inline: 0;
+	inline-size: var(--so-input-slot-row);
+	block-size: var(--so-input-slot-row);
+}
+
+.so-input--size-sm {
+	--so-input-height: var(--so-input-height-sm);
+}
+
+.so-input--size-sm input {
+	font-size: var(--so-input-font-size-sm);
+	text-indent: var(--so-input-indent-sm);
+}
+
+.so-input--size-normal {
+	--so-input-height: var(--so-input-height-normal);
+}
+
+.so-input--size-normal input {
+	text-indent: var(--so-input-indent-normal);
+}
+
+.so-input--size-lg {
+	--so-input-height: var(--so-input-height-lg);
+}
+
+.so-input--size-lg input {
+	font-size: var(--so-input-font-size-lg);
+	text-indent: var(--so-input-indent-lg);
+}
+
+.so-input--size-xl {
+	--so-input-height: var(--so-input-height-xl);
+}
+
+.so-input--size-xl input {
+	font-size: var(--so-input-font-size-xl);
+	text-indent: var(--so-input-indent-xl);
+}
+
+.so-input--size-2xl {
+	--so-input-height: var(--so-input-height-2xl);
+}
+
+.so-input--size-2xl input {
+	font-size: var(--so-input-font-size-2xl);
+	text-indent: var(--so-input-indent-2xl);
+}

package/src/components/label.css

@@ -0,0 +1,160 @@
+/* ─── Label ───────────────────────────────────────────────────
+ * Подпись контрола: текст рядом с CheckBox, Switch или радио. Корень —
+ * `label`, связь с контролом — вложением: клик по тексту доходит до поля
+ * контрола, и контрол переключается.
+ *
+ * Корень — `inline-flex`, как у радио со своим текстом: ширина по
+ * содержимому, и клик мимо текста контрол не переключает. Порядок в DOM один
+ * на все стороны — контрол, потом текст, — сторону ставит модификатор
+ * `--position-*`. Сторона по умолчанию, `end`, — это сам блок, правила у
+ * `--position-end` нет. Ни одного `left`/`right`: `start` и `end`
+ * логические, и в RTL текст сам встаёт с другой стороны — `dir` приходит на
+ * корень.
+ *
+ * Размер — кегль текста и зазор до контрола, по шкале подписи
+ * (`caption.css`). Кегль — у текста и распорки, а не у корня: иконки
+ * контрола меряются в `em` (`icon.css`), и кегль подписи раздул бы галку
+ * CheckBox и иконки в ручке Switch. Зазоры — переменными блока: сбоку
+ * `--so-label-gap`, в столбце `--so-label-stack`. Без модификатора размера —
+ * `normal`.
+ *
+ * Облик — цвет текста и вариант — рисует тема. */
+
+/* `baseline` ровняет распорку контрола (`__control::before`) с первой
+ * строкой текста. Заодно первая строка становится базовой линией всей
+ * подписи: в строке формы рядом с чужим текстом подпись встаёт с ним на одну
+ * линию. */
+.so-label {
+	--so-label-gap: var(--so-caption-gap-normal);
+	--so-label-stack: var(--so-caption-stack-normal);
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--so-label-gap);
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-label--size-sm {
+	--so-label-gap: var(--so-caption-gap-sm);
+	--so-label-stack: var(--so-caption-stack-sm);
+}
+
+.so-label--size-sm > .so-label__text,
+.so-label--size-sm > .so-label__control::before {
+	font-size: var(--so-caption-font-size-sm);
+	line-height: var(--so-caption-line-height-sm);
+}
+
+.so-label--size-normal {
+	--so-label-gap: var(--so-caption-gap-normal);
+	--so-label-stack: var(--so-caption-stack-normal);
+}
+
+.so-label--size-lg {
+	--so-label-gap: var(--so-caption-gap-lg);
+	--so-label-stack: var(--so-caption-stack-lg);
+}
+
+.so-label--size-lg > .so-label__text,
+.so-label--size-lg > .so-label__control::before {
+	font-size: var(--so-caption-font-size-lg);
+	line-height: var(--so-caption-line-height-lg);
+}
+
+.so-label--size-xl {
+	--so-label-gap: var(--so-caption-gap-xl);
+	--so-label-stack: var(--so-caption-stack-xl);
+}
+
+.so-label--size-xl > .so-label__text,
+.so-label--size-xl > .so-label__control::before {
+	font-size: var(--so-caption-font-size-xl);
+	line-height: var(--so-caption-line-height-xl);
+}
+
+.so-label--size-2xl {
+	--so-label-gap: var(--so-caption-gap-2xl);
+	--so-label-stack: var(--so-caption-stack-2xl);
+}
+
+.so-label--size-2xl > .so-label__text,
+.so-label--size-2xl > .so-label__control::before {
+	font-size: var(--so-caption-font-size-2xl);
+	line-height: var(--so-caption-line-height-2xl);
+}
+
+/* Обёртка контрола. Контрол не сжимается, какой бы длинной ни была
+ * подпись. */
+.so-label__control {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+}
+
+/* Распорка — строка нулевой ширины кеглем текста. Обёртка с ней не ниже
+ * строки, контрол стоит по её центру, а базовая линия обёртки — базовая
+ * линия распорки. Корень ровняет эту линию с первой строкой текста, и
+ * контрол встаёт по центру первой строки. Контрол выше строки — опускается
+ * уже текст, к середине контрола. Высоту контрола знать не нужно, поэтому
+ * размеры подписи и контрола вправе не совпасть, а в обёртке может стоять
+ * любой контрол. `hidden` убирает распорку из доступного имени. */
+.so-label__control::before {
+	content: '\200b';
+	visibility: hidden;
+}
+
+/* Пустая обёртка текста места не занимает, иначе зазор остался бы рядом с
+ * одиноким контролом. */
+.so-label__text:empty {
+	display: none;
+}
+
+.so-label--position-start > .so-label__text {
+	order: -1;
+}
+
+/* Текст над контролом и под ним — столбец, прижатый к началу строки. Зазор —
+ * `stack` шкалы подписи. Распорки нет: ровнять по строке нечего, а обёртка
+ * высотой в строку добавила бы зазора вокруг контрола, который ниже строки. */
+.so-label--position-top,
+.so-label--position-bottom {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--so-label-stack);
+}
+
+.so-label--position-top > .so-label__control::before,
+.so-label--position-bottom > .so-label__control::before {
+	content: none;
+}
+
+.so-label--position-top > .so-label__text {
+	order: -1;
+}
+
+/* Выключенный контрол. Своего `disabled` у подписи нет — состояние у
+ * контрола, и подпись читает его по вложенному полю: тег поля у CheckBox,
+ * Switch и радио фиксирован. Гаснет только текст (`disabled.css`), контрол
+ * гасит себя сам. */
+.so-label:has(> .so-label__control input:disabled) {
+	cursor: default;
+}
+
+.so-label:has(> .so-label__control input:disabled) > .so-label__text {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-label:has(> .so-label__control input:disabled) > .so-label__text > * {
+	--so-disabled-opacity: 1;
+}
+
+/*
+ * A readonly control does not react to label clicks, so its label must not
+ * promise an action through a pointer cursor. Only the cursor is reset; the theme
+ * chooses text appearance. Read data-readonly on the direct control root without
+ * depending on its block name: Label may wrap CheckBox, Switch or a custom control.
+ */
+.so-label:has(> .so-label__control > [data-readonly='true']) {
+	cursor: default;
+}

package/src/components/list-box.css

@@ -0,0 +1,165 @@
+/* ─── ListBox ─────────────────────────────────────────────────
+ * Список выбора: шапка, узел списка и подвал столбцом.
+ *
+ *   .so-list-box                    корень — рамка вокруг шапки, списка и
+ *                                   подвала
+ *     .so-list-box__list            узел списка — элементы столбцом
+ *       .so-list-box-item           элемент — строка (Button)
+ *         .so-list-box-item__indicator  отметка выбранного
+ *       .so-list-box-group          группа — подпись и её элементы
+ *         .so-list-box-group__label подпись группы (`group.css`)
+ *       .so-list-box__separator     разделитель секций групп (`group.css`)
+ *       .so-list-box__filler        распорка окна `Virtual`
+ *
+ * Состояние (`data-disabled`, `data-content-fit`) ядро отдаёт на корень, а
+ * роль, имя и остановку Tab — узлу списка: в `listbox` ARIA пускает только
+ * опции и группы, и шапка с подвалом стоят рядом с ним.
+ *
+ * Части корня стоят с тем же зазором, что элементы в списке, а поле корня
+ * держит их от его края. Ширина — между минимумом и потолком: короткий список
+ * не складывается в узкий столбец, а длинный текст строки режется
+ * многоточием. `contentFit` — одно свойство на два уровня: со списка читается
+ * только `expand` (ширина контейнера — решение общее для всех строк), а
+ * перенос строки — с самого элемента. Парного правила переноса на корне нет
+ * намеренно: оно перекрывало бы элемент, отказавшийся от переноса.
+ *
+ * Прокручивается узел списка, а не корень: предел строк (`maxRows`)
+ * `TListHeightPlugin` ставит узлу списка — и элементам групп — инлайновыми
+ * `max-height` и прокруткой, и шапка с подвалом остаются на месте. Своих полей
+ * и рамки у узла нет, поэтому предел — ровно строки с зазорами. Высоту корня
+ * может ограничить и приложение: тогда сжимается и прокручивается тот же узел.
+ *
+ * Распорка окна (обёртка `Virtual`) — пустая полоса на месте пропущенных
+ * элементов, высотой в них (`--so-filler-height`, её пишет библиотека): без
+ * полей и рамок, под `aria-hidden`. Не сжимается: пустой флекс-элемент в
+ * списке под `max-height` сжался бы до нуля, и окно съехало бы к началу. Шаг
+ * окна — элемент и зазор списка, а высота распорки — пропущенные шаги
+ * целиком. Зазор за распоркой список добавит ещё раз, поэтому нижнее поле у
+ * неё — минус тот же зазор: иначе каждая распорка сдвигала бы элементы за
+ * собой.
+ *
+ * Группа — столбец с тем же зазором, что у узла списка, и не сжимается: в
+ * списке под пределом строк она прокручивается вместе с ним. Флекс у группы
+ * свой, и место элемента в составе (`order`) действует внутри неё. Подпись —
+ * с полями сверху и снизу поровну: вместе с зазором списка над группой и
+ * зазором группы под подписью над её текстом и под ним свободно одинаково.
+ *
+ * Строка элемента — прямой ребёнок, и её правила пишутся ребёнком, а не
+ * потомком: кнопка, которую потребитель положил в слот строки, тоже
+ * `.so-button`. Элемент списка — не кнопка действия: курсор обычный.
+ * Содержимое строки — у начала строки, как у заголовка Accordion. Отметка
+ * выбранного — обёртка, которая стоит и у невыбранных и держит ширину:
+ * размер — ей, а не иконке, и подменённая слотом иконка строку не сдвигает.
+ *
+ * Зазор, поле, минимум и потолок ширины — переменные корня документа: по ним
+ * же стоят список Select и панель Menu. Умолчания — числа темы oren; тема
+ * задаёт свои на корне документа.
+ *
+ * Облик — рамка корня и её наведение, кольцо фокуса узла списка, вид строк и
+ * отметки — рисует тема. */
+
+:root {
+	--so-list-box-gap: 0.25rem;
+	--so-list-box-padding: 0.25rem;
+	--so-list-box-min-width: 10rem;
+	--so-list-box-max-width: 20rem;
+	--so-list-box-group-label-padding: 0.25rem;
+}
+
+.so-list-box {
+	display: flex;
+	flex-direction: column;
+	gap: var(--so-list-box-gap);
+	min-width: var(--so-list-box-min-width);
+	max-width: var(--so-list-box-max-width);
+	padding: var(--so-list-box-padding);
+}
+
+/* Выключенный список гаснет корнем целиком — рамкой, шапкой, строками и
+ * подвалом (`disabled.css`). Строки выключены вместе с ним и под погасшим
+ * корнем второй раз не гаснут. */
+.so-list-box[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-list-box[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+.so-list-box[data-content-fit='expand'] {
+	width: max-content;
+	min-width: 0;
+	max-width: none;
+}
+
+.so-list-box__list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--so-list-box-gap);
+	min-height: 0;
+	overflow-y: auto;
+}
+
+.so-list-box__filler {
+	flex-shrink: 0;
+	margin-block-end: calc(-1 * var(--so-list-box-gap));
+	block-size: var(--so-filler-height, 0);
+}
+
+.so-list-box-group {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+	gap: var(--so-list-box-gap);
+}
+
+.so-list-box-group__label {
+	padding-block: var(--so-list-box-group-label-padding);
+}
+
+/* Секции без разделителя — `groupSeparators` выключен, у ListBox это
+ * умолчание: группа за группой или за элементом без группы и элемент без
+ * группы за группой. Сверх линии разделитель занимал зазор списка, и секция
+ * отступает на него и на линию — встаёт там же, где стояла бы за
+ * разделителем (`group.css`). */
+:is(.so-list-box-group, .so-list-box-item) + .so-list-box-group,
+.so-list-box-group + .so-list-box-item {
+	margin-block-start: calc(var(--so-list-box-gap) + var(--so-group-separator-width, 0px));
+}
+
+.so-list-box-item {
+	min-height: fit-content;
+}
+
+.so-list-box-item > .so-button {
+	cursor: default;
+}
+
+/* Область целиком, а не её текст: отступы детей — нулевой специфичности, и
+ * собственный класс содержимого с отступом их перекрывает (`button.css`). */
+.so-list-box-item > .so-button > .so-button__text {
+	min-width: 0;
+	text-align: start;
+}
+
+:where(.so-list-box-item > .so-button > .so-button__text > *) {
+	margin-inline: 0 auto;
+}
+
+.so-list-box-item__indicator {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+}
+
+.so-list-box-item[data-content-fit='wrap'] > .so-button {
+	min-height: fit-content;
+}
+
+.so-list-box-item[data-content-fit='wrap'] > .so-button > .so-button__text {
+	white-space: normal;
+	overflow: visible;
+}