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

package/dist/components/table/table.template.js

@@ -0,0 +1,164 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes, ownerStyles } from "../../adapter/template/owner.js";
+import { createDetail, createItem, lendSamples, lendTemplates, patch } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+import { TCheckBoxElement } from "../check-box/CheckBox.element.js";
+import "../check-box/index.js";
+import { TTableColumnElement } from "./column/TableColumn.element.js";
+import "./column/index.js";
+import { TTableRowElement } from "./row/TableRow.element.js";
+import "./row/index.js";
+//#region src/components/table/table.template.ts
+/** Слот таблицы → слот заголовка; сверяет `setup/__tests__/item-slots.spec.ts`. */
+var TABLE_COLUMN_SLOTS = { header: "default" };
+/** Образец ячейки уходит строке `<template>`: в строке не оживает, в ячейки его копирует она. */
+var TABLE_ROW_SLOTS = { cell: "cell" };
+var parts = /* @__PURE__ */ new WeakMap();
+var selects = /* @__PURE__ */ new WeakMap();
+/** Выход плагина имён: в типе состояния его нет, и вид значения проверяется здесь. */
+function selectAllLabel(state) {
+	const label = state["names_selectAll"];
+	return typeof label === "string" ? label : void 0;
+}
+function headSelectOf(ctx, tag, ctrl) {
+	const { ownerDocument } = ctx.root;
+	const cell = ownerDocument.createElement(tag);
+	cell.className = "so-table__select";
+	if (!ctrl) return {
+		cell,
+		checkBox: null,
+		ctrl
+	};
+	const checkBox = createDetail(ownerDocument, TCheckBoxElement, { embedded: "table.select-all" });
+	const label = selectAllLabel(ctx.state);
+	checkBox.ctrl = ctrl;
+	if (label !== void 0) checkBox.aria_label = label;
+	cell.appendChild(checkBox);
+	return {
+		cell,
+		checkBox,
+		ctrl
+	};
+}
+function columnOf(ctx, column) {
+	const header = createItem(ctx.root.ownerDocument, TTableColumnElement);
+	header.ctrl = column;
+	lendSamples(ctx, header, TABLE_COLUMN_SLOTS);
+	return header;
+}
+function fillerOf(filler, style, span) {
+	ownerStyles(filler, style);
+	const cell = filler.firstElementChild;
+	if (cell instanceof HTMLTableCellElement && cell.colSpan !== span) cell.colSpan = span;
+}
+function drawnOf(ctx, entry, span) {
+	const { ownerDocument } = ctx.root;
+	if (entry.kind === "filler") {
+		const filler = ownerDocument.createElement("tr");
+		const cell = ownerDocument.createElement("td");
+		filler.className = "so-table__filler-row";
+		filler.setAttribute("aria-hidden", "true");
+		cell.className = "so-table__filler";
+		filler.appendChild(cell);
+		fillerOf(filler, entry.style, span);
+		return filler;
+	}
+	const row = createItem(ownerDocument, TTableRowElement);
+	row.ctrl = entry.item;
+	lendTemplates(ctx, row, TABLE_ROW_SLOTS);
+	return row;
+}
+var tableTemplate = {
+	create: (root) => {
+		const { ownerDocument } = root;
+		const table = ownerDocument.createElement("table");
+		const head = ownerDocument.createElement("thead");
+		const headRow = ownerDocument.createElement("tr");
+		const body = ownerDocument.createElement("tbody");
+		const empty = ownerDocument.createElement("tr");
+		const emptyCell = ownerDocument.createElement("td");
+		root.classList.add("so-table__viewport");
+		head.className = "so-table__head";
+		headRow.className = "so-table__head-row";
+		body.className = "so-table__body";
+		empty.className = "so-table__empty-row";
+		emptyCell.className = "so-table__empty";
+		head.appendChild(headRow);
+		empty.appendChild(emptyCell);
+		body.appendChild(empty);
+		table.append(head, body);
+		root.appendChild(table);
+		parts.set(root, {
+			headRow,
+			body,
+			empty,
+			emptyCell,
+			columns: new TKeyedLoop(headRow, null, (column) => column.uid),
+			rows: new TKeyedLoop(body, null, (entry) => entry.key)
+		});
+		return {
+			slots: {
+				header: { mode: "sample" },
+				cell: { mode: "sample" },
+				empty: {
+					mode: "append",
+					node: emptyCell
+				}
+			},
+			root: table
+		};
+	},
+	bindings: [
+		bind("headRowAria", ({ root, state }) => {
+			const headRow = parts.get(root)?.headRow;
+			if (headRow) ownerAttributes(headRow, state.headRowAria);
+		}),
+		bind([
+			"mode",
+			"cellAria",
+			"names_selectAll"
+		], (ctx) => {
+			const { root, state, facade } = ctx;
+			const own = parts.get(root);
+			if (!own) return;
+			const tag = state.mode === "multiple" ? "th" : state.mode === "single" ? "td" : null;
+			const ctrl = tag === "th" ? facade?.selectAll ?? null : null;
+			let select = selects.get(root);
+			if (select && (select.cell.localName !== tag || select.ctrl !== ctrl)) {
+				select.cell.remove();
+				selects.delete(root);
+				select = void 0;
+			}
+			if (tag === null) return;
+			if (!select) {
+				select = headSelectOf(ctx, tag, ctrl);
+				selects.set(root, select);
+				own.headRow.prepend(select.cell);
+			} else if (select.checkBox) {
+				const label = selectAllLabel(state);
+				patch(select.checkBox, { aria_label: label });
+			}
+			ownerAttributes(select.cell, state.cellAria);
+		}),
+		bind("shownColumns", (ctx) => {
+			parts.get(ctx.root)?.columns.draw(ctx.state.shownColumns ?? [], (column) => columnOf(ctx, column));
+		}),
+		bind(["drawn", "columnCount"], (ctx) => {
+			const span = ctx.state.columnCount ?? 1;
+			parts.get(ctx.root)?.rows.draw(ctx.state.drawn ?? [], (entry) => drawnOf(ctx, entry, span), (node, entry) => {
+				if (entry.kind === "filler") fillerOf(node, entry.style, span);
+			});
+		}),
+		bind(["shown", "columnCount"], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const span = state.columnCount ?? 1;
+			patch(own.emptyCell, { colSpan: span });
+			if ((state.shown ?? []).length > 0) own.empty.remove();
+			else if (own.empty.parentNode !== own.body) own.body.appendChild(own.empty);
+		})
+	]
+};
+//#endregion
+export { TABLE_COLUMN_SLOTS, TABLE_ROW_SLOTS, tableTemplate };

package/dist/components/tabs/Tabs.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-tabs">` — набор вкладок; список табов — поле корня (`control`),
+ * панели — рядом с ним, `dataset` — на корне: выключенный набор тема гасит вместе
+ * с панелями. Модуль регистрирует таб и панель. docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import { TabsDescriptor } from '@soxa-ui/setup';
+import type { ITabs, TTabsCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TTabsElement: TElementClassOf<typeof HTMLDivElement, typeof TabsDescriptor, ITabs, TTabsCollectionFacade>;
+export type TTabsElementProps = TElementType<typeof TTabsElement>;

package/dist/components/tabs/Tabs.element.js

@@ -0,0 +1,32 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { TTabsContentElement } from "./content/TabsContent.element.js";
+import "./content/index.js";
+import { TTabsItemElement } from "./item/TabsItem.element.js";
+import "./item/index.js";
+import { setupTabs } from "./setup.component.js";
+import { tabsTemplate } from "./tabs.template.js";
+import { TabsCollectionDescriptor, TabsDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/Tabs.element.ts
+/**
+* `<div is="so-tabs">` — набор вкладок; список табов — поле корня (`control`),
+* панели — рядом с ним, `dataset` — на корне: выключенный набор тема гасит вместе
+* с панелями. Модуль регистрирует таб и панель. docs/architecture.md, Layer 8d, «Коллекция».
+*/
+var TTabsElement = ElementBase(HTMLDivElement, {
+	descriptor: TabsDescriptor,
+	facade: TabsCollectionDescriptor,
+	template: tabsTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		control: true
+	},
+	setup: setupTabs
+});
+defineElement("so-tabs", TTabsElement, "div");
+defineElement("so-tabs-item", TTabsItemElement, "div");
+defineElement("so-tabs-content", TTabsContentElement, "div");
+//#endregion
+export { TTabsElement };

package/dist/components/tabs/content/TabsContent.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-tabs-content">` — панель таба, связанного по `value`; стоит в слоте
+ * `content` набора — в `default` попала бы в `[role=tablist]`. Неактивная скрыта
+ * (`shownBy`). Регистрирует модуль набора. docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import { TabsContentDescriptor } from '@soxa-ui/setup';
+import type { ITabsContent, TTabsContentCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TTabsContentElement: TElementClassOf<typeof HTMLDivElement, typeof TabsContentDescriptor, ITabsContent, TTabsContentCollectionFacade>;
+export type TTabsContentElementProps = TElementType<typeof TTabsContentElement>;

package/dist/components/tabs/content/TabsContent.element.js

@@ -0,0 +1,24 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupTabsContent } from "./setup.component.js";
+import { tabsContentTemplate } from "./tabs-content.template.js";
+import { TabsCollectionContentDescriptor, TabsContentDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/content/TabsContent.element.ts
+/**
+* `<div is="so-tabs-content">` — панель таба, связанного по `value`; стоит в слоте
+* `content` набора — в `default` попала бы в `[role=tablist]`. Неактивная скрыта
+* (`shownBy`). Регистрирует модуль набора. docs/architecture.md, Layer 8d, «Коллекция».
+*/
+var TTabsContentElement = ElementBase(HTMLDivElement, {
+	descriptor: TabsContentDescriptor,
+	facade: TabsCollectionContentDescriptor,
+	template: tabsContentTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "aria"],
+		shownBy: "active"
+	},
+	setup: setupTabsContent
+});
+//#endregion
+export { TTabsContentElement };

package/dist/components/tabs/content/index.d.ts

@@ -0,0 +1,3 @@
+export { setupTabsContent } from './setup.component';
+export { TTabsContentElement, type TTabsContentElementProps } from './TabsContent.element';
+export { tabsContentTemplate } from './tabs-content.template';

package/dist/components/tabs/content/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./tabs-content.template.js";
+export { TTabsContentElement } from "./TabsContent.element.js";

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

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

package/dist/components/tabs/content/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 { TTabsContentBindingExtension, TabsCollectionContentDescriptor, TabsContentDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/content/setup.component.ts
+function setupTabsContent(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, TabsContentDescriptor(), {
+		ctrl,
+		props
+	});
+	const contentAdapter = createWebcAdapterContext(host, TabsCollectionContentDescriptor(), { props }, { bundle: adapter.bundle }).use(TTabsContentBindingExtension, {
+		adapter,
+		elevator: createWebcElevator(host)
+	});
+	const content = useCollectionAdapter(contentAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, content);
+}
+//#endregion
+export { setupTabsContent };

package/dist/components/tabs/content/tabs-content.template.d.ts

@@ -0,0 +1,4 @@
+/** Содержимое неактивной панели — вне документа (`showSlot`): поля в нём не уходят с формой. */
+import type { ITabsContent, TTabsContentCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate } from '../../../adapter';
+export declare const tabsContentTemplate: ITemplate<ITabsContent, TTabsContentCollectionFacade>;

package/dist/components/tabs/content/tabs-content.template.js

@@ -0,0 +1,15 @@
+import { bind } from "../../../adapter/template/types.js";
+import "../../../adapter/index.js";
+import { DEFAULT_SLOT } from "@soxa-ui/setup";
+//#region src/components/tabs/content/tabs-content.template.ts
+var tabsContentTemplate = {
+	create: (root) => ({ slots: { default: {
+		mode: "append",
+		node: root
+	} } }),
+	bindings: [bind("active", ({ state, showSlot }) => {
+		showSlot(DEFAULT_SLOT, state.active === true);
+	})]
+};
+//#endregion
+export { tabsContentTemplate };

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

@@ -0,0 +1,7 @@
+/** Application API for this element entry. */
+export { TTabsElement } from './Tabs.element';
+export type { TTabsElementProps } from './Tabs.element';
+export { TTabsItemElement } from './item/TabsItem.element';
+export type { TTabsItemElementProps } from './item/TabsItem.element';
+export { TTabsContentElement } from './content/TabsContent.element';
+export type { TTabsContentElementProps } from './content/TabsContent.element';

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+import { TTabsContentElement } from "./content/TabsContent.element.js";
+import { TTabsItemElement } from "./item/TabsItem.element.js";
+import { TTabsElement } from "./Tabs.element.js";
+export { TTabsContentElement, TTabsElement, TTabsItemElement };

package/dist/components/tabs/item/TabsItem.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-tabs-item">` — таб; строка внутри — Button с `role="tab"`, поле
+ * корня (`control`), кнопка закрытия — рядом. Регистрирует модуль набора.
+ * docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import { TabsItemDescriptor } from '@soxa-ui/setup';
+import type { ITabsItem, TTabsItemCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TTabsItemElement: TElementClassOf<typeof HTMLDivElement, typeof TabsItemDescriptor, ITabsItem, TTabsItemCollectionFacade>;
+export type TTabsItemElementProps = TElementType<typeof TTabsItemElement>;

package/dist/components/tabs/item/TabsItem.element.js

@@ -0,0 +1,25 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupTabsItem } from "./setup.component.js";
+import { tabsItemTemplate } from "./tabs-item.template.js";
+import { TabsCollectionItemDescriptor, TabsItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/item/TabsItem.element.ts
+/**
+* `<div is="so-tabs-item">` — таб; строка внутри — Button с `role="tab"`, поле
+* корня (`control`), кнопка закрытия — рядом. Регистрирует модуль набора.
+* docs/architecture.md, Layer 8d, «Коллекция».
+*/
+var TTabsItemElement = ElementBase(HTMLDivElement, {
+	descriptor: TabsItemDescriptor,
+	facade: TabsCollectionItemDescriptor,
+	template: tabsItemTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		order: true,
+		control: true
+	},
+	setup: setupTabsItem
+});
+//#endregion
+export { TTabsItemElement };

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

@@ -0,0 +1,3 @@
+export { setupTabsItem } from './setup.component';
+export { TTabsItemElement, type TTabsItemElementProps } from './TabsItem.element';
+export { tabsItemTemplate } from './tabs-item.template';

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

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./tabs-item.template.js";
+export { TTabsItemElement } from "./TabsItem.element.js";

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

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

package/dist/components/tabs/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 { TCollectionItemExtension, TabsCollectionItemDescriptor, TabsItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/item/setup.component.ts
+function setupTabsItem(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, TabsItemDescriptor(), {
+		ctrl,
+		props
+	});
+	const itemAdapter = createWebcAdapterContext(host, TabsCollectionItemDescriptor(), { 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 { setupTabsItem };

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

@@ -0,0 +1,8 @@
+/**
+ * Шаблон таба: строка — деталь Button с ARIA таба; закрытие — её сосед, а не часть:
+ * интерактивный потомок у `role="tab"` HTML запрещает, а подпись крестика вошла бы
+ * в имя таба. `view` частям не пишется — их красит тема по контексту.
+ */
+import type { ITabsItem, TTabsItemCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate } from '../../../adapter';
+export declare const tabsItemTemplate: ITemplate<ITabsItem, TTabsItemCollectionFacade>;

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

@@ -0,0 +1,113 @@
+import { bind } from "../../../adapter/template/types.js";
+import { ownerAttributes } from "../../../adapter/template/owner.js";
+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/tabs/item/tabs-item.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+var tabsItemTemplate = {
+	create: (root, ctx) => {
+		const { hasSlot } = ctx;
+		const { ownerDocument } = root;
+		const row = createDetail(ownerDocument, TButtonElement, {
+			embedded: "tabs.row",
+			attributes: { type: "button" }
+		});
+		const close = createDetail(ownerDocument, TButtonElement, {
+			embedded: "tabs.close",
+			attributes: { type: "button" }
+		});
+		close.className = "so-tabs-item__close";
+		let icon = null;
+		if (!hasSlot("close-icon")) {
+			icon = createDetail(ownerDocument, TIconElement, { embedded: "tabs.close-icon" });
+			icon.icon = "close";
+			lend(close, DEFAULT_SLOT, icon);
+		}
+		row.addEventListener("click", () => {
+			const context = ctx.facade?.context;
+			if (context) context.adapters.activation.active = true;
+		});
+		close.addEventListener("click", (event) => {
+			event.stopPropagation();
+			ctx.facade?.context?.adapters.tabs.close();
+		});
+		root.appendChild(row);
+		parts.set(root, {
+			row,
+			close,
+			icon
+		});
+		return {
+			slots: {
+				leading: {
+					mode: "append",
+					node: row,
+					slot: "leading"
+				},
+				default: {
+					mode: "append",
+					node: row,
+					slot: DEFAULT_SLOT
+				},
+				trailing: {
+					mode: "append",
+					node: row,
+					slot: "trailing"
+				},
+				"close-icon": {
+					mode: "append",
+					node: close,
+					slot: DEFAULT_SLOT
+				}
+			},
+			control: row
+		};
+	},
+	bindings: [
+		bind([
+			"disabled",
+			"size",
+			"variant"
+		], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { row, close, icon } = own;
+			const disabled = state.disabled === true;
+			patch(row, {
+				disabled,
+				size: state.size,
+				variant: state.variant
+			});
+			patch(close, {
+				disabled,
+				size: state.size
+			});
+			if (icon && icon.size !== state.size) icon.size = state.size;
+		}),
+		bind("aria", ({ root, state }) => {
+			const row = parts.get(root)?.row;
+			if (row) ownerAttributes(row, state.aria);
+		}),
+		bind("text", ({ root, state, hasSlot }) => {
+			const row = parts.get(root)?.row;
+			const text = state.text ?? "";
+			if (row && !hasSlot(DEFAULT_SLOT) && row.text !== text) row.text = text;
+		}),
+		bind(["tab_closable", "closeAria"], ({ root, state }) => {
+			const own = parts.get(root);
+			if (!own) return;
+			const { row, close } = own;
+			ownerAttributes(close, state.closeAria);
+			if (state.tab_closable !== true) close.remove();
+			else if (close.previousSibling !== row) row.after(close);
+		})
+	]
+};
+//#endregion
+export { tabsItemTemplate };

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

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

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

@@ -0,0 +1,26 @@
+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 { TCollectionExtension, TDragAndDropCollectionExtension, TabsCollectionDescriptor, TabsDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/setup.component.ts
+function setupTabs(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, TabsDescriptor(), {
+		ctrl,
+		props
+	});
+	const elevator = createWebcElevator(host);
+	const collectionAdapter = createWebcAdapterContext(host, TabsCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props["engine"]
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator }).use(TDragAndDropCollectionExtension, { elevator });
+	const facade = useCollectionAdapter(collectionAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, facade);
+}
+//#endregion
+export { setupTabs };

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

@@ -0,0 +1,12 @@
+/**
+ * Шаблон Tabs: набор `aria` владельца — на списке табов `div.so-tabs__list`.
+ * Ряд `div.so-tabs__bar` и панели — дети корня, список и слоты `leading` и
+ * `trailing` — дети ряда, табы — дети списка: в `[role=tablist]` ARIA пускает
+ * только `tab`, а тема рисует набор дочерними комбинаторами. docs/architecture.md,
+ * Layer 8d, «Коллекция».
+ */
+import type { ITabs, TTabsCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate, type TItemSlots } from '../../adapter';
+/** Образец набора → слот таба из данных (`setup/__tests__/item-slots.spec.ts`). */
+export declare const TABS_ITEM_SLOTS: TItemSlots;
+export declare const tabsTemplate: ITemplate<ITabs, TTabsCollectionFacade>;

package/dist/components/tabs/tabs.template.js

@@ -0,0 +1,76 @@
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes } from "../../adapter/template/owner.js";
+import { createItem, lendSamples } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+import { TTabsItemElement } from "./item/TabsItem.element.js";
+import "./item/index.js";
+//#region src/components/tabs/tabs.template.ts
+/** Образец набора → слот таба из данных (`setup/__tests__/item-slots.spec.ts`). */
+var TABS_ITEM_SLOTS = {
+	item: "default",
+	"item-leading": "leading",
+	"item-trailing": "trailing",
+	"item-close-icon": "close-icon"
+};
+var lists = /* @__PURE__ */ new WeakMap();
+var loops = /* @__PURE__ */ new WeakMap();
+/** Таб из данных: инстанс данных и копии образцов — до вставки. */
+function tabOf(ctx, item) {
+	const tab = createItem(ctx.root.ownerDocument, TTabsItemElement);
+	tab.ctrl = item;
+	lendSamples(ctx, tab, TABS_ITEM_SLOTS);
+	return tab;
+}
+var tabsTemplate = {
+	create: (root, { hasSlot }) => {
+		const { ownerDocument } = root;
+		const bar = ownerDocument.createElement("div");
+		const list = ownerDocument.createElement("div");
+		const leading = ownerDocument.createElement("div");
+		const trailing = ownerDocument.createElement("div");
+		bar.className = "so-tabs__bar";
+		list.className = "so-tabs__list";
+		leading.className = "so-tabs__leading";
+		trailing.className = "so-tabs__trailing";
+		root.appendChild(bar);
+		if (hasSlot("leading")) bar.appendChild(leading);
+		bar.appendChild(list);
+		if (hasSlot("trailing")) bar.appendChild(trailing);
+		if (!hasSlot("default")) loops.set(root, new TKeyedLoop(list, null, (item) => item.uid));
+		lists.set(root, list);
+		return {
+			slots: {
+				leading: {
+					mode: "append",
+					node: leading
+				},
+				default: {
+					mode: "append",
+					node: list
+				},
+				trailing: {
+					mode: "append",
+					node: trailing
+				},
+				content: {
+					mode: "append",
+					node: root
+				},
+				item: { mode: "sample" },
+				"item-leading": { mode: "sample" },
+				"item-trailing": { mode: "sample" },
+				"item-close-icon": { mode: "sample" }
+			},
+			control: list
+		};
+	},
+	bindings: [bind("aria", ({ root, state }) => {
+		const list = lists.get(root);
+		if (list) ownerAttributes(list, state.aria);
+	}), bind("shown", (ctx) => {
+		loops.get(ctx.root)?.draw(ctx.state.shown ?? [], (item) => tabOf(ctx, item));
+	})]
+};
+//#endregion
+export { TABS_ITEM_SLOTS, tabsTemplate };

package/dist/components/tags/Tags.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<div is="so-tags">` — набор тегов: теги разметкой в слоте по умолчанию или
+ * данными (`items`, `engine`). Модуль регистрирует и тег.
+ * docs/architecture.md, Layer 8d, «Набор тегов и поле выбора».
+ */
+import { TagsDescriptor } from '@soxa-ui/setup';
+import type { ITags, TTagsCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TTagsElement: TElementClassOf<typeof HTMLDivElement, typeof TagsDescriptor, ITags, TTagsCollectionFacade>;
+export type TTagsElementProps = TElementType<typeof TTagsElement>;