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

package/src/components/menu.css

@@ -0,0 +1,224 @@
+/* ─── Menu ────────────────────────────────────────────────────
+ * Меню действий у кнопки (APG Menu Button): триггер потребителя и панель с
+ * пунктами. Пункт выполняет действие, флажок и переключатель ещё и
+ * отмечаются, пункт с подменю (`Menu.Submenu`) открывает сбоку такую же
+ * панель меню, а пункт с панелью (`Menu.PopoverItem`) — свою панель с любым
+ * содержимым.
+ *
+ *   .so-menu                      корень — обёртка триггера и якорь панели
+ *   .so-menu__panel               панель меню и подменю — Frame в `body`
+ *     .so-menu__list              список пунктов — прокручивается он
+ *       .so-menu-item             пункт — строка (Button)
+ *         .so-menu-item__indicator  отметка флажка и переключателя
+ *           .so-menu-item__dot    точка отмеченного переключателя
+ *         .so-menu-item__icon     значок
+ *         .so-menu-item__shortcut подсказка сочетания клавиш
+ *         .so-menu-item__arrow    стрелка пункта с подменю и с панелью
+ *       .so-menu-group            группа — подпись и её пункты
+ *         .so-menu-group__label   подпись группы (`group.css`)
+ *       .so-menu-separator        разделитель (`group.css`)
+ *   .so-menu-item__panel          панель пункта — Frame в `body`
+ *     .so-menu-item__content      её содержимое — прокручивается оно
+ *
+ * Корень — строчный флекс, как у Popover: в строке текста он встаёт строчным
+ * элементом, во флекс-ряду — обычным элементом ряда, а прямоугольник корня —
+ * прямоугольник триггера, и якорю есть что мерить.
+ *
+ * Ширина панели меню — по самому широкому пункту: список просит ширину
+ * содержимого целиком, и от места панели у края окна она не зависит. Минимум и
+ * потолок — те же, что у ListBox (`components/list-box.css`): короткое меню
+ * не складывается в узкий столбец, а длинный текст пункта режется
+ * многоточием. Потолок не шире окна — сдвиг `TAnchorPlugin` держит панель в
+ * окне, только пока она в него помещается. Высота — как у Popover: панель
+ * встаёт на ту сторону от якоря, где места больше, и длинное меню
+ * прокручивается внутри панели, а не уходит за край окна.
+ *
+ * Список растёт на всю панель, когда минимум панели шире пунктов, и
+ * сжимается, когда упирается в её потолок, — тогда текст пунктов режется
+ * многоточием. Поле — внутри прокрутки: подсвеченная строка не прижата к
+ * кромке. Зазоров между пунктами у списка нет — место между секциями дают поля
+ * разделителя.
+ *
+ * Пункт не сжимается: длинное меню прокручивается, а не сплющивает пункты.
+ * Строка — прямой ребёнок пункта, и её правила пишутся ребёнком: кнопка,
+ * которую положили в слот строки, тоже `.so-button`. Пункт — не кнопка в
+ * форме: курсор обычный, а текст не выделяется протяжкой — меню нажимают,
+ * ведут указатель к пункту и отпускают на нём. Содержимое строки — у начала
+ * строки.
+ *
+ * Колонки в начале строки — отметка и значок, каждая в квадрат кегля строки:
+ * ширину держит обёртка, а не иконка, и подменённая слотом иконка строку не
+ * сдвигает. Колонки держит всё меню, когда они есть хоть у одного пункта, —
+ * как меню macOS: тексты пунктов встают одной колонкой. Обёртку отметки
+ * рисуют только флажок и переключатель, и пункту без неё место держит пустой
+ * первый кусок строки (`::before`) — в ряд частей строки, с её зазором, и в
+ * RTL тоже у начала. Обёртка значка есть у каждого пункта, и пустая места не
+ * занимает, пока значка нет ни у одного пункта меню. Подсказка сочетания и
+ * стрелка — у конца строки, в одну строку, и не сжимаются: длинный текст
+ * пункта режется раньше них. Отступ от текста шире зазора частей строки:
+ * подсказки и стрелки встают колонкой у края, а не продолжением текста.
+ *
+ * Разделитель — линия во всю ширину списка поверх его поля, с полями сверху и
+ * снизу. Секция без разделителя отступает на его поля и место линии
+ * (`group.css`).
+ *
+ * Панель пункта — немодальный диалог сбоку от строки, а не меню: в ней лежит
+ * что угодно. Ширина — по содержимому, без потолка панели меню: календарь в
+ * несколько месяцев не должен сжиматься. Потолок — окно без `1rem`, и по
+ * высоте тоже: сбоку панель стоит вровень со строкой, и половины окна, как у
+ * панелей над и под якорем, ей никто не обещал. Содержимое просит ширину
+ * целиком, как у Popover, и прокручивается, а поля — внутри прокрутки, как у
+ * содержимого Popover.
+ *
+ * Поле списка, поля разделителя и подписи, точка переключателя и отступ
+ * подсказки — переменные корня документа; умолчания — числа темы oren, тема
+ * задаёт свои на корне документа.
+ *
+ * Облик — поверхность, кромка, тень и скругление панелей, их проявление и
+ * исчезание, цвет строк и подсветка пункта, вид строки, цвет подсказки и
+ * стрелки, зеркало стрелки в RTL, форма точки — рисует тема. */
+
+:root {
+	--so-menu-padding: 0.25rem;
+	--so-menu-separator-margin: 0.25rem;
+	--so-menu-group-label-padding: 0.5rem;
+	--so-menu-dot-size: 0.4em;
+	--so-menu-shortcut-gap: 1em;
+}
+
+.so-menu {
+	display: inline-flex;
+}
+
+.so-menu__panel,
+.so-menu-item__panel {
+	overflow: hidden;
+}
+
+.so-menu__panel {
+	display: flex;
+	min-width: var(--so-list-box-min-width);
+	max-width: min(var(--so-list-box-max-width), calc(100vw - 1rem));
+	max-height: min(var(--so-popover-max-height), calc(50dvh - 1.5rem));
+}
+
+.so-menu__list {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	align-self: stretch;
+	width: max-content;
+	min-width: 0;
+	padding: var(--so-menu-padding);
+	overflow-y: auto;
+}
+
+.so-menu-item {
+	flex-shrink: 0;
+}
+
+.so-menu-item > .so-button {
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-menu-item > .so-button > .so-button__text {
+	min-width: 0;
+	text-align: start;
+}
+
+:where(.so-menu-item > .so-button > .so-button__text > *) {
+	margin-inline: 0 auto;
+}
+
+.so-menu-item__indicator,
+.so-menu-item__icon {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+}
+
+.so-menu-item__icon:empty {
+	display: none;
+}
+
+.so-menu-item__dot {
+	width: var(--so-menu-dot-size);
+	height: var(--so-menu-dot-size);
+}
+
+.so-menu-item__shortcut {
+	flex-shrink: 0;
+	margin-inline-start: var(--so-menu-shortcut-gap);
+	white-space: nowrap;
+}
+
+.so-menu-item__shortcut:empty {
+	display: none;
+}
+
+.so-menu-item__arrow {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	margin-inline-start: var(--so-menu-shortcut-gap);
+}
+
+.so-menu__list:has(.so-menu-item__indicator)
+	.so-menu-item:not(:has(> .so-button > .so-menu-item__indicator))
+	> .so-button::before {
+	content: '';
+	flex-shrink: 0;
+	width: 1em;
+}
+
+.so-menu__list:has(.so-menu-item__icon:not(:empty)) .so-menu-item__icon:empty {
+	display: inline-flex;
+}
+
+.so-menu-group {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+}
+
+.so-menu-group__label {
+	padding-block: var(--so-menu-group-label-padding);
+}
+
+.so-menu-separator {
+	margin-block: var(--so-menu-separator-margin);
+	margin-inline: calc(-1 * var(--so-menu-padding));
+}
+
+/* Секции без разделителя — `groupSeparators` меню или подменю выключен:
+ * группа за группой или за пунктом без группы и пункт без группы за группой.
+ * Зазоров у списка нет, и без места пункты без группы встали бы вплотную к
+ * пунктам последней группы. */
+:is(.so-menu-group, .so-menu-item) + .so-menu-group,
+.so-menu-group + .so-menu-item {
+	margin-block-start: calc(
+		2 * var(--so-menu-separator-margin) + var(--so-group-separator-width, 0px)
+	);
+}
+
+.so-menu-item__panel {
+	display: flex;
+	max-width: calc(100vw - 1rem);
+	max-height: calc(100dvh - 1rem);
+}
+
+.so-menu-item__content {
+	width: max-content;
+	min-width: 0;
+	padding: var(--so-popover-padding);
+	overflow-y: auto;
+	overflow-wrap: break-word;
+}

package/src/components/number-input.css

@@ -0,0 +1,183 @@
+/* ─── NumberInput ─────────────────────────────────────────────
+ * Поле числа семьи Input: ввод и кнопки шага «меньше» и «больше».
+ *
+ *   .so-number-input                   корень — коробка поля
+ *     .so-number-input__leading        слот перед числом
+ *     .so-number-input__input          ввод — число строкой Intl
+ *     .so-number-input__trailing       слот после числа
+ *       .so-number-input__clear        кнопка очистки, первой в слоте — Button
+ *     .so-number-input__stepper        кнопки шага — у конца поля
+ *       .so-number-input__decrement    «меньше» — Button
+ *       .so-number-input__increment    «больше» — Button
+ *
+ * Коробка — та же, что у Input (`input.css`): высота размера, строка слота,
+ * слоты у краёв логическими сторонами. Шкала — шкала поля: высота, кегль и
+ * отступ числа от рамки те же, что у Input того же размера, и NumberInput
+ * стоит вровень с ним в одной форме. Ширина — минимум Input, а не по
+ * содержимому: длина числа заранее не известна, и поле без минимума
+ * схлопнулось бы до кнопок.
+ *
+ * Рамку рисует тема и задаёт её толщину на блоке
+ * (`--so-number-input-border`, контракт): строка слота считается без неё.
+ *
+ * Облик — рамка, поверхность, скругление, кольцо фокуса, подсказка пустого
+ * поля, цифры одной ширины, вид кнопок и их удержания, цвет точки
+ * обязательного поля, варианты и ошибка — рисует тема. */
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок
+ * и без него обязан выглядеть умолчанием. `relative` — опора точки
+ * обязательного поля (`required.css`). */
+.so-number-input {
+	--so-number-input-height: var(--so-input-height-normal);
+	--so-number-input-slot-row: calc(
+		var(--so-number-input-height) - 2 * var(--so-number-input-border, 0px) - 2 *
+			var(--so-input-slot-gap)
+	);
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	height: var(--so-number-input-height);
+	min-width: var(--so-input-min-width);
+}
+
+/* Выключенное поле гаснет коробкой целиком, с кнопками и содержимым слотов
+ * (`disabled.css`). Выключенность корень несёт сам (`data-disabled`): искать
+ * её у вложенного ввода незачем, а `:disabled` у корня-`div` не срабатывает. */
+.so-number-input[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-number-input[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Отступ числа — полями поровну с обеих сторон, а не `text-indent`, как у
+ * Input: отступ строки стоит у начала по направлению самого ввода, а число
+ * стоит у начала поля (ниже). Когда направления разные — число справа налево
+ * в поле слева направо, — отступ ушёл бы к другому краю, и число легло бы
+ * вплотную к рамке. У начала поля текст стоит там же, где у Input. Строка
+ * ввода — во всю высоту поля. Кегль — вводу, а не корню: слоты — разметка
+ * потребителя. */
+.so-number-input > .so-number-input__input {
+	padding-inline: var(--so-input-indent-normal);
+	line-height: var(--so-number-input-height);
+}
+
+/* Число — у начала поля, как текст Input: в форме поля стоят столбцом, и
+ * значение каждого начинается там же, где у соседей.
+ *
+ * Начало — поля, а не самого ввода (`match-parent`). У числа своё
+ * направление письма: строку Intl `ar-EG`, `he-IL` и `fa-IR` пишут справа
+ * налево, `ru-RU` — слева направо на любой странице, и порядок знака, валюты и
+ * единицы в ней верен, только когда направление ввода — направление числа.
+ * Со `start` такой ввод ставил бы число к концу поля, когда направления числа
+ * и поля разные. Без своего `dir` у ввода `match-parent` — то же `start`.
+ * Chromium понимает только `-webkit-match-parent`, Firefox — стандартное
+ * `match-parent`: браузер оставляет объявление, которое понял, а понявший
+ * оба — последнее, стандартное. */
+.so-number-input__input {
+	width: 100%;
+	min-width: var(--so-input-text-min-width);
+	text-align: -webkit-match-parent;
+	text-align: match-parent;
+}
+
+.so-number-input[data-disabled='true'] > .so-number-input__input {
+	cursor: default;
+}
+
+/* Слоты и кнопки шага — строкой поля, со сторонами по направлению поля, как
+ * у Input. Не сжимаются: в узком поле уступает ввод, а не кнопки. */
+.so-number-input__leading,
+.so-number-input__trailing,
+.so-number-input__stepper {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	gap: var(--so-input-slot-spacing);
+	height: var(--so-number-input-slot-row);
+}
+
+.so-number-input__leading {
+	padding-inline-start: var(--so-input-slot-padding);
+}
+
+.so-number-input__trailing {
+	padding-inline-end: var(--so-input-slot-padding);
+}
+
+/* Кнопки шага — одна пара, а не ещё две кнопки в ряду со слотом: от очистки
+ * и содержимого `trailing` их отделяет двойной зазор — поле слота у его конца
+ * и своё у начала. Ровным шагом «× − +» читались бы тремя равными
+ * действиями, а очистка относится к числу, а не к шагу. У конца поля поле
+ * то же, что у слота. В RTL ряд зеркален сам — флекс поля идёт по его
+ * направлению, — и «больше» стоит у левого края. */
+.so-number-input__stepper {
+	padding-inline: var(--so-input-slot-padding);
+}
+
+/* Кнопки — квадраты в строку слота, как очистка Input: рядом, а не столбцом
+ * по половине строки, как стрелки нативного поля, — половина строки не дала
+ * бы цели ни на одном размере. Цель на мелком размере добирает зона нажатия
+ * (`target.css`); зоны пары сходятся встык, а до очистки и ввода не достают:
+ * от них пару отделяет её поле. */
+.so-number-input__clear,
+.so-number-input__decrement,
+.so-number-input__increment {
+	flex-shrink: 0;
+	padding-inline: 0;
+	inline-size: var(--so-number-input-slot-row);
+	block-size: var(--so-number-input-slot-row);
+}
+
+/* Шаг повторяют касаниями подряд: двойное касание не увеличивает страницу, а
+ * шагает дважды. */
+.so-number-input__decrement,
+.so-number-input__increment {
+	touch-action: manipulation;
+}
+
+.so-number-input--size-sm {
+	--so-number-input-height: var(--so-input-height-sm);
+}
+
+.so-number-input--size-sm > .so-number-input__input {
+	font-size: var(--so-input-font-size-sm);
+	padding-inline: var(--so-input-indent-sm);
+}
+
+.so-number-input--size-normal {
+	--so-number-input-height: var(--so-input-height-normal);
+}
+
+.so-number-input--size-normal > .so-number-input__input {
+	padding-inline: var(--so-input-indent-normal);
+}
+
+.so-number-input--size-lg {
+	--so-number-input-height: var(--so-input-height-lg);
+}
+
+.so-number-input--size-lg > .so-number-input__input {
+	font-size: var(--so-input-font-size-lg);
+	padding-inline: var(--so-input-indent-lg);
+}
+
+.so-number-input--size-xl {
+	--so-number-input-height: var(--so-input-height-xl);
+}
+
+.so-number-input--size-xl > .so-number-input__input {
+	font-size: var(--so-input-font-size-xl);
+	padding-inline: var(--so-input-indent-xl);
+}
+
+.so-number-input--size-2xl {
+	--so-number-input-height: var(--so-input-height-2xl);
+}
+
+.so-number-input--size-2xl > .so-number-input__input {
+	font-size: var(--so-input-font-size-2xl);
+	padding-inline: var(--so-input-indent-2xl);
+}

package/src/components/pagination.css

@@ -0,0 +1,164 @@
+/* ─── Pagination ──────────────────────────────────────────────
+ * Page navigation: arrows at the edges and between them the list of pages
+ * with gaps. The first and the last page are always shown, between them N
+ * pages around the current one, and an ellipsis in place of the skipped ones:
+ * `‹ 1 … 4 5 6 … 10 ›`.
+ *
+ *   .so-pagination                 root — `nav`, a row in one line
+ *     .so-pagination__prev         the "back" arrow (Button)
+ *     .so-pagination__list         the list — `ol`: pages and gaps in order
+ *       .so-pagination-item        a page — `li`, an item of the collection
+ *         .so-button               the row of a page: number or text (Button)
+ *       .so-pagination__ellipsis   a gap — `li` with "…", markup of the owner
+ *     .so-pagination__next         the "forward" arrow (Button)
+ *
+ * One line without wrapping, as wide as its content: a container cannot
+ * squeeze the row — the row of a page would be cut by an ellipsis and its
+ * number would vanish. Centring the row or putting it at the end is up to the
+ * place. Digits of one width: "11" is not narrower than "18", and the row does
+ * not jump while paging. Cells do not shrink.
+ *
+ * The scale is that of Button (`components/button.css`): the side of a cell is
+ * its height, the gap between cells the gap between the parts of its row, the
+ * font its font. Pages and arrows are Buttons of this size and take the font
+ * themselves; the gap cell has to match them and takes the same step on its
+ * own node. Not on the root: a step counts from the font of the parent, and
+ * the Buttons inside would count theirs from the root's and grow a second
+ * step. At `normal` there is no font of its own, as with Button. The block
+ * takes the steps of its size into `--so-pagination-cell` and
+ * `--so-pagination-gap`.
+ *
+ * The row of a page is not narrower than a cell and as tall as one: a narrow
+ * number stands as a square, while a wider number and text widen the row by
+ * their field. The field is what remains of the cell after two digits (`ch`
+ * is the width of a digit: digits of one width), equally on each side: one-
+ * and two-digit numbers stand as squares, and the row keeps its width from 9
+ * to 10. The field of Button is too large for that. Arrows are the square of a
+ * cell: the button holds one icon, and the field is removed. Rows and arrows
+ * override the scale of Button with the same or a higher specificity, so this
+ * file is imported below `button.css`.
+ *
+ * The current page is `data-selected` on the wrapper of the page: a click on
+ * it changes nothing, and the cursor is the default. A gap is a cell as wide
+ * as a narrow page, on which nothing is pressed. A disabled component fades as
+ * a whole at its root (`disabled.css`); pages and arrows are disabled with it
+ * and do not fade a second time under the faded root.
+ *
+ * The look — the view of pages and arrows, the mark of the current one, the
+ * colour of a gap, transitions, the mirror of arrows in RTL and the view in
+ * forced colours mode — is drawn by the theme. */
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок и
+ * без него обязан выглядеть умолчанием. */
+.so-pagination {
+	--so-pagination-cell: var(--so-button-height-normal);
+	--so-pagination-gap: var(--so-button-gap-normal);
+	display: flex;
+	align-items: center;
+	gap: var(--so-pagination-gap);
+	width: max-content;
+	font-variant-numeric: tabular-nums;
+}
+
+.so-pagination--size-sm {
+	--so-pagination-cell: var(--so-button-height-sm);
+	--so-pagination-gap: var(--so-button-gap-sm);
+}
+
+.so-pagination--size-sm > .so-pagination__list > .so-pagination__ellipsis {
+	font-size: var(--so-button-font-size-sm);
+	line-height: var(--so-button-line-height-sm);
+}
+
+.so-pagination--size-normal {
+	--so-pagination-cell: var(--so-button-height-normal);
+	--so-pagination-gap: var(--so-button-gap-normal);
+}
+
+.so-pagination--size-lg {
+	--so-pagination-cell: var(--so-button-height-lg);
+	--so-pagination-gap: var(--so-button-gap-lg);
+}
+
+.so-pagination--size-lg > .so-pagination__list > .so-pagination__ellipsis {
+	font-size: var(--so-button-font-size-lg);
+	line-height: var(--so-button-line-height-lg);
+}
+
+.so-pagination--size-xl {
+	--so-pagination-cell: var(--so-button-height-xl);
+	--so-pagination-gap: var(--so-button-gap-xl);
+}
+
+.so-pagination--size-xl > .so-pagination__list > .so-pagination__ellipsis {
+	font-size: var(--so-button-font-size-xl);
+	line-height: var(--so-button-line-height-xl);
+}
+
+.so-pagination--size-2xl {
+	--so-pagination-cell: var(--so-button-height-2xl);
+	--so-pagination-gap: var(--so-button-gap-2xl);
+}
+
+.so-pagination--size-2xl > .so-pagination__list > .so-pagination__ellipsis {
+	font-size: var(--so-button-font-size-2xl);
+	line-height: var(--so-button-line-height-2xl);
+}
+
+/* Список — тот же ряд: страницы и пропуски через тот же зазор, что между
+ * стрелкой и списком. */
+.so-pagination__list {
+	display: flex;
+	align-items: center;
+	gap: var(--so-pagination-gap);
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.so-pagination-item {
+	display: flex;
+	flex-shrink: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.so-pagination-item > .so-button {
+	min-inline-size: var(--so-pagination-cell);
+	block-size: var(--so-pagination-cell);
+	padding-inline: max(0px, (var(--so-pagination-cell) - 2ch) / 2);
+}
+
+.so-pagination__prev,
+.so-pagination__next {
+	flex-shrink: 0;
+	inline-size: var(--so-pagination-cell);
+	block-size: var(--so-pagination-cell);
+	padding-inline: 0;
+}
+
+.so-pagination-item[data-selected='true'] > .so-button {
+	cursor: default;
+}
+
+.so-pagination__ellipsis {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--so-pagination-cell);
+	block-size: var(--so-pagination-cell);
+	margin: 0;
+	padding: 0;
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.so-pagination[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-pagination[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}