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

package/dist/components/calendar/item/CalendarItem.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<td is="so-calendar-item">` — день календаря: фокус и наборы — на ячейке (APG,
+ * Date Picker Dialog), кнопки внутри нет. Рисует шаблон календаря, регистрирует
+ * его модуль. docs/architecture.md, Layer 8d, «Даты».
+ */
+import { CalendarItemDescriptor } from '@soxa-ui/setup';
+import type { ICalendarItem, TCalendarItemCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TCalendarItemElement: TElementClassOf<typeof HTMLTableCellElement, typeof CalendarItemDescriptor, ICalendarItem, TCalendarItemCollectionFacade>;
+export type TCalendarItemElementProps = TElementType<typeof TCalendarItemElement>;

package/dist/components/calendar/item/CalendarItem.element.js

@@ -0,0 +1,19 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupCalendarItem } from "./setup.component.js";
+import { calendarItemTemplate } from "./calendar-item.template.js";
+import { CalendarCollectionItemDescriptor, CalendarItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/calendar/item/CalendarItem.element.ts
+/**
+* `<td is="so-calendar-item">` — день календаря: фокус и наборы — на ячейке (APG,
+* Date Picker Dialog), кнопки внутри нет. Рисует шаблон календаря, регистрирует
+* его модуль. docs/architecture.md, Layer 8d, «Даты».
+*/
+var TCalendarItemElement = ElementBase(HTMLTableCellElement, {
+	descriptor: CalendarItemDescriptor,
+	facade: CalendarCollectionItemDescriptor,
+	template: calendarItemTemplate,
+	setup: setupCalendarItem
+});
+//#endregion
+export { TCalendarItemElement };

package/dist/components/calendar/item/calendar-item.template.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Шаблон дня: плитка `div.so-calendar-item__day` — `div`, потому что в слот
+ * кладут и блочное содержимое. Полосу диапазона тема рисует псевдоэлементом ячейки.
+ */
+import type { ICalendarItem, TCalendarItemCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate } from '../../../adapter';
+export declare const calendarItemTemplate: ITemplate<ICalendarItem, TCalendarItemCollectionFacade>;

package/dist/components/calendar/item/calendar-item.template.js

@@ -0,0 +1,22 @@
+import { bind } from "../../../adapter/template/types.js";
+import { patch } from "../../../adapter/template/parts.js";
+import "../../../adapter/index.js";
+//#region src/components/calendar/item/calendar-item.template.ts
+var calendarItemTemplate = {
+	create: (root) => {
+		const day = root.ownerDocument.createElement("div");
+		day.className = "so-calendar-item__day";
+		root.appendChild(day);
+		return { slots: { default: {
+			mode: "append",
+			node: day
+		} } };
+	},
+	bindings: [bind("text", ({ content, state, hasSlot }) => {
+		if (hasSlot("default")) return;
+		const text = state.text ?? "";
+		patch(content, { textContent: text });
+	})]
+};
+//#endregion
+export { calendarItemTemplate };

package/dist/components/calendar/item/index.d.ts

@@ -0,0 +1,3 @@
+export { setupCalendarItem } from './setup.component';
+export { TCalendarItemElement, type TCalendarItemElementProps } from './CalendarItem.element';
+export { calendarItemTemplate } from './calendar-item.template';

package/dist/components/calendar/item/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./calendar-item.template.js";
+export { TCalendarItemElement } from "./CalendarItem.element.js";

package/dist/components/calendar/item/setup.component.d.ts

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

package/dist/components/calendar/item/setup.component.js

@@ -0,0 +1,22 @@
+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 { CalendarCollectionItemDescriptor, CalendarItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/calendar/item/setup.component.ts
+function setupCalendarItem(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, CalendarItemDescriptor(), {
+		ctrl,
+		props
+	});
+	const itemAdapter = createWebcAdapterContext(host, CalendarCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator: createWebcElevator(host)
+	});
+	const item = useCollectionAdapter(itemAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, item);
+}
+//#endregion
+export { setupCalendarItem };

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

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

package/dist/components/calendar/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 { CalendarCollectionDescriptor, CalendarDescriptor, TCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/calendar/setup.component.ts
+function setupCalendar(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, CalendarDescriptor(), {
+		ctrl,
+		props
+	});
+	const collectionAdapter = createWebcAdapterContext(host, CalendarCollectionDescriptor(), {
+		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 { setupCalendar };

package/dist/components/check-box/CheckBox.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<span is="so-check-box">` — флажок с нативным `<input type="checkbox">`
+ * внутри; `span` — его кладут в `Label`. docs/architecture.md, Layer 8d, «Поле».
+ */
+import { CheckBoxDescriptor } from '@soxa-ui/setup';
+import type { ICheckBox } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TCheckBoxElement: TElementClassOf<typeof HTMLSpanElement, typeof CheckBoxDescriptor, ICheckBox>;
+export type TCheckBoxElementProps = TElementType<typeof TCheckBoxElement>;

package/dist/components/check-box/CheckBox.element.js

@@ -0,0 +1,24 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { checkBoxTemplate } from "./check-box.template.js";
+import { setupCheckBox } from "./setup.component.js";
+import { CheckBoxDescriptor } from "@soxa-ui/setup";
+//#region src/components/check-box/CheckBox.element.ts
+/**
+* `<span is="so-check-box">` — флажок с нативным `<input type="checkbox">`
+* внутри; `span` — его кладут в `Label`. docs/architecture.md, Layer 8d, «Поле».
+*/
+var TCheckBoxElement = ElementBase(HTMLSpanElement, {
+	descriptor: CheckBoxDescriptor,
+	template: checkBoxTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		control: true
+	},
+	setup: setupCheckBox
+});
+defineElement("so-check-box", TCheckBoxElement, "span");
+//#endregion
+export { TCheckBoxElement };

package/dist/components/check-box/check-box.template.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Шаблон CheckBox: поле и коробка-декор под `aria-hidden` — иконки слотов не
+ * попадают в имя от подписи. Отметка без слота — голый `<svg>`, а не Icon: она
+ * меняется с каждой отметкой, и Icon собирал бы на каждую контекст и плагины —
+ * в таблице «выбрать все» тысячами.
+ */
+import type { ICheckBox } from '@soxa-ui/core';
+import type { TCheckBoxOutputs } from './setup.component';
+import { type ITemplate } from '../../adapter';
+export declare const checkBoxTemplate: ITemplate<ICheckBox, unknown, TCheckBoxOutputs>;

package/dist/components/check-box/check-box.template.js

@@ -0,0 +1,94 @@
+import { drawRoleIcon, roleIcon } from "../../adapter/common/icon.js";
+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";
+//#region src/components/check-box/check-box.template.ts
+/** Слот отметки и роль иконки, которая рисуется без него. */
+var MARKS = {
+	icon: "check",
+	"indeterminate-icon": "checkIndeterminate"
+};
+var parts = /* @__PURE__ */ new WeakMap();
+/** Отметка без слота каждого флажка — своя: создаётся с первой ролью и остаётся за ним. */
+var marks = /* @__PURE__ */ new WeakMap();
+/** Отметка без слота — рисунок роли на одном узле; роли нет — отметки нет. */
+function drawMark(root, container, role) {
+	let svg = marks.get(root);
+	if (role === null) {
+		svg?.remove();
+		return;
+	}
+	if (svg) drawRoleIcon(svg, role);
+	else {
+		svg = roleIcon(role);
+		svg.setAttribute("class", "so-check-box__mark");
+		marks.set(root, svg);
+	}
+	if (svg.parentNode !== container) container.appendChild(svg);
+}
+var checkBoxTemplate = {
+	create: (root) => {
+		const { ownerDocument } = root;
+		const field = ownerDocument.createElement("input");
+		const container = ownerDocument.createElement("span");
+		field.type = "checkbox";
+		container.className = "so-check-box__container";
+		container.setAttribute("aria-hidden", "true");
+		root.append(field, container);
+		parts.set(root, {
+			field,
+			container
+		});
+		return {
+			slots: {
+				icon: {
+					mode: "append",
+					node: container
+				},
+				"indeterminate-icon": {
+					mode: "append",
+					node: container
+				}
+			},
+			control: field
+		};
+	},
+	bindings: [
+		bind([
+			"id",
+			"name",
+			"disabled",
+			"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.name = state.name ?? "";
+			field.disabled = state.disabled === true;
+			field.required = state.required === true;
+		}),
+		bind("aria", ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (field) ownerAttributes(field, state.aria);
+		}),
+		bind(["value", "indeterminate"], ({ root, state, hasSlot, showSlot }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { field, container } = own;
+			const checked = state.value === true;
+			const indeterminate = state.indeterminate === true;
+			patch(field, {
+				checked,
+				indeterminate
+			});
+			const mark = indeterminate ? "indeterminate-icon" : checked ? "icon" : null;
+			showSlot("icon", mark === "icon");
+			showSlot("indeterminate-icon", mark === "indeterminate-icon");
+			drawMark(root, container, mark === null || hasSlot(mark) ? null : MARKS[mark]);
+		})
+	]
+};
+//#endregion
+export { checkBoxTemplate };

package/dist/components/check-box/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TCheckBoxElement } from './CheckBox.element';
+export type { TCheckBoxElementProps } from './CheckBox.element';

package/dist/components/check-box/index.js

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

package/dist/components/check-box/setup.component.d.ts

@@ -0,0 +1,7 @@
+import { CheckBoxDescriptor } from '@soxa-ui/setup';
+import type { DescriptorPluginProps } from '@soxa-ui/setup';
+import type { ICheckBox } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+/** Сверх инстанса шаблон читает входы плагинов: `id` поля — проп `TIdPlugin`. */
+export type TCheckBoxOutputs = DescriptorPluginProps<typeof CheckBoxDescriptor>;
+export declare function setupCheckBox(host: HTMLElement, ctrl: ICheckBox | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<ICheckBox, unknown, TCheckBoxOutputs>;

package/dist/components/check-box/setup.component.js

@@ -0,0 +1,16 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../adapter/elevator/factory.js";
+import "../../adapter/elevator/index.js";
+import "../../adapter/index.js";
+import { CheckBoxDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/check-box/setup.component.ts
+function setupCheckBox(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, CheckBoxDescriptor(), {
+		ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator: createWebcElevator(host) });
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupCheckBox };

package/dist/components/common/clear.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Встроенная кнопка очистки поля — деталь его разметки, одна на поле:
+ * строится с первым `clearable` и остаётся за ним. Нажатие — команда поля
+ * `clear` того инстанса, что живёт сейчас. Своя кнопка — слот `clear` — её
+ * заменяет целиком.
+ */
+import type { TAttributesMap } from '@soxa-ui/core';
+import { type TButtonElementProps } from '../button';
+/** Что кнопка берёт у поля: инстанс с командой и состояние. */
+export type TClearContext = {
+    readonly root: HTMLElement;
+    readonly ctrl: {
+        clear(): void;
+    } | undefined;
+    readonly state: {
+        readonly size?: TButtonElementProps['size'];
+        readonly disabled?: boolean;
+        readonly clearAria?: TAttributesMap;
+    };
+    hasSlot(name: string): boolean;
+};
+/** Кнопка поля с пропсами по его состоянию — только сменившимися: `disabled` кнопки нативный. */
+export declare function clearButton(ctx: TClearContext, block: string): TButtonElementProps;
+export declare function removeClearButton(root: HTMLElement): void;
+/**
+ * Очистка в обёртке у конца поля, перед `before` (нет его — в конце корня).
+ * Обёртку без слота `trailing` держит только кнопка. Сначала кнопка в обёртку,
+ * потом обёртка в корень: кнопка входит в документ одной вставкой.
+ */
+export declare function placeClearButton(ctx: TClearContext & {
+    readonly state: {
+        readonly clearable?: boolean;
+    };
+}, block: string, trailing: HTMLElement, before: Node | null): void;

package/dist/components/common/clear.js

@@ -0,0 +1,67 @@
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { createDetail, patch } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { TButtonElement } from "../button/Button.element.js";
+import "../button/index.js";
+import { TIconElement } from "../icon/Icon.element.js";
+import "../icon/index.js";
+//#region src/components/common/clear.ts
+var clears = /* @__PURE__ */ new WeakMap();
+function build(ctx, block) {
+	const { ownerDocument } = ctx.root;
+	const button = createDetail(ownerDocument, TButtonElement, {
+		embedded: `${block}.clear`,
+		attributes: { type: "button" }
+	});
+	const icon = createDetail(ownerDocument, TIconElement, { embedded: `${block}.clear-icon` });
+	button.className = `so-${block}__clear`;
+	icon.icon = "close";
+	button.appendChild(icon);
+	button.addEventListener("so:action:click", (event) => {
+		if (event instanceof CustomEvent && event.detail instanceof Event) event.detail.stopPropagation();
+		ctx.ctrl?.clear();
+	});
+	return {
+		button,
+		icon
+	};
+}
+/** Кнопка поля с пропсами по его состоянию — только сменившимися: `disabled` кнопки нативный. */
+function clearButton(ctx, block) {
+	let clear = clears.get(ctx.root);
+	if (!clear) {
+		clear = build(ctx, block);
+		clears.set(ctx.root, clear);
+	}
+	const { button, icon } = clear;
+	const { size } = ctx.state;
+	const disabled = ctx.state.disabled === true;
+	patch(button, {
+		size,
+		disabled
+	});
+	patch(icon, { size });
+	ownerAttributes(button, ctx.state.clearAria);
+	return button;
+}
+function removeClearButton(root) {
+	clears.get(root)?.button.remove();
+}
+/**
+* Очистка в обёртке у конца поля, перед `before` (нет его — в конце корня).
+* Обёртку без слота `trailing` держит только кнопка. Сначала кнопка в обёртку,
+* потом обёртка в корень: кнопка входит в документ одной вставкой.
+*/
+function placeClearButton(ctx, block, trailing, before) {
+	if (ctx.hasSlot("clear")) return;
+	if (ctx.state.clearable !== true) {
+		removeClearButton(ctx.root);
+		if (!ctx.hasSlot("trailing")) trailing.remove();
+		return;
+	}
+	const button = clearButton(ctx, block);
+	if (trailing.firstChild !== button) trailing.prepend(button);
+	if (trailing.parentNode !== ctx.root) ctx.root.insertBefore(trailing, before);
+}
+//#endregion
+export { clearButton, placeClearButton, removeClearButton };

package/dist/components/common/drawn-rows.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Строки списка с группами по записям рисования (`drawnSections`) — ListBox и
+ * панель Select: разделитель между секциями, группа с подписью и своей петлёй
+ * записей, запись — элемент из данных или распорка окна. Группа ещё не в
+ * документе, и её записи становятся светом — база группы раскладывает их в
+ * слот по умолчанию, когда группа собирается.
+ */
+import type { TDrawable, TDrawnSection } from '@soxa-ui/core';
+import { type ITemplateContext, type TItemSlots, type TPartClass } from '../../adapter';
+export type TDrawnRowsSpec<TItem extends TDrawable> = {
+    /** Блок классов разделителя и распорки: `so-<block>__separator`, `so-<block>__filler`. */
+    readonly block: string;
+    readonly item: TPartClass<HTMLElement & {
+        ctrl: TItem | undefined;
+    }>;
+    readonly group: TPartClass<HTMLElement & {
+        label?: string;
+    }>;
+    /** Образцы владельца → слоты элемента из данных. */
+    readonly slots: TItemSlots;
+};
+type TRowsContext = Pick<ITemplateContext, 'root' | 'sample'>;
+export declare class TDrawnRows<TItem extends TDrawable> {
+    private readonly _spec;
+    private readonly _loop;
+    private readonly _groups;
+    constructor(parent: Node, end: Node | null, _spec: TDrawnRowsSpec<TItem>);
+    draw(ctx: TRowsContext, sections: readonly TDrawnSection<TItem>[] | undefined, separated: boolean): void;
+    private _rowOf;
+    private _updateRow;
+    private _fillGroup;
+    /** Элемент из данных — инстанс и копии образцов до вставки — или распорка. */
+    private _entryOf;
+}
+export {};

package/dist/components/common/drawn-rows.js

@@ -0,0 +1,79 @@
+import { ownerStyles } from "../../adapter/template/owner.js";
+import { createItem, lendSamples } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+//#region src/components/common/drawn-rows.ts
+function rowsOf(sections, separated) {
+	return sections.flatMap((section, index) => [...separated && index > 0 ? [{
+		kind: "separator",
+		key: `separator:${section.key}`
+	}] : [], ...section.group ? [{
+		kind: "group",
+		key: section.key,
+		section
+	}] : section.entries]);
+}
+var TDrawnRows = class {
+	_spec;
+	_loop;
+	_groups = /* @__PURE__ */ new WeakMap();
+	constructor(parent, end, _spec) {
+		this._spec = _spec;
+		this._loop = new TKeyedLoop(parent, end, (row) => row.key);
+	}
+	draw(ctx, sections, separated) {
+		this._loop.draw(rowsOf(sections ?? [], separated), (row) => this._rowOf(ctx, row), (node, row) => this._updateRow(ctx, node, row));
+	}
+	_rowOf(ctx, row) {
+		if (row.kind === "separator") {
+			const separator = ctx.root.ownerDocument.createElement("div");
+			separator.className = `so-${this._spec.block}__separator`;
+			separator.setAttribute("aria-hidden", "true");
+			return separator;
+		}
+		if (row.kind === "group") {
+			const group = createItem(ctx.root.ownerDocument, this._spec.group);
+			this._fillGroup(ctx, group, row.section);
+			return group;
+		}
+		return this._entryOf(ctx, row);
+	}
+	_updateRow(ctx, node, row) {
+		if (row.kind === "separator") return;
+		if (row.kind === "group") {
+			if (node instanceof this._spec.group) this._fillGroup(ctx, node, row.section);
+			return;
+		}
+		updateEntry(node, row);
+	}
+	_fillGroup(ctx, group, section) {
+		group.label = section.group?.label;
+		let loop = this._groups.get(group);
+		if (!loop) {
+			loop = new TKeyedLoop(group, null, (entry) => entry.key);
+			this._groups.set(group, loop);
+		}
+		loop.draw(section.entries, (entry) => this._entryOf(ctx, entry), updateEntry);
+	}
+	/** Элемент из данных — инстанс и копии образцов до вставки — или распорка. */
+	_entryOf(ctx, entry) {
+		const { ownerDocument } = ctx.root;
+		if (entry.kind === "filler") {
+			const filler = ownerDocument.createElement("div");
+			filler.className = `so-${this._spec.block}__filler`;
+			filler.setAttribute("aria-hidden", "true");
+			ownerStyles(filler, entry.style);
+			return filler;
+		}
+		const item = createItem(ownerDocument, this._spec.item);
+		item.ctrl = entry.item;
+		lendSamples(ctx, item, this._spec.slots);
+		return item;
+	}
+};
+/** Живой записи — её стиль: элемент из данных всё берёт у своего инстанса. */
+function updateEntry(node, entry) {
+	if (entry.kind === "filler") ownerStyles(node, entry.style);
+}
+//#endregion
+export { TDrawnRows };

package/dist/components/common/icon-button.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Кнопка-деталь со значком роли — стрелки Calendar, Scroller и Pagination,
+ * шаги NumberInput — и иконка роли в слоте детали. Заданный слот значка
+ * заменяет иконку целиком.
+ */
+import { type TButtonElementProps } from '../button';
+import { type TIconElementProps } from '../icon';
+export type TIconButton = {
+    readonly button: TButtonElementProps;
+    /** Своя иконка; при заданном слоте значка — `null`. */
+    readonly icon: TIconElementProps | null;
+};
+export type TIconButtonSpec = {
+    readonly embedded: string;
+    readonly iconEmbedded: string;
+    /** Класс кнопки: по нему её находят плагины компонента. */
+    readonly className: string;
+    readonly role: string;
+};
+/** Иконка роли — деталь в слот по умолчанию другой детали. */
+export declare function lendRoleIcon(detail: Element, role: string, embedded: string): TIconElementProps;
+export declare function iconButton(owner: Document, spec: TIconButtonSpec, slotted: boolean): TIconButton;
+/** Пропсы кнопки и иконки — только сменившиеся: `disabled` кнопки нативный. */
+export declare function syncIconButton({ button, icon }: TIconButton, size: TButtonElementProps['size'], disabled: boolean): void;

package/dist/components/common/icon-button.js

@@ -0,0 +1,42 @@
+import { lend } from "../../adapter/template/lend.js";
+import { createDetail, patch } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { TButtonElement } from "../button/Button.element.js";
+import "../button/index.js";
+import { TIconElement } from "../icon/Icon.element.js";
+import "../icon/index.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/common/icon-button.ts
+/**
+* Кнопка-деталь со значком роли — стрелки Calendar, Scroller и Pagination,
+* шаги NumberInput — и иконка роли в слоте детали. Заданный слот значка
+* заменяет иконку целиком.
+*/
+/** Иконка роли — деталь в слот по умолчанию другой детали. */
+function lendRoleIcon(detail, role, embedded) {
+	const icon = createDetail(detail.ownerDocument, TIconElement, { embedded });
+	icon.icon = role;
+	lend(detail, DEFAULT_SLOT, icon);
+	return icon;
+}
+function iconButton(owner, spec, slotted) {
+	const button = createDetail(owner, TButtonElement, {
+		embedded: spec.embedded,
+		attributes: { type: "button" }
+	});
+	button.className = spec.className;
+	return {
+		button,
+		icon: slotted ? null : lendRoleIcon(button, spec.role, spec.iconEmbedded)
+	};
+}
+/** Пропсы кнопки и иконки — только сменившиеся: `disabled` кнопки нативный. */
+function syncIconButton({ button, icon }, size, disabled) {
+	patch(button, {
+		size,
+		disabled
+	});
+	if (icon && icon.size !== size) icon.size = size;
+}
+//#endregion
+export { iconButton, lendRoleIcon, syncIconButton };

package/dist/components/component/index.d.ts

@@ -0,0 +1 @@
+export { setupComponent } from './setup.component';

package/dist/components/component/index.js

@@ -0,0 +1 @@
+import "./setup.component.js";

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

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

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

@@ -0,0 +1,2 @@
+import "../../adapter/index.js";
+import "@soxa-ui/setup";

package/dist/components/component-view/ComponentView.element.d.ts

@@ -0,0 +1,6 @@
+/** `<div is="so-component-view">`. docs/architecture.md, Layer 8d, «Light DOM». */
+import { ComponentViewDescriptor } from '@soxa-ui/setup';
+import type { IComponentView } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TComponentViewElement: TElementClassOf<typeof HTMLDivElement, typeof ComponentViewDescriptor, IComponentView>;
+export type TComponentViewElementProps = TElementType<typeof TComponentViewElement>;

package/dist/components/component-view/ComponentView.element.js

@@ -0,0 +1,16 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { componentViewTemplate } from "./component-view.template.js";
+import { setupComponentView } from "./setup.component.js";
+import { ComponentViewDescriptor } from "@soxa-ui/setup";
+//#region src/components/component-view/ComponentView.element.ts
+/** `<div is="so-component-view">`. docs/architecture.md, Layer 8d, «Light DOM». */
+var TComponentViewElement = ElementBase(HTMLDivElement, {
+	descriptor: ComponentViewDescriptor,
+	template: componentViewTemplate,
+	setup: setupComponentView
+});
+defineElement("so-component-view", TComponentViewElement, "div");
+//#endregion
+export { TComponentViewElement };

package/dist/components/component-view/component-view.template.d.ts

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