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

package/src/components/check-box.css

@@ -0,0 +1,121 @@
+/* ─── CheckBox ────────────────────────────────────────────────
+ * Коробка с отметкой и невидимое поле поверх неё: клик по коробке — клик по
+ * полю, и переключает его браузер. Поле — нативный `<input type="checkbox">`:
+ * состояние, фокус, участие в форме и доступное имя у него свои, а коробка —
+ * декор (`aria-hidden`).
+ *
+ * Сторона коробки по размеру — переменные корня документа (`sm`…`2xl`): её же
+ * берёт кольцо радио (`radio-group.css`) — радио и чекбокс одного размера
+ * стоят в форме рядом, и кольцо обязано совпасть с коробкой. Отметка — `svg`
+ * иконки по роли, без компонента Icon (его собирала бы каждая смена отметки),
+ * поэтому размер ей даёт флажок по своему `size` — ступенями шкалы иконки
+ * (`icon.css`). Умолчания — числа темы oren; тема задаёт свои на корне
+ * документа.
+ *
+ * Облик — рамка, поверхность, скругление, отметка, кольцо фокуса, виды и
+ * варианты — рисует тема. */
+
+:root {
+	--so-check-box-size-sm: 1rem;
+	--so-check-box-size-normal: 1.25rem;
+	--so-check-box-size-lg: 1.5rem;
+	--so-check-box-size-xl: 1.75rem;
+	--so-check-box-size-2xl: 2rem;
+}
+
+/* Блочный при любом теге: корень рисуется по `tag`, по умолчанию `span`, и у
+ * строчного корня размер коробки без `display` схлопнулся бы. */
+.so-check-box {
+	position: relative;
+	display: block;
+	width: var(--so-check-box-size-normal);
+	height: var(--so-check-box-size-normal);
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+/* Поле — поверх коробки, во весь корень, и невидимо: нажатие ловит оно. */
+.so-check-box input {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+	cursor: pointer;
+}
+
+.so-check-box input:disabled {
+	cursor: default;
+	pointer-events: none;
+}
+
+/* Выключенная коробка гаснет целиком (`disabled.css`). */
+.so-check-box input:disabled + .so-check-box__container {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-check-box input:disabled + .so-check-box__container > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Только для чтения: клик по коробке её не переключает — его отменяет
+ * `TInputBoolPlugin`, — поэтому курсор обычный, как у выключенной. */
+.so-check-box:where([data-readonly='true']) input {
+	cursor: default;
+}
+
+.so-check-box__container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.so-check-box__mark {
+	width: var(--so-icon-size-normal);
+	height: var(--so-icon-size-normal);
+}
+
+.so-check-box--size-sm {
+	width: var(--so-check-box-size-sm);
+	height: var(--so-check-box-size-sm);
+}
+
+.so-check-box--size-sm .so-check-box__mark {
+	width: var(--so-icon-size-sm);
+	height: var(--so-icon-size-sm);
+}
+
+.so-check-box--size-lg {
+	width: var(--so-check-box-size-lg);
+	height: var(--so-check-box-size-lg);
+}
+
+.so-check-box--size-lg .so-check-box__mark {
+	width: var(--so-icon-size-lg);
+	height: var(--so-icon-size-lg);
+}
+
+.so-check-box--size-xl {
+	width: var(--so-check-box-size-xl);
+	height: var(--so-check-box-size-xl);
+}
+
+.so-check-box--size-xl .so-check-box__mark {
+	width: var(--so-icon-size-xl);
+	height: var(--so-icon-size-xl);
+}
+
+.so-check-box--size-2xl {
+	width: var(--so-check-box-size-2xl);
+	height: var(--so-check-box-size-2xl);
+}
+
+.so-check-box--size-2xl .so-check-box__mark {
+	width: var(--so-icon-size-2xl);
+	height: var(--so-icon-size-2xl);
+}

package/src/components/date-input.css

@@ -0,0 +1,224 @@
+/* ─── DateInput ───────────────────────────────────────────────
+ * Поле даты из частей по формату локали — коробка поля семьи Input.
+ *
+ *   .so-date-input                 корень — коробка поля
+ *     .so-date-input__leading      слот перед датой
+ *     .so-date-input__segments     ряд частей — `inline-flex`, свой `dir`
+ *       .so-date-input__segment    часть даты или времени
+ *       .so-date-input__literal    разделитель — литерал формата
+ *     .so-date-input__trailing     слот после даты: кнопка календаря DatePicker
+ *       .so-date-input__clear      кнопка очистки, первой в слоте — Button
+ *
+ * Коробка — та же, что у Input (`input.css`): высота размера, строка слота —
+ * высота без рамки и двух просветов, слоты у краёв логическими сторонами.
+ * Шкала — шкала поля: высота, кегль и отступ текста от рамки те же, что у
+ * Input того же размера, и в одной форме оба стоят вровень по высоте и по
+ * началу текста. Кегль — ряду частей, а не корню: слоты — разметка
+ * потребителя. Строка ряда — строка слота, по ней же высота подсветки части.
+ * Ширина — по дате и слотам, а не минимум Input: дата — строка известной длины
+ * и не схлопывается. Слот у конца уходит к концу поля: ряд частей шириной по
+ * дате, и без автоотступа кнопка календаря встала бы вплотную к дате, а не у
+ * края растянутого поля. Курсор текста — по всему полю: нажатие на пустое
+ * место поля отдаёт фокус части (это решает плагин).
+ *
+ * Ряд частей — флекс, а не строка текста (условие поведения, а не вкус):
+ * часть и разделитель — свои коробки. В строчной раскладке Chrome переносит
+ * начало выделения от края части в соседний текст, и протяжка мышью с края
+ * дня ничего не выделяет. Не таблица: внутри `label` HTML разрешает только
+ * строчную разметку. Направление ряда — свой `dir` от ядра, по дате в локали,
+ * а не направление поля, поэтому отступ ряда — поровну с обеих сторон, а не
+ * логической стороной: дата встаёт у начала поля с тем же отступом текста,
+ * что у Input, — отступ ряда и поле части вместе дают отступ ввода. Выделение
+ * — текстом, явно: дату протягивают мышью и выделяют целиком Ctrl/Cmd+A, и ряд
+ * выделяется и внутри обёртки с `user-select: none`. Пробелы литералов
+ * сохранены как есть (`cs-CZ` «12. 5. 2026»): на краю флекс-элемента они
+ * схлопнулись бы, а перенос в ряду не нужен вовсе.
+ *
+ * Ширина ряда не меняется, пока дату набирают. Цифры одной ширины: ↑/↓ и
+ * набор поверх части её ширину не меняют. Год держит место под четыре цифры
+ * (`ch` — ширина нуля), в минимум входят поля части: ядро пишет год как есть
+ * — «2», «20», «2026», — и без места поле росло бы с каждой цифрой, а у
+ * формата с годом в начале (`ja-JP`) за ним сдвигалась бы вся дата. Другим
+ * частям места не нужно — ядро дописывает их нулём до двух цифр. Минимум ряда
+ * — по самой широкой дате, пустой или набранной (подсказка бывает шире цифр):
+ * снят в Chromium по локалям — дата до 14.9ch (`lt-LT`), дата со временем до
+ * 23.1ch, до секунды до 26.2ch (`ko-KR`); поле со временем узнаётся по части
+ * часа, время до секунды — по части секунды. Предел: цифры шире латинского
+ * нуля (`bn-BD`) минимум перерастают, и корень при наборе растёт — ширина
+ * таких цифр зависит от шрифтов машины, минимума под язык ряда нет.
+ *
+ * Поле подсветки части от её цифр — узкое, в шестнадцатую кегля: дата
+ * читается строкой, как текст Input, а не вразрядку, и в RTL у флекс-элемента
+ * Chrome красит выделением текст, а не поля. Разделитель — с полями, дата не
+ * слипается в сплошную строку. Оба поля — в `em`, растут с текстом.
+ *
+ * Выключенное поле гаснет коробкой целиком, с кнопками и содержимым слотов
+ * (`disabled.css`); выключенность — `data-disabled` корня: нативного
+ * `disabled` у корня нет, а частей много. Нажатия коробка не гасит: в слотах
+ * — разметка потребителя.
+ *
+ * Рамку рисует тема и задаёт её толщину на блоке
+ * (`--so-date-input-border`, контракт): строка слота считается без неё. Поля
+ * части и разделителя — переменные корня документа; умолчания — числа темы
+ * oren, тема задаёт свои на корне документа.
+ *
+ * Облик — рамка, поверхность, скругление, кольцо фокуса, подсветка части под
+ * фокусом и выделения, цвет подсказки, вид кнопки очистки, каретка, цвет
+ * точки обязательного поля, варианты и ошибка — рисует тема. */
+
+:root {
+	--so-date-input-segment-padding: 0.0625em;
+	--so-date-input-literal-padding: 0.125em;
+}
+
+/* Размер без модификатора — `normal`: ядро пишет `--size-*` всегда, но блок и
+ * без него обязан выглядеть умолчанием. `relative` — опора точки
+ * обязательного поля (`required.css`). */
+.so-date-input {
+	--so-date-input-height: var(--so-input-height-normal);
+	--so-date-input-indent: var(--so-input-indent-normal);
+	--so-date-input-slot-row: calc(
+		var(--so-date-input-height) - 2 * var(--so-date-input-border, 0px) - 2 *
+			var(--so-input-slot-gap)
+	);
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	height: var(--so-date-input-height);
+	cursor: text;
+}
+
+/* Фокуса у частей выключенного поля нет — ядро не ставит им остановку Tab. */
+.so-date-input[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	cursor: default;
+}
+
+.so-date-input[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+.so-date-input .so-date-input__segments {
+	line-height: var(--so-date-input-slot-row);
+}
+
+.so-date-input--size-sm {
+	--so-date-input-height: var(--so-input-height-sm);
+	--so-date-input-indent: var(--so-input-indent-sm);
+}
+
+.so-date-input--size-sm .so-date-input__segments {
+	font-size: var(--so-input-font-size-sm);
+	line-height: var(--so-date-input-slot-row);
+}
+
+.so-date-input--size-normal {
+	--so-date-input-height: var(--so-input-height-normal);
+	--so-date-input-indent: var(--so-input-indent-normal);
+}
+
+.so-date-input--size-normal .so-date-input__segments {
+	line-height: var(--so-date-input-slot-row);
+}
+
+.so-date-input--size-lg {
+	--so-date-input-height: var(--so-input-height-lg);
+	--so-date-input-indent: var(--so-input-indent-lg);
+}
+
+.so-date-input--size-lg .so-date-input__segments {
+	font-size: var(--so-input-font-size-lg);
+	line-height: var(--so-date-input-slot-row);
+}
+
+.so-date-input--size-xl {
+	--so-date-input-height: var(--so-input-height-xl);
+	--so-date-input-indent: var(--so-input-indent-xl);
+}
+
+.so-date-input--size-xl .so-date-input__segments {
+	font-size: var(--so-input-font-size-xl);
+	line-height: var(--so-date-input-slot-row);
+}
+
+.so-date-input--size-2xl {
+	--so-date-input-height: var(--so-input-height-2xl);
+	--so-date-input-indent: var(--so-input-indent-2xl);
+}
+
+.so-date-input--size-2xl .so-date-input__segments {
+	font-size: var(--so-input-font-size-2xl);
+	line-height: var(--so-date-input-slot-row);
+}
+
+/* Высота слота — строка поля, как у Input. */
+.so-date-input__leading,
+.so-date-input__trailing {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	gap: var(--so-input-slot-spacing);
+	height: var(--so-date-input-slot-row);
+	cursor: default;
+}
+
+.so-date-input__leading {
+	padding-inline-start: var(--so-input-slot-padding);
+}
+
+.so-date-input__trailing {
+	margin-inline-start: auto;
+	padding-inline-end: var(--so-input-slot-padding);
+}
+
+/* Кнопка очистки — квадрат в строку слота, как у Input; кнопка календаря
+ * DatePicker рядом — квадрат той же стороны. Цель на мелком размере ей
+ * добирает зона нажатия (`target.css`). */
+.so-date-input__clear {
+	flex-shrink: 0;
+	padding-inline: 0;
+	inline-size: var(--so-date-input-slot-row);
+	block-size: var(--so-date-input-slot-row);
+}
+
+.so-date-input__segments {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: center;
+	white-space: pre;
+	-webkit-user-select: text;
+	user-select: text;
+	padding-inline: calc(var(--so-date-input-indent) - var(--so-date-input-segment-padding));
+	font-variant-numeric: tabular-nums;
+	min-inline-size: calc(
+		15ch + 2 * (var(--so-date-input-indent) - var(--so-date-input-segment-padding))
+	);
+}
+
+/* Правило секунды идёт за правилом часа и перекрывает его. */
+.so-date-input__segments:has(> [data-type='hour']) {
+	min-inline-size: calc(
+		23.5ch + 2 * (var(--so-date-input-indent) - var(--so-date-input-segment-padding))
+	);
+}
+
+.so-date-input__segments:has(> [data-type='second']) {
+	min-inline-size: calc(
+		26.5ch + 2 * (var(--so-date-input-indent) - var(--so-date-input-segment-padding))
+	);
+}
+
+.so-date-input__literal {
+	padding-inline: var(--so-date-input-literal-padding);
+}
+
+.so-date-input__segment {
+	padding-inline: var(--so-date-input-segment-padding);
+}
+
+/* Цифры стоят у начала части, свободное место — за ними. Коробка — от рамки,
+ * поэтому в минимум входят и поля части. */
+.so-date-input__segment[data-type='year'] {
+	min-inline-size: calc(4ch + 2 * var(--so-date-input-segment-padding));
+}

package/src/components/date-picker.css

@@ -0,0 +1,208 @@
+/* ─── DatePicker ──────────────────────────────────────────────
+ * Поле даты и календарь в панели, как Select — поле и список.
+ *
+ *   .so-date-picker                  корень — якорь панели; у диапазона — коробка поля
+ *     .so-date-picker__field         поле одной даты — DateInput
+ *       .so-date-input__trailing     слоты поля `clear` и `trailing` (`date-input.css`)
+ *         .so-date-picker__clear     кнопка очистки — Button, если `clearable`
+ *         .so-date-picker__trigger   кнопка календаря — Button
+ *     .so-date-picker__start         поле начала диапазона — DateInput
+ *     .so-date-picker__dash          тире между полями
+ *     .so-date-picker__end           поле конца диапазона — DateInput
+ *     .so-date-picker__clear         кнопка очистки периода, если `clearable`
+ *     .so-date-picker__trigger       кнопка календаря после поля конца
+ *
+ *   .so-date-picker__panel           панель — Frame, телепортирована в `body`
+ *     .so-date-picker__handle        полоса жеста, если он включён (`swipe`)
+ *     .so-date-picker__content       содержимое — прокручивается оно, а не панель
+ *       .so-date-picker__calendar    календарь — Calendar
+ *         .so-calendar__footer       подвал календаря, при `confirmable`
+ *
+ * Корень — строчный флекс по полю: DatePicker встаёт в строку, как само поле
+ * даты, и ширина у него — по дате и кнопкам. Задали корню ширину — поле
+ * растягивается до неё, а кнопки остаются у его конца.
+ *
+ * Кнопки очистки и календаря — квадрат со стороной в строку слота: в коробке
+ * поля они стоят на том же просвете от рамки, что подсветка части, и на любом
+ * размере не выше её. Сторону задаёт режим: у одной даты кнопки стоят в слоте
+ * поля, у диапазона — в коробке корня. Цель на мелком размере им добирает
+ * зона нажатия (`target.css`): кнопке календаря она нужна не меньше очистки —
+ * без `clearable` поле даты стоит вплотную к ней.
+ *
+ * Диапазон — одна коробка на оба поля: период — одно значение, два конца, одна
+ * очистка, одна кнопка календаря, поэтому и рамка у него одна, а поля внутри —
+ * без своей коробки. Коробка та же, что у DateInput: высота размера по шкале
+ * поля, строка слота, тире кеглем поля. Поле внутри — во всю строку коробки:
+ * нажатие у её края попадает в поле, и плагин указателя поля отдаёт фокус
+ * ближайшей части; точки обязательного поля у него нет — она у коробки.
+ * Раскладка — сетка из пяти колонок: начало, тире, конец и две кнопки, каждая
+ * по своей ширине; без очистки кнопка календаря встаёт в четвёртую колонку, а
+ * пятая пуста. Колонки полей равны, и держит их поле начала своим минимумом
+ * ряда — шириной самой широкой даты: ширина не меняется, пока даты набирают.
+ * Поле конца шириной по дате стоит у конца своей колонки, и тире встаёт
+ * посередине между датами. Колонки логические: в RTL начало справа. Кнопки —
+ * с теми же отступами друг от друга и от рамки, что в слоте поля. Выключенный
+ * период гаснет коробкой целиком — с датами, тире и кнопками
+ * (`disabled.css`).
+ *
+ * Панель — та же семья, что панели Select и Popover, — колонка: полоса жеста —
+ * её поле, содержимое берёт остаток высоты и прокручивается само. Пока жест
+ * включён, плагин жеста отдаёт касание вдоль оси панели жесту
+ * (`touch-action`), и прокручиваемую саму панель палец бы не прокрутил. Высота
+ * — по календарю, потолок — окно целиком, а не половина, как у Popover:
+ * месяц держит высоту под шесть недель и срезался бы уже на экране ноутбука.
+ * Когда ни над полем, ни под ним места нет, панель встаёт туда, где места
+ * больше, и заходит за край: сдвиг `TAnchorPlugin` держит её в окне только по
+ * строке. Ширину по содержимому просит сам календарь: раскладка Frame пишет
+ * панели ширину `auto`, а у панели с `left` это место до края окна — у поля
+ * справа месяцы сложились бы в столбец. Поле вокруг календаря — внутри
+ * прокрутки: у края прокручиваемой области кольцо фокуса дня обрезалось бы.
+ * Закрытая панель, полоса жеста у края со стороны поля — `anchored.css` и
+ * `swipe.css`.
+ *
+ * Рамку коробки диапазона рисует тема и задаёт её толщину на блоке
+ * (`--so-date-picker-border`, контракт): строка слота считается без неё. Поле
+ * панели — переменная корня документа; умолчание — число темы oren, тема
+ * задаёт своё на корне документа.
+ *
+ * Облик — рамка коробки и её снятие у полей внутри, поверхность, кольцо
+ * фокуса, цвет тире пустого периода, вид кнопок, варианты и ошибка,
+ * поверхность, кромка, тень и скругление панели, её проявление и жест — рисует
+ * тема. */
+
+:root {
+	--so-date-picker-padding: 0.5rem;
+}
+
+.so-date-picker {
+	display: inline-flex;
+}
+
+.so-date-picker__field {
+	--so-date-picker-button: var(--so-date-input-slot-row);
+	flex-grow: 1;
+}
+
+.so-date-picker__clear,
+.so-date-picker__trigger {
+	flex-shrink: 0;
+	padding-inline: 0;
+	inline-size: var(--so-date-picker-button);
+	block-size: var(--so-date-picker-button);
+}
+
+/* Размер без модификатора — `normal`. `relative` — опора точки обязательного
+ * поля (`required.css`). */
+.so-date-picker--mode-range {
+	--so-date-picker-height: var(--so-input-height-normal);
+	--so-date-picker-slot-row: calc(
+		var(--so-date-picker-height) - 2 * var(--so-date-picker-border, 0px) - 2 *
+			var(--so-input-slot-gap)
+	);
+	--so-date-picker-button: var(--so-date-picker-slot-row);
+	position: relative;
+	display: inline-grid;
+	grid-template-columns: 1fr auto 1fr auto auto;
+	align-items: center;
+	height: var(--so-date-picker-height);
+}
+
+.so-date-picker--mode-range[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-date-picker--mode-range[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+.so-date-picker--mode-range > .so-date-picker__dash {
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-sm {
+	--so-date-picker-height: var(--so-input-height-sm);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-sm > .so-date-picker__dash {
+	font-size: var(--so-input-font-size-sm);
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-normal {
+	--so-date-picker-height: var(--so-input-height-normal);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-normal > .so-date-picker__dash {
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-lg {
+	--so-date-picker-height: var(--so-input-height-lg);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-lg > .so-date-picker__dash {
+	font-size: var(--so-input-font-size-lg);
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-xl {
+	--so-date-picker-height: var(--so-input-height-xl);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-xl > .so-date-picker__dash {
+	font-size: var(--so-input-font-size-xl);
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-2xl {
+	--so-date-picker-height: var(--so-input-height-2xl);
+}
+
+.so-date-picker--mode-range.so-date-picker--size-2xl > .so-date-picker__dash {
+	font-size: var(--so-input-font-size-2xl);
+	line-height: var(--so-date-picker-slot-row);
+}
+
+.so-date-picker--mode-range > .so-date-input {
+	align-self: stretch;
+	height: auto;
+}
+
+.so-date-picker--mode-range > .so-date-input.so-date-input:where([data-required='true'])::after {
+	content: none;
+}
+
+/* Минимум ряда держит поле начала: формат у полей один, и минимумы равны. */
+.so-date-picker--mode-range > .so-date-picker__end {
+	justify-self: flex-end;
+}
+
+.so-date-picker--mode-range > .so-date-picker__end .so-date-input__segments {
+	min-inline-size: 0;
+}
+
+.so-date-picker--mode-range > .so-date-picker__clear {
+	margin-inline-end: var(--so-input-slot-spacing);
+}
+
+.so-date-picker--mode-range > .so-date-picker__trigger {
+	margin-inline-end: var(--so-input-slot-padding);
+}
+
+.so-date-picker__panel {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	max-width: calc(100vw - 1rem);
+	max-height: calc(100dvh - 1rem);
+}
+
+.so-date-picker__content {
+	min-height: 0;
+	padding: var(--so-date-picker-padding);
+	overflow-y: auto;
+}
+
+.so-date-picker__content > .so-date-picker__calendar {
+	width: max-content;
+}

package/src/components/dialog.css

@@ -0,0 +1,95 @@
+/* ─── Dialog ──────────────────────────────────────────────────
+ * Модальное окно. Корень — сама панель: она телепортирована в `body` целиком
+ * и несёт слой окна, подложка — её сосед. Подложка, сетка панели, заголовок,
+ * тело, подвал и кнопки шапки — общие с выезжающей панелью (`modal.css`).
+ * Своё у окна — место, размер, отступ от краёв экрана и разворот: раскладка
+ * без замеров. Код отдаёт значения модификатором (`--placement-*`),
+ * переменными и `data-maximized`, остальное делает CSS.
+ *
+ * Место — полями, как у нативного `<dialog>`. Панель растянута по области —
+ * экрану без отступов, — а `auto`-поля по обе стороны оси ставят её по центру
+ * области: и размер, и место считает браузер. Отступы — `inset`, а не поля:
+ * процент поля считается от ширины экрана и по вертикали, а у `inset` — от
+ * экрана по своей оси. Неравные отступы сдвигают центр: окно стоит по центру
+ * области, а не экрана. Окно у края прижато к краю области и стоит по центру
+ * по другой оси; `start` и `end` — логические стороны, в RTL окно само
+ * встаёт у другого края.
+ *
+ * Отступ по сторонам код отдаёт переменными — из свойства `offset` и поправок
+ * подписчиков `layout:offset:before` (`--so-dialog-offset-top`, `-bottom`,
+ * `-start`, `-end`), — и только заданные: у незаданной стороны отступ по
+ * умолчанию (`--so-dialog-offset`). Он один на место и на потолок размера,
+ * поэтому окно у края, выросшее до потолка, встаёт от края до края с тем же
+ * отступом.
+ *
+ * Размер — `--so-dialog-width` и `--so-dialog-height`: умолчания — у корня
+ * документа (постоянная ширина: форма с полями на всю строку иначе сжалась бы
+ * до их ширины; высота по содержимому), а свойства `width` и `height` код
+ * пишет на окно инлайном. Значения — размер панели, растянутой по области,
+ * поэтому `auto` здесь значит «по экрану с отступом», а по содержимому —
+ * `fit-content`. Потолок — область, какой бы размер ни задали: на узком экране
+ * окно сжимается само, но не разворачивается. Проценты — от области просмотра
+ * без полосы прокрутки, а не `vw`: с полосой окно заходило бы под неё.
+ *
+ * Развёрнутое окно — на весь экран: место, размер и отступ не действуют.
+ *
+ * Облик — поверхность, кромка, тень и скругление, их снятие у развёрнутого
+ * окна, появление и исчезание — рисует тема. */
+
+:root {
+	--so-dialog-width: 32rem;
+	--so-dialog-height: fit-content;
+	--so-dialog-offset: 1rem;
+}
+
+/* Без кнопки её колонка пуста и ширины не занимает: колонки между собой без
+ * зазора, промежутки держат сами кнопки. */
+.so-dialog {
+	position: fixed;
+	inset-block: var(--so-dialog-offset-top, var(--so-dialog-offset))
+		var(--so-dialog-offset-bottom, var(--so-dialog-offset));
+	inset-inline: var(--so-dialog-offset-start, var(--so-dialog-offset))
+		var(--so-dialog-offset-end, var(--so-dialog-offset));
+	margin: auto;
+	grid-template-columns: minmax(0, 1fr) auto auto;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	grid-template-areas:
+		'title maximize close'
+		'body body body'
+		'footer footer footer';
+	width: var(--so-dialog-width);
+	height: var(--so-dialog-height);
+	max-width: calc(
+		100% - var(--so-dialog-offset-start, var(--so-dialog-offset)) -
+			var(--so-dialog-offset-end, var(--so-dialog-offset))
+	);
+	max-height: calc(
+		100% - var(--so-dialog-offset-top, var(--so-dialog-offset)) -
+			var(--so-dialog-offset-bottom, var(--so-dialog-offset))
+	);
+}
+
+.so-dialog--placement-top {
+	margin-block-start: 0;
+}
+
+.so-dialog--placement-bottom {
+	margin-block-end: 0;
+}
+
+.so-dialog--placement-start {
+	margin-inline-start: 0;
+}
+
+.so-dialog--placement-end {
+	margin-inline-end: 0;
+}
+
+.so-dialog[data-maximized='true'] {
+	inset: 0;
+	margin: 0;
+	width: auto;
+	height: auto;
+	max-width: none;
+	max-height: none;
+}

package/src/components/drag-and-drop.css

@@ -0,0 +1,18 @@
+/* ─── DragAndDrop ─────────────────────────────────────────────
+ * Перестановка элементов Tabs, ListBox и Accordion перетаскиванием. Своего
+ * узла у обёртки нет (у Web Components — автономный элемент без коробки), и
+ * своё у неё в CSS одно: класс взятого элемента. Его ставит плагин жеста
+ * (`TDragPlugin`) на узел элемента, пока жест идёт, и снимает, когда кончился.
+ *
+ *   .so-drag-and-drop__item     взятый элемент коллекции
+ *
+ * Взятый элемент текст не выделяет: протяжка — жест перестановки, а не
+ * выделение подписи под указателем.
+ *
+ * Облик взятого — приглушённость, тень, скругление и узор поверх него — рисует
+ * тема. */
+
+.so-drag-and-drop__item {
+	-webkit-user-select: none;
+	user-select: none;
+}