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

package/src/direction.css

@@ -0,0 +1,30 @@
+/* ─── Направление письма ─────────────────────────────────────
+ * Знак строки числом: 1 — слева направо, −1 — справа налево.
+ *
+ * Логические свойства (`inset-inline-start`, `margin-inline`,
+ * `padding-inline`) браузер считает по направленности сам. Знак нужен тому,
+ * у чего логических направлений нет: зеркалу иконки (`scaleX`), стороне
+ * градиента (угол), сдвигу (`translate`). Такое зеркало тема пишет числом —
+ * умножением на знак, — а не селектором по направлению.
+ *
+ * Знак задаёт атрибут `dir`, а до блока его доносит наследование: блок
+ * получает значение ближайшего `dir` — того же, по которому браузер
+ * раскладывает логические свойства. Нет `dir` у предков — слева направо.
+ * Селектор по атрибуту у предка (`[dir='rtl'] .so-блок`) ближайшего не видит,
+ * и блок с `dir="ltr"` в RTL-предке получал бы зеркало RTL. `:dir()` его
+ * видит, но сборка переписывает `:dir()` в список языков (AGENTS.md пакета,
+ * «Знак направления письма»). `dir="auto"` знака не меняет: направленность
+ * по тексту знает только браузер, и блок под таким предком берёт знак от
+ * `dir` выше.
+ *
+ * `:root` — умолчание страницы без `dir`. Правило RTL стоит ниже него: у
+ * `<html dir="rtl">` совпадают оба, специфичность одна, побеждает нижнее. */
+
+:root,
+[dir='ltr'] {
+	--so-dir-sign: 1;
+}
+
+[dir='rtl'] {
+	--so-dir-sign: -1;
+}

package/src/disabled.css

@@ -0,0 +1,26 @@
+/* ─── Выключенное гаснет поддеревом ──────────────────────────
+ * Выключенный компонент гаснет целиком — коробкой или корнем — одной
+ * прозрачностью, а выключенные части внутри него — кнопки поля, теги, дни,
+ * строки — выключены вместе с ним и второй раз не гаснут: под погасшим
+ * предком их прозрачность — 1. Так сколько выключенных ни вложено, видно их с
+ * одной прозрачностью, как выключенный Button.
+ *
+ * Прозрачность — переменная `--so-disabled-opacity`, умолчание — здесь, у
+ * корня документа. Гасит часть пара правил в файле её блока:
+ *
+ *   .so-x[data-disabled='true'] { opacity: var(--so-disabled-opacity); }
+ *   .so-x[data-disabled='true'] > * { --so-disabled-opacity: 1; }
+ *
+ * Второе ставит единицу детям погасшего узла, а не ему самому: переменную,
+ * объявленную на себе, узел прочёл бы сам. Наследуется она всему поддереву, и
+ * выключенное внутри погасшего получает 1 на любой глубине. Поэтому
+ * выключенное гаснет только так: своя прозрачность в правиле выключенного —
+ * число, сброс у части — легла бы под погасшим предком второй раз. Сторожа —
+ * `__tests__/disabled.spec.ts` (прозрачность — только из переменной, одна на
+ * тему) и `__tests__/base-css.spec.ts` (у каждого гасящего правила — пара).
+ * Тема меняет прозрачность переменной, а не своим правилом: гасит
+ * выключенное у каждой части общий слой, и своего приёма гашения у темы нет. */
+
+:root {
+	--so-disabled-opacity: 0.35;
+}

package/src/group.css

@@ -0,0 +1,90 @@
+/* ─── Groups of items ───────────────────────────────────────
+ * Sections of grouping in Menu, ListBox and Select — groups with a label and
+ * items without a group — and the separator line between them.
+ *
+ * The label of a group is a note above the items, not an item: one line, with
+ * an ellipsis, and an empty one takes no room (a group without a label renders
+ * no node for it). Its font is the note at a control of the size of the rows
+ * of the group (the caption scale, `caption.css`): a step smaller than the
+ * rows, as a helper is a step smaller than its field. The field along the line
+ * is the field of a row on the Button scale of the same size: the label stands
+ * where the first column of the rows begins. Fields above and below belong to
+ * the block.
+ *
+ * The size of the label is the size of the rows. The size modifier is carried
+ * by the row — the Button inside the item — and in ListBox and Select the
+ * label reads it at the rows of its own group (`:has`): the panel of Select is
+ * teleported and has no size modifier of Select, while its rows always carry
+ * one. Child combinators keep the rule in its own group — a list in the slot
+ * of an item of the group has its own. In Menu the panel carries the size, and
+ * the group stands in it.
+ *
+ * The separator is a line across the whole list between sections. The theme
+ * draws it and sets its thickness (`--so-group-separator-width`, contract; 0
+ * without a theme): the place of a section without a separator counts from it
+ * (the sibling rule in the file of the block). Here is what a separator has in
+ * common: it does not shrink in the column of the list.
+ *
+ * The look — capitals and colour of the label, colour of the line — is drawn by
+ * the theme. */
+
+.so-list-box-group__label,
+.so-select-group__label,
+.so-menu-group__label {
+	flex-shrink: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.so-list-box-group__label:empty,
+.so-select-group__label:empty,
+.so-menu-group__label:empty {
+	display: none;
+}
+
+.so-list-box-group:has(> .so-list-box-item > .so-button--size-sm) > .so-list-box-group__label,
+.so-select-group:has(> .so-select-item > .so-button--size-sm) > .so-select-group__label,
+.so-menu__panel--size-sm .so-menu-group__label {
+	padding-inline: var(--so-button-padding-sm);
+	font-size: var(--so-caption-note-font-size-sm);
+	line-height: var(--so-caption-note-line-height-sm);
+}
+
+.so-list-box-group:has(> .so-list-box-item > .so-button--size-normal) > .so-list-box-group__label,
+.so-select-group:has(> .so-select-item > .so-button--size-normal) > .so-select-group__label,
+.so-menu__panel--size-normal .so-menu-group__label {
+	padding-inline: var(--so-button-padding-normal);
+	font-size: var(--so-caption-note-font-size-normal);
+	line-height: var(--so-caption-note-line-height-normal);
+}
+
+.so-list-box-group:has(> .so-list-box-item > .so-button--size-lg) > .so-list-box-group__label,
+.so-select-group:has(> .so-select-item > .so-button--size-lg) > .so-select-group__label,
+.so-menu__panel--size-lg .so-menu-group__label {
+	padding-inline: var(--so-button-padding-lg);
+	font-size: var(--so-caption-note-font-size-lg);
+	line-height: var(--so-caption-note-line-height-lg);
+}
+
+.so-list-box-group:has(> .so-list-box-item > .so-button--size-xl) > .so-list-box-group__label,
+.so-select-group:has(> .so-select-item > .so-button--size-xl) > .so-select-group__label,
+.so-menu__panel--size-xl .so-menu-group__label {
+	padding-inline: var(--so-button-padding-xl);
+	font-size: var(--so-caption-note-font-size-xl);
+	line-height: var(--so-caption-note-line-height-xl);
+}
+
+.so-list-box-group:has(> .so-list-box-item > .so-button--size-2xl) > .so-list-box-group__label,
+.so-select-group:has(> .so-select-item > .so-button--size-2xl) > .so-select-group__label,
+.so-menu__panel--size-2xl .so-menu-group__label {
+	padding-inline: var(--so-button-padding-2xl);
+	font-size: var(--so-caption-note-font-size-2xl);
+	line-height: var(--so-caption-note-line-height-2xl);
+}
+
+.so-list-box__separator,
+.so-select__separator,
+.so-menu-separator {
+	flex-shrink: 0;
+}

package/src/index.css

@@ -0,0 +1,97 @@
+/* ─── The shared layer of themes ─────────────────────────────
+ * What the parts of soxa need in any theme, not the look of one: a reset of
+ * the library's nodes (`reset.css`), the writing-direction sign
+ * (`direction.css`), the fading of a disabled part (`disabled.css`) and the
+ * structure of the parts — layout and mechanics (`components/`), whose numbers
+ * are variables with defaults: the shared scales (`caption.css`, the marker of
+ * a required field — `required.css`, the tap zone of a small button —
+ * `target.css`, the label and the separator of groups — `group.css`), what
+ * several layers share (a panel at its anchor — `anchored.css`, the swipe
+ * strip — `swipe.css`, the surface of the place in panels — `place.css`, the
+ * modal layer — `modal.css`) and the scales of blocks in their files. The look
+ * — color, borders, radii, shadows, views and motion — is the theme's. Plain
+ * CSS, with no preprocessor and no Tailwind: a theme takes the file as is, with
+ * its own bundler, and the whole of this layer goes into its CSS.
+ *
+ * The rules live in the layer `so`: a layer name is shared by the whole
+ * document, like a class name, and so it carries the prefix. Each part is a
+ * sublayer of its own — `so.<file>` — and the statement below declares their
+ * order before any rule: a sublayer named later wins over an earlier one
+ * whatever the specificity, and a rule of one part never overrides a rule of
+ * another by its weight or by its place in the file. The order stays the same
+ * however a theme splits this layer into files and in whatever order an
+ * application loads them (`AGENTS.md` of the package, «Слои»). The reset is the
+ * first sublayer: every other rule of this layer overrides it. The rules of a
+ * theme in its own later layer, or outside layers, override this whole layer.
+ *
+ * The order of the parts: the shared mechanics and scales first, then a part
+ * before the parts that hold it and set its nodes. The clear square and the
+ * header buttons of a window take the scale padding off a button with the same
+ * weight, the paging buttons and the title of Calendar, the buttons of
+ * DateInput and DatePicker, the arrows of Pagination and the close button of a
+ * toast take its padding and height — so all of them stand after
+ * `button.css`; the modal layer stands right before the window for that
+ * reason, not among the shared scales. Calendar sets its month and year picker
+ * — a Popover with a ListBox inside — over the rules of those two, so it and
+ * DatePicker, which holds it, stand after Popover and ListBox.
+ *
+ * A theme takes this layer by the name of the package: `@import
+ * '@soxa-ui/theme-base';` — the layer `so` stands where it was imported. A
+ * theme on Tailwind puts it into Tailwind's layer `base`, in place of
+ * preflight (`@import '@soxa-ui/theme-base' layer(base);`, as oren does): its
+ * order against the utilities of the application's Tailwind is the one of
+ * preflight. The layer order of an application that loads this layer itself —
+ * the README of the package. */
+
+@layer so.reset, so.direction, so.disabled, so.caption, so.required, so.target, so.group,
+	so.anchored, so.swipe, so.place, so.icon, so.button, so.check-box, so.accordion, so.date-input,
+	so.modal, so.dialog, so.drag-and-drop, so.drawer, so.input, so.label, so.field, so.list-box,
+	so.menu, so.number-input, so.pagination, so.popover, so.calendar, so.date-picker,
+	so.progress-linear, so.progress-spinner, so.radio-group, so.rating, so.scroller, so.select,
+	so.skeleton, so.slider, so.switch, so.table, so.tabs, so.tags, so.textarea, so.toasts,
+	so.tooltip;
+
+@import './reset.css' layer(so.reset);
+@import './direction.css' layer(so.direction);
+@import './disabled.css' layer(so.disabled);
+@import './caption.css' layer(so.caption);
+@import './required.css' layer(so.required);
+@import './target.css' layer(so.target);
+@import './group.css' layer(so.group);
+@import './anchored.css' layer(so.anchored);
+@import './swipe.css' layer(so.swipe);
+@import './place.css' layer(so.place);
+@import './components/icon.css' layer(so.icon);
+@import './components/button.css' layer(so.button);
+@import './components/check-box.css' layer(so.check-box);
+@import './components/accordion.css' layer(so.accordion);
+@import './components/date-input.css' layer(so.date-input);
+@import './modal.css' layer(so.modal);
+@import './components/dialog.css' layer(so.dialog);
+@import './components/drag-and-drop.css' layer(so.drag-and-drop);
+@import './components/drawer.css' layer(so.drawer);
+@import './components/input.css' layer(so.input);
+@import './components/label.css' layer(so.label);
+@import './components/field.css' layer(so.field);
+@import './components/list-box.css' layer(so.list-box);
+@import './components/menu.css' layer(so.menu);
+@import './components/number-input.css' layer(so.number-input);
+@import './components/pagination.css' layer(so.pagination);
+@import './components/popover.css' layer(so.popover);
+@import './components/calendar.css' layer(so.calendar);
+@import './components/date-picker.css' layer(so.date-picker);
+@import './components/progress-linear.css' layer(so.progress-linear);
+@import './components/progress-spinner.css' layer(so.progress-spinner);
+@import './components/radio-group.css' layer(so.radio-group);
+@import './components/rating.css' layer(so.rating);
+@import './components/scroller.css' layer(so.scroller);
+@import './components/select.css' layer(so.select);
+@import './components/skeleton.css' layer(so.skeleton);
+@import './components/slider.css' layer(so.slider);
+@import './components/switch.css' layer(so.switch);
+@import './components/table.css' layer(so.table);
+@import './components/tabs.css' layer(so.tabs);
+@import './components/tags.css' layer(so.tags);
+@import './components/textarea.css' layer(so.textarea);
+@import './components/toasts.css' layer(so.toasts);
+@import './components/tooltip.css' layer(so.tooltip);

package/src/modal.css

@@ -0,0 +1,183 @@
+/* ─── Модальный слой ─────────────────────────────────────────
+ * Общее у модального окна (Dialog) и выезжающей панели (Drawer). Анатомия у
+ * них одна: корень — сама панель, подложка — её сосед, раньше в DOM, а внутри
+ * панели — заголовок, тело, подвал и кнопки шапки, которые стоят в DOM
+ * последними, а в ряд заголовка их переносят области сетки. Своё у
+ * компонента — место и размер, колонки и строки сетки и состав кнопок шапки
+ * (`components/dialog.css`, `components/drawer.css`).
+ *
+ *   .so-dialog__backdrop, .so-drawer__backdrop   подложка
+ *   .so-dialog, .so-drawer                       панель — сетка
+ *     .so-…__title                               заголовок, `h2`
+ *     .so-…__body                                тело — прокручивается оно
+ *     .so-…__footer                              подвал — ряд действий
+ *     .so-dialog__maximize, .so-…__close         кнопки шапки — Button
+ *
+ * Подложка — на весь экран, под панелью. Она обязательная разметка, а не
+ * украшение: фон под панелью скрыт от скринридера, но не от указателя, и к
+ * странице его не пускает только она. Нажатие по ней плагины слоя считают
+ * нажатием мимо панели. `z-index` подложке и панели пишет код, одним числом:
+ * панель рисуется поверх просто порядком.
+ *
+ * Прокручивается тело, а не панель, поэтому шапка, подвал и кнопки остаются на
+ * месте: панель — сетка, и строка тела сжимается до остатка высоты. Отступ —
+ * внутри прокрутки: у края прокручиваемой области обрезалось бы кольцо фокуса
+ * вложенного контрола. Прокрутка до конца не переходит на страницу под
+ * панелью, а длинное слово переносится, а не заводит полосу по горизонтали.
+ * Пустые заголовок и подвал места не занимают: тело тогда начинается или
+ * кончается у края панели полным отступом.
+ *
+ * Кнопки шапки — квадрат высоты Button своего размера (`normal`: размера у них
+ * нет), в конце строки заголовка, каждая по центру его первой строки:
+ * заголовок переносится — кнопки остаются наверху. Строка заголовка —
+ * переменная, и от неё считается место кнопок: разойдись они, кнопка съехала
+ * бы с заголовка молча. Промежуток между кнопками держит первая из них, а
+ * угол — последняя: её значок отстоит от края панели на тот же отступ, что
+ * текст заголовка с другой стороны. Значок в квадрате отстоит от его края на
+ * четверть высоты, поэтому до края панели — отступ без этой четверти.
+ *
+ * Таблица прямо в теле — её окно (`.so-table__viewport`) прямой ребёнок тела:
+ * закреплённая шапка встаёт к краю тела, а не под отступ
+ * (`--so-table-head-offset` — минус отступ сверху, таблица наследует его от
+ * окна). Закреплённое браузер ставит под отступ контейнера, и в отступе над
+ * шапкой проступали бы строки, которые уходят под неё. Только прямой ребёнок:
+ * глубже у таблицы бывает свой контейнер прокрутки, и сдвиг тела унёс бы её
+ * шапку за его край. Контекст нулевой специфичности — свой сдвиг таблицы
+ * сильнее.
+ *
+ * Отступы, промежутки и строка заголовка — переменные корня документа;
+ * умолчания — числа темы oren, тема задаёт свои на корне документа.
+ *
+ * Облик — вуаль подложки, поверхность, кромка, тень и скругление панели, кегль
+ * и начертание заголовка, вид кнопок шапки, проявление, въезд и жест — рисует
+ * тема. */
+
+:root {
+	--so-modal-padding: 1.25rem;
+	--so-modal-gap: 0.5rem;
+	--so-modal-title-line: 1.75rem;
+	--so-modal-footer-gap: 0.5rem;
+	--so-modal-button-gap: 0.25rem;
+}
+
+.so-dialog__backdrop,
+.so-drawer__backdrop {
+	position: fixed;
+	inset: 0;
+}
+
+.so-dialog,
+.so-drawer {
+	display: grid;
+	overflow: hidden;
+}
+
+/* Заголовок рисуется всегда: на него панель ссылается `aria-labelledby`. */
+.so-dialog__title,
+.so-drawer__title {
+	grid-area: title;
+	padding: var(--so-modal-padding) var(--so-modal-padding) 0;
+	line-height: var(--so-modal-title-line);
+	overflow-wrap: break-word;
+}
+
+.so-dialog__title:empty,
+.so-drawer__title:empty {
+	display: none;
+}
+
+.so-dialog__body,
+.so-drawer__body {
+	grid-area: body;
+	min-height: 0;
+	padding: var(--so-modal-gap) var(--so-modal-padding);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	overflow-wrap: break-word;
+}
+
+:where(.so-dialog__body > .so-table__viewport, .so-drawer__body > .so-table__viewport) {
+	--so-table-head-offset: calc(-1 * var(--so-modal-gap));
+}
+
+/* Подвал — ряд действий в конце строки, в RTL он сам встаёт слева. */
+.so-dialog__footer,
+.so-drawer__footer {
+	grid-area: footer;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--so-modal-footer-gap);
+	padding: calc(var(--so-modal-gap) * 1.5) var(--so-modal-padding) var(--so-modal-padding);
+}
+
+.so-dialog__footer:empty,
+.so-drawer__footer:empty {
+	display: none;
+}
+
+/* Шапки нет — ни заголовка, ни кнопок: тело начинается от верхнего края
+ * панели полным отступом, а не промежутком после шапки. */
+.so-dialog:not(:has(> .so-dialog__title:not(:empty), > .so-dialog__maximize, > .so-dialog__close))
+	> .so-dialog__body,
+.so-drawer:not(:has(> .so-drawer__title:not(:empty), > .so-drawer__close)) > .so-drawer__body {
+	padding-block-start: var(--so-modal-padding);
+}
+
+:where(
+	.so-dialog:not(
+			:has(> .so-dialog__title:not(:empty), > .so-dialog__maximize, > .so-dialog__close)
+		)
+		> .so-dialog__body
+		> .so-table__viewport,
+	.so-drawer:not(:has(> .so-drawer__title:not(:empty), > .so-drawer__close))
+		> .so-drawer__body
+		> .so-table__viewport
+) {
+	--so-table-head-offset: calc(-1 * var(--so-modal-padding));
+}
+
+/* Подвала нет — тело кончается у нижнего края панели полным отступом. */
+.so-dialog:has(> .so-dialog__footer:empty) > .so-dialog__body,
+.so-drawer:has(> .so-drawer__footer:empty) > .so-drawer__body {
+	padding-block-end: var(--so-modal-padding);
+}
+
+.so-dialog__maximize,
+.so-dialog__close,
+.so-drawer__close {
+	flex-shrink: 0;
+	align-self: flex-start;
+	aspect-ratio: 1;
+	padding-inline: 0;
+	margin-block-start: calc(
+		var(--so-modal-padding) + (var(--so-modal-title-line) - var(--so-button-height-normal)) / 2
+	);
+	margin-inline-end: var(--so-modal-button-gap);
+}
+
+.so-dialog__maximize:last-child,
+.so-dialog__close:last-child,
+.so-drawer__close:last-child {
+	margin-inline-end: calc(var(--so-modal-padding) - var(--so-button-height-normal) / 4);
+}
+
+/* Значок — по центру квадрата. Иконка блочная (`icon.css`), и выравнивание
+ * текста области её не двигает; флекс центрует и значок из слота
+ * потребителя, что бы в нём ни лежало. */
+.so-dialog__maximize > .so-button__text,
+.so-dialog__close > .so-button__text,
+.so-drawer__close > .so-button__text {
+	display: flex;
+	justify-content: center;
+}
+
+.so-dialog__maximize {
+	grid-area: maximize;
+}
+
+.so-dialog__close,
+.so-drawer__close {
+	grid-area: close;
+}

package/src/place.css

@@ -0,0 +1,30 @@
+/* ─── Поверхность места ──────────────────────────────────────
+ * Фон своего места — того, на чём стоят компоненты внутри, — место объявляет
+ * переменной `--so-place-surface`, а читает её тот, кому нужен непрозрачный
+ * фон «как под ним»: закреплённой шапке Table нужен фон места, иначе под ней
+ * просвечивают строки, которые уходят под шапку. Вуаль не годится — сквозь
+ * неё видно то, что под ней, — а мест не перечислить.
+ *
+ * Панели оверлеев — Popover, Select, DatePicker, панель Menu и панель его
+ * пункта, окно Dialog и панель Drawer, — карточка выбора месяца Calendar и
+ * плашка тоста объявляют своё место здесь: поверхность места внутри панели —
+ * поверхность самой панели (`--so-panel-surface`, контракт). Её задаёт тема —
+ * на панели, там же, где красит ею фон: фон и сообщение о нём читают одну
+ * переменную, и разойтись им нечему. Без темы поверхности у панели нет, и
+ * поверхности места внутри неё тоже.
+ *
+ * Страницу (корень документа) и карточку приложения объявляют тема и
+ * приложение. Список — панели и карточки библиотеки; новая панель встаёт в
+ * этот список. */
+
+.so-popover__panel,
+.so-select__panel,
+.so-date-picker__panel,
+.so-calendar__picker,
+.so-menu__panel,
+.so-menu-item__panel,
+.so-dialog,
+.so-drawer,
+.so-toasts-item__card {
+	--so-place-surface: var(--so-panel-surface);
+}

package/src/required.css

@@ -0,0 +1,40 @@
+/* ─── Маркер обязательного поля ──────────────────────────────
+ * Точка у угла контрола — у начала строки, а не слева: сторона логическая
+ * (`inset-inline-start`), и в RTL маркер стоит справа, у начала поля. Левым
+ * он был у каждого контрола, и в RTL съезжал к концу. Здесь — место и размер
+ * точки; цвет и форму рисует тема.
+ *
+ * Маркер у поля один. В поле формы `Field` с подписью он переезжает к
+ * подписи (`components/field.css`), а точку контрола гасит переменная
+ * `--so-required-dot: none` на обёртке контрола. Переменной, а не
+ * селектором: селектор перечислял бы контролы поимённо, а точка у каждого
+ * стоит на своём узле — на корне Switch и полей семьи Input, на коробке
+ * CheckBox. У диапазона DatePicker точка — у коробки на корне, а у полей
+ * концов внутри неё её нет (`components/date-picker.css`); у одной даты она —
+ * у самого поля, DateInput.
+ *
+ * Список — контролы с маркером; место точки у своего контрола уточняет файл
+ * его блока (у Switch оно ближе к углу). Новый контрол с маркером встаёт в
+ * этот список. */
+
+:root {
+	--so-required-size: 0.25rem;
+	--so-required-offset: -0.25rem;
+}
+
+.so-check-box:where([data-required='true']) .so-check-box__container::after,
+.so-switch:where([data-required='true'])::after,
+.so-input:where([data-required='true'])::after,
+.so-number-input:where([data-required='true'])::after,
+.so-textarea:where([data-required='true'])::after,
+.so-date-input:where([data-required='true'])::after,
+.so-date-picker--mode-range.so-date-picker:where([data-required='true'])::after {
+	content: '';
+	display: var(--so-required-dot, block);
+	position: absolute;
+	top: var(--so-required-offset);
+	inset-inline-start: var(--so-required-offset);
+	width: var(--so-required-size);
+	height: var(--so-required-size);
+	pointer-events: none;
+}