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

package/dist/locale/types.d.ts

@@ -0,0 +1,197 @@
+import type { IListenable } from '../base/types';
+/**
+ * Строки, которые библиотека рисует сама: имена кнопок без текста — закрытия,
+ * разворота, листания, очистки, сортировки, — полей, которым подпись неоткуда
+ * взять, и текст кнопок, которые она кладёт в свою разметку («OK» и «Отмена»
+ * в подвале панели DatePicker).
+ *
+ * Разделы — по компоненту, который читает строку. Имён, которые знает только
+ * приложение (подпись поля, имя индикатора выполнения), здесь нет: их задают
+ * пропсы компонента (`aria_label`, `thumbLabels`).
+ *
+ * Строки — шаблоны, а не функции: локаль — данные, и её грузят из JSON.
+ * Строка с именем части (`tabs.close`, `tags.close`, `field.clear`,
+ * `table.sort`) несёт место для имени — `{name}`: порядок слов у каждого
+ * языка свой, и склейка «слово + имя» навязала бы всем один (`formatName`).
+ */
+export type TTranslations = {
+    /** Модальный слой — окно и выезжающая панель */
+    readonly modal: {
+        /** Имя кнопки закрытия */
+        readonly close: string;
+    };
+    /** Модальное окно */
+    readonly dialog: {
+        /** Имя кнопки разворота — одно на оба состояния: состояние сообщает `aria-pressed` */
+        readonly maximize: string;
+    };
+    /** Поповер */
+    readonly popover: {
+        /** Имя кнопки закрытия */
+        readonly close: string;
+    };
+    /** Табы */
+    readonly tabs: {
+        /** Имя кнопки закрытия таба — шаблон с текстом таба на месте `{name}` */
+        readonly close: string;
+    };
+    /** Теги */
+    readonly tags: {
+        /** Имя кнопки закрытия тега — шаблон с текстом тега на месте `{name}` */
+        readonly close: string;
+    };
+    /** Всплывающие уведомления */
+    readonly toasts: {
+        /**
+         * Имя региона с тостами — вместе с клавишей, которая ведёт к ним фокус
+         * (F8): так её объявляет скринридер, когда пользователь попадает в регион
+         */
+        readonly region: string;
+        /** Имя кнопки закрытия тоста — шаблон с текстом тоста на месте `{name}` */
+        readonly close: string;
+    };
+    /** Лента с кнопками листания */
+    readonly scroller: {
+        /** Имя кнопки «назад» */
+        readonly prev: string;
+        /** Имя кнопки «вперёд» */
+        readonly next: string;
+    };
+    /**
+     * Постраничная навигация. Своего имени у неё в локали нет: что листают —
+     * таблицу, ленту, результаты поиска, — знает только приложение, и имя
+     * ряду даёт оно (`aria_label`)
+     */
+    readonly pagination: {
+        /** Имя стрелки «назад» — на предыдущую страницу */
+        readonly prev: string;
+        /** Имя стрелки «вперёд» — на следующую страницу */
+        readonly next: string;
+    };
+    /** Поле ввода — текстовое, даты и числа */
+    readonly field: {
+        /** Имя кнопки очистки — шаблон с именем поля на месте `{name}` */
+        readonly clear: string;
+    };
+    /** Поле числа */
+    readonly numberInput: {
+        /** Имя кнопки шага «больше» — шаблон с именем поля на месте `{name}` */
+        readonly increment: string;
+        /** Имя кнопки шага «меньше» — шаблон с именем поля на месте `{name}` */
+        readonly decrement: string;
+    };
+    /** Таблица */
+    readonly table: {
+        /** Имя чекбокса «выбрать все» в шапке колонки выбора */
+        readonly selectAll: string;
+        /**
+         * Имя кнопки сортировки в заголовке колонки — шаблон с подписью колонки
+         * на месте `{name}`: текста у кнопки нет, в ней одна стрелка
+         */
+        readonly sort: string;
+    };
+    /** Календарь */
+    readonly calendar: {
+        /** Имя кнопки «предыдущий месяц» */
+        readonly prevMonth: string;
+        /** Имя кнопки «следующий месяц» */
+        readonly nextMonth: string;
+        /** Имя стрелки панели выбора месяца и года «предыдущий год» — на уровне месяцев */
+        readonly prevYear: string;
+        /** Имя стрелки «следующий год» — на уровне месяцев */
+        readonly nextYear: string;
+        /** Имя стрелки «предыдущие 12 лет» — на уровне лет */
+        readonly prevYears: string;
+        /** Имя стрелки «следующие 12 лет» — на уровне лет */
+        readonly nextYears: string;
+    };
+    /** Поле даты с календарём в панели */
+    readonly datePicker: {
+        /** Имя кнопки календаря — оно же имя панели, которую кнопка открывает */
+        readonly trigger: string;
+        /** Имя поля начала диапазона */
+        readonly start: string;
+        /** Имя поля конца диапазона */
+        readonly end: string;
+        /** Текст кнопки подвала панели, которая принимает выбор (`confirmable`) */
+        readonly confirm: string;
+        /** Текст кнопки подвала панели, которая закрывает её без выбора */
+        readonly cancel: string;
+    };
+    /** Оценка звёздами */
+    readonly rating: {
+        /**
+         * Значение для скринридера (`aria-valuetext`) — шаблон: оценка на месте
+         * `{value}`, наибольшая — на месте `{max}`. Без «звёзд»: значок оценки
+         * меняет слот, и звёздами он бывает не всегда
+         */
+        readonly value: string;
+        /**
+         * Ошибка обязательной оценки, которую не поставили, — сообщение
+         * браузера при отправке формы (`setCustomValidity`). Тоже без «звёзд»
+         */
+        readonly required: string;
+    };
+    /** Многострочное поле */
+    readonly textarea: {
+        /**
+         * Счётчик символов при пределе `maxlength` — шаблон: набрано на месте
+         * `{count}`, предел — на месте `{max}`. Без предела счётчик — одно
+         * число, и строки ему не нужно
+         */
+        readonly counter: string;
+    };
+};
+/**
+ * Локаль — язык и строки библиотеки одним значением.
+ *
+ * `tag` — тег BCP 47 для Intl: подписи дат, первый день недели, формат поля
+ * даты, формат и разбор поля числа, сравнение строк при сортировке таблицы,
+ * цифры номеров страниц пагинации. `translations` — строки, которые
+ * библиотека рисует сама. Одно значение, а не два: язык без строк
+ * давал бы китайские даты рядом с английскими кнопками.
+ *
+ * Готовые — шесть языков ООН (`enUS`, `ruRU`, `zhCN`, `frFR`, `esES`,
+ * `arEG`); любую другую приложение пишет само или собирает поверх готовой
+ * (`extendLocale`).
+ */
+export type TLocale = {
+    readonly tag: string;
+    readonly translations: TTranslations;
+};
+/** Часть строк: любые разделы, в разделе — любые строки. */
+export type TPartialTranslations = {
+    readonly [K in keyof TTranslations]?: Partial<TTranslations[K]>;
+};
+/** Правка локали для `extendLocale`: свой тег, свои строки — что задано. */
+export type TLocalePatch = {
+    readonly tag?: string;
+    readonly translations?: TPartialTranslations;
+};
+/** События источника локали. */
+export type TLocaleSourceEvents = {
+    /** change — локаль сменилась: новая уже в `locale` */
+    change: (locale: TLocale) => void;
+};
+/**
+ * Источник локали монтирования — то, что плагин видит в контексте
+ * (`IPluginContext.locale`): текущая локаль и её смена.
+ *
+ * Только чтение: локаль задаёт тот, кто источник создал, — провайдер адаптера
+ * для своего поддерева. Плагин читает её при установке и подписывается на
+ * смену.
+ */
+export interface ILocaleSource {
+    readonly locale: TLocale;
+    readonly events: IListenable<TLocaleSourceEvents>;
+}
+/**
+ * Что плагину языка нужно от владельца: свойство `locale`.
+ *
+ * Структурный тип, а не класс: плагин стоит на календаре, поле даты,
+ * DatePicker, поле числа, таблице и пагинации, а общего у них только это
+ * свойство.
+ */
+export interface ILocaleOwner {
+    locale: string;
+}

package/dist/motion/index.d.ts

@@ -0,0 +1,2 @@
+export { smoothScrollBehavior, useMotion } from './motion';
+export type { TMotionMode } from './types';

package/dist/motion/motion.d.ts

@@ -0,0 +1,28 @@
+import type { TMotionMode } from './types';
+/**
+ * Задать режим движения библиотеки — на всё приложение, как тему (`useTheme`)
+ * и пакет иконок (`useIcons`): зовут в точке входа.
+ *
+ * ```ts
+ * useMotion('full') // движение и тогда, когда система просит его убрать
+ * ```
+ *
+ * Режим пишется атрибутом `data-so-motion` на корень документа: `full` и
+ * `reduce` — как есть, `system` атрибут снимает. Сменить режим можно в любой
+ * момент: CSS видит атрибут сам, плагины читают его в момент операции.
+ *
+ * Без документа (серверная отрисовка) вызов ничего не делает. Серверной
+ * разметке, которой нужен свой режим до старта приложения, атрибут ставит
+ * само приложение — в шаблоне страницы: `<html data-so-motion="reduce">`.
+ */
+export declare function useMotion(mode: TMotionMode): void;
+/**
+ * Как прокручивать узел, когда просят плавно: плавно, если движение не
+ * убрано, иначе сразу.
+ *
+ * Плавная прокрутка — движение, и режим решает её здесь, а не плагин: без
+ * этой функции у каждого плагина был бы свой опрос среды, и режим приложения
+ * до него не доходил бы. Режим читается в момент прокрутки, поэтому подписки
+ * на его смену у плагинов нет.
+ */
+export declare function smoothScrollBehavior(element: Element): ScrollBehavior;

package/dist/motion/motion.js

@@ -0,0 +1,67 @@
+//#region src/motion/motion.ts
+/**
+* Режим движения — атрибут на корне документа, и это единственный его
+* источник: атрибут читают CSS темы (селектором) и плагины (`smoothScrollBehavior`
+* ниже), копии режима в JS нет. Значения — `full` и `reduce`; нет атрибута —
+* `system`. Без атрибута идут и серверная разметка, и кадры до старта
+* приложения: и CSS, и плагины берут тогда настройку системы.
+*/
+var ATTRIBUTE = "data-so-motion";
+/** Медиазапрос настройки системы: пользователь просит меньше движения. */
+var SYSTEM_REDUCE = "(prefers-reduced-motion: reduce)";
+/**
+* Режим, который приложение задало поверх системы, → убрано ли движение. Чего
+* в таблице нет (атрибута нет вовсе), решает система.
+*/
+var FORCED = /* @__PURE__ */ new Map([["full", false], ["reduce", true]]);
+/**
+* Задать режим движения библиотеки — на всё приложение, как тему (`useTheme`)
+* и пакет иконок (`useIcons`): зовут в точке входа.
+*
+* ```ts
+* useMotion('full') // движение и тогда, когда система просит его убрать
+* ```
+*
+* Режим пишется атрибутом `data-so-motion` на корень документа: `full` и
+* `reduce` — как есть, `system` атрибут снимает. Сменить режим можно в любой
+* момент: CSS видит атрибут сам, плагины читают его в момент операции.
+*
+* Без документа (серверная отрисовка) вызов ничего не делает. Серверной
+* разметке, которой нужен свой режим до старта приложения, атрибут ставит
+* само приложение — в шаблоне страницы: `<html data-so-motion="reduce">`.
+*/
+function useMotion(mode) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	if (mode === "system") root.removeAttribute(ATTRIBUTE);
+	else root.setAttribute(ATTRIBUTE, mode);
+}
+/**
+* Убрано ли движение для узла: режим приложения на корне его документа, а без
+* него — настройка системы у его окна. Документ и окно — узла, а не
+* глобальные: компонент живёт и в `iframe`.
+*
+* Среда без `matchMedia` (jsdom) о движении не просит.
+*/
+function isMotionReduced(element) {
+	const { documentElement, defaultView } = element.ownerDocument;
+	return FORCED.get(documentElement.getAttribute(ATTRIBUTE) ?? "") ?? systemReduces(defaultView);
+}
+/** Просит ли система окна меньше движения. */
+function systemReduces(view) {
+	return typeof view?.matchMedia === "function" && view.matchMedia(SYSTEM_REDUCE).matches;
+}
+/**
+* Как прокручивать узел, когда просят плавно: плавно, если движение не
+* убрано, иначе сразу.
+*
+* Плавная прокрутка — движение, и режим решает её здесь, а не плагин: без
+* этой функции у каждого плагина был бы свой опрос среды, и режим приложения
+* до него не доходил бы. Режим читается в момент прокрутки, поэтому подписки
+* на его смену у плагинов нет.
+*/
+function smoothScrollBehavior(element) {
+	return isMotionReduced(element) ? "instant" : "smooth";
+}
+//#endregion
+export { smoothScrollBehavior, useMotion };

package/dist/motion/types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Режим движения библиотеки — один на всё приложение (`useMotion`).
+ *
+ * - `system` — как просит система: настройка «меньше движения» у
+ *   пользователя (`prefers-reduced-motion`). Так и без вызова `useMotion` —
+ *   это режим по умолчанию;
+ * - `full` — движение всегда, о чём бы система ни просила: приложение решило,
+ *   что движение ему нужно;
+ * - `reduce` — без движения всегда.
+ *
+ * Движение — смена места, размера, поворота и формы во времени и плавная
+ * прокрутка. Цвет, прозрачность и тень — не движение: их режим не трогает.
+ */
+export type TMotionMode = 'system' | 'full' | 'reduce';

package/dist/utils/afterTransitions.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Позвать `done`, когда узел доиграет CSS-переходы, которые идут у него
+ * кадром позже. Отдаёт отмену: после неё `done` не позовётся, даже если
+ * ожидание кончится потом.
+ *
+ * Это ожидание конца перехода закрытия. Закрытая панель ещё на экране: тема
+ * ведёт её переходом — окно гаснет, выезжающая панель уезжает к краю, — а
+ * `display: none` приходит только в конце
+ * (`transition-behavior: allow-discrete`). Что меняет вид исчезающей панели,
+ * ждёт, пока она доиграет:
+ *
+ * - замок прокрутки (`TScrollLockPlugin`) отдаёт свой счёт, когда корень
+ *   доиграл переходы закрытия: вернись полоса прокрутки сразу, область
+ *   просмотра сузилась бы, и панель `position: fixed` переехала бы вбок, пока
+ *   исчезает;
+ * - ввод Select (`TEditablePlugin`) снимает отбор, когда догасла панель:
+ *   снятый сразу, он показал бы в гаснущей панели весь список;
+ * - привязка к якорю (`TAnchorPlugin`) перестаёт следить за полем, когда
+ *   корень панели доиграл переходы закрытия: снятое сразу, слежение оставило
+ *   бы гаснущую панель на месте, пока поле уезжает с прокруткой;
+ * - закрытый тост (`TToastsRemovalPlugin`) уходит из коллекции, когда его
+ *   корень догас: удалённый сразу, он пропал бы из документа посреди
+ *   исчезания.
+ *
+ * Живёт в общих утилитах, а не у одного из них: вторая копия ожидания
+ * разошлась бы с первой. Чисел темы здесь нет: сколько длится переход, знает
+ * сам переход.
+ *
+ * **Кадр.** Открытость меняется раньше разметки: когда плагин узнаёт о
+ * закрытии, адаптер её ещё не перерисовал, и переходов закрытия нет. Кадром
+ * позже разметка уже закрыта — на этом же допущении стоят фокус в панели у
+ * `TOverlayFocusPlugin` и сброс сдвига у `TSwipePlugin`. Отрисовки кадра
+ * ждать не нужно: `getAnimations()` сам применяет отложенные стили, и переход,
+ * который начал рендер, виден сразу.
+ *
+ * **Какие переходы.** Только свои (`getAnimations()` без `subtree`): переходы
+ * детей — цвет кнопки под указателем и подобное — исчезанию не принадлежат. И
+ * только `CSSTransition`: у перехода конец есть всегда, а бесконечная
+ * CSS-анимация узла держала бы ожидание вечно. Класс берётся из окна узла, а не
+ * глобальный: компонент живёт и в `iframe`, и объекты его анимаций — из
+ * чужого окна.
+ *
+ * **Конец** — `finished` у каждого перехода. Отменённый переход (`finished`
+ * отклонён с `AbortError`: узел снят, переход перебит обратным) — тоже конец,
+ * и отклонение обработано здесь же: необработанное ушло бы в
+ * `unhandledrejection`. Переходов нет или нет Web Animations вовсе (jsdom) —
+ * `done` зовётся в том же кадре.
+ */
+export declare function afterTransitions(element: Element, done: () => void): () => void;

package/dist/utils/afterTransitions.js

@@ -0,0 +1,79 @@
+//#region src/utils/afterTransitions.ts
+/**
+* Позвать `done`, когда узел доиграет CSS-переходы, которые идут у него
+* кадром позже. Отдаёт отмену: после неё `done` не позовётся, даже если
+* ожидание кончится потом.
+*
+* Это ожидание конца перехода закрытия. Закрытая панель ещё на экране: тема
+* ведёт её переходом — окно гаснет, выезжающая панель уезжает к краю, — а
+* `display: none` приходит только в конце
+* (`transition-behavior: allow-discrete`). Что меняет вид исчезающей панели,
+* ждёт, пока она доиграет:
+*
+* - замок прокрутки (`TScrollLockPlugin`) отдаёт свой счёт, когда корень
+*   доиграл переходы закрытия: вернись полоса прокрутки сразу, область
+*   просмотра сузилась бы, и панель `position: fixed` переехала бы вбок, пока
+*   исчезает;
+* - ввод Select (`TEditablePlugin`) снимает отбор, когда догасла панель:
+*   снятый сразу, он показал бы в гаснущей панели весь список;
+* - привязка к якорю (`TAnchorPlugin`) перестаёт следить за полем, когда
+*   корень панели доиграл переходы закрытия: снятое сразу, слежение оставило
+*   бы гаснущую панель на месте, пока поле уезжает с прокруткой;
+* - закрытый тост (`TToastsRemovalPlugin`) уходит из коллекции, когда его
+*   корень догас: удалённый сразу, он пропал бы из документа посреди
+*   исчезания.
+*
+* Живёт в общих утилитах, а не у одного из них: вторая копия ожидания
+* разошлась бы с первой. Чисел темы здесь нет: сколько длится переход, знает
+* сам переход.
+*
+* **Кадр.** Открытость меняется раньше разметки: когда плагин узнаёт о
+* закрытии, адаптер её ещё не перерисовал, и переходов закрытия нет. Кадром
+* позже разметка уже закрыта — на этом же допущении стоят фокус в панели у
+* `TOverlayFocusPlugin` и сброс сдвига у `TSwipePlugin`. Отрисовки кадра
+* ждать не нужно: `getAnimations()` сам применяет отложенные стили, и переход,
+* который начал рендер, виден сразу.
+*
+* **Какие переходы.** Только свои (`getAnimations()` без `subtree`): переходы
+* детей — цвет кнопки под указателем и подобное — исчезанию не принадлежат. И
+* только `CSSTransition`: у перехода конец есть всегда, а бесконечная
+* CSS-анимация узла держала бы ожидание вечно. Класс берётся из окна узла, а не
+* глобальный: компонент живёт и в `iframe`, и объекты его анимаций — из
+* чужого окна.
+*
+* **Конец** — `finished` у каждого перехода. Отменённый переход (`finished`
+* отклонён с `AbortError`: узел снят, переход перебит обратным) — тоже конец,
+* и отклонение обработано здесь же: необработанное ушло бы в
+* `unhandledrejection`. Переходов нет или нет Web Animations вовсе (jsdom) —
+* `done` зовётся в том же кадре.
+*/
+function afterTransitions(element, done) {
+	let cancelled = false;
+	const finish = () => {
+		if (!cancelled) done();
+	};
+	const frame = requestAnimationFrame(() => {
+		const transitions = transitionsOf(element);
+		if (transitions.length === 0) {
+			finish();
+			return;
+		}
+		Promise.all(transitions.map(ended)).then(finish);
+	});
+	return () => {
+		cancelled = true;
+		cancelAnimationFrame(frame);
+	};
+}
+/** Идущие CSS-переходы самого узла. */
+function transitionsOf(element) {
+	const Transition = element.ownerDocument.defaultView?.CSSTransition;
+	if (typeof Transition !== "function" || typeof element.getAnimations !== "function") return [];
+	return element.getAnimations().filter((animation) => animation instanceof Transition);
+}
+/** Переход доиграл или его отменили — для ожидания это одно и то же. */
+function ended(transition) {
+	return transition.finished.catch(() => void 0);
+}
+//#endregion
+export { afterTransitions };

package/dist/utils/focusFirst.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Ставит фокус на первого кандидата, который его принял, и говорит, нашёлся
+ * ли такой. Скрытый, выключенный или отсоединённый элемент фокус не
+ * принимает — его пропускают.
+ *
+ * Живёт в общих утилитах, а не у модели фокуса Popover: кандидатов перебирает
+ * весь слой оверлея — база модели фокуса и обе её стратегии, немодальная и
+ * модальная. Раскладку перебор не проверяет (в jsdom её нет), решает сам
+ * браузер — потому кандидаты и перебираются по очереди.
+ *
+ * `options` уходят в `focus()` каждого кандидата как есть.
+ */
+export declare function focusFirst(candidates: readonly Element[], options?: FocusOptions): boolean;

package/dist/utils/focusFirst.js

@@ -0,0 +1,24 @@
+import { isFocusableElement } from "./isFocusableElement.js";
+//#region src/utils/focusFirst.ts
+/**
+* Ставит фокус на первого кандидата, который его принял, и говорит, нашёлся
+* ли такой. Скрытый, выключенный или отсоединённый элемент фокус не
+* принимает — его пропускают.
+*
+* Живёт в общих утилитах, а не у модели фокуса Popover: кандидатов перебирает
+* весь слой оверлея — база модели фокуса и обе её стратегии, немодальная и
+* модальная. Раскладку перебор не проверяет (в jsdom её нет), решает сам
+* браузер — потому кандидаты и перебираются по очереди.
+*
+* `options` уходят в `focus()` каждого кандидата как есть.
+*/
+function focusFirst(candidates, options) {
+	for (const candidate of candidates) {
+		if (!isFocusableElement(candidate)) continue;
+		candidate.focus(options);
+		if (candidate.ownerDocument.activeElement === candidate) return true;
+	}
+	return false;
+}
+//#endregion
+export { focusFirst };

package/dist/utils/graceArea.d.ts

@@ -0,0 +1,21 @@
+import type { TPoint } from './positionOrigin';
+import type { TBox } from './types';
+/**
+ * Путь указателя к открытой панели — многоугольник от точки, где указатель
+ * ушёл со строки, к ближнему краю панели и вокруг неё самой (Radix pointer
+ * grace area, Floating UI `safePolygon`).
+ *
+ * Строка, у которой открыта панель сбоку, — пункт с подменю: к панели
+ * указатель идёт наискосок и задевает соседние пункты. Пока он внутри пути,
+ * пункты по дороге не перехватывают подсветку, и подменю не закрывается.
+ *
+ * Сторону пути решает панель, а не направление письма: она встаёт у конца
+ * строки, у её начала, если у конца нет места, а в RTL наоборот, — и путь
+ * всегда ведёт туда, где она стоит.
+ */
+export declare function graceArea(exit: TPoint, panel: TBox): TPoint[];
+/**
+ * Внутри ли точка многоугольника — по чётности пересечений луча вправо с его
+ * сторонами. Вершины — по порядку обхода, в любую сторону.
+ */
+export declare function isPointInPolygon(point: TPoint, polygon: readonly TPoint[]): boolean;

package/dist/utils/graceArea.js

@@ -0,0 +1,66 @@
+//#region src/utils/graceArea.ts
+/**
+* На сколько точка ухода сдвигается назад, к строке, px: указатель, ушедший со
+* строки, стоит уже за её краем, и без запаса граница пути проходила бы через
+* саму точку — первый же ход вдоль неё считался бы уходом с пути.
+*/
+var BLEED = 5;
+/**
+* Путь указателя к открытой панели — многоугольник от точки, где указатель
+* ушёл со строки, к ближнему краю панели и вокруг неё самой (Radix pointer
+* grace area, Floating UI `safePolygon`).
+*
+* Строка, у которой открыта панель сбоку, — пункт с подменю: к панели
+* указатель идёт наискосок и задевает соседние пункты. Пока он внутри пути,
+* пункты по дороге не перехватывают подсветку, и подменю не закрывается.
+*
+* Сторону пути решает панель, а не направление письма: она встаёт у конца
+* строки, у её начала, если у конца нет места, а в RTL наоборот, — и путь
+* всегда ведёт туда, где она стоит.
+*/
+function graceArea(exit, panel) {
+	const toRight = panel.left + panel.width / 2 > exit.x;
+	const near = toRight ? panel.left : panel.left + panel.width;
+	const far = toRight ? panel.left + panel.width : panel.left;
+	const bottom = panel.top + panel.height;
+	return [
+		{
+			x: exit.x + (toRight ? -5 : BLEED),
+			y: exit.y
+		},
+		{
+			x: near,
+			y: panel.top
+		},
+		{
+			x: far,
+			y: panel.top
+		},
+		{
+			x: far,
+			y: bottom
+		},
+		{
+			x: near,
+			y: bottom
+		}
+	];
+}
+/**
+* Внутри ли точка многоугольника — по чётности пересечений луча вправо с его
+* сторонами. Вершины — по порядку обхода, в любую сторону.
+*/
+function isPointInPolygon(point, polygon) {
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const a = polygon[i];
+		const b = polygon[j];
+		if (a.y > point.y !== b.y > point.y) {
+			const cross = a.x + (point.y - a.y) * (b.x - a.x) / (b.y - a.y);
+			if (point.x < cross) inside = !inside;
+		}
+	}
+	return inside;
+}
+//#endregion
+export { graceArea, isPointInPolygon };

package/dist/utils/index.d.ts

@@ -0,0 +1,18 @@
+export { toCssValue } from './toCssValue';
+export { isMeasurableElement } from './isMeasurableElement';
+export { isFocusableElement } from './isFocusableElement';
+export { isAppleTouch } from './isAppleTouch';
+export { tabStops, closestControl, closestTabStop } from './tabStops';
+export { tabStopsAfter } from './tabStopsAfter';
+export { tabStopsBefore } from './tabStopsBefore';
+export { focusFirst } from './focusFirst';
+export { isPrintableKey } from './isPrintableKey';
+export { trapTab } from './trapTab';
+export { isAboveLayer } from './isAboveLayer';
+export { nearestShift } from './nearestShift';
+export { scrollWindowOf, itemOf } from './scrollWindow';
+export { afterTransitions } from './afterTransitions';
+export { isScrollable, scrollParentOf, type TScrollAxis } from './scrollParent';
+export { graceArea, isPointInPolygon } from './graceArea';
+export type { IDomEventTarget, TBox, TInlineSpan, TNearestShiftOptions } from './types';
+export { positionOriginOf, isPinnedToViewport, type TPoint, type TPositionStrategy, } from './positionOrigin';

package/dist/utils/isAboveLayer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Лежит ли узел в слое выше панели — в панели, открытой поверх неё.
+ *
+ * Слой узла — ближайший предок с `data-layer`, сам узел тоже в счёт: панели
+ * лежат в `body` соседями и друг в друга не вложены. Узел без слоя — не выше,
+ * и у панели без слоя выше не лежит ничего: сравнивать не с чем.
+ *
+ * Правило одно на весь слой оверлея. По нему `TDismissPlugin` считает
+ * нажатие в список Select, открытый из поповера, нажатием внутри, а
+ * `THideOutsidePlugin` оставляет этот список доступным скринридеру, когда
+ * прячет фон модального окна. Два правила разошлись бы: панель, в которую
+ * можно нажать, оказалась бы немой.
+ */
+export declare function isAboveLayer(node: Element, panel: Element | null): boolean;

package/dist/utils/isAboveLayer.js

@@ -0,0 +1,24 @@
+import { layerOf } from "./layerOf.js";
+import { FRAME_LAYER_ATTRIBUTE } from "@soxa-ui/core";
+//#region src/utils/isAboveLayer.ts
+/**
+* Лежит ли узел в слое выше панели — в панели, открытой поверх неё.
+*
+* Слой узла — ближайший предок с `data-layer`, сам узел тоже в счёт: панели
+* лежат в `body` соседями и друг в друга не вложены. Узел без слоя — не выше,
+* и у панели без слоя выше не лежит ничего: сравнивать не с чем.
+*
+* Правило одно на весь слой оверлея. По нему `TDismissPlugin` считает
+* нажатие в список Select, открытый из поповера, нажатием внутри, а
+* `THideOutsidePlugin` оставляет этот список доступным скринридеру, когда
+* прячет фон модального окна. Два правила разошлись бы: панель, в которую
+* можно нажать, оказалась бы немой.
+*/
+function isAboveLayer(node, panel) {
+	const layer = layerOf(node.closest(`[${FRAME_LAYER_ATTRIBUTE}]`));
+	if (layer === null) return false;
+	const own = layerOf(panel);
+	return own !== null && layer > own;
+}
+//#endregion
+export { isAboveLayer };

package/dist/utils/isAppleTouch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Сенсорное устройство Apple — iPhone, iPod или iPad. iPadOS называет себя
+ * `MacIntel`, как Mac, и отличает его сенсорный экран: у Mac точек касания нет.
+ *
+ * Общее у полей, которым VoiceOver на iOS не даёт счётчик (`spinbutton`): там
+ * он его не фокусирует, и поле даты и поле числа отдают роль `textbox`.
+ * Устройство узнают у документа узла, а не у `globalThis`: поле живёт и в
+ * iframe.
+ */
+export declare function isAppleTouch(navigator: Navigator | undefined): boolean;