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

package/dist/components/component-view/component-view.template.js

@@ -0,0 +1,10 @@
+//#region src/components/component-view/component-view.template.ts
+var componentViewTemplate = {
+	create: (root) => ({ slots: { default: {
+		mode: "append",
+		node: root
+	} } }),
+	bindings: []
+};
+//#endregion
+export { componentViewTemplate };

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

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TComponentViewElement } from './ComponentView.element';
+export type { TComponentViewElementProps } from './ComponentView.element';

package/dist/components/component-view/index.js

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

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

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

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

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

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

package/dist/components/control/index.js

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

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

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

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

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

package/dist/components/date-input/DateInput.element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<div is="so-date-input">` — поле даты из частей по формату локали. Корень —
+ * группа частей (`role="group"`), своего `<input>` нет, и атрибуты потребителя
+ * остаются на корне; значение для формы — скрытое поле. docs/architecture.md,
+ * Layer 8d, «Даты».
+ */
+import { DateInputDescriptor } from '@soxa-ui/setup';
+import type { IDateInput } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TDateInputElement: TElementClassOf<typeof HTMLDivElement, typeof DateInputDescriptor, IDateInput>;
+export type TDateInputElementProps = TElementType<typeof TDateInputElement>;

package/dist/components/date-input/DateInput.element.js

@@ -0,0 +1,21 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { dateInputTemplate } from "./date-input.template.js";
+import { setupDateInput } from "./setup.component.js";
+import { DateInputDescriptor } from "@soxa-ui/setup";
+//#region src/components/date-input/DateInput.element.ts
+/**
+* `<div is="so-date-input">` — поле даты из частей по формату локали. Корень —
+* группа частей (`role="group"`), своего `<input>` нет, и атрибуты потребителя
+* остаются на корне; значение для формы — скрытое поле. docs/architecture.md,
+* Layer 8d, «Даты».
+*/
+var TDateInputElement = ElementBase(HTMLDivElement, {
+	descriptor: DateInputDescriptor,
+	template: dateInputTemplate,
+	setup: setupDateInput
+});
+defineElement("so-date-input", TDateInputElement, "div");
+//#endregion
+export { TDateInputElement };

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

@@ -0,0 +1,11 @@
+/**
+ * Шаблон DateInput: обёртка `leading`, ряд частей, обёртка у конца поля, скрытое
+ * поле для формы. Ряд — флекс из коробок, а не строка текста: иначе Chrome
+ * переносит начало протяжки мышью в соседний текст. Текст части пишется, только
+ * когда разошёлся с узлом: на касание часть редактируемая, и браузер оставляет
+ * её пустой или из нескольких узлов. Очистка — как у Input.
+ */
+import type { IDateInput } from '@soxa-ui/core';
+import type { TDateInputOutputs } from './setup.component';
+import { type ITemplate } from '../../adapter';
+export declare const dateInputTemplate: ITemplate<IDateInput, unknown, TDateInputOutputs>;

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

@@ -0,0 +1,102 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { patch } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+import { placeClearButton } from "../common/clear.js";
+//#region src/components/date-input/date-input.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+/** Наборы части — одним слоем владельца: два вызова затёрли бы друг друга. */
+function drawSegment(node, segment) {
+	if (segment.type === "literal") ownerAttributes(node, segment.aria);
+	else ownerAttributes(node, {
+		...segment.attrs,
+		...segment.aria,
+		...segment.dataset
+	});
+	patch(node, { textContent: segment.text });
+}
+/** Узел части или разделителя — по виду записи: ключ записи вида не меняет. */
+function segmentOf(owner, segment) {
+	const node = owner.createElement("span");
+	node.className = segment.type === "literal" ? "so-date-input__literal" : "so-date-input__segment";
+	drawSegment(node, segment);
+	return node;
+}
+var dateInputTemplate = {
+	create: (root, { hasSlot }) => {
+		const { ownerDocument } = root;
+		const leading = ownerDocument.createElement("div");
+		const segments = ownerDocument.createElement("span");
+		const trailing = ownerDocument.createElement("div");
+		const hidden = ownerDocument.createElement("input");
+		leading.className = "so-date-input__leading";
+		segments.className = "so-date-input__segments";
+		trailing.className = "so-date-input__trailing";
+		hidden.type = "hidden";
+		if (hasSlot("leading")) root.appendChild(leading);
+		root.appendChild(segments);
+		if (hasSlot("clear") || hasSlot("trailing")) root.appendChild(trailing);
+		root.appendChild(hidden);
+		parts.set(root, {
+			leading,
+			segments,
+			trailing,
+			hidden,
+			loop: new TKeyedLoop(segments, null, (segment) => segment.key)
+		});
+		return { slots: {
+			leading: {
+				mode: "append",
+				node: leading
+			},
+			clear: {
+				mode: "append",
+				node: trailing
+			},
+			trailing: {
+				mode: "append",
+				node: trailing
+			}
+		} };
+	},
+	bindings: [
+		bind("id", ({ root, state }) => {
+			if (state.id === void 0) {
+				if (root.hasAttribute("id")) root.removeAttribute("id");
+			} else if (root.id !== state.id) root.id = state.id;
+		}),
+		bind("segmentsAttrs", ({ root, state }) => {
+			const segments = parts.get(root)?.segments;
+			if (segments) ownerAttributes(segments, state.segmentsAttrs);
+		}),
+		bind("segments", ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			own.loop.draw(state.segments ?? [], (segment) => segmentOf(root.ownerDocument, segment), drawSegment);
+		}),
+		bind([
+			"clearable",
+			"size",
+			"disabled",
+			"clearAria"
+		], (ctx) => {
+			const own = parts.get(ctx.root);
+			if (own) placeClearButton(ctx, "date-input", own.trailing, own.hidden);
+		}),
+		bind([
+			"name",
+			"value",
+			"disabled"
+		], ({ root, state }) => {
+			const hidden = parts.get(root)?.hidden;
+			if (!hidden) return;
+			const value = state.value ?? "";
+			hidden.name = state.name ?? "";
+			hidden.disabled = state.disabled === true;
+			patch(hidden, { value });
+		})
+	]
+};
+//#endregion
+export { dateInputTemplate };

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

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TDateInputElement } from './DateInput.element';
+export type { TDateInputElementProps } from './DateInput.element';

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

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

package/dist/components/date-input/setup.component.d.ts

@@ -0,0 +1,8 @@
+import { DateInputDescriptor } from '@soxa-ui/setup';
+import type { DescriptorPluginProps } from '@soxa-ui/setup';
+import type { IDateInput } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+/** Поле-деталь (`embedded`: поля DatePicker) связку `Field` не берёт: её взял владелец. */
+/** Сверх инстанса шаблон читает входы плагинов: `id` поля — проп `TIdPlugin`. */
+export type TDateInputOutputs = DescriptorPluginProps<typeof DateInputDescriptor>;
+export declare function setupDateInput(host: HTMLElement, ctrl: IDateInput | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IDateInput, unknown, TDateInputOutputs>;

package/dist/components/date-input/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 { DateInputDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/date-input/setup.component.ts
+function setupDateInput(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, DateInputDescriptor(), {
+		ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator: createWebcElevator(host) });
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupDateInput };

package/dist/components/date-picker/DatePicker.element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<div is="so-date-picker">` — поле даты и календарь в панели, одна дата или
+ * диапазон. Корень — якорь панели; набор корня `rootAria` — группа у диапазона,
+ * у одной даты `aria` уходит полю. docs/architecture.md, Layer 8d, «Даты».
+ */
+import { DatePickerDescriptor } from '@soxa-ui/setup';
+import type { IDatePicker } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TDatePickerElement: TElementClassOf<typeof HTMLDivElement, typeof DatePickerDescriptor, IDatePicker>;
+/** Пару диапазона DatePicker берёт свойством: атрибут `value` — одна дата. */
+export type TDatePickerElementProps = TElementType<typeof TDatePickerElement>;

package/dist/components/date-picker/DatePicker.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 { datePickerTemplate } from "./date-picker.template.js";
+import { setupDatePicker } from "./setup.component.js";
+import { DatePickerDescriptor } from "@soxa-ui/setup";
+//#region src/components/date-picker/DatePicker.element.ts
+/**
+* `<div is="so-date-picker">` — поле даты и календарь в панели, одна дата или
+* диапазон. Корень — якорь панели; набор корня `rootAria` — группа у диапазона,
+* у одной даты `aria` уходит полю. docs/architecture.md, Layer 8d, «Даты».
+*/
+var TDatePickerElement = ElementBase(HTMLDivElement, {
+	descriptor: DatePickerDescriptor,
+	template: datePickerTemplate,
+	root: {
+		strategy: "host",
+		aria: "rootAria"
+	},
+	setup: setupDatePicker
+});
+defineElement("so-date-picker", TDatePickerElement, "div");
+//#endregion
+export { TDatePickerElement };

package/dist/components/date-picker/date-picker.template.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Шаблон DatePicker: разметка режима (`mode`) — перед местом режима, за ним
+ * панель — деталь Frame с календарём. Поля и календарь — экземпляры DatePicker
+ * на всю жизнь: при смене режима детали над ними остаются за шаблоном.
+ * docs/architecture.md, Layer 8d, «Даты».
+ */
+import type { IDatePicker } from '@soxa-ui/core';
+import { type ITemplate, type TItemSlots } from '../../adapter';
+import type { TDatePickerOutputs } from './setup.component';
+/**
+ * Образец `item` — календарю образцом под тем же именем, `<template>`: в самом
+ * календаре копия не оживает (`setup/__tests__/item-slots.spec.ts`).
+ */
+export declare const DATE_PICKER_CALENDAR_SLOTS: TItemSlots;
+export declare const datePickerTemplate: ITemplate<IDatePicker, unknown, TDatePickerOutputs>;

package/dist/components/date-picker/date-picker.template.js

@@ -0,0 +1,310 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { lend, lendBefore, lendMark } from "../../adapter/template/lend.js";
+import { createDetail, lendTemplates, patch } from "../../adapter/template/parts.js";
+import "../../adapter/index.js";
+import { TButtonElement } from "../button/Button.element.js";
+import "../button/index.js";
+import { clearButton, removeClearButton } from "../common/clear.js";
+import { lendRoleIcon } from "../common/icon-button.js";
+import { TFrameElement } from "../frame/Frame.element.js";
+import "../frame/index.js";
+import { TDateInputElement } from "../date-input/DateInput.element.js";
+import "../date-input/index.js";
+import { TCalendarElement } from "../calendar/Calendar.element.js";
+import "../calendar/index.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/date-picker/date-picker.template.ts
+/**
+* Образец `item` — календарю образцом под тем же именем, `<template>`: в самом
+* календаре копия не оживает (`setup/__tests__/item-slots.spec.ts`).
+*/
+var DATE_PICKER_CALENDAR_SLOTS = { item: "item" };
+var parts = /* @__PURE__ */ new WeakMap();
+var footers = /* @__PURE__ */ new WeakMap();
+var calendars = /* @__PURE__ */ new WeakMap();
+/** Стоящий на месте узел не двигается: перенос элемента soxa — его отключение и подключение. */
+function placeBefore(parent, nodes, ref) {
+	let next = ref;
+	for (let index = nodes.length - 1; index >= 0; index -= 1) {
+		const node = nodes[index];
+		if (!node) continue;
+		if (node.parentNode !== parent || node.nextSibling !== next) parent.insertBefore(node, next);
+		next = node;
+	}
+}
+/** До сборки поля — в его свет, после — в слот (`lendBefore`); стоящие на месте не двигаются. */
+function lendAllBefore(mark, nodes) {
+	if (nodes.every((node, index) => node.nextSibling === (nodes[index + 1] ?? mark))) return;
+	for (const node of nodes) lendBefore(mark, node);
+}
+function clearNodes(ctx) {
+	if (ctx.hasSlot("clear")) return ctx.slotted("clear");
+	if (ctx.state.clearable !== true) {
+		removeClearButton(ctx.root);
+		return [];
+	}
+	return [clearButton(ctx, "date-picker")];
+}
+/** «Отмена» только закрывает: черновик сбрасывает само закрытие, фокус возвращает плагин фокуса. */
+function footerOf(ctx) {
+	const known = footers.get(ctx.root);
+	if (known) return known;
+	const { ownerDocument } = ctx.root;
+	const cancel = createDetail(ownerDocument, TButtonElement, {
+		embedded: "date-picker.cancel",
+		attributes: { type: "button" }
+	});
+	const confirm = createDetail(ownerDocument, TButtonElement, {
+		embedded: "date-picker.confirm",
+		attributes: { type: "button" }
+	});
+	cancel.className = "so-date-picker__cancel";
+	confirm.className = "so-date-picker__confirm";
+	cancel.addEventListener("click", () => {
+		const picker = ctx.ctrl;
+		if (picker) picker.open = false;
+	});
+	confirm.addEventListener("click", () => {
+		ctx.ctrl?.confirm();
+	});
+	const footer = {
+		cancel,
+		confirm
+	};
+	footers.set(ctx.root, footer);
+	return footer;
+}
+function syncFooter(ctx, { cancel, confirm }) {
+	const { state } = ctx;
+	const disabled = state.confirmDisabled === true;
+	patch(cancel, {
+		size: state.size,
+		text: state.names_cancel
+	});
+	patch(confirm, {
+		size: state.size,
+		disabled,
+		text: state.names_confirm
+	});
+}
+/** Календарь и движок — до вставки: сборка календаря берёт их при подключении. */
+function calendarOf(ctx, confirmable) {
+	const calendar = createDetail(ctx.root.ownerDocument, TCalendarElement, { embedded: "date-picker.calendar" });
+	calendar.className = "so-date-picker__calendar";
+	if (ctx.ctrl) {
+		calendar.ctrl = ctx.ctrl.calendar;
+		calendar.engine = ctx.ctrl.engine;
+	}
+	lendTemplates(ctx, calendar, DATE_PICKER_CALENDAR_SLOTS);
+	if (confirmable) {
+		const footer = footerOf(ctx);
+		syncFooter(ctx, footer);
+		lend(calendar, "footer", footer.cancel);
+		lend(calendar, "footer", footer.confirm);
+	}
+	return calendar;
+}
+function fieldOf(owner, embedded, className) {
+	const field = createDetail(owner, TDateInputElement, { embedded });
+	field.className = className;
+	return field;
+}
+var datePickerTemplate = {
+	create: (root, { hasSlot }) => {
+		const { ownerDocument } = root;
+		const field = fieldOf(ownerDocument, "date-picker.field", "so-date-picker__field");
+		const start = fieldOf(ownerDocument, "date-picker.start", "so-date-picker__start");
+		const end = fieldOf(ownerDocument, "date-picker.end", "so-date-picker__end");
+		const dash = ownerDocument.createElement("span");
+		const trigger = createDetail(ownerDocument, TButtonElement, {
+			embedded: "date-picker.trigger",
+			attributes: { type: "button" }
+		});
+		const place = ownerDocument.createComment("");
+		const panel = createDetail(ownerDocument, TFrameElement, {
+			embedded: "date-picker.frame",
+			attributes: { tabindex: "-1" }
+		});
+		const handle = ownerDocument.createElement("div");
+		const content = ownerDocument.createElement("div");
+		const clearMark = lendMark(field, "clear");
+		const trailingMark = lendMark(field, "trailing");
+		dash.className = "so-date-picker__dash";
+		dash.setAttribute("aria-hidden", "true");
+		dash.textContent = "–";
+		trigger.className = "so-date-picker__trigger";
+		panel.className = "so-date-picker__panel";
+		panel.strategy = "fixed";
+		panel.anchor_anchor = root;
+		panel.anchor_offset = 4;
+		handle.className = "so-date-picker__handle";
+		handle.setAttribute("aria-hidden", "true");
+		content.className = "so-date-picker__content";
+		if (!hasSlot("trigger-icon")) lendRoleIcon(trigger, "calendar", "date-picker.trigger-icon");
+		lend(panel, DEFAULT_SLOT, content);
+		root.append(place, panel);
+		parts.set(root, {
+			field,
+			clearMark,
+			trailingMark,
+			start,
+			dash,
+			end,
+			trigger,
+			place,
+			panel,
+			handle,
+			content
+		});
+		return { slots: {
+			clear: {
+				mode: "before",
+				node: place
+			},
+			"trigger-icon": {
+				mode: "append",
+				node: trigger,
+				slot: DEFAULT_SLOT
+			},
+			item: { mode: "sample" }
+		} };
+	},
+	bindings: [
+		bind([], ({ root, ctrl }) => {
+			if (!parts.get(root) || !ctrl) return;
+			const calendar = calendars.get(root)?.node;
+			if (calendar && calendar.ctrl !== ctrl.calendar) {
+				calendar.ctrl = ctrl.calendar;
+				calendar.engine = ctrl.engine;
+			}
+		}),
+		bind("id", ({ root, state }) => {
+			if (state.id === void 0) {
+				if (root.hasAttribute("id")) root.removeAttribute("id");
+			} else if (root.id !== state.id) root.id = state.id;
+		}),
+		bind(["mode", "clearable"], (ctx) => {
+			const own = parts.get(ctx.root);
+			const picker = ctx.ctrl;
+			if (!own || !picker) return;
+			const clear = clearNodes(ctx);
+			if (ctx.state.mode === "range") {
+				patch(own.start, { ctrl: picker.start });
+				patch(own.end, { ctrl: picker.end });
+				own.field.remove();
+				placeBefore(ctx.root, [
+					own.start,
+					own.dash,
+					own.end,
+					...clear,
+					own.trigger
+				], own.place);
+				return;
+			}
+			patch(own.field, { ctrl: picker.field });
+			own.start.remove();
+			own.dash.remove();
+			own.end.remove();
+			lendAllBefore(own.clearMark, clear);
+			lendAllBefore(own.trailingMark, [own.trigger]);
+			placeBefore(ctx.root, [own.field], own.place);
+		}),
+		bind([
+			"clearable",
+			"size",
+			"disabled",
+			"clearAria"
+		], (ctx) => {
+			if (!ctx.hasSlot("clear") && ctx.state.clearable === true) clearButton(ctx, "date-picker");
+		}),
+		bind([
+			"size",
+			"openable",
+			"triggerAria",
+			"triggerDataset"
+		], ({ root, state }) => {
+			const trigger = parts.get(root)?.trigger;
+			if (!trigger) return;
+			const disabled = state.openable !== true;
+			patch(trigger, {
+				size: state.size,
+				disabled
+			});
+			ownerAttributes(trigger, {
+				...state.triggerAria,
+				...state.triggerDataset
+			});
+		}),
+		bind([
+			"aria",
+			"aria_label",
+			"aria_labelledBy",
+			"aria_describedBy"
+		], ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (!field) return;
+			ownerAttributes(field, state.aria);
+			patch(field, {
+				aria_label: state.aria_label,
+				aria_labelledBy: state.aria_labelledBy,
+				aria_describedBy: state.aria_describedBy
+			});
+		}),
+		bind(["names_start", "names_end"], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			patch(own.start, { aria_label: state.names_start });
+			patch(own.end, { aria_label: state.names_end });
+		}),
+		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([
+			"panelAria",
+			"panelDataset",
+			"dismiss_ownerAttribute"
+		], ({ root, state }) => {
+			const panel = parts.get(root)?.panel;
+			if (panel) ownerAttributes(panel, {
+				...state.panelAria,
+				...state.panelDataset,
+				...state.dismiss_ownerAttribute
+			});
+		}),
+		bind("handleRendered", ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { panel, handle } = own;
+			if (state.handleRendered !== true) handle.remove();
+			else if (handle.parentNode !== panel) lend(panel, DEFAULT_SLOT, handle, "start");
+		}),
+		bind(["confirmable", "contentRendered"], (ctx) => {
+			const own = parts.get(ctx.root);
+			if (!own || !ctx.ctrl || ctx.state.contentRendered !== true) return;
+			const confirmable = ctx.state.confirmable === true;
+			const drawn = calendars.get(ctx.root);
+			if (drawn?.confirmable === confirmable) return;
+			const calendar = calendarOf(ctx, confirmable);
+			if (drawn) own.content.replaceChild(calendar, drawn.node);
+			else own.content.appendChild(calendar);
+			calendars.set(ctx.root, {
+				node: calendar,
+				confirmable
+			});
+		}),
+		bind([
+			"size",
+			"confirmDisabled",
+			"names_cancel",
+			"names_confirm"
+		], (ctx) => {
+			const footer = footers.get(ctx.root);
+			if (footer) syncFooter(ctx, footer);
+		})
+	]
+};
+//#endregion
+export { DATE_PICKER_CALENDAR_SLOTS, datePickerTemplate };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TDatePickerElement } from './DatePicker.element';
+export type { TDatePickerElementProps } from './DatePicker.element';

package/dist/components/date-picker/index.js

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

package/dist/components/date-picker/setup.component.d.ts

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

package/dist/components/date-picker/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 { DatePickerDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/date-picker/setup.component.ts
+function setupDatePicker(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, DatePickerDescriptor(), {
+		ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator: createWebcElevator(host) });
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupDatePicker };

package/dist/components/dialog/Dialog.element.d.ts

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