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

package/dist/components/dialog/Dialog.element.js

@@ -0,0 +1,25 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { dialogTemplate } from "./dialog.template.js";
+import { setupDialog } from "./setup.component.js";
+import { DialogDescriptor } from "@soxa-ui/setup";
+//#region src/components/dialog/Dialog.element.ts
+/**
+* `<div is="so-dialog">` — модальное окно; элемент — сама панель, в цель его
+* увозит база (`teleport`). Открытость — `visible`: закрытое окно спрятано, а
+* не убрано, и содержимое переживает закрытие. docs/architecture.md, Layer 8d,
+* «Модальный слой и тосты».
+*/
+var TDialogElement = ElementBase(HTMLDivElement, {
+	descriptor: DialogDescriptor,
+	template: dialogTemplate,
+	root: {
+		strategy: "host",
+		teleport: { target: "target" }
+	},
+	setup: setupDialog
+});
+defineElement("so-dialog", TDialogElement, "div");
+//#endregion
+export { TDialogElement };

package/dist/components/dialog/dialog.template.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Шаблон Dialog: подложка — спутник корня, в окне заголовок, тело, подвал и
+ * кнопки шапки; закрытие, кроме крестика, — плагины модального слоя.
+ * docs/architecture.md, Layer 8d, «Модальный слой и тосты».
+ */
+import type { IDialog } from '@soxa-ui/core';
+import { type ITemplate } from '../../adapter';
+import type { TDialogOutputs } from './setup.component';
+export declare const dialogTemplate: ITemplate<IDialog, unknown, TDialogOutputs>;

package/dist/components/dialog/dialog.template.js

@@ -0,0 +1,148 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes, ownerStyles } from "../../adapter/template/owner.js";
+import { lend, lendBefore, lendMark } from "../../adapter/template/lend.js";
+import { createDetail } 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/dialog/dialog.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+function buttonOf(owner, embedded, className) {
+	const button = createDetail(owner, TButtonElement, {
+		embedded,
+		attributes: { type: "button" }
+	});
+	button.className = className;
+	return button;
+}
+function iconOf(owner, embedded, role) {
+	const icon = createDetail(owner, TIconElement, { embedded });
+	icon.icon = role;
+	return icon;
+}
+function toggleIcon(icon, mark, shown) {
+	if (!icon) return;
+	if (!shown) icon.remove();
+	else if (icon.nextSibling !== mark) lendBefore(mark, icon);
+}
+/** Которой нет — вне документа, а не спрятана: тема опирается на её отсутствие (`:has()`). */
+function toggleButton(button, shown, put) {
+	if (!shown) button.remove();
+	else if (!button.isConnected) put();
+}
+var dialogTemplate = {
+	create: (root, ctx) => {
+		const { hasSlot } = ctx;
+		const { ownerDocument } = root;
+		const backdrop = ownerDocument.createElement("div");
+		const title = ownerDocument.createElement("h2");
+		const body = ownerDocument.createElement("div");
+		const footer = ownerDocument.createElement("div");
+		const maximize = buttonOf(ownerDocument, "dialog.maximize", "so-dialog__maximize");
+		const close = buttonOf(ownerDocument, "dialog.close", "so-dialog__close");
+		backdrop.className = "so-dialog__backdrop";
+		title.className = "so-dialog__title";
+		body.className = "so-dialog__body";
+		footer.className = "so-dialog__footer";
+		const mark = lendMark(maximize, DEFAULT_SLOT);
+		const outward = hasSlot("maximize-icon") ? null : iconOf(ownerDocument, "dialog.maximize-icon", "arrowsOutward");
+		const inward = hasSlot("restore-icon") ? null : iconOf(ownerDocument, "dialog.restore-icon", "arrowsInward");
+		if (!hasSlot("close-icon")) lend(close, DEFAULT_SLOT, iconOf(ownerDocument, "dialog.close-icon", "close"));
+		maximize.addEventListener("click", () => ctx.ctrl?.toggleMaximized());
+		close.addEventListener("click", () => ctx.ctrl?.requestClose("button"));
+		root.append(title, body, footer, maximize, close);
+		parts.set(root, {
+			backdrop,
+			title,
+			body,
+			footer,
+			maximize,
+			mark,
+			outward,
+			inward,
+			close
+		});
+		return {
+			companion: backdrop,
+			slots: {
+				title: {
+					mode: "append",
+					node: title
+				},
+				default: {
+					mode: "append",
+					node: body
+				},
+				footer: {
+					mode: "append",
+					node: footer
+				},
+				"maximize-icon": {
+					mode: "before",
+					node: mark,
+					slot: DEFAULT_SLOT
+				},
+				"restore-icon": {
+					mode: "before",
+					node: mark,
+					slot: DEFAULT_SLOT
+				},
+				"close-icon": {
+					mode: "append",
+					node: close,
+					slot: DEFAULT_SLOT
+				}
+			}
+		};
+	},
+	bindings: [
+		bind("dismiss_ownerAttribute", ({ root, state }) => {
+			ownerAttributes(root, {
+				tabindex: "-1",
+				...state.dismiss_ownerAttribute
+			});
+		}),
+		bind("layout_backdropStyles", ({ root, state }) => {
+			const backdrop = parts.get(root)?.backdrop;
+			if (backdrop) ownerStyles(backdrop, state.layout_backdropStyles);
+		}),
+		bind("backdropDataset", ({ root, state }) => {
+			const backdrop = parts.get(root)?.backdrop;
+			if (backdrop) ownerAttributes(backdrop, state.backdropDataset);
+		}),
+		bind("titleAria", ({ root, state }) => {
+			const title = parts.get(root)?.title;
+			if (title) ownerAttributes(title, state.titleAria);
+		}),
+		bind("bodyAria", ({ root, state }) => {
+			const body = parts.get(root)?.body;
+			if (body) ownerAttributes(body, state.bodyAria);
+		}),
+		bind(["maximizable", "maximizeAria"], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			ownerAttributes(own.maximize, state.maximizeAria);
+			toggleButton(own.maximize, state.maximizable === true, () => own.footer.after(own.maximize));
+		}),
+		bind("maximized", ({ root, state, showSlot }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const maximized = state.maximized === true;
+			showSlot("maximize-icon", !maximized);
+			showSlot("restore-icon", maximized);
+			toggleIcon(own.outward, own.mark, !maximized);
+			toggleIcon(own.inward, own.mark, maximized);
+		}),
+		bind(["closable", "closeAria"], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			ownerAttributes(own.close, state.closeAria);
+			toggleButton(own.close, state.closable === true, () => root.append(own.close));
+		})
+	]
+};
+//#endregion
+export { dialogTemplate };

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

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TDialogElement } from './Dialog.element';
+export type { TDialogElementProps } from './Dialog.element';

package/dist/components/dialog/index.js

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

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

@@ -0,0 +1,5 @@
+import { DialogDescriptor, type DescriptorPluginOutputs } from '@soxa-ui/setup';
+import type { IDialog } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export type TDialogOutputs = DescriptorPluginOutputs<typeof DialogDescriptor>;
+export declare function setupDialog(host: HTMLElement, ctrl: IDialog | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IDialog, unknown, TDialogOutputs>;

package/dist/components/dialog/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 { DialogDescriptor } from "@soxa-ui/setup";
+//#region src/components/dialog/setup.component.ts
+function setupDialog(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, DialogDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupDialog };

package/dist/components/drag-and-drop/DragAndDrop.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<so-drag-and-drop>` — перестановка элементов Tabs, ListBox и Accordion в его
+ * свете, события `so:move:before` и `so:move`. Автономный элемент без коробки,
+ * как `<so-virtual>`.
+ */
+import { DragAndDropDescriptor } from '@soxa-ui/setup';
+import type { IDragAndDrop } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TDragAndDropElement: TElementClassOf<typeof HTMLElement, typeof DragAndDropDescriptor, IDragAndDrop>;
+export type TDragAndDropElementProps = TElementType<typeof TDragAndDropElement>;

package/dist/components/drag-and-drop/DragAndDrop.element.js

@@ -0,0 +1,20 @@
+import { defineAutonomousElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { setupDragAndDrop } from "./setup.component.js";
+import { dragAndDropTemplate } from "./drag-and-drop.template.js";
+import { DragAndDropDescriptor } from "@soxa-ui/setup";
+//#region src/components/drag-and-drop/DragAndDrop.element.ts
+/**
+* `<so-drag-and-drop>` — перестановка элементов Tabs, ListBox и Accordion в его
+* свете, события `so:move:before` и `so:move`. Автономный элемент без коробки,
+* как `<so-virtual>`.
+*/
+var TDragAndDropElement = ElementBase(HTMLElement, {
+	descriptor: DragAndDropDescriptor,
+	template: dragAndDropTemplate,
+	setup: setupDragAndDrop
+});
+defineAutonomousElement("so-drag-and-drop", TDragAndDropElement);
+//#endregion
+export { TDragAndDropElement };

package/dist/components/drag-and-drop/drag-and-drop.template.d.ts

@@ -0,0 +1,4 @@
+/** Шаблон DragAndDrop: структуры и коробки нет (`displayContents`); экземпляр опускает сборка. */
+import type { IDragAndDrop } from '@soxa-ui/core';
+import type { ITemplate } from '../../adapter';
+export declare const dragAndDropTemplate: ITemplate<IDragAndDrop>;

package/dist/components/drag-and-drop/drag-and-drop.template.js

@@ -0,0 +1,14 @@
+import { displayContents } from "../../adapter/runtime/display-contents.js";
+//#region src/components/drag-and-drop/drag-and-drop.template.ts
+var dragAndDropTemplate = {
+	create: (root) => {
+		displayContents(root);
+		return { slots: { default: {
+			mode: "append",
+			node: root
+		} } };
+	},
+	bindings: []
+};
+//#endregion
+export { dragAndDropTemplate };

package/dist/components/drag-and-drop/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TDragAndDropElement } from './DragAndDrop.element';
+export type { TDragAndDropElementProps } from './DragAndDrop.element';

package/dist/components/drag-and-drop/index.js

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

package/dist/components/drag-and-drop/setup.component.d.ts

@@ -0,0 +1,4 @@
+import type { IDragAndDrop } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+/** Экземпляр опускается лифтом хоста; коллекции в свете находят его вверх по документу. */
+export declare function setupDragAndDrop(host: HTMLElement, ctrl: IDragAndDrop | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IDragAndDrop>;

package/dist/components/drag-and-drop/setup.component.js

@@ -0,0 +1,17 @@
+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 { DragAndDropDescriptor, TDragAndDropExtension } from "@soxa-ui/setup";
+//#region src/components/drag-and-drop/setup.component.ts
+/** Экземпляр опускается лифтом хоста; коллекции в свете находят его вверх по документу. */
+function setupDragAndDrop(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, DragAndDropDescriptor(), {
+		ctrl,
+		props
+	}).use(TDragAndDropExtension, { elevator: createWebcElevator(host) });
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupDragAndDrop };

package/dist/components/drawer/Drawer.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-drawer">` — выезжающая панель: элемент — сама панель, в цель его
+ * уводит база (`teleport`), подложка — спутник корня. Открытость — `visible`.
+ * docs/architecture.md, Layer 8d, «Модальный слой и тосты».
+ */
+import { DrawerDescriptor } from '@soxa-ui/setup';
+import type { IDrawer } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TDrawerElement: TElementClassOf<typeof HTMLDivElement, typeof DrawerDescriptor, IDrawer>;
+export type TDrawerElementProps = TElementType<typeof TDrawerElement>;

package/dist/components/drawer/Drawer.element.js

@@ -0,0 +1,27 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { drawerTemplate } from "./drawer.template.js";
+import { setupDrawer } from "./setup.component.js";
+import { DrawerDescriptor } from "@soxa-ui/setup";
+//#region src/components/drawer/Drawer.element.ts
+/**
+* `<div is="so-drawer">` — выезжающая панель: элемент — сама панель, в цель его
+* уводит база (`teleport`), подложка — спутник корня. Открытость — `visible`.
+* docs/architecture.md, Layer 8d, «Модальный слой и тосты».
+*/
+var TDrawerElement = ElementBase(HTMLDivElement, {
+	descriptor: DrawerDescriptor,
+	template: drawerTemplate,
+	root: {
+		strategy: "host",
+		teleport: {
+			target: "target",
+			contained: "contained"
+		}
+	},
+	setup: setupDrawer
+});
+defineElement("so-drawer", TDrawerElement, "div");
+//#endregion
+export { TDrawerElement };

package/dist/components/drawer/drawer.template.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Шаблон Drawer: подложка-спутник раньше панели; в панели — полоса, заголовок,
+ * тело, подвал, потом крестик: фокус при открытии попадает на первый контрол
+ * содержимого, а крестик — последняя остановка Tab. Заголовок стоит всегда — на
+ * него ссылается `aria-labelledby`. Без `closable` крестика нет в документе:
+ * тема опирается на его отсутствие.
+ */
+import type { IDrawer } from '@soxa-ui/core';
+import { type ITemplate } from '../../adapter';
+import type { TDrawerOutputs } from './setup.component';
+export declare const drawerTemplate: ITemplate<IDrawer, unknown, TDrawerOutputs>;

package/dist/components/drawer/drawer.template.js

@@ -0,0 +1,100 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes, ownerStyles } from "../../adapter/template/owner.js";
+import { createDetail } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { TButtonElement } from "../button/Button.element.js";
+import "../button/index.js";
+import { lendRoleIcon } from "../common/icon-button.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/drawer/drawer.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+var drawerTemplate = {
+	create: (root, ctx) => {
+		const { hasSlot } = ctx;
+		const { ownerDocument } = root;
+		const backdrop = ownerDocument.createElement("div");
+		const handle = ownerDocument.createElement("div");
+		const title = ownerDocument.createElement("h2");
+		const body = ownerDocument.createElement("div");
+		const footer = ownerDocument.createElement("div");
+		const close = createDetail(ownerDocument, TButtonElement, {
+			embedded: "drawer.close",
+			attributes: { type: "button" }
+		});
+		backdrop.className = "so-drawer__backdrop";
+		handle.className = "so-drawer__handle";
+		handle.setAttribute("aria-hidden", "true");
+		title.className = "so-drawer__title";
+		body.className = "so-drawer__body";
+		footer.className = "so-drawer__footer";
+		close.className = "so-drawer__close";
+		if (!hasSlot("close-icon")) lendRoleIcon(close, "close", "drawer.close-icon");
+		close.addEventListener("click", () => ctx.ctrl?.requestClose("button"));
+		root.append(title, body, footer, close);
+		parts.set(root, {
+			backdrop,
+			handle,
+			title,
+			body,
+			footer,
+			close
+		});
+		return {
+			companion: backdrop,
+			slots: {
+				title: {
+					mode: "append",
+					node: title
+				},
+				default: {
+					mode: "append",
+					node: body
+				},
+				footer: {
+					mode: "append",
+					node: footer
+				},
+				"close-icon": {
+					mode: "append",
+					node: close,
+					slot: DEFAULT_SLOT
+				}
+			}
+		};
+	},
+	bindings: [
+		bind("dismiss_ownerAttribute", ({ root, state }) => {
+			ownerAttributes(root, {
+				tabindex: "-1",
+				...state.dismiss_ownerAttribute
+			});
+		}),
+		bind("layout_backdropStyles", ({ root, state }) => {
+			const backdrop = parts.get(root)?.backdrop;
+			if (backdrop) ownerStyles(backdrop, state.layout_backdropStyles);
+		}),
+		bind("backdropDataset", ({ root, state }) => {
+			const backdrop = parts.get(root)?.backdrop;
+			if (backdrop) ownerAttributes(backdrop, state.backdropDataset);
+		}),
+		bind("titleAria", ({ root, state }) => {
+			const title = parts.get(root)?.title;
+			if (title) ownerAttributes(title, state.titleAria);
+		}),
+		bind("handleRendered", ({ root, state }) => {
+			const handle = parts.get(root)?.handle;
+			if (!handle) return;
+			if (state.handleRendered !== true) handle.remove();
+			else if (root.firstChild !== handle) root.prepend(handle);
+		}),
+		bind(["closable", "closeAria"], ({ root, state }) => {
+			const close = parts.get(root)?.close;
+			if (!close) return;
+			ownerAttributes(close, state.closeAria);
+			if (state.closable !== true) close.remove();
+			else if (!close.isConnected) root.append(close);
+		})
+	]
+};
+//#endregion
+export { drawerTemplate };

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

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TDrawerElement } from './Drawer.element';
+export type { TDrawerElementProps } from './Drawer.element';

package/dist/components/drawer/index.js

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

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

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

package/dist/components/drawer/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 { DrawerDescriptor } from "@soxa-ui/setup";
+//#region src/components/drawer/setup.component.ts
+function setupDrawer(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, DrawerDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupDrawer };

package/dist/components/field/Field.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-field">` — поле формы: подпись, контрол, подсказка и ошибка.
+ * Своих состояний нет: выключенность и прочее тема читает с корня контрола.
+ * docs/architecture.md, Layer 8d, «Поле формы».
+ */
+import { FieldDescriptor } from '@soxa-ui/setup';
+import type { IField } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TFieldElement: TElementClassOf<typeof HTMLDivElement, typeof FieldDescriptor, IField>;
+export type TFieldElementProps = TElementType<typeof TFieldElement>;

package/dist/components/field/Field.element.js

@@ -0,0 +1,20 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { fieldTemplate } from "./field.template.js";
+import { setupField } from "./setup.component.js";
+import { FieldDescriptor } from "@soxa-ui/setup";
+//#region src/components/field/Field.element.ts
+/**
+* `<div is="so-field">` — поле формы: подпись, контрол, подсказка и ошибка.
+* Своих состояний нет: выключенность и прочее тема читает с корня контрола.
+* docs/architecture.md, Layer 8d, «Поле формы».
+*/
+var TFieldElement = ElementBase(HTMLDivElement, {
+	descriptor: FieldDescriptor,
+	template: fieldTemplate,
+	setup: setupField
+});
+defineElement("so-field", TFieldElement, "div");
+//#endregion
+export { TFieldElement };

package/dist/components/field/field.template.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Шаблон Field: подпись, контрол, подсказка, ошибка — один порядок на все
+ * стороны, сторону рисует тема. Часть стоит, пока задан её текст: ссылки
+ * контрола на части ставит ядро, а слотов оно не видит. Части строятся все сразу
+ * и в документе: свет едет в них переносом силами базы.
+ */
+import type { IField } from '@soxa-ui/core';
+import { type ITemplate } from '../../adapter';
+export declare const fieldTemplate: ITemplate<IField>;

package/dist/components/field/field.template.js

@@ -0,0 +1,110 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { createDetail } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { TIconElement } from "../icon/Icon.element.js";
+import "../icon/index.js";
+//#region src/components/field/field.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+/** Значок ошибки каждого поля — строится с первой показанной ошибкой. */
+var icons = /* @__PURE__ */ new WeakMap();
+/** Значок ошибки — деталь разметки поля, перед текстом ошибки. */
+function iconOf(root, error) {
+	const known = icons.get(root);
+	if (known) return known;
+	const icon = createDetail(root.ownerDocument, TIconElement, { embedded: "field.error-icon" });
+	icon.className = "so-field__error-icon";
+	icon.icon = "error";
+	error.prepend(icon);
+	icons.set(root, icon);
+	return icon;
+}
+/** Показанная часть встаёт на своё место (`insert`), снятая уходит из документа. */
+function place(root, part, shown, insert) {
+	if (!shown) {
+		part.remove();
+		return;
+	}
+	if (part.parentNode !== root) insert();
+}
+/** Своя разметка слота главнее пропа. */
+function writeText(node, slotted, text) {
+	if (!slotted) node.textContent = text ?? "";
+}
+var fieldTemplate = {
+	create: (root) => {
+		const { ownerDocument } = root;
+		const label = ownerDocument.createElement("label");
+		const control = ownerDocument.createElement("div");
+		const helper = ownerDocument.createElement("div");
+		const error = ownerDocument.createElement("div");
+		const errorText = ownerDocument.createElement("div");
+		label.className = "so-field__label";
+		control.className = "so-field__control";
+		helper.className = "so-field__helper";
+		error.className = "so-field__error";
+		errorText.className = "so-field__error-text";
+		error.appendChild(errorText);
+		root.append(label, control, helper, error);
+		parts.set(root, {
+			label,
+			control,
+			helper,
+			error,
+			errorText
+		});
+		return { slots: {
+			"label-content": {
+				mode: "append",
+				node: label
+			},
+			default: {
+				mode: "append",
+				node: control
+			},
+			"helper-content": {
+				mode: "append",
+				node: helper
+			},
+			"error-content": {
+				mode: "append",
+				node: errorText
+			}
+		} };
+	},
+	bindings: [
+		bind(["label", "labelAria"], ({ root, state, hasSlot }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			writeText(own.label, hasSlot("label-content"), state.label);
+			ownerAttributes(own.label, state.labelAria);
+			place(root, own.label, Boolean(state.label), () => own.control.before(own.label));
+		}),
+		bind([
+			"helper",
+			"helperRendered",
+			"helperAria"
+		], ({ root, state, hasSlot }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			writeText(own.helper, hasSlot("helper-content"), state.helper);
+			ownerAttributes(own.helper, state.helperAria);
+			place(root, own.helper, state.helperRendered === true, () => own.control.after(own.helper));
+		}),
+		bind([
+			"error",
+			"errorRendered",
+			"errorAria"
+		], ({ root, state, hasSlot }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const shown = state.errorRendered === true;
+			if (shown) iconOf(root, own.error);
+			writeText(own.errorText, hasSlot("error-content"), state.error);
+			ownerAttributes(own.error, state.errorAria);
+			place(root, own.error, shown, () => root.appendChild(own.error));
+		})
+	]
+};
+//#endregion
+export { fieldTemplate };

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

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TFieldElement } from './Field.element';
+export type { TFieldElementProps } from './Field.element';

package/dist/components/field/index.js

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