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

package/dist/custom/select/pointer/pointer.plugin.d.ts

@@ -0,0 +1,59 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TSelectPointerPluginEvents } from './types';
+/**
+ * TSelectPointerPlugin — указатель на поле Select: нажатие и клик.
+ *
+ * **Нажатие оставляет фокус в поле.** DOM-фокус комбобокса всегда на
+ * `<input>` поля (APG Combobox): стрелки, Enter и Escape клавиатура берёт
+ * только с него (`TSelectKeyboardPlugin`). Части поля без своей остановки Tab
+ * — стрелка, коробка, ряд тегов, строки тегов, немое содержимое слотов — по
+ * умолчанию уводят фокус из поля: `mousedown` по немой части уносит его на
+ * `body`. Клавиши с него до поля не доходят: панель открывалась кликом по
+ * стрелке или по тегу, а стрелки после этого прокручивали страницу. Поэтому
+ * нажатие основной кнопкой по такой части гасится (`preventDefault`) в обоих
+ * режимах, и фокус встаёт в поле, если его там нет, — как у нативного
+ * `<select>` и у кнопок шага NumberInput
+ * (`TNumberInputStepperPlugin`). Фокус уже в поле — он там и остаётся, без
+ * `focusout`. Ставится он без прокрутки (`preventScroll`): поле, по которому
+ * нажали, и так на экране, а страница не должна прыгать.
+ *
+ * Нажатие по остановке Tab внутри корня — по `<input>`, кнопке очистки,
+ * крестику тега, кнопке потребителя в слоте — не трогается: что с ним делать,
+ * остановка знает сама. Вопрос — остановка ли под нажатием, а не принимает ли
+ * узел фокус вообще (`closestControl`): кроме поля, фокус в корне держат
+ * только отдельные остановки. Узел, который фокус лишь принимает
+ * (`tabindex="-1"`), — элемент составного виджета с roving tabindex, а таких в
+ * поле нет: здесь это `-1` в слоте. У строки тега в поле `tabindex` нет
+ * вовсе — теги в нём без выбора, и роль с остановкой строке пишет только
+ * набор тега (`TItemRow`). Остановка под нажатием — общее правило
+ * `closestTabStop` (`utils/tabStops.ts`), поле — `fieldOf`, как у
+ * клавиатуры. Правило одно для мыши, пера и пальца: в select-only поле
+ * только для чтения, и экранной клавиатуры у него нет, а в `editable` касание
+ * стрелки ставит фокус туда же, куда касание поля.
+ *
+ * **Клик тумблит панель** (`ISelect.toggleOpen()`): в select-only — клик по
+ * всему полю, в `editable` — только по стрелке (`.so-select__arrow`), а клик
+ * по тексту поля ставит курсор и ничего не открывает. Режим плагин знает по
+ * `change:editable`.
+ *
+ * Слушает сам корень (тот же элемент, что у `TDismissPlugin`/клавиатуры),
+ * поэтому клик по вложенному `<input>` и по кнопке очистки (она сама
+ * останавливает всплытие) доходят одинаково во всех шести адаптерах —
+ * разметке про режим знать не нужно.
+ */
+export declare class TSelectPointerPlugin extends TBasePlugin<any, TSelectPointerPluginEvents> {
+    private _owner;
+    /** Корень Select: на нём слушатели, в нём ищутся остановка под нажатием и поле. */
+    private _root;
+    private _editable;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    /** Корень сменился — слушатели переезжают на новый. */
+    private _bind;
+    private _isArrow;
+    /** select-only: клик по полю тумблит панель. editable: только по стрелке. */
+    private readonly _onClick;
+    /** Нажатие мимо остановок Tab поля фокус из поля не уводит, а снаружи — ставит в него. */
+    private readonly _onMouseDown;
+}

package/dist/custom/select/pointer/pointer.plugin.js

@@ -0,0 +1,104 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isFocusableElement } from "../../../utils/isFocusableElement.js";
+import { closestTabStop } from "../../../utils/tabStops.js";
+import { fieldOf } from "../../input/field.js";
+//#region src/custom/select/pointer/pointer.plugin.ts
+/** Класс стрелки — единственное место клика, которое открывает/закрывает панель в `editable`. */
+var ARROW_SELECTOR = ".so-select__arrow";
+/**
+* TSelectPointerPlugin — указатель на поле Select: нажатие и клик.
+*
+* **Нажатие оставляет фокус в поле.** DOM-фокус комбобокса всегда на
+* `<input>` поля (APG Combobox): стрелки, Enter и Escape клавиатура берёт
+* только с него (`TSelectKeyboardPlugin`). Части поля без своей остановки Tab
+* — стрелка, коробка, ряд тегов, строки тегов, немое содержимое слотов — по
+* умолчанию уводят фокус из поля: `mousedown` по немой части уносит его на
+* `body`. Клавиши с него до поля не доходят: панель открывалась кликом по
+* стрелке или по тегу, а стрелки после этого прокручивали страницу. Поэтому
+* нажатие основной кнопкой по такой части гасится (`preventDefault`) в обоих
+* режимах, и фокус встаёт в поле, если его там нет, — как у нативного
+* `<select>` и у кнопок шага NumberInput
+* (`TNumberInputStepperPlugin`). Фокус уже в поле — он там и остаётся, без
+* `focusout`. Ставится он без прокрутки (`preventScroll`): поле, по которому
+* нажали, и так на экране, а страница не должна прыгать.
+*
+* Нажатие по остановке Tab внутри корня — по `<input>`, кнопке очистки,
+* крестику тега, кнопке потребителя в слоте — не трогается: что с ним делать,
+* остановка знает сама. Вопрос — остановка ли под нажатием, а не принимает ли
+* узел фокус вообще (`closestControl`): кроме поля, фокус в корне держат
+* только отдельные остановки. Узел, который фокус лишь принимает
+* (`tabindex="-1"`), — элемент составного виджета с roving tabindex, а таких в
+* поле нет: здесь это `-1` в слоте. У строки тега в поле `tabindex` нет
+* вовсе — теги в нём без выбора, и роль с остановкой строке пишет только
+* набор тега (`TItemRow`). Остановка под нажатием — общее правило
+* `closestTabStop` (`utils/tabStops.ts`), поле — `fieldOf`, как у
+* клавиатуры. Правило одно для мыши, пера и пальца: в select-only поле
+* только для чтения, и экранной клавиатуры у него нет, а в `editable` касание
+* стрелки ставит фокус туда же, куда касание поля.
+*
+* **Клик тумблит панель** (`ISelect.toggleOpen()`): в select-only — клик по
+* всему полю, в `editable` — только по стрелке (`.so-select__arrow`), а клик
+* по тексту поля ставит курсор и ничего не открывает. Режим плагин знает по
+* `change:editable`.
+*
+* Слушает сам корень (тот же элемент, что у `TDismissPlugin`/клавиатуры),
+* поэтому клик по вложенному `<input>` и по кнопке очистки (она сама
+* останавливает всплытие) доходят одинаково во всех шести адаптерах —
+* разметке про режим знать не нужно.
+*/
+var TSelectPointerPlugin = class extends TBasePlugin {
+	_owner = null;
+	/** Корень Select: на нём слушатели, в нём ищутся остановка под нажатием и поле. */
+	_root = null;
+	_editable = false;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance() ?? null;
+		this._editable = Boolean(this._owner?.editable);
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => this._bind(element));
+		elementPlugin?.events.on("removed", () => this._bind(null));
+		this._listenTo(this._owner?.events, "change:editable", ({ newValue: value }) => {
+			this._editable = value;
+		});
+	}
+	destroy() {
+		this._bind(null);
+		this._owner = null;
+		super.destroy();
+	}
+	/** Корень сменился — слушатели переезжают на новый. */
+	_bind(root) {
+		const previous = this._root;
+		previous?.removeEventListener("click", this._onClick);
+		previous?.removeEventListener("mousedown", this._onMouseDown);
+		this._root = root;
+		const target = root;
+		target?.addEventListener("click", this._onClick);
+		target?.addEventListener("mousedown", this._onMouseDown);
+	}
+	_isArrow(target) {
+		return target instanceof Element && !!target.closest(ARROW_SELECTOR);
+	}
+	/** select-only: клик по полю тумблит панель. editable: только по стрелке. */
+	_onClick = (event) => {
+		if (this._editable) {
+			if (this._isArrow(event.target)) this._owner?.toggleOpen();
+			return;
+		}
+		this._owner?.toggleOpen();
+	};
+	/** Нажатие мимо остановок Tab поля фокус из поля не уводит, а снаружи — ставит в него. */
+	_onMouseDown = (event) => {
+		const root = this._root;
+		const target = event.target;
+		if (!root || event.button !== 0 || !(target instanceof Element)) return;
+		if (closestTabStop(target, root)) return;
+		event.preventDefault();
+		const field = fieldOf(root);
+		if (isFocusableElement(field) && root.ownerDocument.activeElement !== field) field.focus({ preventScroll: true });
+	};
+};
+//#endregion
+export { TSelectPointerPlugin };

package/dist/custom/select/pointer/types.d.ts

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

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

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

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

@@ -0,0 +1,18 @@
+import { TBasePlugin } from '../../base';
+import type { IPluginContext } from '../../base';
+import type { TSkeletonLayoutPluginEvents } from './types';
+/**
+ * Плагин для управления стилями скелетона.
+ * Вычисляет ширину и высоту placeholder'а на основе size или кастомных width/height.
+ */
+export declare class TSkeletonLayoutPlugin extends TBasePlugin<any, TSkeletonLayoutPluginEvents> {
+    private _styles;
+    install(ctx: IPluginContext): void;
+    private _bindDimension;
+    get styles(): Record<string, string | number>;
+    /**
+     * Заменяет объект стилей целиком, а не мутирует на месте: геттер отдаёт
+     * ссылку наружу, и без смены идентичности UI не увидит изменения.
+     */
+    private _patch;
+}

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

@@ -0,0 +1,47 @@
+import { TBasePlugin } from "../../base/base.class.js";
+import { toCssValue } from "../../utils/toCssValue.js";
+//#region src/custom/skeleton/layout.plugin.ts
+/**
+* Плагин для управления стилями скелетона.
+* Вычисляет ширину и высоту placeholder'а на основе size или кастомных width/height.
+*/
+var TSkeletonLayoutPlugin = class extends TBasePlugin {
+	_styles = {};
+	install(ctx) {
+		super.install(ctx);
+		const skeleton = ctx.getInstance();
+		if (!skeleton) return;
+		this._bindDimension(skeleton, "width");
+		this._bindDimension(skeleton, "height");
+	}
+	_bindDimension(skeleton, prop) {
+		this._styles = {
+			...this._styles,
+			[prop]: toCssValue(skeleton[prop])
+		};
+		const event = prop === "width" ? "change:width" : "change:height";
+		this._listenTo(skeleton.events, event, ({ newValue: value }) => {
+			this._patch(prop, toCssValue(value || "auto"));
+		});
+	}
+	get styles() {
+		return this._styles;
+	}
+	/**
+	* Заменяет объект стилей целиком, а не мутирует на месте: геттер отдаёт
+	* ссылку наружу, и без смены идентичности 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 { TSkeletonLayoutPlugin };

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

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

package/dist/custom/slide/direction.d.ts

@@ -0,0 +1,30 @@
+import type { ISlidable } from '@soxa-ui/core';
+import type { TSlideDirection, TSlidePoint } from './types';
+/**
+ * Направление роста значения у владельца.
+ *
+ * Горизонталь растёт от начала строки, поэтому в RTL — справа; `inverted`
+ * переворачивает сторону. Вертикаль растёт снизу вверх при любом направлении
+ * письма. Направление письма — вычисленное, а не `direction` компонента: у
+ * того бывает `inherit`, и тогда сторону задаёт предок.
+ */
+export declare function slideDirection(owner: Pick<ISlidable, 'orientation' | 'inverted'>, element: Element): TSlideDirection;
+/**
+ * Длина хода в px — по коробке дорожки вдоль оси направления. По ней радиус
+ * щелчка из пикселей становится долей хода.
+ */
+export declare function lengthAlong(direction: TSlideDirection, box: DOMRectReadOnly): number;
+/**
+ * Доля хода в точке указателя по коробке дорожки: 0 — у `min`, 1 — у `max`,
+ * за краями — за 0 и 1. Коробка дорожки — ход центров ручек, её края и есть 0
+ * и 1 (контракт с темой). Коробка нулевой длины — начало хода.
+ *
+ * Долю здесь не прижимают — прижимает владелец, и не долю указателя, а итог.
+ * Ручку он ведёт со смещением захвата, и прижатая доля не довела бы до края
+ * ручку, взятую не за середину. А по точке нажатия он решает, какую из ручек
+ * на одном значении вести: прижатая к краю, она спутала бы с движением наружу
+ * движение внутрь, начатое ещё за краем.
+ */
+export declare function fractionAt(direction: TSlideDirection, box: DOMRectReadOnly, point: TSlidePoint): number;
+/** Шаг от стрелки: `1` — к `max`, `-1` — к `min`; не стрелка — `null`. */
+export declare function arrowStep(direction: TSlideDirection, key: string): 1 | -1 | null;

package/dist/custom/slide/direction.js

@@ -0,0 +1,75 @@
+//#region src/custom/slide/direction.ts
+/**
+* Направление роста значения у владельца.
+*
+* Горизонталь растёт от начала строки, поэтому в RTL — справа; `inverted`
+* переворачивает сторону. Вертикаль растёт снизу вверх при любом направлении
+* письма. Направление письма — вычисленное, а не `direction` компонента: у
+* того бывает `inherit`, и тогда сторону задаёт предок.
+*/
+function slideDirection(owner, element) {
+	if (owner.orientation === "vertical") return owner.inverted ? "from-top" : "from-bottom";
+	return getComputedStyle(element).direction === "rtl" === owner.inverted ? "from-left" : "from-right";
+}
+/** Путь от стороны `min` до точки — по оси направления. */
+var OFFSET = {
+	"from-left": (box, point) => point.clientX - box.left,
+	"from-right": (box, point) => box.right - point.clientX,
+	"from-bottom": (box, point) => box.bottom - point.clientY,
+	"from-top": (box, point) => point.clientY - box.top
+};
+/** Сторона коробки, вдоль которой идёт ход. */
+var LENGTH = {
+	"from-left": "width",
+	"from-right": "width",
+	"from-bottom": "height",
+	"from-top": "height"
+};
+/**
+* Длина хода в px — по коробке дорожки вдоль оси направления. По ней радиус
+* щелчка из пикселей становится долей хода.
+*/
+function lengthAlong(direction, box) {
+	return box[LENGTH[direction]];
+}
+/**
+* Доля хода в точке указателя по коробке дорожки: 0 — у `min`, 1 — у `max`,
+* за краями — за 0 и 1. Коробка дорожки — ход центров ручек, её края и есть 0
+* и 1 (контракт с темой). Коробка нулевой длины — начало хода.
+*
+* Долю здесь не прижимают — прижимает владелец, и не долю указателя, а итог.
+* Ручку он ведёт со смещением захвата, и прижатая доля не довела бы до края
+* ручку, взятую не за середину. А по точке нажатия он решает, какую из ручек
+* на одном значении вести: прижатая к краю, она спутала бы с движением наружу
+* движение внутрь, начатое ещё за краем.
+*/
+function fractionAt(direction, box, point) {
+	const length = lengthAlong(direction, box);
+	return length > 0 ? OFFSET[direction](box, point) / length : 0;
+}
+/**
+* Стрелки к `min` для каждого направления роста (таблица `BACK_KEYS` у
+* Radix); две остальные ведут к `max`. Стрелки своей оси двигают ручку туда,
+* куда смотрят. Стрелки чужой оси — как в любом поле с числом: ↑ и →
+* прибавляют; исключение — вертикаль сверху вниз, где ↓ прибавляет, потому что
+* туда уходит и ручка.
+*/
+var BACK_KEYS = {
+	"from-left": ["ArrowLeft", "ArrowDown"],
+	"from-right": ["ArrowRight", "ArrowDown"],
+	"from-bottom": ["ArrowDown", "ArrowLeft"],
+	"from-top": ["ArrowUp", "ArrowLeft"]
+};
+var ARROWS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown"
+]);
+/** Шаг от стрелки: `1` — к `max`, `-1` — к `min`; не стрелка — `null`. */
+function arrowStep(direction, key) {
+	if (!ARROWS.has(key)) return null;
+	return BACK_KEYS[direction].includes(key) ? -1 : 1;
+}
+//#endregion
+export { arrowStep, fractionAt, lengthAlong, slideDirection };

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

@@ -0,0 +1,4 @@
+export * from './pointer';
+export * from './keyboard';
+export { slideDirection, fractionAt, lengthAlong, arrowStep } from './direction';
+export type { TSlideDirection, TSlidePoint } from './types';

package/dist/custom/slide/keyboard/index.d.ts

@@ -0,0 +1,2 @@
+export { TSlideKeyboardPlugin } from './keyboard.plugin';
+export type { TSlideKeyboardPluginEvents } from './types';

package/dist/custom/slide/keyboard/keyboard.plugin.d.ts

@@ -0,0 +1,46 @@
+import type { ISlidable } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TSlideKeyboardPluginEvents } from './types';
+/**
+ * TSlideKeyboardPlugin — клавиатура и жест скринридера у полей ручек.
+ *
+ * Поле ручки — нативный `input[type=range]`, и браузер сдвинул бы его сам. Но
+ * шаг у него свой: он не знает ни крупного шага, ни неравного шага списком, ни
+ * `inverted`, а в RTL стрелки у браузеров расходятся. Поэтому клавиши плагин
+ * берёт себе (`preventDefault`) и переводит в команды владельца — одинаково во
+ * всех браузерах:
+ *
+ * - стрелки — шаг по направлению роста (`arrowStep`): стрелка своей оси ведёт
+ *   ручку туда, куда смотрит, в RTL и при `inverted` тоже;
+ * - Shift со стрелкой, PageUp и PageDown — крупный шаг (`largeStep`);
+ * - Home и End — край хода ручки.
+ *
+ * Клавиши с Alt, Ctrl и Meta — чужие жесты, их плагин не трогает. Слушает он
+ * корень, но берёт только клавиши самих полей: у содержимого слотов своя
+ * клавиатура.
+ *
+ * Мобильный скринридер клавиш не шлёт: свайп двигает поле его собственным
+ * шагом и сообщает об этом событием `input`. Плагин переводит направление
+ * правки в шаг владельца и возвращает полю значение владельца — показывать
+ * поле должно то, что решило ядро.
+ */
+export declare class TSlideKeyboardPlugin extends TBasePlugin<ISlidable, TSlideKeyboardPluginEvents> {
+    private _owner;
+    private _root;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _attach;
+    private _detach;
+    private readonly _onKeyDown;
+    /**
+     * Правка поля не клавишей — жестом скринридера. Владелец делает шаг в ту
+     * же сторону, а поле показывает его значение: и когда шаг сделан, и когда
+     * упёрся в соседа.
+     */
+    private readonly _onInput;
+    /** Что клавиша делает с ручкой; не наша клавиша — `null`, её обработает браузер. */
+    private _actionOf;
+    /** Номер ручки, чьё поле — цель события; не поле ручки — `-1`. */
+    private _thumbOf;
+}

package/dist/custom/slide/keyboard/keyboard.plugin.js

@@ -0,0 +1,106 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { arrowStep, slideDirection } from "../direction.js";
+import { fieldOf, thumbsOf, trackOf } from "../parts.js";
+//#region src/custom/slide/keyboard/keyboard.plugin.ts
+/**
+* TSlideKeyboardPlugin — клавиатура и жест скринридера у полей ручек.
+*
+* Поле ручки — нативный `input[type=range]`, и браузер сдвинул бы его сам. Но
+* шаг у него свой: он не знает ни крупного шага, ни неравного шага списком, ни
+* `inverted`, а в RTL стрелки у браузеров расходятся. Поэтому клавиши плагин
+* берёт себе (`preventDefault`) и переводит в команды владельца — одинаково во
+* всех браузерах:
+*
+* - стрелки — шаг по направлению роста (`arrowStep`): стрелка своей оси ведёт
+*   ручку туда, куда смотрит, в RTL и при `inverted` тоже;
+* - Shift со стрелкой, PageUp и PageDown — крупный шаг (`largeStep`);
+* - Home и End — край хода ручки.
+*
+* Клавиши с Alt, Ctrl и Meta — чужие жесты, их плагин не трогает. Слушает он
+* корень, но берёт только клавиши самих полей: у содержимого слотов своя
+* клавиатура.
+*
+* Мобильный скринридер клавиш не шлёт: свайп двигает поле его собственным
+* шагом и сообщает об этом событием `input`. Плагин переводит направление
+* правки в шаг владельца и возвращает полю значение владельца — показывать
+* поле должно то, что решило ядро.
+*/
+var TSlideKeyboardPlugin = class extends TBasePlugin {
+	_owner = null;
+	_root = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance();
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => this._attach(node));
+		element?.events.on("removed", () => this._detach());
+	}
+	destroy() {
+		this._detach();
+		this._owner = null;
+		super.destroy();
+	}
+	_attach(root) {
+		this._detach();
+		this._root = root;
+		const target = root;
+		target.addEventListener("keydown", this._onKeyDown);
+		target.addEventListener("input", this._onInput);
+	}
+	_detach() {
+		const target = this._root;
+		target?.removeEventListener("keydown", this._onKeyDown);
+		target?.removeEventListener("input", this._onInput);
+		this._root = null;
+	}
+	_onKeyDown = (event) => {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root) return;
+		const index = this._thumbOf(owner, root, event.target);
+		const action = index < 0 ? null : this._actionOf(owner, root, event);
+		if (!action) return;
+		event.preventDefault();
+		action(index);
+	};
+	/**
+	* Правка поля не клавишей — жестом скринридера. Владелец делает шаг в ту
+	* же сторону, а поле показывает его значение: и когда шаг сделан, и когда
+	* упёрся в соседа.
+	*/
+	_onInput = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		const field = event.target;
+		if (!owner || !root || !(field instanceof HTMLInputElement)) return;
+		const index = this._thumbOf(owner, root, field);
+		if (index < 0) return;
+		const direction = Math.sign(Number(field.value) - owner.values[index]);
+		if (direction) owner.shift(index, direction);
+		const value = String(owner.values[index]);
+		if (field.value !== value) field.value = value;
+	};
+	/** Что клавиша делает с ручкой; не наша клавиша — `null`, её обработает браузер. */
+	_actionOf(owner, root, event) {
+		switch (event.key) {
+			case "Home": return (index) => owner.moveToEdge(index, "start");
+			case "End": return (index) => owner.moveToEdge(index, "end");
+			case "PageUp": return (index) => owner.shift(index, owner.largeStep);
+			case "PageDown": return (index) => owner.shift(index, -owner.largeStep);
+		}
+		const step = arrowStep(slideDirection(owner, root), event.key);
+		if (step === null) return null;
+		const count = event.shiftKey ? step * owner.largeStep : step;
+		return (index) => owner.shift(index, count);
+	}
+	/** Номер ручки, чьё поле — цель события; не поле ручки — `-1`. */
+	_thumbOf(owner, root, target) {
+		const track = trackOf(owner, root);
+		if (!track) return -1;
+		return thumbsOf(owner, track).findIndex((thumb) => fieldOf(thumb) === target);
+	}
+};
+//#endregion
+export { TSlideKeyboardPlugin };

package/dist/custom/slide/keyboard/types.d.ts

@@ -0,0 +1,6 @@
+import type { TPluginEvents } from '../../../base';
+/**
+ * Своих событий у плагина нет: результат клавиши виден через владельца —
+ * значение и `commit` сообщает он, фокус остаётся на поле.
+ */
+export type TSlideKeyboardPluginEvents = TPluginEvents;

package/dist/custom/slide/parts.d.ts

@@ -0,0 +1,7 @@
+import type { ISlidable } from '@soxa-ui/core';
+/** Дорожка — ребёнок корня с классом `__track`. */
+export declare function trackOf(owner: ISlidable, root: Element): Element | null;
+/** Ручки — дети дорожки с классом `__thumb`, по порядку: i-я — ручка i. */
+export declare function thumbsOf(owner: ISlidable, track: Element): Element[];
+/** Поле ручки — её ребёнок `input`. */
+export declare function fieldOf(thumb: Element | undefined): HTMLInputElement | null;

package/dist/custom/slide/parts.js

@@ -0,0 +1,26 @@
+//#region src/custom/slide/parts.ts
+/**
+* Части перетаскивания в разметке владельца — по его классам, а не строкой в
+* плагине (`classes.resolve`).
+*
+* Только прямые дети: в слоте ручки может лежать что угодно, вплоть до
+* другого ползунка, и поиск вглубь нашёл бы его части.
+*/
+function childrenWith(parent, className) {
+	return Array.from(parent.children).filter((child) => child.classList.contains(className));
+}
+/** Дорожка — ребёнок корня с классом `__track`. */
+function trackOf(owner, root) {
+	return childrenWith(root, owner.classes.resolve("__track"))[0] ?? null;
+}
+/** Ручки — дети дорожки с классом `__thumb`, по порядку: i-я — ручка i. */
+function thumbsOf(owner, track) {
+	return childrenWith(track, owner.classes.resolve("__thumb"));
+}
+/** Поле ручки — её ребёнок `input`. */
+function fieldOf(thumb) {
+	if (!thumb) return null;
+	return Array.from(thumb.children).find((child) => child instanceof HTMLInputElement) ?? null;
+}
+//#endregion
+export { fieldOf, thumbsOf, trackOf };

package/dist/custom/slide/pointer/index.d.ts

@@ -0,0 +1,2 @@
+export { TSlidePointerPlugin } from './pointer.plugin';
+export type { ISlidePointerPluginOptions, TSlidePointerPluginEvents, TSlidePointerGesture, } from './types';