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

package/dist/custom/frame/anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { TAnchorPlugin, ANCHOR_PLACEMENT_ATTRIBUTE } from './anchor.plugin';
+export type { IAnchorPluginOptions, TAnchorPluginEvents, TFramePlacement, IAnchorPluginProps, } from './types';

package/dist/custom/frame/anchor/types.d.ts

@@ -0,0 +1,83 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+import type { TPoint } from '../../../utils';
+/**
+ * Сторона и выравнивание панели относительно якоря — одной схемой: сначала
+ * сторона, затем выравнивание.
+ *
+ * Сторон четыре, на двух осях. `top` и `bottom` — стороны блока: панель над
+ * якорем или под ним, а выравнивание идёт вдоль строки. `start` и `end` —
+ * стороны строки: панель у начала или у конца строки якоря, а выравнивание
+ * идёт вдоль якоря по вертикали. Выравнивания три: `-start` — по началу якоря
+ * (у боковой стороны — верхние края вровень), `-end` — по концу (нижние края
+ * вровень), значение без суффикса — по центру (как у Floating UI).
+ *
+ * Логическое здесь всё, что лежит на оси строки: сторона `start`/`end` и
+ * выравнивание `-start`/`-end` у верха и низа — в RTL они меняются местами,
+ * как `placement` у Drawer. Ось блока от направления не зависит: верх и низ,
+ * выравнивание боковой панели и центр в RTL те же.
+ *
+ * Набор намеренно маленький: это выбор потребителя, а не подбор места.
+ * Автоматический переворот при нехватке места (flip) и сдвиг у края экрана
+ * (shift) плагин делает сам поверх этого выбора — см. `TAnchorPlugin`.
+ */
+export type TFramePlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'end-start' | 'end' | 'end-end' | 'start-start' | 'start' | 'start-end';
+/**
+ * Прямоугольник места панели в координатах окна: якоря — его
+ * `getBoundingClientRect()`, точки — нулевого размера. Расчёту хватает краёв
+ * и ширины.
+ */
+export type TAnchorRect = Pick<DOMRectReadOnly, 'left' | 'top' | 'right' | 'bottom' | 'width'>;
+export interface IAnchorPluginOptions {
+    /** Сторона и выравнивание относительно якоря. По умолчанию `bottom-start`. */
+    placement?: TFramePlacement;
+    /** Тянуть ширину панели по ширине якоря. */
+    matchWidth?: boolean;
+    /**
+     * Переворачивать ли панель на противоположную сторону, когда на выбранной
+     * она не влезает в окно — сверху и снизу по высоте, сбоку по ширине. По
+     * умолчанию `true`. Сторону выбирает показ, а открытая панель её держит:
+     * стоит, пока на ней влезает, и переходит на противоположную, только если
+     * влезает там, — прокрутка страницы не гоняет её туда и обратно.
+     * Выключенный flip оставляет сторону потребителя как есть; shift от него не
+     * зависит.
+     */
+    flip?: boolean;
+    /**
+     * Отступ панели от якоря, px: сверху и снизу — по вертикали, сбоку — по
+     * горизонтали. По умолчанию `0`.
+     */
+    offset?: number;
+}
+export type TAnchorPluginEvents = TPluginEvents & {
+    /** change:anchor */
+    'change:anchor': (payload: TValuePayload<Element | null>) => void;
+    /** change:point */
+    'change:point': (payload: TValuePayload<TPoint | null>) => void;
+    /** change:placement */
+    'change:placement': (payload: TValuePayload<TFramePlacement>) => void;
+    /** change:matchWidth */
+    'change:matchWidth': (payload: TValuePayload<boolean>) => void;
+    /** change:flip */
+    'change:flip': (payload: TValuePayload<boolean>) => void;
+    /** change:offset */
+    'change:offset': (payload: TValuePayload<number>) => void;
+};
+/**
+ * Пропсы плагина такими, какими их объявляет contribution — без неймспейса.
+ *
+ * Неймспейс (`anchor_anchor`) навешивает `DescriptorAllProps` в `@soxa-ui/setup`
+ * по `namespace` из `definePlugin`; здесь только собственные имена пропсов.
+ */
+export interface IAnchorPluginProps {
+    anchor?: Element | null;
+    /**
+     * Точка в координатах окна, у которой встаёт панель, — главнее якоря,
+     * пока задана: контекстное меню встаёт у места вызова, а не у области.
+     */
+    point?: TPoint | null;
+    placement?: TFramePlacement;
+    matchWidth?: boolean;
+    flip?: boolean;
+    offset?: number;
+}

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

@@ -0,0 +1,2 @@
+export * from './layout';
+export * from './anchor';

package/dist/custom/frame/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { TFrameLayoutPlugin } from './layout.plugin';
+export type { TFrameLayoutPluginEvents } from './types';

package/dist/custom/frame/layout/layout.plugin.d.ts

@@ -0,0 +1,24 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TFrameLayoutPluginEvents } from './types';
+/**
+ * Converts Frame properties into the styles applied by the template.
+ * Subscribes to change:x/y/width/height/zIndex/strategy and contained.
+ * A contained panel uses absolute positioning without inline coordinates:
+ * the theme places it using data-contained, without left/top overriding it.
+ * Anchoring belongs to TAnchorPlugin, which writes x/y/width; this plugin
+ * only renders the values already stored in Frame.
+ *
+ * @example
+ * const layout = bundle.get(TFrameLayoutPlugin)
+ * // layout?.styles: { position: 'fixed', left: '100px', top: '200px', 'z-index': 1001 }
+ */
+export declare class TFrameLayoutPlugin extends TBasePlugin<any, TFrameLayoutPluginEvents> {
+    private _styles;
+    private _frame;
+    install(ctx: IPluginContext): void;
+    get styles(): Record<string, string | number>;
+    destroy(): void;
+    private _bindFrame;
+    private _update;
+}

package/dist/custom/frame/layout/layout.plugin.js

@@ -0,0 +1,65 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { toCssValue } from "../../../utils/toCssValue.js";
+//#region src/custom/frame/layout/layout.plugin.ts
+/**
+* Converts Frame properties into the styles applied by the template.
+* Subscribes to change:x/y/width/height/zIndex/strategy and contained.
+* A contained panel uses absolute positioning without inline coordinates:
+* the theme places it using data-contained, without left/top overriding it.
+* Anchoring belongs to TAnchorPlugin, which writes x/y/width; this plugin
+* only renders the values already stored in Frame.
+*
+* @example
+* const layout = bundle.get(TFrameLayoutPlugin)
+* // layout?.styles: { position: 'fixed', left: '100px', top: '200px', 'z-index': 1001 }
+*/
+var TFrameLayoutPlugin = class extends TBasePlugin {
+	_styles = {};
+	_frame = null;
+	install(ctx) {
+		super.install(ctx);
+		const frame = ctx.getInstance();
+		if (frame) {
+			this._frame = frame;
+			this._bindFrame(frame);
+		}
+	}
+	get styles() {
+		return this._styles;
+	}
+	destroy() {
+		this._frame = null;
+		super.destroy();
+	}
+	_bindFrame(frame) {
+		const update = () => this._update();
+		this._listenTo(frame.events, "change:x", update);
+		this._listenTo(frame.events, "change:y", update);
+		this._listenTo(frame.events, "change:width", update);
+		this._listenTo(frame.events, "change:height", update);
+		this._listenTo(frame.events, "change:zIndex", update);
+		this._listenTo(frame.events, "change:strategy", update);
+		this._listenTo(frame.events, "change:contained", update);
+		this._update();
+	}
+	_update() {
+		const oldStyles = this.styles;
+		if (!this._frame) return;
+		const frame = this._frame;
+		const styles = frame.contained ? { position: "absolute" } : {
+			position: frame.strategy,
+			left: toCssValue(frame.x),
+			top: toCssValue(frame.y)
+		};
+		if (frame.width !== void 0) styles["width"] = toCssValue(frame.width);
+		if (frame.height !== void 0) styles["height"] = toCssValue(frame.height);
+		styles["z-index"] = frame.zIndex;
+		this._styles = styles;
+		this.events.emit("change:styles", {
+			newValue: this._styles,
+			oldValue: oldStyles
+		});
+	}
+};
+//#endregion
+export { TFrameLayoutPlugin };

package/dist/custom/frame/layout/types.d.ts

@@ -0,0 +1,5 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+export type TFrameLayoutPluginEvents = TPluginEvents & {
+    'change:styles': (payload: TValuePayload<Record<string, string | number>>) => void;
+};

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

@@ -0,0 +1,2 @@
+export type { TIconLayoutPluginEvents } from './types';
+export { TIconLayoutPlugin } from './layout.plugin';

package/dist/custom/icon/layout.plugin.d.ts

@@ -0,0 +1,21 @@
+import { TBasePlugin } from '../../base';
+import type { IPluginContext } from '../../base';
+import type { TIconLayoutPluginEvents } from './types';
+/**
+ * Плагин для управления стилями иконки.
+ */
+export declare class TIconLayoutPlugin extends TBasePlugin<any, TIconLayoutPluginEvents> {
+    private _styles;
+    install(ctx: IPluginContext): void;
+    get styles(): Record<string, string | number>;
+    /**
+     * Размер → значение инлайнового стиля. Незаданный размер даёт пустую
+     * строку: она снимает стиль, и размер иконки снова задаёт `size`.
+     */
+    private _toCss;
+    /**
+     * Заменяет объект стилей целиком, а не мутирует на месте: геттер отдаёт
+     * ссылку наружу, и без смены идентичности UI не увидит изменения.
+     */
+    private _patch;
+}

package/dist/custom/icon/layout.plugin.js

@@ -0,0 +1,51 @@
+import { TBasePlugin } from "../../base/base.class.js";
+import { toCssValue } from "../../utils/toCssValue.js";
+//#region src/custom/icon/layout.plugin.ts
+/**
+* Плагин для управления стилями иконки.
+*/
+var TIconLayoutPlugin = class extends TBasePlugin {
+	_styles = {};
+	install(ctx) {
+		super.install(ctx);
+		const icon = ctx.getInstance();
+		if (!icon) return;
+		this._styles = {
+			width: this._toCss(icon.width),
+			height: this._toCss(icon.height)
+		};
+		this._listenTo(icon.events, "change:width", ({ newValue: value }) => {
+			this._patch("width", this._toCss(value));
+		});
+		this._listenTo(icon.events, "change:height", ({ newValue: value }) => {
+			this._patch("height", this._toCss(value));
+		});
+	}
+	get styles() {
+		return this._styles;
+	}
+	/**
+	* Размер → значение инлайнового стиля. Незаданный размер даёт пустую
+	* строку: она снимает стиль, и размер иконки снова задаёт `size`.
+	*/
+	_toCss(value) {
+		return value != null ? toCssValue(value) : "";
+	}
+	/**
+	* Заменяет объект стилей целиком, а не мутирует на месте: геттер отдаёт
+	* ссылку наружу, и без смены идентичности UI не увидит изменения.
+	*/
+	_patch(key, value) {
+		const oldStyles = this.styles;
+		this._styles = {
+			...this._styles,
+			[key]: value
+		};
+		this.events.emit("change:styles", {
+			newValue: this._styles,
+			oldValue: oldStyles
+		});
+	}
+};
+//#endregion
+export { TIconLayoutPlugin };

package/dist/custom/icon/types.d.ts

@@ -0,0 +1,5 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../base';
+export type TIconLayoutPluginEvents = TPluginEvents & {
+    'change:styles': (payload: TValuePayload<Record<string, string | number>>) => void;
+};

package/dist/custom/id/id.plugin.d.ts

@@ -0,0 +1,32 @@
+import { TBasePlugin } from '../../base';
+import type { TIdPluginEvents } from './types';
+/**
+ * TIdPlugin — `id`, который приложение задаёт узлу компонента, на который
+ * ссылаются по `id`.
+ *
+ * Такой узел — поле формы (на него ведут `<label for>` и `aria-labelledby`
+ * разметки приложения и `for` подписи `Field`) и строка элемента, на которую
+ * ссылается сама библиотека: элемент списка и опция (`aria-activedescendant`),
+ * таб, заголовок секции, строка пункта меню со своей панелью (`aria-controls`
+ * и `aria-labelledby` панели). У остальных компонентов `id` приложения — просто
+ * атрибут корня, и знать его библиотеке незачем.
+ *
+ * `id` — понятие документа, поэтому его держит плагин, а не ядро (a11y.md,
+ * «`id` в разметке — от монтирования, в плагинах»), и держит в одном месте на
+ * все такие компоненты. Сам плагин в разметку ничего не пишет: на узел `id`
+ * кладёт тот, кто этот узел рисует, — поле шаблон из состояния, строку
+ * элемента плагин связок, который без `id` приложения берёт `id` от
+ * монтирования (`ctx.createId`) и на `change:id` переписывает обе стороны
+ * ссылки.
+ *
+ * Не задан — `undefined`.
+ */
+export declare class TIdPlugin extends TBasePlugin<any, TIdPluginEvents> {
+    /** Умолчания опций, объявленных пропами, — см. `TDismissPlugin.defaultValues`. */
+    static defaultValues: {
+        id: string | undefined;
+    };
+    private _id;
+    get id(): string | undefined;
+    set id(value: string | undefined);
+}

package/dist/custom/id/id.plugin.js

@@ -0,0 +1,42 @@
+import { TBasePlugin } from "../../base/base.class.js";
+//#region src/custom/id/id.plugin.ts
+/**
+* TIdPlugin — `id`, который приложение задаёт узлу компонента, на который
+* ссылаются по `id`.
+*
+* Такой узел — поле формы (на него ведут `<label for>` и `aria-labelledby`
+* разметки приложения и `for` подписи `Field`) и строка элемента, на которую
+* ссылается сама библиотека: элемент списка и опция (`aria-activedescendant`),
+* таб, заголовок секции, строка пункта меню со своей панелью (`aria-controls`
+* и `aria-labelledby` панели). У остальных компонентов `id` приложения — просто
+* атрибут корня, и знать его библиотеке незачем.
+*
+* `id` — понятие документа, поэтому его держит плагин, а не ядро (a11y.md,
+* «`id` в разметке — от монтирования, в плагинах»), и держит в одном месте на
+* все такие компоненты. Сам плагин в разметку ничего не пишет: на узел `id`
+* кладёт тот, кто этот узел рисует, — поле шаблон из состояния, строку
+* элемента плагин связок, который без `id` приложения берёт `id` от
+* монтирования (`ctx.createId`) и на `change:id` переписывает обе стороны
+* ссылки.
+*
+* Не задан — `undefined`.
+*/
+var TIdPlugin = class TIdPlugin extends TBasePlugin {
+	/** Умолчания опций, объявленных пропами, — см. `TDismissPlugin.defaultValues`. */
+	static defaultValues = { id: void 0 };
+	_id = TIdPlugin.defaultValues.id;
+	get id() {
+		return this._id;
+	}
+	set id(value) {
+		const oldId = this.id;
+		if (this._id === value) return;
+		this._id = value;
+		this.events.emit("change:id", {
+			newValue: value,
+			oldValue: oldId
+		});
+	}
+};
+//#endregion
+export { TIdPlugin };

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

@@ -0,0 +1,2 @@
+export type { TIdPluginEvents } from './types';
+export { TIdPlugin } from './id.plugin';

package/dist/custom/id/types.d.ts

@@ -0,0 +1,6 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../base';
+export type TIdPluginEvents = TPluginEvents & {
+    /** change:id — `id` узла сменился; `undefined` — снят */
+    'change:id': (payload: TValuePayload<string | undefined>) => void;
+};

package/dist/custom/index.d.ts

@@ -0,0 +1,42 @@
+export * from './accordion';
+export * from './action';
+export * from './calendar';
+export * from './clearable';
+export * from './collection';
+export * from './component-view';
+export * from './date-input';
+export * from './date-picker';
+export * from './dialog';
+export * from './dismiss';
+export * from './drag-and-drop';
+export * from './drawer';
+export * from './element';
+export * from './field';
+export * from './frame';
+export * from './icon';
+export * from './id';
+export * from './input';
+export * from './input-bool';
+export * from './input-control';
+export * from './item-group';
+export * from './label';
+export * from './list';
+export * from './menu';
+export * from './number-input';
+export * from './overlay';
+export * from './pagination';
+export * from './popover';
+export * from './radio-group';
+export * from './rating';
+export * from './ready';
+export * from './scroller';
+export * from './select';
+export * from './skeleton';
+export * from './slide';
+export * from './table';
+export * from './tabs';
+export * from './tags';
+export * from './textarea';
+export * from './toasts';
+export * from './tooltip';
+export * from './virtual';

package/dist/custom/input/field.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Поле контрола — первое поле формы в его корне. `null` — поля в корне нет.
+ *
+ * Узел фокуса компонентов, у которых корень — коробка вокруг поля: Input,
+ * NumberInput, Textarea, CheckBox, Switch, Rating, Slider, Select и радио
+ * (`focusTarget` плагина действия). По тегу поля, а не первая остановка Tab:
+ * кнопка в слоте `leading` и крестики тегов Select стоят перед полем своими
+ * остановками, и фокус ушёл бы на них.
+ *
+ * Тем же правилом поле находят плагины полей: ввод текста (`TInputPlugin`),
+ * поле только для чтения (`TInputControlPlugin`), чекбокс и переключатель
+ * (`TInputBoolPlugin`), клавиатура, ввод и `Backspace` Select, отметка радио
+ * группы и авторост Textarea, — и правка разметки поля не расходится по ним.
+ * Нужный тип узла каждый сужает сам (`instanceof`).
+ */
+export declare function fieldOf(root: Element): Element | null;

package/dist/custom/input/field.js

@@ -0,0 +1,27 @@
+//#region src/custom/input/field.ts
+/**
+* Поле формы, которое держит фокус контрола: `input`, кроме скрытого, или
+* `textarea`. Скрытое поле — значение для формы (число NumberInput), фокуса у
+* него нет.
+*/
+var FIELD_SELECTOR = "input:not([type=\"hidden\"]), textarea";
+/**
+* Поле контрола — первое поле формы в его корне. `null` — поля в корне нет.
+*
+* Узел фокуса компонентов, у которых корень — коробка вокруг поля: Input,
+* NumberInput, Textarea, CheckBox, Switch, Rating, Slider, Select и радио
+* (`focusTarget` плагина действия). По тегу поля, а не первая остановка Tab:
+* кнопка в слоте `leading` и крестики тегов Select стоят перед полем своими
+* остановками, и фокус ушёл бы на них.
+*
+* Тем же правилом поле находят плагины полей: ввод текста (`TInputPlugin`),
+* поле только для чтения (`TInputControlPlugin`), чекбокс и переключатель
+* (`TInputBoolPlugin`), клавиатура, ввод и `Backspace` Select, отметка радио
+* группы и авторост Textarea, — и правка разметки поля не расходится по ним.
+* Нужный тип узла каждый сужает сам (`instanceof`).
+*/
+function fieldOf(root) {
+	return root.querySelector(FIELD_SELECTOR);
+}
+//#endregion
+export { fieldOf };

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

@@ -0,0 +1,3 @@
+export type { TInputPluginEvents } from './types';
+export { TInputPlugin } from './input.plugin';
+export { fieldOf } from './field';

package/dist/custom/input/input.plugin.d.ts

@@ -0,0 +1,12 @@
+import { TBasePlugin } from '../../base';
+import type { IPluginContext } from '../../base';
+import type { TInputPluginEvents } from './types';
+export declare class TInputPlugin extends TBasePlugin<any, TInputPluginEvents> {
+    private _input;
+    private _instance;
+    private _onInput;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _handleInput;
+    private _removeInputListener;
+}

package/dist/custom/input/input.plugin.js

@@ -0,0 +1,46 @@
+import { TBasePlugin } from "../../base/base.class.js";
+import { TElementPlugin } from "../element/element.plugin.js";
+import { fieldOf } from "./field.js";
+//#region src/custom/input/input.plugin.ts
+var TInputPlugin = class extends TBasePlugin {
+	_input = null;
+	_instance = null;
+	_onInput = this._handleInput.bind(this);
+	install(ctx) {
+		super.install(ctx);
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", () => {
+			const el = elementPlugin.element;
+			if (!el) return;
+			const input = fieldOf(el);
+			if (!(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)) return;
+			this._input = input;
+			input.addEventListener("input", this._onInput);
+		});
+		elementPlugin?.events.on("removed", () => {
+			this._removeInputListener();
+			this._input = null;
+		});
+		this._instance = ctx.getInstance();
+	}
+	destroy() {
+		this._removeInputListener();
+		this._input = null;
+		this._instance = null;
+		super.destroy();
+	}
+	_handleInput(event) {
+		if (!this._instance) return;
+		if (this._instance.readonly || this._instance.disabled) {
+			event.preventDefault();
+			return;
+		}
+		if (!this._input) return;
+		this._instance.value = this._input.value;
+	}
+	_removeInputListener() {
+		if (this._input) this._input.removeEventListener("input", this._onInput);
+	}
+};
+//#endregion
+export { TInputPlugin };

package/dist/custom/input/types.d.ts

@@ -0,0 +1,2 @@
+import type { TPluginEvents } from '../../base';
+export type TInputPluginEvents = TPluginEvents;

package/dist/custom/input-bool/index.d.ts

@@ -0,0 +1,2 @@
+export type { TInputBoolPluginEvents } from './types';
+export { TInputBoolPlugin } from './input-bool.plugin';

package/dist/custom/input-bool/input-bool.plugin.d.ts

@@ -0,0 +1,30 @@
+import { TBasePlugin } from '../../base';
+import type { IPluginContext } from '../../base';
+import type { TInputBoolPluginEvents } from './types';
+export declare class TInputBoolPlugin extends TBasePlugin<any, TInputBoolPluginEvents> {
+    private _input;
+    private _instance;
+    private _onClick;
+    private _onChange;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    /**
+     * Readonly отменяется на `click`, а не на `change`: `checked` и
+     * `indeterminate` браузер переключает до клика и откатывает, только если
+     * отменён сам клик. `change` уже не отменить — DOM разошёлся бы с моделью.
+     * Пробел на сфокусированном чекбоксе тоже приходит кликом.
+     */
+    private _handleClick;
+    private _handleChange;
+    /**
+     * Узел — по модели после переключения. Браузер переключил поле сам, ещё до
+     * клика, а модель вправе запись не принять: её отменил или поправил
+     * подписчик `change:value:before` — так, например, чекбокс выбора строки
+     * таблицы отдаёт решение выбору строк. Модель тогда не сменилась, и
+     * разметка поле не перерисует: и Vue, и React пишут `checked` в узел только
+     * на смену своего значения. Без этой записи поле осталось бы переключённым
+     * при прежней модели.
+     */
+    private _syncInput;
+    private _removeInputListener;
+}

package/dist/custom/input-bool/input-bool.plugin.js

@@ -0,0 +1,77 @@
+import { TBasePlugin } from "../../base/base.class.js";
+import { TElementPlugin } from "../element/element.plugin.js";
+import { fieldOf } from "../input/field.js";
+//#region src/custom/input-bool/input-bool.plugin.ts
+var TInputBoolPlugin = class extends TBasePlugin {
+	_input = null;
+	_instance = null;
+	_onClick = this._handleClick.bind(this);
+	_onChange = this._handleChange.bind(this);
+	install(ctx) {
+		super.install(ctx);
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", () => {
+			const el = elementPlugin.element;
+			if (!el) return;
+			const input = fieldOf(el);
+			if (!(input instanceof HTMLInputElement)) return;
+			this._input = input;
+			input.addEventListener("click", this._onClick);
+			input.addEventListener("change", this._onChange);
+		});
+		elementPlugin?.events.on("removed", () => {
+			this._removeInputListener();
+			this._input = null;
+		});
+		this._instance = ctx.getInstance();
+	}
+	destroy() {
+		this._removeInputListener();
+		this._input = null;
+		this._instance = null;
+		super.destroy();
+	}
+	/**
+	* Readonly отменяется на `click`, а не на `change`: `checked` и
+	* `indeterminate` браузер переключает до клика и откатывает, только если
+	* отменён сам клик. `change` уже не отменить — DOM разошёлся бы с моделью.
+	* Пробел на сфокусированном чекбоксе тоже приходит кликом.
+	*/
+	_handleClick(event) {
+		if (this._instance?.readonly) event.preventDefault();
+	}
+	_handleChange() {
+		if (this._instance?.readonly || this._input?.disabled) return;
+		const oldValue = this._instance?.value;
+		this._instance?.toggle();
+		this._syncInput();
+		this.events.emit("change:value", {
+			newValue: this._instance?.value,
+			oldValue
+		});
+	}
+	/**
+	* Узел — по модели после переключения. Браузер переключил поле сам, ещё до
+	* клика, а модель вправе запись не принять: её отменил или поправил
+	* подписчик `change:value:before` — так, например, чекбокс выбора строки
+	* таблицы отдаёт решение выбору строк. Модель тогда не сменилась, и
+	* разметка поле не перерисует: и Vue, и React пишут `checked` в узел только
+	* на смену своего значения. Без этой записи поле осталось бы переключённым
+	* при прежней модели.
+	*/
+	_syncInput() {
+		const input = this._input;
+		const instance = this._instance;
+		if (!input || !instance) return;
+		input.checked = instance.value === true;
+		input.indeterminate = instance.indeterminate === true;
+	}
+	_removeInputListener() {
+		if (this._input) {
+			this._input.removeEventListener("click", this._onClick);
+			this._input.removeEventListener("change", this._onChange);
+		}
+	}
+};
+//#endregion
+export { TInputBoolPlugin };

package/dist/custom/input-bool/types.d.ts

@@ -0,0 +1,5 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../base';
+export type TInputBoolPluginEvents = TPluginEvents & {
+    'change:value': (payload: TValuePayload<boolean | undefined>) => void;
+};

package/dist/custom/input-control/index.d.ts

@@ -0,0 +1,2 @@
+export type { TInputControlPluginEvents } from './types';
+export { TInputControlPlugin } from './input-control.plugin';