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

package/dist/components/menu/row.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Строка пункта меню — ItemRow на `div` (`menu.row`), одна у пунктов всех видов.
+ * Тег `div`, а не `button`: у выключенного пункта остаются фокус и подсветка.
+ * DOM-фокус подсвеченного пункта — на строке: клавиатура меню находит её по
+ * `tabindex` (`rowIn`). docs/architecture.md, Layer 8d, «Меню».
+ */
+import type { IMenuItem, TComponentSize } from '@soxa-ui/core';
+import { type ITemplateBinding } from '../../adapter';
+import { type TItemRowElementProps } from '../item-row';
+import { type TIconElementProps } from '../icon';
+export type TMenuRow = TItemRowElementProps<HTMLDivElement>;
+/**
+ * Строка — первой в корне. Нажатие — клик: Enter и пробел в клик превращает
+ * сама строка (`TActionPlugin`), и путь у мыши и клавиатуры один.
+ */
+export declare function createRow(root: HTMLElement, press: () => void): TMenuRow;
+/**
+ * Обёртка части строки. Пустую тема прячет по `:empty`. Немая (`hidden`) —
+ * отметка и стрелка: состояние объявляет ARIA строки.
+ */
+export declare function partOf(owner: Document, className: string, hidden?: boolean): HTMLElement;
+export declare function roleIconOf(owner: Document, embedded: string, role: string): TIconElementProps;
+/** `textSlot` — `default`, а у пунктов со своей панелью `header`: `default` у них — панель. */
+export declare function rowBindings(textSlot: string): readonly ITemplateBinding<IMenuItem>[];
+export declare function iconSize(icon: TIconElementProps | null, size: TComponentSize | undefined): void;
+/** Отметка — только у отмеченного; `mark === null` — задан слот `indicator-icon`. */
+export declare function placeMark(indicator: HTMLElement, mark: Element | null, selected: boolean): void;

package/dist/components/menu/row.js

@@ -0,0 +1,72 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { createDetail, patch } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { registerItemRowTag } from "../item-row/ItemRow.element.js";
+import "../item-row/index.js";
+import { TIconElement } from "../icon/Icon.element.js";
+import "../icon/index.js";
+//#region src/components/menu/row.ts
+var TItemRowDivElement = registerItemRowTag("div");
+/** Строка каждого пункта — одна на всё время жизни элемента. */
+var rows = /* @__PURE__ */ new WeakMap();
+/**
+* Строка — первой в корне. Нажатие — клик: Enter и пробел в клик превращает
+* сама строка (`TActionPlugin`), и путь у мыши и клавиатуры один.
+*/
+function createRow(root, press) {
+	const row = createDetail(root.ownerDocument, TItemRowDivElement, { embedded: "menu.row" });
+	row.addEventListener("click", press);
+	root.appendChild(row);
+	rows.set(root, row);
+	return row;
+}
+/**
+* Обёртка части строки. Пустую тема прячет по `:empty`. Немая (`hidden`) —
+* отметка и стрелка: состояние объявляет ARIA строки.
+*/
+function partOf(owner, className, hidden = false) {
+	const part = owner.createElement("span");
+	part.className = className;
+	if (hidden) part.setAttribute("aria-hidden", "true");
+	return part;
+}
+function roleIconOf(owner, embedded, role) {
+	const icon = createDetail(owner, TIconElement, { embedded });
+	icon.icon = role;
+	return icon;
+}
+/** `textSlot` — `default`, а у пунктов со своей панелью `header`: `default` у них — панель. */
+function rowBindings(textSlot) {
+	return [
+		bind(["size", "disabled"], ({ root, state }) => {
+			const row = rows.get(root);
+			if (!row) return;
+			const disabled = state.disabled === true;
+			patch(row, {
+				size: state.size,
+				disabled
+			});
+		}),
+		bind("aria", ({ root, state }) => {
+			const row = rows.get(root);
+			if (row) ownerAttributes(row, state.aria);
+		}),
+		bind("text", ({ root, state, hasSlot }) => {
+			const row = rows.get(root);
+			const text = state.text ?? "";
+			if (row && !hasSlot(textSlot) && row.text !== text) row.text = text;
+		})
+	];
+}
+function iconSize(icon, size) {
+	if (icon && icon.size !== size) icon.size = size;
+}
+/** Отметка — только у отмеченного; `mark === null` — задан слот `indicator-icon`. */
+function placeMark(indicator, mark, selected) {
+	if (!mark) return;
+	if (!selected) mark.remove();
+	else if (mark.parentNode !== indicator) indicator.appendChild(mark);
+}
+//#endregion
+export { createRow, iconSize, partOf, placeMark, roleIconOf, rowBindings };

package/dist/components/menu/separator/MenuSeparator.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<div is="so-menu-separator">` — линия между группами пунктов. Ручной
+ * разделитель разметки `groupSeparators` меню не трогает.
+ */
+import { MenuSeparatorDescriptor } from '@soxa-ui/setup';
+import type { TMenuSeparator } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TMenuSeparatorElement: TElementClassOf<typeof HTMLDivElement, typeof MenuSeparatorDescriptor, TMenuSeparator>;
+export type TMenuSeparatorElementProps = TElementType<typeof TMenuSeparatorElement>;

package/dist/components/menu/separator/MenuSeparator.element.js

@@ -0,0 +1,17 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupMenuSeparator } from "./setup.component.js";
+import { menuSeparatorTemplate } from "./menu-separator.template.js";
+import { MenuSeparatorDescriptor } from "@soxa-ui/setup";
+//#region src/components/menu/separator/MenuSeparator.element.ts
+/**
+* `<div is="so-menu-separator">` — линия между группами пунктов. Ручной
+* разделитель разметки `groupSeparators` меню не трогает.
+*/
+var TMenuSeparatorElement = ElementBase(HTMLDivElement, {
+	descriptor: MenuSeparatorDescriptor,
+	template: menuSeparatorTemplate,
+	setup: setupMenuSeparator
+});
+//#endregion
+export { TMenuSeparatorElement };

package/dist/components/menu/separator/index.d.ts

@@ -0,0 +1,3 @@
+export { setupMenuSeparator } from './setup.component';
+export { TMenuSeparatorElement, type TMenuSeparatorElementProps } from './MenuSeparator.element';
+export { menuSeparatorTemplate } from './menu-separator.template';

package/dist/components/menu/separator/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./menu-separator.template.js";
+export { TMenuSeparatorElement } from "./MenuSeparator.element.js";

package/dist/components/menu/separator/menu-separator.template.d.ts

@@ -0,0 +1,4 @@
+/** Шаблон разделителя меню: внутри ничего, слотов нет, содержимое не выводится. */
+import type { TMenuSeparator } from '@soxa-ui/core';
+import type { ITemplate } from '../../../adapter';
+export declare const menuSeparatorTemplate: ITemplate<TMenuSeparator>;

package/dist/components/menu/separator/menu-separator.template.js

@@ -0,0 +1,7 @@
+//#region src/components/menu/separator/menu-separator.template.ts
+var menuSeparatorTemplate = {
+	create: () => ({ slots: {} }),
+	bindings: []
+};
+//#endregion
+export { menuSeparatorTemplate };

package/dist/components/menu/separator/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { TMenuSeparator } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../../adapter';
+export declare function setupMenuSeparator(host: HTMLElement, ctrl: TMenuSeparator | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<TMenuSeparator>;

package/dist/components/menu/separator/setup.component.js

@@ -0,0 +1,14 @@
+import { createWebcAdapterContext } from "../../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../../adapter/runtime/useAdapter.js";
+import "../../../adapter/index.js";
+import { MenuSeparatorDescriptor } from "@soxa-ui/setup";
+//#region src/components/menu/separator/setup.component.ts
+function setupMenuSeparator(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, MenuSeparatorDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupMenuSeparator };

package/dist/components/menu/setup.component.d.ts

@@ -0,0 +1,6 @@
+import { MenuDescriptor, type DescriptorPluginOutputs } from '@soxa-ui/setup';
+import type { IMenu, TMenuCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+/** Выходы плагинов Menu — шаблон читает из них пометку панели владельцем. */
+export type TMenuOutputs = DescriptorPluginOutputs<typeof MenuDescriptor>;
+export declare function setupMenu(host: HTMLElement, ctrl: IMenu | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IMenu, TMenuCollectionFacade, TMenuOutputs>;

package/dist/components/menu/setup.component.js

@@ -0,0 +1,25 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../adapter/elevator/factory.js";
+import "../../adapter/elevator/index.js";
+import "../../adapter/index.js";
+import { MenuCollectionDescriptor, MenuDescriptor, TCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/menu/setup.component.ts
+function setupMenu(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, MenuDescriptor(), {
+		ctrl,
+		props
+	});
+	const collectionAdapter = createWebcAdapterContext(host, MenuCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props["engine"]
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator: createWebcElevator(host) });
+	const facade = useCollectionAdapter(collectionAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, facade);
+}
+//#endregion
+export { setupMenu };

package/dist/components/menu/submenu/MenuSubmenu.element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<div is="so-menu-submenu">` — пункт с подменю: строка в меню над ним и своя
+ * панель с пунктами. Три контекста — свой, фасад пункта и фасад своей
+ * коллекции; пропсы коллекции — входы того же элемента, как у меню.
+ * docs/architecture.md, Layer 8d, «Меню».
+ */
+import { MenuSubmenuDescriptor } from '@soxa-ui/setup';
+import type { IMenuSubmenu, TMenuCollectionFacade, TMenuItemCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TMenuSubmenuElement: TElementClassOf<typeof HTMLDivElement, typeof MenuSubmenuDescriptor, IMenuSubmenu, TMenuItemCollectionFacade, TMenuCollectionFacade>;
+export type TMenuSubmenuElementProps = TElementType<typeof TMenuSubmenuElement>;

package/dist/components/menu/submenu/MenuSubmenu.element.js

@@ -0,0 +1,26 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupMenuSubmenu } from "./setup.component.js";
+import { menuSubmenuTemplate } from "./menu-submenu.template.js";
+import { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor } from "@soxa-ui/setup";
+//#region src/components/menu/submenu/MenuSubmenu.element.ts
+/**
+* `<div is="so-menu-submenu">` — пункт с подменю: строка в меню над ним и своя
+* панель с пунктами. Три контекста — свой, фасад пункта и фасад своей
+* коллекции; пропсы коллекции — входы того же элемента, как у меню.
+* docs/architecture.md, Layer 8d, «Меню».
+*/
+var TMenuSubmenuElement = ElementBase(HTMLDivElement, {
+	descriptor: MenuSubmenuDescriptor,
+	facade: MenuCollectionItemDescriptor,
+	ownerFacade: MenuSubmenuCollectionDescriptor,
+	template: menuSubmenuTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		control: true
+	},
+	setup: setupMenuSubmenu
+});
+//#endregion
+export { TMenuSubmenuElement };

package/dist/components/menu/submenu/index.d.ts

@@ -0,0 +1,3 @@
+export { setupMenuSubmenu, type TMenuSubmenuOutputs } from './setup.component';
+export { TMenuSubmenuElement, type TMenuSubmenuElementProps } from './MenuSubmenu.element';
+export { menuSubmenuTemplate } from './menu-submenu.template';

package/dist/components/menu/submenu/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./menu-submenu.template.js";
+export { TMenuSubmenuElement } from "./MenuSubmenu.element.js";

package/dist/components/menu/submenu/menu-submenu.template.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Шаблон пункта с подменю: строка (`row.ts`) со значком и стрелкой, панель —
+ * деталь Frame (`menu.submenu-frame`) у конца строки (`end-start`) со списком,
+ * как у меню. docs/architecture.md, Layer 8d, «Меню».
+ *
+ * Открытость — `visible` панели, а не `rendered`: пункты входят в коллекцию
+ * подменю при монтировании, и закрытие не должно её вычищать; увезённую панель
+ * прячет база Frame — AGENTS.md (Web Components), «Поддерево».
+ */
+import type { IMenuSubmenu, TMenuCollectionFacade, TMenuItemCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate } from '../../../adapter';
+import type { TMenuSubmenuOutputs } from './setup.component';
+export declare const menuSubmenuTemplate: ITemplate<IMenuSubmenu, TMenuItemCollectionFacade, TMenuSubmenuOutputs, TMenuCollectionFacade>;

package/dist/components/menu/submenu/menu-submenu.template.js

@@ -0,0 +1,103 @@
+import { bind } from "../../../adapter/template/types.js";
+import { ownerAttributes, ownerClasses } from "../../../adapter/template/owner.js";
+import { lend } from "../../../adapter/template/lend.js";
+import { createDetail } from "../../../adapter/template/parts.js";
+import "../../../adapter/index.js";
+import { TFrameElement } from "../../frame/Frame.element.js";
+import "../../frame/index.js";
+import { createRow, iconSize, partOf, roleIconOf, rowBindings } from "../row.js";
+import { drawItems, drawItemsIn } from "../items.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/menu/submenu/menu-submenu.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+var menuSubmenuTemplate = {
+	create: (root, ctx) => {
+		const { hasSlot } = ctx;
+		const { ownerDocument } = root;
+		const row = createRow(root, () => ctx.facade?.context?.adapters.menu.open());
+		const icon = partOf(ownerDocument, "so-menu-item__icon");
+		const arrowPart = partOf(ownerDocument, "so-menu-item__arrow", true);
+		const arrow = hasSlot("arrow-icon") ? null : roleIconOf(ownerDocument, "menu.arrow", "arrowRight");
+		const panel = createDetail(ownerDocument, TFrameElement, {
+			embedded: "menu.submenu-frame",
+			attributes: { tabindex: "-1" }
+		});
+		const list = ownerDocument.createElement("div");
+		if (arrow) arrowPart.appendChild(arrow);
+		panel.strategy = "fixed";
+		panel.anchor_anchor = root;
+		panel.anchor_placement = "end-start";
+		list.className = "so-menu__list";
+		lend(row, "leading", icon);
+		lend(row, "trailing", arrowPart);
+		lend(panel, DEFAULT_SLOT, list);
+		root.appendChild(panel);
+		if (!hasSlot(DEFAULT_SLOT)) drawItemsIn(root, list);
+		parts.set(root, {
+			panel,
+			arrow
+		});
+		return {
+			slots: {
+				leading: {
+					mode: "append",
+					node: icon
+				},
+				header: {
+					mode: "append",
+					node: row,
+					slot: DEFAULT_SLOT
+				},
+				"arrow-icon": {
+					mode: "append",
+					node: arrowPart
+				},
+				default: {
+					mode: "append",
+					node: list
+				},
+				item: { mode: "sample" },
+				"item-leading": { mode: "sample" },
+				"item-trailing": { mode: "sample" },
+				"item-header": { mode: "sample" },
+				"item-arrow-icon": { mode: "sample" },
+				"item-content": { mode: "sample" }
+			},
+			control: row
+		};
+	},
+	bindings: [
+		...rowBindings("header"),
+		bind("size", ({ root, state }) => iconSize(parts.get(root)?.arrow ?? null, state.size)),
+		bind(["open", "visible"], ({ root, state }) => {
+			const panel = parts.get(root)?.panel;
+			const visible = state.visible === true && state.open === true;
+			if (panel && panel.visible !== visible) panel.visible = visible;
+		}),
+		bind("panelClasses", ({ root, state }) => {
+			const panel = parts.get(root)?.panel;
+			if (panel) ownerClasses(panel, state.panelClasses);
+		}),
+		bind(["panelAria", "dismiss_ownerAttribute"], ({ root, state }) => {
+			const panel = parts.get(root)?.panel;
+			if (panel) ownerAttributes(panel, {
+				...state.panelAria,
+				...state.dismiss_ownerAttribute
+			});
+		}),
+		bind("contentRendered", ({ state, showSlot }) => {
+			showSlot(DEFAULT_SLOT, state.contentRendered === true);
+		}),
+		bind([
+			"sections",
+			"submenus",
+			"groupSeparators",
+			"contentRendered"
+		], (ctx) => {
+			if (ctx.state.contentRendered !== true) return;
+			drawItems(ctx, ctx.state.sections, ctx.state.submenus, ctx.state.groupSeparators === true);
+		})
+	]
+};
+//#endregion
+export { menuSubmenuTemplate };

package/dist/components/menu/submenu/setup.component.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Лифт у трёх контекстов один: фасад пункта берёт коллекцию выше хоста
+ * (`up()`), фасад меню отдаёт свою хосту (`down()`) — её находят пункты в
+ * панели. Связки — как у Vue: фасад пункта, свой, фасад меню.
+ */
+import { MenuSubmenuDescriptor, type DescriptorPluginOutputs } from '@soxa-ui/setup';
+import type { IMenuSubmenu, TMenuCollectionFacade, TMenuItemCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../../adapter';
+/** Выходы плагинов подменю — шаблон читает из них пометку панели владельцем. */
+export type TMenuSubmenuOutputs = DescriptorPluginOutputs<typeof MenuSubmenuDescriptor>;
+export declare function setupMenuSubmenu(host: HTMLElement, ctrl: IMenuSubmenu | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IMenuSubmenu, TMenuItemCollectionFacade, TMenuSubmenuOutputs, TMenuCollectionFacade>;

package/dist/components/menu/submenu/setup.component.js

@@ -0,0 +1,36 @@
+import { createWebcAdapterContext } from "../../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../../adapter/elevator/factory.js";
+import "../../../adapter/elevator/index.js";
+import "../../../adapter/index.js";
+import { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor, TCollectionExtension, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/menu/submenu/setup.component.ts
+/**
+* Лифт у трёх контекстов один: фасад пункта берёт коллекцию выше хоста
+* (`up()`), фасад меню отдаёт свою хосту (`down()`) — её находят пункты в
+* панели. Связки — как у Vue: фасад пункта, свой, фасад меню.
+*/
+function setupMenuSubmenu(host, ctrl, props, onUpdate) {
+	const elevator = createWebcElevator(host);
+	const adapter = createWebcAdapterContext(host, MenuSubmenuDescriptor(), {
+		ctrl,
+		props
+	});
+	const itemAdapter = createWebcAdapterContext(host, MenuCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator
+	});
+	const collectionAdapter = createWebcAdapterContext(host, MenuSubmenuCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props["engine"]
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+	const item = useCollectionAdapter(itemAdapter, host, onUpdate);
+	const menu = useCollectionAdapter(collectionAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, item, menu);
+}
+//#endregion
+export { setupMenuSubmenu };

package/dist/components/number-input/NumberInput.element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<div is="so-number-input">` — поле числа: ввод, кнопки шага и скрытое поле
+ * формы с числом. `id` — проп поля (`TIdPlugin`): `el.id` из кода тоже уходит
+ * на ввод, а не на корень.
+ * docs/architecture.md, Layer 8d, «Поле».
+ */
+import { NumberInputDescriptor } from '@soxa-ui/setup';
+import type { INumberInput } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TNumberInputElement: TElementClassOf<typeof HTMLDivElement, typeof NumberInputDescriptor, INumberInput>;
+export type TNumberInputElementProps = TElementType<typeof TNumberInputElement>;

package/dist/components/number-input/NumberInput.element.js

@@ -0,0 +1,26 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { numberInputTemplate } from "./number-input.template.js";
+import { setupNumberInput } from "./setup.component.js";
+import { NumberInputDescriptor } from "@soxa-ui/setup";
+//#region src/components/number-input/NumberInput.element.ts
+/**
+* `<div is="so-number-input">` — поле числа: ввод, кнопки шага и скрытое поле
+* формы с числом. `id` — проп поля (`TIdPlugin`): `el.id` из кода тоже уходит
+* на ввод, а не на корень.
+* docs/architecture.md, Layer 8d, «Поле».
+*/
+var TNumberInputElement = ElementBase(HTMLDivElement, {
+	descriptor: NumberInputDescriptor,
+	template: numberInputTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		control: true
+	},
+	setup: setupNumberInput
+});
+defineElement("so-number-input", TNumberInputElement, "div");
+//#endregion
+export { TNumberInputElement };

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TNumberInputElement } from './NumberInput.element';
+export type { TNumberInputElementProps } from './NumberInput.element';

package/dist/components/number-input/index.js

@@ -0,0 +1 @@
+export { TNumberInputElement } from "./NumberInput.element.js";

package/dist/components/number-input/number-input.template.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Шаблон NumberInput: `leading`, ввод, обёртка у конца числа, кнопки шага и
+ * скрытое поле формы. Нажатия кнопок шага ловит плагин на корне, находит их по
+ * классам; ввод плагины находят по классу. docs/architecture.md, Layer 8d, «Поле».
+ */
+import type { INumberInput } from '@soxa-ui/core';
+import type { TNumberInputOutputs } from './setup.component';
+import { type ITemplate } from '../../adapter';
+export declare const numberInputTemplate: ITemplate<INumberInput, unknown, TNumberInputOutputs>;

package/dist/components/number-input/number-input.template.js

@@ -0,0 +1,166 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { patch } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { placeClearButton } from "../common/clear.js";
+import { iconButton, syncIconButton } from "../common/icon-button.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/number-input/number-input.template.ts
+var DECREMENT = {
+	embedded: "number-input.decrement",
+	iconEmbedded: "number-input.decrement-icon",
+	className: "so-number-input__decrement",
+	role: "minus",
+	slot: "decrement-icon"
+};
+var INCREMENT = {
+	embedded: "number-input.increment",
+	iconEmbedded: "number-input.increment-icon",
+	className: "so-number-input__increment",
+	role: "plus",
+	slot: "increment-icon"
+};
+var parts = /* @__PURE__ */ new WeakMap();
+var numberInputTemplate = {
+	create: (root, { hasSlot }) => {
+		const { ownerDocument } = root;
+		const leading = ownerDocument.createElement("div");
+		const field = ownerDocument.createElement("input");
+		const trailing = ownerDocument.createElement("div");
+		const stepper = ownerDocument.createElement("div");
+		const hidden = ownerDocument.createElement("input");
+		const decrement = iconButton(ownerDocument, DECREMENT, hasSlot(DECREMENT.slot));
+		const increment = iconButton(ownerDocument, INCREMENT, hasSlot(INCREMENT.slot));
+		leading.className = "so-number-input__leading";
+		field.type = "text";
+		field.className = "so-number-input__input";
+		field.setAttribute("autocomplete", "off");
+		field.setAttribute("spellcheck", "false");
+		trailing.className = "so-number-input__trailing";
+		stepper.className = "so-number-input__stepper";
+		hidden.type = "hidden";
+		stepper.append(decrement.button, increment.button);
+		if (hasSlot("leading")) root.appendChild(leading);
+		root.appendChild(field);
+		if (hasSlot("clear") || hasSlot("trailing")) root.appendChild(trailing);
+		root.append(stepper, hidden);
+		parts.set(root, {
+			field,
+			leading,
+			trailing,
+			stepper,
+			decrement,
+			increment,
+			hidden
+		});
+		return {
+			slots: {
+				leading: {
+					mode: "append",
+					node: leading
+				},
+				clear: {
+					mode: "append",
+					node: trailing
+				},
+				trailing: {
+					mode: "append",
+					node: trailing
+				},
+				"decrement-icon": {
+					mode: "append",
+					node: decrement.button,
+					slot: DEFAULT_SLOT
+				},
+				"increment-icon": {
+					mode: "append",
+					node: increment.button,
+					slot: DEFAULT_SLOT
+				}
+			},
+			control: field
+		};
+	},
+	bindings: [
+		bind([
+			"id",
+			"placeholder",
+			"disabled",
+			"readonly",
+			"required"
+		], ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (!field) return;
+			if (state.id === void 0) field.removeAttribute("id");
+			else field.id = state.id;
+			field.placeholder = state.placeholder ?? "";
+			field.disabled = state.disabled === true;
+			field.readOnly = state.readonly === true;
+			field.required = state.required === true;
+		}),
+		bind([
+			"inputAttrs",
+			"aria",
+			"inputAria"
+		], ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (field) ownerAttributes(field, {
+				...state.inputAttrs,
+				...state.aria,
+				...state.inputAria
+			});
+		}),
+		bind("text", ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			const text = state.text ?? "";
+			if (field && field.value !== text) field.value = text;
+		}),
+		bind([
+			"clearable",
+			"size",
+			"disabled",
+			"clearAria"
+		], (ctx) => {
+			const own = parts.get(ctx.root);
+			if (own) placeClearButton(ctx, "number-input", own.trailing, own.stepper);
+		}),
+		bind([
+			"size",
+			"decrementDisabled",
+			"incrementDisabled"
+		], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			syncIconButton(own.decrement, state.size, state.decrementDisabled === true);
+			syncIconButton(own.increment, state.size, state.incrementDisabled === true);
+		}),
+		bind(["decrementAria", "decrementDataset"], ({ root, state }) => {
+			const button = parts.get(root)?.decrement.button;
+			if (button) ownerAttributes(button, {
+				...state.decrementAria,
+				...state.decrementDataset
+			});
+		}),
+		bind(["incrementAria", "incrementDataset"], ({ root, state }) => {
+			const button = parts.get(root)?.increment.button;
+			if (button) ownerAttributes(button, {
+				...state.incrementAria,
+				...state.incrementDataset
+			});
+		}),
+		bind([
+			"name",
+			"value",
+			"disabled"
+		], ({ root, state }) => {
+			const hidden = parts.get(root)?.hidden;
+			if (!hidden) return;
+			const value = state.value === void 0 ? "" : String(state.value);
+			hidden.name = state.name ?? "";
+			hidden.disabled = state.disabled === true;
+			patch(hidden, { value });
+		})
+	]
+};
+//#endregion
+export { numberInputTemplate };