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

package/dist/custom/overlay/hide-outside/hide-outside.plugin.js

@@ -0,0 +1,187 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isAboveLayer } from "../../../utils/isAboveLayer.js";
+import { bindOverlayOpen } from "../open-state.js";
+import { TDismissPlugin } from "../../dismiss/dismiss.plugin.js";
+import { markHidden, unmarkHidden } from "./marks.js";
+import { FRAME_LAYER_ATTRIBUTE } from "@soxa-ui/core";
+//#region src/custom/overlay/hide-outside/hide-outside.plugin.ts
+/**
+* Поводы пересчитать набор: состав поддерева `body` и номера слоёв. Свой
+* атрибут (`aria-hidden`) в фильтр не входит — запись пометок наблюдателя не
+* будит.
+*/
+var OBSERVED = {
+	childList: true,
+	subtree: true,
+	attributes: true,
+	attributeFilter: [FRAME_LAYER_ATTRIBUTE]
+};
+/**
+* THideOutsidePlugin — пока владелец открыт, фон под ним спрятан от
+* скринридера.
+*
+* Вторая половина модальности. Фокус в модальной панели держит
+* `TModalFocusPlugin`, но скринридер читает страницу и без фокуса — режимом
+* чтения, стрелками. APG требует, чтобы фон модального окна был для него
+* недоступен: `aria-modal="true"` на панели (его пишет ядро окна в свой
+* `aria`) закрывает это только у современных скринридеров, а режим чтения
+* браузера и старые AT уважают лишь пометку на самих узлах фона.
+*
+* **Пометка — `aria-hidden="true"`, а не `inert`.** `inert` отнимает у фона
+* ещё и фокус, а фокусом владеет модель фокуса: при закрытии она сразу
+* возвращает его в фон, и пока фон `inert`, `focus()` молча не срабатывает.
+* Работа зависела бы от того, какой из двух плагинов раньше узнал о
+* закрытии. Здесь — только то, что видит скринридер.
+*
+* **Что остаётся доступным.** Панель — узел с пометкой владельцем
+* (`TDismissPlugin.findPanel()`), а без неё корень: у модального окна корень
+* телепортирован целиком (то же правило, что у `TModalFocusPlugin`). И
+* слои, открытые поверх панели: список Select в окне — тоже панель в `body`,
+* соседка окна, а не его потомок. Слой выше — по номеру слоя `TLayer`
+* (`data-layer`) и тем же правилом, по которому `TDismissPlugin` считает
+* нажатие в такой список нажатием внутри (`isAboveLayer`): панель, в которую
+* можно нажать, не должна быть немой.
+*
+* **Что прячется** — соседи оставленных узлов и соседи их предков вплоть до
+* `body`. Вверх, а не только дети `body`: `TFrame` телепортируют и глубже
+* (`target`), и тогда соседи панели внутри своего контейнера — тоже фон.
+*
+* **Набор пересчитывается, а не снимается при открытии.** Скрытый `TFrame`
+* лежит в `body` уже смонтированным, а номер слоя пишет только показ, и
+* скрытие его не снимает: у скрытой панели номера нет или он остался от
+* прошлого показа. Список Select, открытый из окна, получает номер выше уже
+* при открытом окне. Поэтому, пока фон спрятан, `MutationObserver` на `body`
+* следит за составом поддерева и за `data-layer`: панель и её слой читаются
+* на каждом пересчёте заново, а в DOM пишется только разница.
+*
+* **Слоёв бывает несколько** — окно поверх окна прячет и нижнее вместе с
+* фоном, — поэтому пометка у узла одна на всех, со счётчиком (`marks.ts`):
+* закрытие одного окна не снимает пометок другого, в каком бы порядке их ни
+* закрывали, а последнее снятие возвращает то `aria-hidden`, что было у узла
+* до первой пометки. Свои пометки плагин снимает при закрытии, при
+* размонтировании корня и в `destroy()`.
+*
+* Открытость плагин ведёт сам — по свойству владельца (`property`, по
+* умолчанию `open`), как `TScrollLockPlugin`; вручную — `enabled` при
+* `property: null`. Документ берётся у корня, а не из `globalThis`:
+* компонент живёт и в `iframe`.
+*
+* Чего плагин не делает: `aria-modal` пишет в свой набор ядро окна — это
+* значение, а не операция; исключений для живых областей нет — фон
+* прячется целиком, как у нативного `<dialog>`.
+*/
+var THideOutsidePlugin = class THideOutsidePlugin extends TBasePlugin {
+	/** Умолчания опций, объявленных пропами, — см. `TDismissPlugin.defaultValues`. */
+	static defaultValues = { enabled: false };
+	_open = null;
+	_dismiss = null;
+	_element = null;
+	_enabled = THideOutsidePlugin.defaultValues.enabled;
+	/** `body` под наблюдением; `null` — фон не спрятан. */
+	_body = null;
+	_observer = null;
+	/** Узлы, которые пометил этот плагин: снимает он ровно их. */
+	_hidden = /* @__PURE__ */ new Set();
+	install(ctx, options) {
+		super.install(ctx, options);
+		this._dismiss = ctx.get(TDismissPlugin) ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => {
+			this._element = element;
+			this._sync();
+		});
+		elementPlugin?.events.on("removed", () => {
+			this._element = null;
+			this._sync();
+		});
+		this._enabled = options?.enabled ?? this._enabled;
+		this._open = bindOverlayOpen(ctx, options, (open) => {
+			this.enabled = open;
+		});
+		if (this._open) this.enabled = this._open.read();
+		this._sync();
+	}
+	/**
+	* Спрятан ли фон. Владелец взводит это открытием; своё значение плагин
+	* держит и без корня — фон спрячется, как только корень объявят.
+	*/
+	get enabled() {
+		return this._enabled;
+	}
+	set enabled(value) {
+		const oldEnabled = this.enabled;
+		if (this._enabled === value) return;
+		this._enabled = value;
+		this._sync();
+		this.events.emit("change:enabled", {
+			newValue: value,
+			oldValue: oldEnabled
+		});
+	}
+	destroy() {
+		this._enabled = false;
+		this._sync();
+		this._observer = null;
+		this._element = null;
+		this._dismiss = null;
+		this._open?.unbind();
+		this._open = null;
+		super.destroy();
+	}
+	/** Фон спрятан ровно тогда, когда владелец открыт и корень объявлен. */
+	_sync() {
+		const body = this._enabled ? this._element?.ownerDocument.body ?? null : null;
+		if (body !== this._body) {
+			this._observer?.disconnect();
+			this._body = body;
+			if (body) {
+				this._observer ??= new MutationObserver(this._refresh);
+				this._observer.observe(body, OBSERVED);
+			}
+		}
+		this._refresh();
+	}
+	/** Пересчитать, что спрятать, и записать в DOM только разницу. */
+	_refresh = () => {
+		const next = this._body && this._element ? this._outside(this._body, this._element) : /* @__PURE__ */ new Set();
+		for (const node of this._hidden) {
+			if (next.has(node)) continue;
+			unmarkHidden(node);
+			this._hidden.delete(node);
+		}
+		for (const node of next) {
+			if (this._hidden.has(node)) continue;
+			markHidden(node);
+			this._hidden.add(node);
+		}
+	};
+	/** Фон панели: всё в `body`, кроме неё и слоёв выше неё. */
+	_outside(body, root) {
+		const panel = this._dismiss?.findPanel() ?? root;
+		if (panel === body || !body.contains(panel)) return /* @__PURE__ */ new Set();
+		return siblingsOutside(body, [panel, ...[...body.querySelectorAll(`[${FRAME_LAYER_ATTRIBUTE}]`)].filter((node) => isAboveLayer(node, panel))]);
+	}
+};
+/**
+* Соседи оставленных узлов и их предков вплоть до `body` — то, что прячется,
+* чтобы доступными остались только они. Все оставленные лежат внутри `body`.
+*
+* Узел внутри другого оставленного отдельно не считается: он доступен вместе
+* с ним, и соседей внутри своего не прячет. Иначе слой, телепортированный в
+* панель окна, спрятал бы её содержимое.
+*/
+function siblingsOutside(body, keep) {
+	const kept = keep.filter((node) => !keep.some((other) => other !== node && other.contains(node)));
+	/** Оставленные узлы и их предки ниже `body`: их самих не прячем. */
+	const path = /* @__PURE__ */ new Set();
+	for (const node of kept) for (let current = node; current && current !== body; current = current.parentElement) path.add(current);
+	const hidden = /* @__PURE__ */ new Set();
+	for (const parent of [body, ...path]) {
+		if (kept.includes(parent)) continue;
+		for (const child of parent.children) if (!path.has(child)) hidden.add(child);
+	}
+	return hidden;
+}
+//#endregion
+export { THideOutsidePlugin };

package/dist/custom/overlay/hide-outside/index.d.ts

@@ -0,0 +1,2 @@
+export { THideOutsidePlugin } from './hide-outside.plugin';
+export type { IHideOutsidePluginOptions, THideOutsidePluginEvents } from './types';

package/dist/custom/overlay/hide-outside/marks.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Пометки «спрятано от скринридера» со счётчиком на узел.
+ *
+ * Модальных слоёв бывает несколько — окно, из него второе окно, — и каждый
+ * прячет фон сам. Узел страницы под обоими помечен дважды, и закрытие
+ * верхнего не должно открыть его, пока нижний ещё открыт. Флагом у плагина
+ * этого не выразить: плагин, снимая свою пометку, затёр бы чужую. Поэтому
+ * пометка у узла одна на всех, у неё счётчик, и `aria-hidden` возвращается,
+ * когда её снял последний.
+ *
+ * Возвращается **то значение, что было до первой пометки**, а не пустое:
+ * `aria-hidden` страница могла поставить и сама — в том числе `"false"`.
+ *
+ * Тот же приём, что у замка прокрутки (`../scroll-lock/lock.ts`).
+ */
+/** Спрятать узел. Первая пометка пишет атрибут, остальные считаются. */
+export declare function markHidden(node: Element): void;
+/** Снять пометку. Атрибут вернётся, когда её снимет последний слой. */
+export declare function unmarkHidden(node: Element): void;

package/dist/custom/overlay/hide-outside/marks.js

@@ -0,0 +1,43 @@
+//#region src/custom/overlay/hide-outside/marks.ts
+/**
+* Пометки «спрятано от скринридера» со счётчиком на узел.
+*
+* Модальных слоёв бывает несколько — окно, из него второе окно, — и каждый
+* прячет фон сам. Узел страницы под обоими помечен дважды, и закрытие
+* верхнего не должно открыть его, пока нижний ещё открыт. Флагом у плагина
+* этого не выразить: плагин, снимая свою пометку, затёр бы чужую. Поэтому
+* пометка у узла одна на всех, у неё счётчик, и `aria-hidden` возвращается,
+* когда её снял последний.
+*
+* Возвращается **то значение, что было до первой пометки**, а не пустое:
+* `aria-hidden` страница могла поставить и сама — в том числе `"false"`.
+*
+* Тот же приём, что у замка прокрутки (`../scroll-lock/lock.ts`).
+*/
+var ATTRIBUTE = "aria-hidden";
+var MARKS = /* @__PURE__ */ new WeakMap();
+/** Спрятать узел. Первая пометка пишет атрибут, остальные считаются. */
+function markHidden(node) {
+	const mark = MARKS.get(node);
+	if (mark) {
+		mark.count += 1;
+		return;
+	}
+	MARKS.set(node, {
+		count: 1,
+		value: node.getAttribute(ATTRIBUTE)
+	});
+	node.setAttribute(ATTRIBUTE, "true");
+}
+/** Снять пометку. Атрибут вернётся, когда её снимет последний слой. */
+function unmarkHidden(node) {
+	const mark = MARKS.get(node);
+	if (!mark) return;
+	mark.count -= 1;
+	if (mark.count > 0) return;
+	MARKS.delete(node);
+	if (mark.value === null) node.removeAttribute(ATTRIBUTE);
+	else node.setAttribute(ATTRIBUTE, mark.value);
+}
+//#endregion
+export { markHidden, unmarkHidden };

package/dist/custom/overlay/hide-outside/types.d.ts

@@ -0,0 +1,17 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+import type { IOverlayOpenOptions } from '../types';
+export interface IHideOutsidePluginOptions extends IOverlayOpenOptions {
+    /**
+     * Спрятан ли фон сразу после установки.
+     *
+     * Обычно этого не задают: плагин сам следит за открытостью владельца
+     * (`property`). Но, как и у `TScrollLockPlugin`, пометку можно вести и
+     * вручную — `property: null` и запись в `enabled`.
+     */
+    enabled?: boolean;
+}
+export type THideOutsidePluginEvents = TPluginEvents & {
+    /** change:enabled */
+    'change:enabled': (payload: TValuePayload<boolean>) => void;
+};

package/dist/custom/overlay/index.d.ts

@@ -0,0 +1,9 @@
+export * from './focus';
+export * from './hide-outside';
+export * from './modal-focus';
+export * from './modal-ids';
+export * from './modal-layout';
+export * from './scroll-lock';
+export * from './swipe';
+export type { IOverlayOpenOptions, IOverlayOpenState } from './types';
+export * from './modal-names';

package/dist/custom/overlay/modal-focus/index.d.ts

@@ -0,0 +1 @@
+export { TModalFocusPlugin } from './modal-focus.plugin';

package/dist/custom/overlay/modal-focus/modal-focus.plugin.d.ts

@@ -0,0 +1,72 @@
+import type { IPluginContext } from '../../../base';
+import { TOverlayFocusPlugin } from '../focus';
+import type { IOverlayOpenOptions } from '../types';
+/**
+ * TModalFocusPlugin — модель фокуса модального оверлея: диалога, выезжающей
+ * панели, всего, что перехватывает работу со страницей.
+ *
+ * Общее с немодальным — запомнить, откуда открыли, увести фокус в панель,
+ * вернуть при закрытии, закрыться по Escape — берёт у `TOverlayFocusPlugin`.
+ * Своего здесь три вещи, и все следуют из модальности:
+ *
+ * **Tab замкнут в панели.** С последней остановки он ведёт на первую, а
+ * Shift+Tab с первой — на последнюю. Панели без единой остановки внутри
+ * держат фокус на ней самой (`tabindex="-1"`), и Tab с неё никуда не уводит:
+ * модальное окно тем и модально, что выйти из него можно только закрыв.
+ * Порядок остановок внутри панели ведёт браузер — плагин вмешивается только
+ * на краях. Ловушка — общая утилита `trapTab`: ею же замыкает Tab панель
+ * DatePicker.
+ *
+ * **Возвращать фокус некуда, кроме запомненного элемента.** Триггера у
+ * модального окна не бывает: открыть его может и кнопка на другом конце
+ * страницы, и код без всякого нажатия. Поэтому запасного `_returnCandidates`
+ * у него нет: пропал запомненный элемент — фокус остаётся там, где его
+ * оставил браузер.
+ *
+ * **Нажатие мимо фокус не забирает.** Фокус возвращается при любом
+ * закрытии, и нажатием мимо тоже: страница за окном недоступна, и
+ * пользователь не «уже там, куда нажал», как у немодального. Но окно
+ * закрывается ещё на нажатии (`pointerdown`), а фокус переносит действие по
+ * умолчанию у `mousedown`, который приходит следом: нажатие по подложке
+ * унесло бы возвращённый фокус на `body`. А если окно не закрылось
+ * (`dismissible: false`), фокус ушёл бы с окна, и Tab с `body` повёл бы на
+ * страницу за ним. Поэтому на `dismiss` плагин гасит действие по умолчанию у
+ * `mousedown` этого нажатия: у самого события, если нажатие решил он (перо
+ * графического планшета), иначе — у ближайшего следующего. Ожидание снимают
+ * `click` и `pointercancel`: нажатие кончилось без `mousedown`.
+ *
+ * Панель — узел с пометкой владельца (`TDismissPlugin.ownerAttribute`), а
+ * если пометки нет или `TDismissPlugin` не поставлен, панель и есть корень:
+ * у модального окна корень телепортирован целиком, и держать в странице
+ * нечего. Тогда и слушатель клавиш на нём один.
+ *
+ * Чего плагин не делает: `aria-modal` пишет в свой набор ядро компонента —
+ * это значение, а не операция; фон от скринридера не прячет — это
+ * `THideOutsidePlugin` (пометкой `aria-hidden`, а не `inert`: при закрытии
+ * модель фокуса возвращает фокус в фон, и под `inert` он бы не вернулся);
+ * прокрутку не запирает — это `TScrollLockPlugin`.
+ */
+export declare class TModalFocusPlugin extends TOverlayFocusPlugin {
+    /** Документ, где плагин ждёт `mousedown` нажатия мимо; `null` — не ждёт. */
+    private _pressDocument;
+    install(ctx: IPluginContext, options?: IOverlayOpenOptions): void;
+    destroy(): void;
+    /** У модального оверлея панель и есть корень: телепортирован он целиком. */
+    protected _panelFallback(root: Element): Element | null;
+    /** Tab по кругу внутри панели; за её пределы фокус не выходит (`trapTab`). */
+    protected _onTab(event: KeyboardEvent): void;
+    /**
+     * Нажатие мимо: погасить `mousedown`, который унёс бы фокус (см. шапку).
+     * Уход фокуса мимо (`focusin`) гасить нечем — фокус уже ушёл, а модальному
+     * окну `focusOutside` и не ставят: фокус из него не уходит.
+     */
+    private _keepFocus;
+    /**
+     * Ждать `mousedown` этого нажатия. Слушатели — на документе в фазе
+     * перехвата, как у `TDismissPlugin`: подложку и то, что под ней, плагин не
+     * знает, а до документа событие не остановит никто.
+     */
+    private _waitMouseDown;
+    private readonly _onMouseDown;
+    private readonly _stopWaiting;
+}

package/dist/custom/overlay/modal-focus/modal-focus.plugin.js

@@ -0,0 +1,109 @@
+import { trapTab } from "../../../utils/trapTab.js";
+import { TDismissPlugin } from "../../dismiss/dismiss.plugin.js";
+import { TOverlayFocusPlugin } from "../focus/focus.plugin.js";
+//#region src/custom/overlay/modal-focus/modal-focus.plugin.ts
+/** Что снимает ожидание `mousedown` нажатия мимо: оно кончилось без него. */
+var PRESS_END = ["click", "pointercancel"];
+/**
+* TModalFocusPlugin — модель фокуса модального оверлея: диалога, выезжающей
+* панели, всего, что перехватывает работу со страницей.
+*
+* Общее с немодальным — запомнить, откуда открыли, увести фокус в панель,
+* вернуть при закрытии, закрыться по Escape — берёт у `TOverlayFocusPlugin`.
+* Своего здесь три вещи, и все следуют из модальности:
+*
+* **Tab замкнут в панели.** С последней остановки он ведёт на первую, а
+* Shift+Tab с первой — на последнюю. Панели без единой остановки внутри
+* держат фокус на ней самой (`tabindex="-1"`), и Tab с неё никуда не уводит:
+* модальное окно тем и модально, что выйти из него можно только закрыв.
+* Порядок остановок внутри панели ведёт браузер — плагин вмешивается только
+* на краях. Ловушка — общая утилита `trapTab`: ею же замыкает Tab панель
+* DatePicker.
+*
+* **Возвращать фокус некуда, кроме запомненного элемента.** Триггера у
+* модального окна не бывает: открыть его может и кнопка на другом конце
+* страницы, и код без всякого нажатия. Поэтому запасного `_returnCandidates`
+* у него нет: пропал запомненный элемент — фокус остаётся там, где его
+* оставил браузер.
+*
+* **Нажатие мимо фокус не забирает.** Фокус возвращается при любом
+* закрытии, и нажатием мимо тоже: страница за окном недоступна, и
+* пользователь не «уже там, куда нажал», как у немодального. Но окно
+* закрывается ещё на нажатии (`pointerdown`), а фокус переносит действие по
+* умолчанию у `mousedown`, который приходит следом: нажатие по подложке
+* унесло бы возвращённый фокус на `body`. А если окно не закрылось
+* (`dismissible: false`), фокус ушёл бы с окна, и Tab с `body` повёл бы на
+* страницу за ним. Поэтому на `dismiss` плагин гасит действие по умолчанию у
+* `mousedown` этого нажатия: у самого события, если нажатие решил он (перо
+* графического планшета), иначе — у ближайшего следующего. Ожидание снимают
+* `click` и `pointercancel`: нажатие кончилось без `mousedown`.
+*
+* Панель — узел с пометкой владельца (`TDismissPlugin.ownerAttribute`), а
+* если пометки нет или `TDismissPlugin` не поставлен, панель и есть корень:
+* у модального окна корень телепортирован целиком, и держать в странице
+* нечего. Тогда и слушатель клавиш на нём один.
+*
+* Чего плагин не делает: `aria-modal` пишет в свой набор ядро компонента —
+* это значение, а не операция; фон от скринридера не прячет — это
+* `THideOutsidePlugin` (пометкой `aria-hidden`, а не `inert`: при закрытии
+* модель фокуса возвращает фокус в фон, и под `inert` он бы не вернулся);
+* прокрутку не запирает — это `TScrollLockPlugin`.
+*/
+var TModalFocusPlugin = class extends TOverlayFocusPlugin {
+	/** Документ, где плагин ждёт `mousedown` нажатия мимо; `null` — не ждёт. */
+	_pressDocument = null;
+	install(ctx, options) {
+		super.install(ctx, options);
+		ctx.get(TDismissPlugin)?.events.on("dismiss", (event) => this._keepFocus(event));
+	}
+	destroy() {
+		this._stopWaiting();
+		super.destroy();
+	}
+	/** У модального оверлея панель и есть корень: телепортирован он целиком. */
+	_panelFallback(root) {
+		return root;
+	}
+	/** Tab по кругу внутри панели; за её пределы фокус не выходит (`trapTab`). */
+	_onTab(event) {
+		if (this._panel) trapTab(event, this._panel);
+	}
+	/**
+	* Нажатие мимо: погасить `mousedown`, который унёс бы фокус (см. шапку).
+	* Уход фокуса мимо (`focusin`) гасить нечем — фокус уже ушёл, а модальному
+	* окну `focusOutside` и не ставят: фокус из него не уходит.
+	*/
+	_keepFocus(event) {
+		if (event.type === "mousedown") {
+			event.preventDefault();
+			return;
+		}
+		if (event.type === "focusin") return;
+		const doc = this._root?.ownerDocument;
+		if (doc) this._waitMouseDown(doc);
+	}
+	/**
+	* Ждать `mousedown` этого нажатия. Слушатели — на документе в фазе
+	* перехвата, как у `TDismissPlugin`: подложку и то, что под ней, плагин не
+	* знает, а до документа событие не остановит никто.
+	*/
+	_waitMouseDown(doc) {
+		this._stopWaiting();
+		doc.addEventListener("mousedown", this._onMouseDown, true);
+		for (const type of PRESS_END) doc.addEventListener(type, this._stopWaiting, true);
+		this._pressDocument = doc;
+	}
+	_onMouseDown = (event) => {
+		event.preventDefault();
+		this._stopWaiting();
+	};
+	_stopWaiting = () => {
+		const doc = this._pressDocument;
+		if (!doc) return;
+		doc.removeEventListener("mousedown", this._onMouseDown, true);
+		for (const type of PRESS_END) doc.removeEventListener(type, this._stopWaiting, true);
+		this._pressDocument = null;
+	};
+};
+//#endregion
+export { TModalFocusPlugin };

package/dist/custom/overlay/modal-ids/index.d.ts

@@ -0,0 +1 @@
+export * from './modal-ids.plugin';

package/dist/custom/overlay/modal-ids/modal-ids.plugin.d.ts

@@ -0,0 +1,21 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+/**
+ * TModalIdsPlugin — имя модального слоя в документе: панель называет её
+ * заголовок.
+ *
+ * `id` заголовка — в `titleAria`, который разметка раскладывает на заголовок,
+ * и ссылка на него `aria-labelledby` — в `aria` панели. Обе стороны пишутся
+ * здесь, от одного `id`. Ссылка стоит всегда: заголовок рисуется всегда.
+ *
+ * Общая часть окна и выезжающей панели — как и вся модальность
+ * (`TModalLayer`). Своё сверх неё у окна — тело предупреждения
+ * (`TDialogIdsPlugin`).
+ *
+ * `id` — от монтирования (`createId`), а не от экземпляра: он нужен только
+ * документу, и на сервере и в браузере обязан совпасть. Пишется при
+ * установке, синхронно, — имя есть уже в первой (и серверной) отрисовке.
+ */
+export declare class TModalIdsPlugin extends TBasePlugin {
+    install(ctx: IPluginContext): void;
+}

package/dist/custom/overlay/modal-ids/modal-ids.plugin.js

@@ -0,0 +1,30 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+//#region src/custom/overlay/modal-ids/modal-ids.plugin.ts
+/**
+* TModalIdsPlugin — имя модального слоя в документе: панель называет её
+* заголовок.
+*
+* `id` заголовка — в `titleAria`, который разметка раскладывает на заголовок,
+* и ссылка на него `aria-labelledby` — в `aria` панели. Обе стороны пишутся
+* здесь, от одного `id`. Ссылка стоит всегда: заголовок рисуется всегда.
+*
+* Общая часть окна и выезжающей панели — как и вся модальность
+* (`TModalLayer`). Своё сверх неё у окна — тело предупреждения
+* (`TDialogIdsPlugin`).
+*
+* `id` — от монтирования (`createId`), а не от экземпляра: он нужен только
+* документу, и на сервере и в браузере обязан совпасть. Пишется при
+* установке, синхронно, — имя есть уже в первой (и серверной) отрисовке.
+*/
+var TModalIdsPlugin = class extends TBasePlugin {
+	install(ctx) {
+		super.install(ctx);
+		const layer = ctx.getInstance();
+		if (!layer) return;
+		const titleId = ctx.createId("title");
+		layer.titleAria.add("id", titleId);
+		layer.aria.add("aria-labelledby", titleId);
+	}
+};
+//#endregion
+export { TModalIdsPlugin };

package/dist/custom/overlay/modal-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { TModalLayoutPlugin } from './modal-layout.plugin';
+export type { TModalLayoutPluginEvents, TModalLayoutVariables } from './types';

package/dist/custom/overlay/modal-layout/modal-layout.plugin.d.ts

@@ -0,0 +1,66 @@
+import type { TEventSink } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TModalLayoutPluginEvents, TModalLayoutVariables } from './types';
+/**
+ * Раскладка модального слоя — общая часть окна и выезжающей панели: слой и
+ * размер в объекты стилей для разметки.
+ *
+ * Модальный слой ничего не меряет и координат не считает: место, край,
+ * разворот и анимацию раскладывает тема по модификаторам и `data-*`. Плагину
+ * остаются значения, которые в класс не уложить:
+ *
+ * - `styles` — панели: `z-index` слоя, размер и свои переменные наследника
+ *   (`_panelVariables`: у окна — отступы от краёв экрана). Переменными, а не
+ *   инлайном `width` и `height`: инлайн перебил бы тему, а у неё потолок
+ *   размера по экрану и развёрнутое окно. Незаданный размер переменной не
+ *   даёт вовсе — тогда действует умолчание темы (`var(--so-dialog-width, …)`);
+ * - `backdropStyles` — подложке: тот же `z-index`. Подложка стоит в DOM
+ *   раньше панели, и панель рисуется поверх неё просто порядком.
+ *
+ * Имена переменных у каждого компонента свои — их читает CSS его блока
+ * (`--so-dialog-width`, `--so-drawer-width`), — поэтому база абстрактна: наследник
+ * называет их (`_variables`), а считает всё база. Второй копии расчёта у
+ * окна и панели нет.
+ *
+ * Считает при установке и на смену ширины, высоты и слоя; на смену своих
+ * значений наследник зовёт тот же пересчёт (`_updateStyles`). Объекты
+ * заменяются целиком, а не мутируются: геттер отдаёт ссылку наружу, и без
+ * смены идентичности адаптер не увидит изменения. `change:styles` — только
+ * когда стили сменились по содержимому: повод пересчёта не всегда их меняет.
+ *
+ * Дженерик по карте событий — для наследника со своими событиями
+ * (`offset:before` у окна); свои события база шлёт через `_sink`.
+ */
+export declare abstract class TModalLayoutPlugin<TEvents extends TModalLayoutPluginEvents = TModalLayoutPluginEvents> extends TBasePlugin<any, TEvents> {
+    /** Переменные размера, которые читает тема этого компонента. */
+    protected abstract readonly _variables: TModalLayoutVariables;
+    private _styles;
+    private _backdropStyles;
+    private _owner;
+    install(ctx: IPluginContext): void;
+    /** Стили панели: `z-index` слоя, переменные размера и свои переменные наследника. */
+    get styles(): Record<string, string | number>;
+    /** Стили подложки: тот же `z-index`, что у панели. */
+    get backdropStyles(): Record<string, string | number>;
+    destroy(): void;
+    /**
+     * Эмит собственных событий раскладки — без приведения `this.events` к
+     * конкретной карте (см. `TEventSink` в `@soxa-ui/core`): карта — дженерик,
+     * а `change:styles` и `change:backdropStyles` объявлены здесь.
+     */
+    protected get _sink(): TEventSink<TModalLayoutPluginEvents>;
+    /**
+     * Свои переменные панели сверх размера: имя переменной → CSS-значение.
+     * Их читает каждый пересчёт стилей, начиная с установки, поэтому то, из
+     * чего они строятся, наследник обязан знать уже тогда. По умолчанию своих
+     * нет.
+     */
+    protected _panelVariables(): Record<string, string>;
+    /**
+     * Пересчитать стили панели. Наследник зовёт его на смену значений, из
+     * которых строит `_panelVariables`.
+     */
+    protected _updateStyles(): void;
+    private _updateBackdropStyles;
+}