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

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

@@ -0,0 +1,10 @@
+import { SwitchDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+export function setupSwitch(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(SwitchDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/table/Table.jsx

@@ -0,0 +1,74 @@
+import { Elevate, KeyedFor, Root, createPartProps, createWrappedRootProps, relaySlot, renderSlot, } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { CheckBox } from '../check-box';
+import { TableColumn } from './column';
+import { TableRow } from './row';
+import { setupTable } from './setup.component';
+/** Строка записи; у распорки её нет. */
+function rowOf(entry) {
+    return entry.kind === 'item' ? entry.item : undefined;
+}
+/** Стиль распорки — высота пропущенных строк; у записи строки его нет. */
+function fillerStyleOf(entry) {
+    return entry.kind === 'filler' ? entry.style : undefined;
+}
+/**
+ * Таблица: окно `div.so-table__viewport` — внешний узел, корень — `table` внутри.
+ * Колонки и строки задаются только данными, поэтому `children` нет; слот `cell`
+ * уходит строке как есть — строку в его scope кладут её ячейки.
+ */
+export function Table(props) {
+    const binding = setupTable(props);
+    const state = binding.state;
+    const facade = binding.facade;
+    const layout = createWrappedRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+        wrapper: 'so-table__viewport',
+    }));
+    const headRowAria = createPartProps(() => state.headRowAria);
+    const cellAria = createPartProps(() => state.cellAria);
+    /** Запись `drawn`: строка или распорка на месте пропущенных. */
+    const drawEntry = (entry) => (<Show when={rowOf(entry())} keyed fallback={<tr class="so-table__filler-row" aria-hidden="true" style={fillerStyleOf(entry())}>
+					<td class="so-table__filler" colspan={state.columnCount}/>
+				</tr>}>
+			{(row) => <TableRow ctrl={row} cell={props.cell}/>}
+		</Show>);
+    return (<Show when={state.rendered}>
+			<div {...layout().wrapper} ref={binding.consumerRef}>
+				<Root tag={state.tag} attributes={() => layout().root} ref={binding.bindRef}>
+					<Elevate layer={binding.layer}>
+						<thead class="so-table__head">
+							<tr class="so-table__head-row" {...headRowAria()}>
+								<Show when={state.mode === 'multiple'} fallback={<Show when={state.mode === 'single'}>
+											<td class="so-table__select" {...cellAria()}/>
+										</Show>}>
+									<th class="so-table__select" {...cellAria()}>
+										<CheckBox embedded="table.select-all" ctrl={facade.selectAll} aria_label={state.names_selectAll}/>
+									</th>
+								</Show>
+								<For each={state.shownColumns}>
+									{(column) => (<TableColumn ctrl={column}>
+											{relaySlot(props.header, { column })}
+										</TableColumn>)}
+								</For>
+							</tr>
+						</thead>
+						<tbody class="so-table__body">
+							<KeyedFor each={state.drawn} by={(entry) => entry.key}>
+								{drawEntry}
+							</KeyedFor>
+							<Show when={state.shown?.length === 0}>
+								<tr class="so-table__empty-row">
+									<td class="so-table__empty" colspan={state.columnCount}>
+										{renderSlot(props.empty)}
+									</td>
+								</tr>
+							</Show>
+						</tbody>
+					</Elevate>
+				</Root>
+			</div>
+		</Show>);
+}

package/dist/source/components/table/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/table/column/Column.jsx

@@ -0,0 +1,47 @@
+import { Root, createPartProps, createRootProps, fieldText, resolveSlot, roleIcon, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+import { setupTableColumn } from './setup.component';
+/** Стрелка сортировки — иконка по роли, компонент на роль один на модуль. */
+const SortIcon = roleIcon('arrowUpward');
+/**
+ * Заголовок колонки — ячейка шапки, её рисует таблица. Кнопка сортировки — соседка
+ * подписи, а не в слоте: в подписи она дописала бы своё имя к имени заголовка.
+ */
+export function TableColumn(props) {
+    const binding = setupTableColumn(props);
+    const state = binding.state;
+    const column = binding.column;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+        style: state.widthStyle,
+    }));
+    const textAria = createPartProps(() => state.textAria);
+    const resizerAria = createPartProps(() => state.resizerAria);
+    const caption = resolveSlot(() => props.children, () => ({ text: state.text ?? '', sortable: state.sortable ?? false }));
+    const width = fieldText(() => (state.resizer ? String(state.resizer.value) : undefined));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<span class="so-table-column__content">
+					<span class="so-table-column__text" {...textAria()}>
+						{caption() ?? state.text}
+					</span>
+					<Show when={state.sortable}>
+						<Button embedded="table.sort" type="button" class="so-table-column__sort" disabled={state.disabled} {...state.sortAria} onActionPress={() => column.toggleSort()}>
+							<span class="so-table-column__sort-icon" aria-hidden="true">
+								<Icon embedded="table.sort-icon" tag={SortIcon}/>
+							</span>
+						</Button>
+					</Show>
+				</span>
+				<Show when={state.resizerRendered && state.resizer}>
+					{(resizer) => (<span class="so-table-column__resizer">
+							<input class="so-table-column__input" type="range" min={resizer().min} max={resizer().max} {...resizerAria()} {...width}/>
+						</span>)}
+				</Show>
+			</Root>
+		</Show>);
+}

package/dist/source/components/table/column/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/table/column/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTableColumn } from './setup.component';
+export { TableColumn } from './Column';

package/dist/source/components/table/column/setup.component.js

@@ -0,0 +1,10 @@
+import { TableColumnDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../../adapter';
+/**
+ * Фасада у колонки нет: лифт таблицы отдаёт движок строк, и колонка вошла бы в него строкой.
+ * Инстанс (`column`) — разметке: кнопка сортировки зовёт его `toggleSort()`.
+ */
+export function setupTableColumn(props) {
+    const adapter = createSolidAdapterContext(TableColumnDescriptor(), { ctrl: props.ctrl, props });
+    return { ...useAdapter(adapter, props), column: adapter.instance };
+}

package/dist/source/components/table/index.js

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import { Table as TableComponent } from './Table';
+import { TableColumn } from './column';
+import { TableRow } from './row';
+export * from './base.component';
+export { setupTable } from './setup.component';
+export * from './column';
+export * from './row';
+export const Table = withParts(TableComponent, { Column: TableColumn, Row: TableRow });

package/dist/source/components/table/row/Cells.jsx

@@ -0,0 +1,49 @@
+import { KeyedFor, createPartNode, createPartNodes, liveScope, renderSlot, } from '../../../adapter';
+/** Свои атрибуты ячейки — заголовка строки и обычной. */
+const ROW_HEADER = { class: 'so-table-row__cell', scope: 'row' };
+const CELL = { class: 'so-table-row__cell' };
+/** Тег — часть ключа: сменился заголовок строки — ячейка новая. */
+function keyOf(cell) {
+    return `${cell.column.uid}:${cell.rowHeader}`;
+}
+function tagOf(cell) {
+    return cell.rowHeader ? 'th' : 'td';
+}
+function textOf(cell) {
+    return cell.text;
+}
+/** Ячейки строки — внутренняя часть `Table.Row` без дескриптора и контекста, не экспортируется. */
+export function TableRowCells(props) {
+    /** Три набора ячейки — одним объектом; в окне гидратации их держат узлы. */
+    const attributesOf = (cell) => ({
+        ...(cell.rowHeader ? ROW_HEADER : CELL),
+        ...cell.dataset,
+        ...props.cellAria,
+        ...cell.aria,
+    });
+    // Без слота ячейка — значение текстом: узлы всех ячеек строки — одно мемо
+    if (props.cell === undefined) {
+        return createPartNodes({
+            each: () => props.cells,
+            by: keyOf,
+            tag: tagOf,
+            attributes: attributesOf,
+            text: textOf,
+        });
+    }
+    /**
+     * Содержимое ячейки со слотом: слот, а на месте пустого — значение текстом.
+     * Живой scope — только для функции слота.
+     */
+    const content = (cell) => {
+        const slot = props.cell;
+        const scope = typeof slot === 'function'
+            ? liveScope(() => ({ row: props.row, column: cell().column, value: cell().value }))
+            : undefined;
+        return renderSlot(slot, scope) ?? cell().text;
+    };
+    const drawCell = (cell) => createPartNode(tagOf(cell()), () => attributesOf(cell()), () => content(cell));
+    return (<KeyedFor each={props.cells} by={keyOf}>
+			{drawCell}
+		</KeyedFor>);
+}

package/dist/source/components/table/row/Row.jsx

@@ -0,0 +1,27 @@
+import { Root, createPartNode, createRootProps } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { CheckBox } from '../../check-box';
+import { TableRowCells } from './Cells';
+import { setupTableRow } from './setup.component';
+/**
+ * Строка таблицы — `tr`, её рисует таблица по записи `drawn`. Чекбокс строки держит
+ * таблица; берётся он только в ячейке выбора: геттер item-адаптера его создаёт.
+ */
+export function TableRow(props) {
+    const binding = setupTableRow(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Show when={state.selecting}>
+					{createPartNode('td', () => ({ class: 'so-table-row__select', ...state.cellAria }), () => (<CheckBox embedded="table.select" ctrl={context?.adapters.table.checkBox} aria_labelledBy={state.rowHeaderId}/>))}
+				</Show>
+				<TableRowCells row={binding.ctrl} cells={state.cells} cellAria={state.cellAria} cell={props.cell}/>
+			</Root>
+		</Show>);
+}

package/dist/source/components/table/row/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/table/row/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTableRow } from './setup.component';
+export { TableRow } from './Row';

package/dist/source/components/table/row/setup.component.js

@@ -0,0 +1,11 @@
+import { TCollectionItemExtension, TableCollectionRowDescriptor, TableRowDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+/** `context` — разметке: чекбокс строки она берёт у item-адаптера таблицы. */
+export function setupTableRow(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(TableRowDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(TableCollectionRowDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

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

@@ -0,0 +1,20 @@
+import { TCollectionExtension, TVirtualCollectionExtension, TableCollectionDescriptor, TableDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+/** Разметке уходит и фасад: чекбокс «выбрать все» (`selectAll`) состоянием не отдаётся. */
+export function setupTable(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(TableDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(TableCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle })
+        .use(TCollectionExtension, { elevator })
+        .use(TVirtualCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return {
+        ...joinBindings(owner, collectionBinding),
+        layer,
+        facade: collectionAdapter.instance,
+    };
+}

package/dist/source/components/tabs/Tabs.jsx

@@ -0,0 +1,50 @@
+import { Elevate, ResolvedSlot, createPartProps, createRootProps, relaySlot, renderSlot, toControlAttrs, toRootForward, } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { TabsItem } from './item';
+import { setupTabs } from './setup.component';
+/**
+ * Набор табов: ряд (`so-tabs__bar`) со списком (`so-tabs__list`), на котором набор
+ * `aria` и атрибуты потребителя, и панели — слот `content` вне ряда, иначе панель
+ * оказалась бы в `[role=tablist]`. Слоты `leading` и `trailing` — в ряду по краям
+ * списка, а не в нём: в `tablist` ARIA пускает только `tab`. Тема рисует вид от
+ * корня дочерними комбинаторами: ряд и панели — дети корня, список — ребёнок ряда.
+ */
+export function Tabs(props) {
+    const binding = setupTabs(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const aria = createPartProps(() => state.aria);
+    const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+    return (<Show when={state.rendered}>
+			<div {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<div class="so-tabs__bar">
+						<ResolvedSlot content={props.leading}>
+							{(leading) => <div class="so-tabs__leading">{leading()}</div>}
+						</ResolvedSlot>
+						<div class="so-tabs__list" {...aria()} {...control()}>
+							<ResolvedSlot content={props.children} fallback={<For each={state.shown}>
+										{(item) => (<TabsItem ctrl={item} leading={renderSlot(props['item-leading'], {
+                    item,
+                })} trailing={renderSlot(props['item-trailing'], {
+                    item,
+                })} close-icon={renderSlot(props['item-close-icon'], {
+                    item,
+                })}>
+												{relaySlot(props.item, { item })}
+											</TabsItem>)}
+									</For>}/>
+						</div>
+						<ResolvedSlot content={props.trailing}>
+							{(trailing) => <div class="so-tabs__trailing">{trailing()}</div>}
+						</ResolvedSlot>
+					</div>
+					{renderSlot(props.content)}
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/tabs/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/tabs/content/Content.jsx

@@ -0,0 +1,18 @@
+import { Root, createRootProps, renderSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupTabsContent } from './setup.component';
+/** Панель таба: рисуется, пока активен таб того же `value`; без такого таба пуста. */
+export function TabsContent(props) {
+    const binding = setupTabsContent(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered && state.active}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{renderSlot(props.children)}
+			</Root>
+		</Show>);
+}

package/dist/source/components/tabs/content/base.component.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTabsContent } from './setup.component';
+export { TabsContent } from './Content';

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

@@ -0,0 +1,14 @@
+import { TTabsContentBindingExtension, TabsCollectionContentDescriptor, TabsContentDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+/** Панель таба: свой таб по `value` находит лифтом `TTabsContentBindingExtension`. */
+export function setupTabsContent(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(TabsContentDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const content = createSolidAdapterContext(TabsCollectionContentDescriptor(), { props }, { bundle: adapter.bundle }).use(TTabsContentBindingExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(content, props);
+    const owner = useAdapter(adapter, props);
+    return joinBindings(owner, itemBinding);
+}

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

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import { Tabs as TabsComponent } from './Tabs';
+import { TabsItem } from './item';
+import { TabsContent } from './content';
+export * from './base.component';
+export { setupTabs } from './setup.component';
+export * from './item';
+export * from './content';
+export const Tabs = withParts(TabsComponent, { Item: TabsItem, Content: TabsContent });

package/dist/source/components/tabs/item/Item.jsx

@@ -0,0 +1,47 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+import { setupTabsItem } from './setup.component';
+/** Глиф крестика без слота. */
+const CLOSE = roleIcon('close');
+/**
+ * Таб: строка — Button с `role="tab"` и набором `aria`, крестик — её сосед: интерактивный
+ * потомок у `role="tab"` HTML запрещает. Крестик — `Show`, а не `rendered` кнопки:
+ * тело выполняется сразу, и скрытая кнопка собирала бы у каждого таба свой контекст.
+ */
+export function TabsItem(props) {
+    const binding = setupTabsItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '', active: state.active ?? false }));
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const activate = clickAction(() => {
+        if (context)
+            context.adapters.activation.active = true;
+    });
+    // Stopped at the cross: the roots of the tab and the set would give `action:press`
+    const close = clickAction((event) => {
+        event.stopPropagation();
+        context?.adapters.tabs.close();
+    });
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Button embedded="tabs.row" type="button" disabled={state.disabled} size={state.size} variant={state.variant} leading={renderSlot(props.leading)} trailing={renderSlot(props.trailing)} {...state.aria} {...row()} ref={activate}>
+					{content() ?? state.text}
+				</Button>
+				<Show when={state.tab_closable === true}>
+					<Button embedded="tabs.close" type="button" class="so-tabs-item__close" disabled={state.disabled} size={state.size} {...state.closeAria} ref={close}>
+						{closeIcon() ?? (<Icon embedded="tabs.close-icon" tag={CLOSE} size={state.size}/>)}
+					</Button>
+				</Show>
+			</Root>
+		</Show>);
+}

package/dist/source/components/tabs/item/base.component.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTabsItem } from './setup.component';
+export { TabsItem } from './Item';

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

@@ -0,0 +1,10 @@
+import { TCollectionItemExtension, TabsCollectionItemDescriptor, TabsItemDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupTabsItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(TabsItemDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(TabsCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

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

@@ -0,0 +1,15 @@
+import { TCollectionExtension, TDragAndDropCollectionExtension, TabsCollectionDescriptor, TabsDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupTabs(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(TabsDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(TabsCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle })
+        .use(TCollectionExtension, { elevator })
+        .use(TDragAndDropCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/tags/Tags.jsx

@@ -0,0 +1,30 @@
+import { Elevate, ResolvedSlot, createRootProps, relaySlot, renderSlot } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { TagsItem } from './item';
+import { setupTags } from './setup.component';
+/**
+ * Набор тегов: корень — сам ряд с ролью. Слот `default` (scope `shown`) заменяет
+ * петлю тегов: каждый тег рисуется один раз.
+ */
+export function Tags(props) {
+    const binding = setupTags(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<div {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<ResolvedSlot content={props.children} scope={() => ({ shown: state.shown ?? [] })} fallback={<For each={state.shown}>
+								{(item) => (<TagsItem ctrl={item} leading={renderSlot(props['item-leading'], { item })} trailing={renderSlot(props['item-trailing'], { item })} close-icon={renderSlot(props['item-close-icon'], {
+                    item,
+                })}>
+										{relaySlot(props.item, { item })}
+									</TagsItem>)}
+							</For>}/>
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/tags/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/tags/index.js

@@ -0,0 +1,7 @@
+import { withParts } from '@soxa-ui/setup';
+import { Tags as TagsComponent } from './Tags';
+import { TagsItem } from './item';
+export * from './base.component';
+export { setupTags } from './setup.component';
+export * from './item';
+export const Tags = withParts(TagsComponent, { Item: TagsItem });

package/dist/source/components/tags/item/Item.jsx

@@ -0,0 +1,47 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { ItemRow } from '../../item-row';
+import { Icon } from '../../icon';
+import { setupTagsItem } from './setup.component';
+/** Глиф крестика без слота — компонент на роль: `tag` у Icon — корень, а не роль. */
+const CLOSE = roleIcon('close');
+/**
+ * Тег: строка — `ItemRow` на `div` с набором `aria`, кнопка закрытия — её сосед:
+ * потомки опции скринридеру презентационны. Выбор — по `press` строки: на клик
+ * выключенный тег выбирался бы. Крестик — `Show`, а не `rendered` кнопки: скрытая
+ * кнопка собирала бы у каждого тега свой контекст.
+ */
+export function TagsItem(props) {
+    const binding = setupTagsItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '', selected: state.selected ?? false }));
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    const row = () => toControlAttrs(binding.forwardProps());
+    function toggle() {
+        context?.adapters.selection.toggle();
+    }
+    /** Stopped at the cross: the roots of the tag and the set and the Select field would take the click. */
+    const close = clickAction((event) => {
+        event.stopPropagation();
+        context?.adapters.tags.close();
+    });
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="tags.row" tag="div" direction={state.direction} disabled={state.disabled} size={state.size} variant={state.variant} leading={renderSlot(props.leading)} trailing={renderSlot(props.trailing)} onActionPress={toggle} {...state.aria} {...row()}>
+					{content() ?? state.text}
+				</ItemRow>
+				<Show when={state.tag_closable === true}>
+					<Button embedded="tags.close" type="button" class="so-tags-item__close" disabled={state.disabled} size={state.size} {...state.closeAria} ref={close}>
+						{closeIcon() ?? (<Icon embedded="tags.close-icon" tag={CLOSE} size={state.size}/>)}
+					</Button>
+				</Show>
+			</Root>
+		</Show>);
+}

package/dist/source/components/tags/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/tags/item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTagsItem } from './setup.component';
+export { TagsItem } from './Item';

package/dist/source/components/tags/item/setup.component.js

@@ -0,0 +1,10 @@
+import { TCollectionItemExtension, TagsCollectionItemDescriptor, TagsItemDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupTagsItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(TagsItemDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(TagsCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

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

@@ -0,0 +1,13 @@
+import { TCollectionExtension, TagsCollectionDescriptor, TagsDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupTags(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(TagsDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(TagsCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/textable/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/textable/index.js

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { setupTextable } from './setup.component';

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

@@ -0,0 +1,6 @@
+import { TextableDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupTextable(props) {
+    const adapter = createSolidAdapterContext(TextableDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}