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

package/dist/components/table/row/Row.js

@@ -0,0 +1,80 @@
+import { Show } from "../../../adapter/runtime/flow.js";
+import { createRootProps } from "../../../adapter/common/root.js";
+import { createPartNode } from "../../../adapter/runtime/part-node.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { CheckBox } from "../../check-box/CheckBox.js";
+import { setupTableRow } from "./setup.component.js";
+import { TableRowCells } from "./Cells.js";
+import { createComponent } from "solid-js/web";
+//#region src/components/table/row/Row.tsx
+/**
+* Строка таблицы — `tr`, её рисует таблица по записи `drawn`. Чекбокс строки держит
+* таблица; берётся он только в ячейке выбора: геттер item-адаптера его создаёт.
+*/
+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 createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return [createComponent(Show, {
+						get when() {
+							return state.selecting;
+						},
+						get children() {
+							return createPartNode("td", () => ({
+								class: "so-table-row__select",
+								...state.cellAria
+							}), () => createComponent(CheckBox, {
+								embedded: "table.select",
+								get ctrl() {
+									return context?.adapters.table.checkBox;
+								},
+								get aria_labelledBy() {
+									return state.rowHeaderId;
+								}
+							}));
+						}
+					}), createComponent(TableRowCells, {
+						get row() {
+							return binding.ctrl;
+						},
+						get cells() {
+							return state.cells;
+						},
+						get cellAria() {
+							return state.cellAria;
+						},
+						get cell() {
+							return props.cell;
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { TableRow };

package/dist/components/table/row/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { ITableRow } from '@soxa-ui/core';
+import type { TableCollectionRowDescriptor, TableRowDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+/** События строки — свои и фасада. */
+export type TableRowEventProps = EventProps<typeof TableRowDescriptor> & EventProps<typeof TableCollectionRowDescriptor>;
+/** Пропсы строки: входов нет — строку рисует таблица над её экземпляром (`ctrl`). */
+export type TableRowProps = UseDomProps<typeof TableRowDescriptor, ITableRow, TableRowEventProps>;

package/dist/components/table/row/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import type { TableRowProps } from './base.component';
+/** `context` — разметке: чекбокс строки она берёт у item-адаптера таблицы. */
+export declare function setupTableRow(props: TableRowProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").ITableRow<import("@soxa-ui/core").ITableRowProps, import("@soxa-ui/core").TTableRowEvents>, import("@soxa-ui/core").TTableCollectionExtensions> | undefined;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITableRow<import("@soxa-ui/core").ITableRowProps, import("@soxa-ui/core").TTableRowEvents>;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../../adapter").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITableRow<import("@soxa-ui/core").ITableRowProps, import("@soxa-ui/core").TTableRowEvents>, {
+        props: object & {} & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {};
+        outputs: object & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTableRowCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TableRowProps>;
+};

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

@@ -0,0 +1,25 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { TCollectionItemExtension, TableCollectionRowDescriptor, TableRowDescriptor } from "@soxa-ui/setup";
+//#region src/components/table/row/setup.component.ts
+/** `context` — разметке: чекбокс строки она берёт у item-адаптера таблицы. */
+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
+	};
+}
+//#endregion
+export { setupTableRow };

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

@@ -0,0 +1,39 @@
+import type { TableProps } from './base.component';
+/** Разметке уходит и фасад: чекбокс «выбрать все» (`selectAll`) состоянием не отдаётся. */
+export declare function setupTable(props: TableProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    facade: object & import("@soxa-ui/core").TTableCollectionFacade;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITable;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../adapter").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITable, {
+        props: object & {} & {} & {} & {
+            aria_label?: string | undefined;
+            aria_labelledBy?: string | undefined;
+            aria_describedBy?: string | undefined;
+        } & {} & {} & {} & {} & {} & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {
+            "action:click": (event: MouseEvent) => void;
+            "action:press": (event: MouseEvent) => void;
+            "action:focus": (event: FocusEvent) => void;
+            "action:blur": (event: FocusEvent) => void;
+        } & {
+            "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+            "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+            "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        } & {} & {} & {} & {} & {} & {} & {};
+        outputs: object & {} & {} & {} & {} & {} & {} & {} & {
+            readonly names_selectAll: string;
+        } & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTableCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TableProps>;
+};

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

@@ -0,0 +1,29 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { TCollectionExtension, TVirtualCollectionExtension, TableCollectionDescriptor, TableDescriptor } from "@soxa-ui/setup";
+//#region src/components/table/setup.component.ts
+/** Разметке уходит и фасад: чекбокс «выбрать все» (`selectAll`) состоянием не отдаётся. */
+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
+	};
+}
+//#endregion
+export { setupTable };

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

@@ -0,0 +1,10 @@
+import type { JSX } from 'solid-js';
+import type { TabsProps } from './base.component';
+/**
+ * Набор табов: ряд (`so-tabs__bar`) со списком (`so-tabs__list`), на котором набор
+ * `aria` и атрибуты потребителя, и панели — слот `content` вне ряда, иначе панель
+ * оказалась бы в `[role=tablist]`. Слоты `leading` и `trailing` — в ряду по краям
+ * списка, а не в нём: в `tablist` ARIA пускает только `tab`. Тема рисует вид от
+ * корня дочерними комбинаторами: ряд и панели — дети корня, список — ребёнок ряда.
+ */
+export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,104 @@
+import { relaySlot, renderSlot } from "../../adapter/common/slots.js";
+import { For, Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { createPartProps, createRootProps, toControlAttrs, toRootForward } from "../../adapter/common/root.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { TabsItem } from "./item/Item.js";
+import { setupTabs } from "./setup.component.js";
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+//#region src/components/tabs/Tabs.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-tabs__bar><div class=so-tabs__list>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-tabs__leading>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class=so-tabs__trailing>`);
+/**
+* Набор табов: ряд (`so-tabs__bar`) со списком (`so-tabs__list`), на котором набор
+* `aria` и атрибуты потребителя, и панели — слот `content` вне ряда, иначе панель
+* оказалась бы в `[role=tablist]`. Слоты `leading` и `trailing` — в ряду по краям
+* списка, а не в нём: в `tablist` ARIA пускает только `tab`. Тема рисует вид от
+* корня дочерними комбинаторами: ряд и панели — дети корня, список — ребёнок ряда.
+*/
+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 createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			var _el$ = _tmpl$2();
+			var _ref$ = binding.ref;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : binding.ref = _el$;
+			spread(_el$, mergeProps(root), false, true);
+			insert(_el$, createComponent(Elevate, {
+				get layer() {
+					return binding.layer;
+				},
+				get children() {
+					return [(() => {
+						var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild;
+						insert(_el$2, createComponent(ResolvedSlot, {
+							get content() {
+								return props.leading;
+							},
+							children: (leading) => (() => {
+								var _el$4 = _tmpl$3();
+								insert(_el$4, leading);
+								return _el$4;
+							})()
+						}), _el$3);
+						spread(_el$3, mergeProps(aria, control), false, true);
+						insert(_el$3, createComponent(ResolvedSlot, {
+							get content() {
+								return props.children;
+							},
+							get fallback() {
+								return createComponent(For, {
+									get each() {
+										return state.shown;
+									},
+									children: (item) => createComponent(TabsItem, {
+										ctrl: item,
+										get leading() {
+											return renderSlot(props["item-leading"], { item });
+										},
+										get trailing() {
+											return renderSlot(props["item-trailing"], { item });
+										},
+										get ["close-icon"]() {
+											return renderSlot(props["item-close-icon"], { item });
+										},
+										get children() {
+											return relaySlot(props.item, { item });
+										}
+									})
+								});
+							}
+						}));
+						insert(_el$2, createComponent(ResolvedSlot, {
+							get content() {
+								return props.trailing;
+							},
+							children: (trailing) => (() => {
+								var _el$5 = _tmpl$4();
+								insert(_el$5, trailing);
+								return _el$5;
+							})()
+						}), null);
+						return _el$2;
+					})(), memo(() => renderSlot(props.content))];
+				}
+			}));
+			return _el$;
+		}
+	});
+}
+//#endregion
+export { Tabs };

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

@@ -0,0 +1,9 @@
+import type { ITabs } from '@soxa-ui/core';
+import type { TabsCollectionDescriptor, TabsDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../types';
+/** События Tabs — свои и фасада коллекции. */
+export type TabsEventProps = EventProps<typeof TabsDescriptor> & EventProps<typeof TabsCollectionDescriptor>;
+/** Атрибуты набора: класс и стиль — корню, остальное — списку табов с `role="tablist"`. */
+export type TabsAttributes = TDomAttributes<typeof TabsDescriptor, TabsEventProps>;
+/** Пропсы Tabs; коллекционные входы (`engine`, `items`, `trackBy`) — в `ITabsProps`. */
+export type TabsProps = UseDomProps<typeof TabsDescriptor, ITabs, TabsEventProps>;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { TabsContentProps } from './base.component';
+/** Панель таба: рисуется, пока активен таб того же `value`; без такого таба пуста. */
+export declare function TabsContent(props: TabsContentProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { createRootProps } from "../../../adapter/common/root.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { setupTabsContent } from "./setup.component.js";
+import { createComponent, memo } from "solid-js/web";
+//#region src/components/tabs/content/Content.tsx
+/** Панель таба: рисуется, пока активен таб того же `value`; без такого таба пуста. */
+function TabsContent(props) {
+	const binding = setupTabsContent(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.attrs, state.aria],
+		forward: binding.forwardProps()
+	}));
+	return createComponent(Show, {
+		get when() {
+			return memo(() => !!state.rendered)() && state.active;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return renderSlot(props.children);
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { TabsContent };

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

@@ -0,0 +1,7 @@
+import type { ITabsContent } from '@soxa-ui/core';
+import type { TabsCollectionContentDescriptor, TabsContentDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+/** События панели — свои и фасада: активность связанного таба. */
+export type TabsContentEventProps = EventProps<typeof TabsContentDescriptor> & EventProps<typeof TabsCollectionContentDescriptor>;
+/** Пропсы панели: `value` связывает её с табом того же значения. */
+export type TabsContentProps = UseDomProps<typeof TabsContentDescriptor, ITabsContent, TabsContentEventProps>;

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

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

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

@@ -0,0 +1,18 @@
+import type { TabsContentProps } from './base.component';
+/** Панель таба: свой таб по `value` находит лифтом `TTabsContentBindingExtension`. */
+export declare function setupTabsContent(props: TabsContentProps): import("../../../adapter").TJoinedBinding<import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITabsContent<import("@soxa-ui/core").ITabsContentProps, import("@soxa-ui/core").TTabsContentEvents>, {
+    props: object & {} & {} & {
+        id?: string | undefined;
+    } & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {};
+    outputs: object & {} & {} & {} & {};
+}>, TabsContentProps>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTabsContentCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, TabsContentProps>;

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

@@ -0,0 +1,22 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { TTabsContentBindingExtension, TabsCollectionContentDescriptor, TabsContentDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/content/setup.component.ts
+/** Панель таба: свой таб по `value` находит лифтом `TTabsContentBindingExtension`. */
+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);
+}
+//#endregion
+export { setupTabsContent };

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

@@ -0,0 +1,11 @@
+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 declare const Tabs: typeof TabsComponent & {
+    Item: typeof TabsItem;
+    Content: typeof TabsContent;
+};

package/dist/components/tabs/index.js

@@ -0,0 +1,14 @@
+import "./item/setup.component.js";
+import { TabsItem } from "./item/Item.js";
+import "./setup.component.js";
+import { Tabs as Tabs$1 } from "./Tabs.js";
+import "./content/setup.component.js";
+import { TabsContent } from "./content/Content.js";
+import { withParts } from "@soxa-ui/setup";
+//#region src/components/tabs/index.ts
+var Tabs = withParts(Tabs$1, {
+	Item: TabsItem,
+	Content: TabsContent
+});
+//#endregion
+export { Tabs };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { TabsItemProps } from './base.component';
+/**
+ * Таб: строка — Button с `role="tab"` и набором `aria`, крестик — её сосед: интерактивный
+ * потомок у `role="tab"` HTML запрещает. Крестик — `Show`, а не `rendered` кнопки:
+ * тело выполняется сразу, и скрытая кнопка собирала бы у каждого таба свой контекст.
+ */
+export declare function TabsItem(props: TabsItemProps): JSX.Element;

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

@@ -0,0 +1,115 @@
+import { renderSlot, resolveSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { clickAction } from "../../../adapter/common/click-action.js";
+import { createRootProps, toControlAttrs, toRootForward } from "../../../adapter/common/root.js";
+import { roleIcon } from "../../../adapter/common/icon.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { Button } from "../../button/Button.js";
+import { Icon } from "../../icon/Icon.js";
+import { setupTabsItem } from "./setup.component.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/components/tabs/item/Item.tsx
+/** Глиф крестика без слота. */
+var CLOSE = roleIcon("close");
+/**
+* Таб: строка — Button с `role="tab"` и набором `aria`, крестик — её сосед: интерактивный
+* потомок у `role="tab"` HTML запрещает. Крестик — `Show`, а не `rendered` кнопки:
+* тело выполняется сразу, и скрытая кнопка собирала бы у каждого таба свой контекст.
+*/
+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;
+	});
+	const close = clickAction((event) => {
+		event.stopPropagation();
+		context?.adapters.tabs.close();
+	});
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return [createComponent(Button, mergeProps({
+						embedded: "tabs.row",
+						type: "button",
+						get disabled() {
+							return state.disabled;
+						},
+						get size() {
+							return state.size;
+						},
+						get variant() {
+							return state.variant;
+						},
+						get leading() {
+							return renderSlot(props.leading);
+						},
+						get trailing() {
+							return renderSlot(props.trailing);
+						}
+					}, () => state.aria, row, {
+						ref: activate,
+						get children() {
+							return content() ?? state.text;
+						}
+					})), createComponent(Show, {
+						get when() {
+							return state.tab_closable === true;
+						},
+						get children() {
+							return createComponent(Button, mergeProps({
+								embedded: "tabs.close",
+								type: "button",
+								"class": "so-tabs-item__close",
+								get disabled() {
+									return state.disabled;
+								},
+								get size() {
+									return state.size;
+								}
+							}, () => state.closeAria, {
+								ref: close,
+								get children() {
+									return closeIcon() ?? createComponent(Icon, {
+										embedded: "tabs.close-icon",
+										tag: CLOSE,
+										get size() {
+											return state.size;
+										}
+									});
+								}
+							}));
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { TabsItem };

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

@@ -0,0 +1,9 @@
+import type { ITabsItem } from '@soxa-ui/core';
+import type { TabsCollectionItemDescriptor, TabsItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+/** События таба — свои и фасада: активность, порядок, закрываемость. */
+export type TabsItemEventProps = EventProps<typeof TabsItemDescriptor> & EventProps<typeof TabsCollectionItemDescriptor>;
+/** Атрибуты таба: класс и стиль — корню, остальное — строке с `role="tab"`. */
+export type TabsItemAttributes = TDomAttributes<typeof TabsItemDescriptor, TabsItemEventProps>;
+/** Пропсы таба; членство в коллекции (`active`) — в `ITabsItemProps`. */
+export type TabsItemProps = UseDomProps<typeof TabsItemDescriptor, ITabsItem, TabsItemEventProps>;

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

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

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

@@ -0,0 +1,39 @@
+import type { TabsItemProps } from './base.component';
+export declare function setupTabsItem(props: TabsItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").ITabsItem<import("@soxa-ui/core").ITabsItemProps, import("@soxa-ui/core").TTabsItemEvents<any>>, import("@soxa-ui/core").TTabsCollectionExtensions> | undefined;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITabsItem<import("@soxa-ui/core").ITabsItemProps, import("@soxa-ui/core").TTabsItemEvents<any>>;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../../adapter").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITabsItem<import("@soxa-ui/core").ITabsItemProps, import("@soxa-ui/core").TTabsItemEvents<any>>, {
+        props: object & {} & {} & {} & {
+            aria_label?: string | undefined;
+            aria_labelledBy?: string | undefined;
+            aria_describedBy?: string | undefined;
+        } & {} & {
+            id?: string | undefined;
+        } & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {
+            "action:click": (event: MouseEvent) => void;
+            "action:press": (event: MouseEvent) => void;
+            "action:focus": (event: FocusEvent) => void;
+            "action:blur": (event: FocusEvent) => void;
+        } & {
+            "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+            "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+            "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        } & {
+            "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        } & {} & {};
+        outputs: object & {} & {} & {} & {} & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTabsItemCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TabsItemProps>;
+};