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

package/dist/setup/plugins/tabs-view.plugin.js

@@ -0,0 +1,100 @@
+import { afterPseudoTransitions } from "./transitions.js";
+import { TBasePlugin, TCollectionBundlesPlugin, TElementPlugin, TTabsActiveTabPlugin } from "@soxa-ui/plugins";
+//#region setup/plugins/tabs-view.plugin.ts
+/** Признак переезда на ряду: пока он стоит, тема ведёт геометрию переходом. */
+var MOVING = "--so-tabs-active-moving";
+var TTabsViewPlugin = class extends TBasePlugin {
+	_tabs = null;
+	_engine = null;
+	/**
+	* Таб, чьё место плагин записал последним; `null` — ещё не записывал или
+	* записал нули: активного таба не было.
+	*/
+	_drawn = null;
+	/** Ряд, на котором стоит признак переезда; `null` — признака нет. */
+	_moving = null;
+	/** Отмена ожидания конца переезда; `null` — плагин не ждёт. */
+	_stopWaiting = null;
+	install(ctx) {
+		super.install(ctx);
+		this._tabs = ctx.getInstance();
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", () => {
+			this._tabs?.dataset.add("ready-animation", true);
+		});
+		element?.events.on("removed", () => this._forget());
+		ctx.get(TCollectionBundlesPlugin)?.events.on("engine:bound", (engine) => {
+			this._engine = engine;
+		});
+		ctx.get(TTabsActiveTabPlugin)?.events.on("change:active-tab", ({ newValue: offset }) => {
+			this._updateActiveTab(offset);
+			this._updateGap(offset);
+		});
+	}
+	destroy() {
+		this._forget();
+		this._tabs = null;
+		this._engine = null;
+		super.destroy();
+	}
+	/** Место и длина активного таба по главной оси. */
+	_updateActiveTab(offset) {
+		const tabs = this._tabs;
+		const engine = this._engine;
+		if (!offset || !engine || !tabs) return;
+		const active = engine.extensions.activation.activeItem ?? null;
+		if (!active && engine.extensions.tabs.hasEnabledTabs()) return;
+		const { barEl, offsetLeft, offsetWidth, offsetTop, offsetHeight } = offset;
+		if (this._drawn && active && active !== this._drawn) this._startMoving(barEl);
+		this._drawn = active;
+		if (tabs.orientation === "vertical") {
+			barEl.style.setProperty("--so-tabs-active-pos", `${offsetTop}px`);
+			barEl.style.setProperty("--so-tabs-active-size", `${offsetHeight}px`);
+		} else {
+			barEl.style.setProperty("--so-tabs-active-pos", `${offsetLeft}px`);
+			barEl.style.setProperty("--so-tabs-active-size", `${offsetWidth}px`);
+		}
+		if (this._moving === barEl) {
+			this._stopWaiting?.();
+			this._stopWaiting = afterPseudoTransitions(barEl, () => this._stopMoving());
+		}
+	}
+	/** Разрыв линии ряда под активным табом. */
+	_updateGap(offset) {
+		const tabs = this._tabs;
+		if (!offset || !this._engine || !tabs) return;
+		const { barEl, offsetLeft, offsetWidth, offsetTop, offsetHeight } = offset;
+		if (tabs.orientation === "vertical") {
+			barEl.style.setProperty("--so-tabs-gap-pos", `${offsetTop + 1}px`);
+			barEl.style.setProperty("--so-tabs-gap-size", `${offsetHeight - 1}px`);
+		} else {
+			barEl.style.setProperty("--so-tabs-gap-pos", `${offsetLeft + 1}px`);
+			barEl.style.setProperty("--so-tabs-gap-size", `${offsetWidth - 1}px`);
+		}
+	}
+	/** Признак переезда на ряд — до записи нового места. */
+	_startMoving(bar) {
+		if (this._moving !== bar) this._stopMoving();
+		bar.style.setProperty(MOVING, "1");
+		this._moving = bar;
+	}
+	/** Снять признак переезда и ожидание его конца. */
+	_stopMoving() {
+		this._stopWaiting?.();
+		this._stopWaiting = null;
+		this._moving?.style.removeProperty(MOVING);
+		this._moving = null;
+	}
+	/**
+	* Забыть всё, что плагин нарисовал: узел снят или плагин уничтожен. Новый
+	* узел до первого замера получит прежнюю разметку без переменных — тема
+	* рисует её статично, — а его первая запись идёт без признака.
+	*/
+	_forget() {
+		this._stopMoving();
+		this._drawn = null;
+		this._tabs?.dataset.remove("ready-animation");
+	}
+};
+//#endregion
+export { TTabsViewPlugin };

package/dist/setup/plugins/toasts-front.plugin.d.ts

@@ -0,0 +1,63 @@
+import type { IToasts } from '@soxa-ui/core';
+import { TBasePlugin } from '@soxa-ui/plugins';
+import type { IPluginContext } from '@soxa-ui/plugins';
+/**
+ * TToastsFrontPlugin — высота переднего тоста стопки для CSS общего слоя тем.
+ *
+ * В стопке (`layout: 'cascade'`) задние тосты стоят за передним его высоты и
+ * выглядывают из-под него на ступень (`components/toasts.css` общего слоя тем).
+ * Свою высоту задний меняет переходом темы, когда передний сменился, а для
+ * перехода нужно число: высоту переднего одной переменной CSS не знает — у
+ * тостов описание, своё содержимое, перенос строк. Её и пишет плагин —
+ * переменной `--so-toasts-front-height` на регионе, в px; без переменной
+ * задний берёт высоту ячейки стопки, то есть ту же, но без перехода.
+ *
+ * Передний — тот же, что у CSS: тост под фокусом (`:focus-within`), а без
+ * фокуса в стопке — первый, а за закрытым первым — следующий: закрытый
+ * гаснет, и на его место уже встал он. Пока у региона есть узел и тосты
+ * стоят стопкой, `ResizeObserver` следит за передним и пишет его высоту по
+ * оси блока на каждую смену. Кто передний, плагин пересматривает, когда
+ * меняется состав списка или закрывается тост (новый тост, перестановка,
+ * уход, `data-open` — `MutationObserver` на списке) и когда фокус входит в
+ * стопку или уходит из неё. Стопку сменили на столбец, узел сняли или плагин
+ * уничтожен — наблюдение снято вместе с переменной.
+ *
+ * Плагин общего слоя тем, а не библиотеки: переменную читает CSS общего слоя
+ * — по ней он ставит высоту задних, а тема ведёт её переходом, — и библиотека
+ * о ней не знает. Ставит его тема своим `defineTheme` на все Toasts (у oren —
+ * `setup/plugins/install.ts`).
+ */
+export declare class TToastsFrontPlugin extends TBasePlugin<IToasts> {
+    private _owner;
+    /** Корень региона, объявленный `TElementPlugin`; `null` — узла нет. */
+    private _root;
+    /** Регион, на котором записана высота; `null` — плагин за стопкой не следит. */
+    private _region;
+    /** Список тостов региона. */
+    private _list;
+    /** Передний тост, за которым следит наблюдатель. */
+    private _front;
+    private _resize;
+    private _mutation;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _bind;
+    /** Следить за передним — пока у региона есть узел и тосты стоят стопкой. */
+    private readonly _sync;
+    private _start;
+    private _stop;
+    /**
+     * Передний — тост под фокусом; без фокуса в стопке — первый, а за закрытым
+     * первым — следующий. Выбор тот же, что у общего слоя тем
+     * (`components/toasts.css`) и у движения темы (у oren — `$cascade-front`).
+     */
+    private readonly _pick;
+    /**
+     * Фокус уходит: где он окажется, известно, когда смена фокуса закончилась.
+     * Пришёл он в другой тост стопки — переднего пересмотрит `focusin`, ушёл из
+     * стопки — передним снова станет первый.
+     */
+    private readonly _onFocusOut;
+    /** Высота переднего по оси блока — та же ось, что у высоты задних в теме. */
+    private readonly _onResize;
+}

package/dist/setup/plugins/toasts-front.plugin.js

@@ -0,0 +1,131 @@
+import { TBasePlugin, TElementPlugin } from "@soxa-ui/plugins";
+//#region setup/plugins/toasts-front.plugin.ts
+/** Высота переднего тоста стопки на регионе: по ней CSS держит высоту задних. */
+var FRONT_HEIGHT = "--so-toasts-front-height";
+/**
+* TToastsFrontPlugin — высота переднего тоста стопки для CSS общего слоя тем.
+*
+* В стопке (`layout: 'cascade'`) задние тосты стоят за передним его высоты и
+* выглядывают из-под него на ступень (`components/toasts.css` общего слоя тем).
+* Свою высоту задний меняет переходом темы, когда передний сменился, а для
+* перехода нужно число: высоту переднего одной переменной CSS не знает — у
+* тостов описание, своё содержимое, перенос строк. Её и пишет плагин —
+* переменной `--so-toasts-front-height` на регионе, в px; без переменной
+* задний берёт высоту ячейки стопки, то есть ту же, но без перехода.
+*
+* Передний — тот же, что у CSS: тост под фокусом (`:focus-within`), а без
+* фокуса в стопке — первый, а за закрытым первым — следующий: закрытый
+* гаснет, и на его место уже встал он. Пока у региона есть узел и тосты
+* стоят стопкой, `ResizeObserver` следит за передним и пишет его высоту по
+* оси блока на каждую смену. Кто передний, плагин пересматривает, когда
+* меняется состав списка или закрывается тост (новый тост, перестановка,
+* уход, `data-open` — `MutationObserver` на списке) и когда фокус входит в
+* стопку или уходит из неё. Стопку сменили на столбец, узел сняли или плагин
+* уничтожен — наблюдение снято вместе с переменной.
+*
+* Плагин общего слоя тем, а не библиотеки: переменную читает CSS общего слоя
+* — по ней он ставит высоту задних, а тема ведёт её переходом, — и библиотека
+* о ней не знает. Ставит его тема своим `defineTheme` на все Toasts (у oren —
+* `setup/plugins/install.ts`).
+*/
+var TToastsFrontPlugin = class extends TBasePlugin {
+	_owner = null;
+	/** Корень региона, объявленный `TElementPlugin`; `null` — узла нет. */
+	_root = null;
+	/** Регион, на котором записана высота; `null` — плагин за стопкой не следит. */
+	_region = null;
+	/** Список тостов региона. */
+	_list = null;
+	/** Передний тост, за которым следит наблюдатель. */
+	_front = null;
+	_resize = null;
+	_mutation = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance();
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => this._bind(node));
+		element?.events.on("removed", () => this._bind(null));
+		this._listenTo(this._owner?.events, "change:layout", this._sync);
+	}
+	destroy() {
+		this._bind(null);
+		this._resize = null;
+		this._mutation = null;
+		this._owner = null;
+		super.destroy();
+	}
+	_bind(root) {
+		this._stop();
+		this._root = root;
+		this._sync();
+	}
+	/** Следить за передним — пока у региона есть узел и тосты стоят стопкой. */
+	_sync = () => {
+		const on = Boolean(this._root && this._owner?.layout === "cascade");
+		if (on && !this._region) this._start();
+		else if (!on && this._region) this._stop();
+	};
+	_start() {
+		const root = this._root;
+		const owner = this._owner;
+		if (!(root instanceof HTMLElement) || !owner) return;
+		const list = root.querySelector(`:scope > .${owner.classes.resolve("__list")}`);
+		if (!list) return;
+		this._region = root;
+		this._list = list;
+		this._resize ??= new ResizeObserver(this._onResize);
+		this._mutation ??= new MutationObserver(this._pick);
+		this._mutation.observe(list, {
+			childList: true,
+			subtree: true,
+			attributeFilter: ["data-open"]
+		});
+		root.addEventListener("focusin", this._pick);
+		root.addEventListener("focusout", this._onFocusOut);
+		this._pick();
+	}
+	_stop() {
+		this._resize?.disconnect();
+		this._mutation?.disconnect();
+		this._region?.removeEventListener("focusin", this._pick);
+		this._region?.removeEventListener("focusout", this._onFocusOut);
+		this._region?.style.removeProperty(FRONT_HEIGHT);
+		this._region = null;
+		this._list = null;
+		this._front = null;
+	}
+	/**
+	* Передний — тост под фокусом; без фокуса в стопке — первый, а за закрытым
+	* первым — следующий. Выбор тот же, что у общего слоя тем
+	* (`components/toasts.css`) и у движения темы (у oren — `$cascade-front`).
+	*/
+	_pick = () => {
+		const items = [...this._list?.children ?? []];
+		const [first, second] = items;
+		const closed = first instanceof HTMLElement && first.dataset.open === "false";
+		const front = items.find((item) => item.matches(":focus-within")) ?? (closed ? second : void 0) ?? first ?? null;
+		if (front === this._front) return;
+		if (this._front) this._resize?.unobserve(this._front);
+		this._front = front;
+		if (front) this._resize?.observe(front);
+		else this._region?.style.removeProperty(FRONT_HEIGHT);
+	};
+	/**
+	* Фокус уходит: где он окажется, известно, когда смена фокуса закончилась.
+	* Пришёл он в другой тост стопки — переднего пересмотрит `focusin`, ушёл из
+	* стопки — передним снова станет первый.
+	*/
+	_onFocusOut = () => {
+		queueMicrotask(this._pick);
+	};
+	/** Высота переднего по оси блока — та же ось, что у высоты задних в теме. */
+	_onResize = (entries) => {
+		for (const entry of entries) {
+			const [size] = entry.borderBoxSize;
+			if (entry.target === this._front && size) this._region?.style.setProperty(FRONT_HEIGHT, `${size.blockSize}px`);
+		}
+	};
+};
+//#endregion
+export { TToastsFrontPlugin };

package/dist/setup/plugins/transitions.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Ожидание конца переезда геометрии активного таба — когда `TTabsViewPlugin`
+ * может снять с ряда признак переезда.
+ *
+ * Геометрию активного таба тема рисует псевдоэлементами самого ряда — у
+ * oren полосу `line` и карточку `contained`, — и ведёт её переходом, пока на
+ * ряду стоит признак `--so-tabs-active-moving`; без него длительность
+ * перехода нулевая.
+ * Снимать признак надо, когда переход доиграл: снятый посреди переезда, он
+ * выключил бы переход у сдвига, пришедшего следом (сосед встал на место
+ * закрытого таба), и отметка доскочила бы рывком.
+ *
+ * Чисел темы здесь нет: сколько длится переход, знает сам переход.
+ *
+ * Устроено как ожидание закрытия у замка прокрутки в `@soxa-ui/plugins`
+ * (`utils/afterTransitions.ts`). Утилиты плагинов наружу не отдаются, а
+ * выборка здесь своя: переходы псевдоэлементов узла, а не самого узла.
+ */
+/**
+ * Позвать `done`, когда псевдоэлементы узла доиграют CSS-переходы, которые
+ * идут у них кадром позже. Отдаёт отмену: после неё `done` не позовётся, даже
+ * если ожидание кончится потом.
+ *
+ * **Кадр.** Переменные на ряду плагин пишет сразу, а выбранный таб адаптер
+ * отрисует в своём цикле — от него зависит, есть ли карточка вовсе. Кадром
+ * позже разметка уже отрисована. Отрисовки кадра ждать не нужно:
+ * `getAnimations()` сам применяет отложенные стили, и переход, который начала
+ * запись, виден сразу.
+ *
+ * **Какие переходы.** Только псевдоэлементов самого узла: у ряда в
+ * `getAnimations({ subtree: true })` есть и переходы табов — цвет текста
+ * строки под указателем и подобное, — а переезду они не принадлежат. И только
+ * `CSSTransition`: у перехода конец есть всегда. Классы берутся из окна узла, а
+ * не глобальные: компонент живёт и в `iframe`, и объекты его анимаций — из
+ * чужого окна.
+ *
+ * **Конец** — `finished` у каждого перехода. Отменённый переход (`finished`
+ * отклонён с `AbortError`: карточку сняли, переход перебит новым значением) —
+ * тоже конец, и отклонение обработано здесь же: необработанное ушло бы в
+ * `unhandledrejection`. Переходов нет или нет Web Animations вовсе (jsdom) —
+ * `done` зовётся в том же кадре.
+ */
+export declare function afterPseudoTransitions(element: Element, done: () => void): () => void;

package/dist/setup/plugins/transitions.js

@@ -0,0 +1,75 @@
+//#region setup/plugins/transitions.ts
+/**
+* Ожидание конца переезда геометрии активного таба — когда `TTabsViewPlugin`
+* может снять с ряда признак переезда.
+*
+* Геометрию активного таба тема рисует псевдоэлементами самого ряда — у
+* oren полосу `line` и карточку `contained`, — и ведёт её переходом, пока на
+* ряду стоит признак `--so-tabs-active-moving`; без него длительность
+* перехода нулевая.
+* Снимать признак надо, когда переход доиграл: снятый посреди переезда, он
+* выключил бы переход у сдвига, пришедшего следом (сосед встал на место
+* закрытого таба), и отметка доскочила бы рывком.
+*
+* Чисел темы здесь нет: сколько длится переход, знает сам переход.
+*
+* Устроено как ожидание закрытия у замка прокрутки в `@soxa-ui/plugins`
+* (`utils/afterTransitions.ts`). Утилиты плагинов наружу не отдаются, а
+* выборка здесь своя: переходы псевдоэлементов узла, а не самого узла.
+*/
+/**
+* Позвать `done`, когда псевдоэлементы узла доиграют CSS-переходы, которые
+* идут у них кадром позже. Отдаёт отмену: после неё `done` не позовётся, даже
+* если ожидание кончится потом.
+*
+* **Кадр.** Переменные на ряду плагин пишет сразу, а выбранный таб адаптер
+* отрисует в своём цикле — от него зависит, есть ли карточка вовсе. Кадром
+* позже разметка уже отрисована. Отрисовки кадра ждать не нужно:
+* `getAnimations()` сам применяет отложенные стили, и переход, который начала
+* запись, виден сразу.
+*
+* **Какие переходы.** Только псевдоэлементов самого узла: у ряда в
+* `getAnimations({ subtree: true })` есть и переходы табов — цвет текста
+* строки под указателем и подобное, — а переезду они не принадлежат. И только
+* `CSSTransition`: у перехода конец есть всегда. Классы берутся из окна узла, а
+* не глобальные: компонент живёт и в `iframe`, и объекты его анимаций — из
+* чужого окна.
+*
+* **Конец** — `finished` у каждого перехода. Отменённый переход (`finished`
+* отклонён с `AbortError`: карточку сняли, переход перебит новым значением) —
+* тоже конец, и отклонение обработано здесь же: необработанное ушло бы в
+* `unhandledrejection`. Переходов нет или нет Web Animations вовсе (jsdom) —
+* `done` зовётся в том же кадре.
+*/
+function afterPseudoTransitions(element, done) {
+	let cancelled = false;
+	const finish = () => {
+		if (!cancelled) done();
+	};
+	const frame = requestAnimationFrame(() => {
+		const transitions = pseudoTransitionsOf(element);
+		if (transitions.length === 0) {
+			finish();
+			return;
+		}
+		Promise.all(transitions.map(ended)).then(finish);
+	});
+	return () => {
+		cancelled = true;
+		cancelAnimationFrame(frame);
+	};
+}
+/** Идущие CSS-переходы псевдоэлементов самого узла. */
+function pseudoTransitionsOf(element) {
+	const view = element.ownerDocument.defaultView;
+	const Transition = view?.CSSTransition;
+	const Effect = view?.KeyframeEffect;
+	if (typeof Transition !== "function" || typeof Effect !== "function" || typeof element.getAnimations !== "function") return [];
+	return element.getAnimations({ subtree: true }).filter((animation) => animation instanceof Transition && animation.effect instanceof Effect && animation.effect.target === element && animation.effect.pseudoElement !== null);
+}
+/** Переход доиграл или его отменили — для признака это одно и то же. */
+function ended(transition) {
+	return transition.finished.catch(() => void 0);
+}
+//#endregion
+export { afterPseudoTransitions };

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@soxa-ui/theme-base",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0-beta.1",
+  "description": "Общий слой тем Soxa UI: сброс частей библиотеки, знак направления письма и структура частей с числами в переменных — чистый CSS, без препроцессора, — и плагины раскладки для поведения темы",
+  "keywords": [
+    "soxa",
+    "ui",
+    "theme",
+    "css"
+  ],
+  "license": "MIT",
+  "author": "Yuri Soldatov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/youra-h/soxa-ui.git",
+    "directory": "packages/themes/base"
+  },
+  "homepage": "https://github.com/youra-h/soxa-ui",
+  "bugs": {
+    "url": "https://github.com/youra-h/soxa-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "style": "./src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./setup": {
+      "types": "./dist/setup/index.d.ts",
+      "default": "./dist/setup/index.js"
+    },
+    "./theme-variables.json": "./theme-variables.json",
+    "./theme-contract.json": "./theme-contract.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "theme-variables.json",
+    "theme-contract.json"
+  ],
+  "scripts": {
+    "build": "vite build -c vite.setup.config.ts && tsc -p tsconfig.build.json",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@soxa-ui/core": "^0.3.0-beta.1",
+    "@soxa-ui/plugins": "^0.3.0-beta.1"
+  },
+  "devDependencies": {
+    "postcss": "^8.5.9",
+    "postcss-selector-parser": "^7.1.6"
+  }
+}

package/src/anchored.css

@@ -0,0 +1,75 @@
+/* ─── Панель у якоря ─────────────────────────────────────────
+ * Немодальный слой у своего поля или триггера: панели Popover, Select и
+ * DatePicker, панель Menu и панель его пункта (`Menu.PopoverItem`). Панель —
+ * Frame, телепортированный в `body`; её открытость пишет её слой —
+ * `data-open` (`true`/`false`), — а закрытую разметка прячет (`display:
+ * none`).
+ *
+ * Закрытая панель нажатий не ловит. Тема вправе гасить её переходом: тогда
+ * `display` идёт переходом с `allow-discrete`, и до конца перехода закрытая
+ * панель ещё в раскладке, — но она уже не открыта, и нажатие сквозь неё —
+ * нажатие по тому, что под ней. Конца переходов ждёт код (`afterTransitions`:
+ * сброс отбора Select, конец слежения за якорем); без перехода он наступает
+ * тем же кадром.
+ *
+ * Полоса жеста (`swipe`) у панели у якоря стоит там, откуда панель тянут, — у
+ * края со стороны якоря: под ним — у верхнего края панели, над ним — у
+ * нижнего. Сторону после flip пишет в саму панель плагин якоря
+ * (`data-placement`). Зона захвата — поле панели с этой стороны, поэтому
+ * содержимое полоса не накрывает, а его раскладка та же, что без неё. Сама
+ * полоса — `swipe.css`, у панели Popover в контейнере её место по краю
+ * (`components/popover.css`). Пока панель тянут (`data-swiping`), курсор
+ * «держу» — по всей панели, куда бы он ни ушёл.
+ *
+ * Во время жеста панель идёт за указателем: сдвиг плагина жеста
+ * (`--so-swipe-offset`, `swipe.css`) — её `translate`, вдоль оси якоря. Только
+ * у панели с жестом: `translate`, даже нулевой, делает панель контейнером для
+ * `position: fixed` внутри неё. У панели Popover в контейнере ось — её край
+ * (`components/popover.css`).
+ *
+ * Облик — поверхность, кромка, тень, скругление, проявление и исчезание,
+ * возврат отпущенной и уход смахнутой панели — рисует тема. */
+
+.so-popover__panel[data-open='false'],
+.so-select__panel[data-open='false'],
+.so-date-picker__panel[data-open='false'],
+.so-menu__panel[data-open='false'],
+.so-menu-item__panel[data-open='false'] {
+	pointer-events: none;
+}
+
+.so-popover__panel:has(> .so-popover__handle),
+.so-select__panel:has(> .so-select__handle),
+.so-date-picker__panel:has(> .so-date-picker__handle) {
+	padding-block-start: var(--so-target-size);
+	translate: 0 var(--so-swipe-offset);
+}
+
+.so-popover__panel:has(> .so-popover__handle)[data-placement^='top'],
+.so-select__panel:has(> .so-select__handle)[data-placement^='top'],
+.so-date-picker__panel:has(> .so-date-picker__handle)[data-placement^='top'] {
+	padding-block-start: 0;
+	padding-block-end: var(--so-target-size);
+}
+
+.so-popover__panel:has(> .so-popover__handle)[data-swiping='true'],
+.so-select__panel:has(> .so-select__handle)[data-swiping='true'],
+.so-date-picker__panel:has(> .so-date-picker__handle)[data-swiping='true'] {
+	cursor: grabbing;
+}
+
+.so-popover__panel > .so-popover__handle,
+.so-select__panel > .so-select__handle,
+.so-date-picker__panel > .so-date-picker__handle {
+	position: absolute;
+	inset-inline: 0;
+	top: 0;
+	block-size: var(--so-target-size);
+}
+
+.so-popover__panel[data-placement^='top'] > .so-popover__handle,
+.so-select__panel[data-placement^='top'] > .so-select__handle,
+.so-date-picker__panel[data-placement^='top'] > .so-date-picker__handle {
+	top: auto;
+	bottom: 0;
+}

package/src/caption.css

@@ -0,0 +1,71 @@
+/* ─── Шкала подписи ──────────────────────────────────────────
+ * Кегль текста рядом с контролом и зазор до контрола — одна шкала на всех,
+ * кто подписывает контрол: подпись `Label`, подпись и справка поля формы
+ * `Field`, текст радио. Радио со своим текстом и радио в подписи выглядят
+ * одинаково, а флажок в подписи и поле ввода в Field стоят от своих подписей
+ * на одном расстоянии. Без общей шкалы каждое место завело бы свои числа, и
+ * форма из разных контролов разошлась бы в зазорах.
+ *
+ * Ступени — переменные корня документа по размеру (`sm`…`2xl`): их читают
+ * правила размера каждого блока. Умолчания — числа темы oren; тема задаёт
+ * свои на корне документа, приложение — на предке своей области.
+ *
+ * - `gap` — зазор сбоку: подпись в начале или в конце строки;
+ * - `stack` — над контролом или под ним: подпись над полем, справка под ним.
+ *   На глаз он равен боковому, а числом вдвое меньше: в столбце к зазору
+ *   прибавляются полуинтерлиньяж и выносные элементы строки, сбоку — только
+ *   поля глифа;
+ * - `font-size` и `line-height` — кегль подписи. У `normal` его нет: подпись
+ *   берёт кегль места, как значение в поле рядом;
+ * - `note-font-size` и `note-line-height` — кегль справки при контроле
+ *   (подсказка и ошибка Field): на ступень мельче подписи — справка поясняет
+ *   контрол, а не называет его.
+ *
+ * Зазор меряется от коробки контрола: поле ввода и флажок стоят от подписи на
+ * одном расстоянии, как бы ни отличалась их высота. */
+
+:root {
+	--so-caption-gap-sm: 0.375rem;
+	--so-caption-gap-normal: 0.5rem;
+	--so-caption-gap-lg: 0.625rem;
+	--so-caption-gap-xl: 0.75rem;
+	--so-caption-gap-2xl: 0.875rem;
+
+	--so-caption-stack-sm: 0.1875rem;
+	--so-caption-stack-normal: 0.25rem;
+	--so-caption-stack-lg: 0.3125rem;
+	--so-caption-stack-xl: 0.375rem;
+	--so-caption-stack-2xl: 0.4375rem;
+
+	/* The caption 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-caption-font-size-sm: calc(1em - 0.125rem);
+	--so-caption-line-height-sm: calc(1.25 / 0.875);
+	--so-caption-font-size-lg: calc(1em + 0.125rem);
+	--so-caption-line-height-lg: calc(1.75 / 1.125);
+	--so-caption-font-size-xl: calc(1em + 0.25rem);
+	--so-caption-line-height-xl: calc(1.75 / 1.25);
+	--so-caption-font-size-2xl: calc(1em + 0.5rem);
+	--so-caption-line-height-2xl: calc(2 / 1.5);
+
+	/* Notes are a step smaller than the text next to them, and every step counts
+	 * from the font of the place: 4px smaller at `sm`, 2px at `normal`, the font
+	 * of the place at `lg`, 2px and 4px larger at `xl` and `2xl` — 12 / 14 / 16
+	 * / 18 / 20px at a 16px place, 10 / 12 / 14 / 16 / 18px at 14px. `em`
+	 * resolves where the variable is read: on the helper and error of Field, the
+	 * counter of Textarea, the mark labels of Slider and the group labels of
+	 * rows, each against a parent without a font of its own, that is the place. */
+	--so-caption-note-font-size-sm: calc(1em - 0.25rem);
+	--so-caption-note-line-height-sm: calc(1 / 0.75);
+	--so-caption-note-font-size-normal: calc(1em - 0.125rem);
+	--so-caption-note-line-height-normal: calc(1.25 / 0.875);
+	--so-caption-note-font-size-lg: 1em;
+	--so-caption-note-line-height-lg: calc(1.5 / 1);
+	--so-caption-note-font-size-xl: calc(1em + 0.125rem);
+	--so-caption-note-line-height-xl: calc(1.75 / 1.125);
+	--so-caption-note-font-size-2xl: calc(1em + 0.25rem);
+	--so-caption-note-line-height-2xl: calc(1.75 / 1.25);
+}