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

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

@@ -0,0 +1,24 @@
+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, TabsCollectionItemDescriptor, TabsItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/item/setup.component.ts
+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
+	};
+}
+//#endregion
+export { setupTabsItem };

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

@@ -0,0 +1,35 @@
+import type { TabsProps } from './base.component';
+export declare function setupTabs(props: TabsProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITabs;
+    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").ITabs, {
+        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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTabsCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TabsProps>;
+};

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

@@ -0,0 +1,27 @@
+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, TDragAndDropCollectionExtension, TabsCollectionDescriptor, TabsDescriptor } from "@soxa-ui/setup";
+//#region src/components/tabs/setup.component.ts
+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
+	};
+}
+//#endregion
+export { setupTabs };

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'solid-js';
+import type { TagsProps } from './base.component';
+/**
+ * Набор тегов: корень — сам ряд с ролью. Слот `default` (scope `shown`) заменяет
+ * петлю тегов: каждый тег рисуется один раз.
+ */
+export declare function Tags(props: TagsProps): JSX.Element;

package/dist/components/tags/Tags.js

@@ -0,0 +1,76 @@
+import { relaySlot, renderSlot } from "../../adapter/common/slots.js";
+import { For, Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { createRootProps } from "../../adapter/common/root.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { TagsItem } from "./item/Item.js";
+import { setupTags } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+//#region src/components/tags/Tags.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/**
+* Набор тегов: корень — сам ряд с ролью. Слот `default` (scope `shown`) заменяет
+* петлю тегов: каждый тег рисуется один раз.
+*/
+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 createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			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 createComponent(ResolvedSlot, {
+						get content() {
+							return props.children;
+						},
+						scope: () => ({ shown: state.shown ?? [] }),
+						get fallback() {
+							return createComponent(For, {
+								get each() {
+									return state.shown;
+								},
+								children: (item) => createComponent(TagsItem, {
+									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 });
+									}
+								})
+							});
+						}
+					});
+				}
+			}));
+			return _el$;
+		}
+	});
+}
+//#endregion
+export { Tags };

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

@@ -0,0 +1,7 @@
+import type { ITags } from '@soxa-ui/core';
+import type { TagsCollectionDescriptor, TagsDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События Tags — свои и фасада коллекции. */
+export type TagsEventProps = EventProps<typeof TagsDescriptor> & EventProps<typeof TagsCollectionDescriptor>;
+/** Пропсы Tags; коллекционные входы несёт интерфейс ядра (`ITagsProps`). */
+export type TagsProps = UseDomProps<typeof TagsDescriptor, ITags, TagsEventProps>;

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

@@ -0,0 +1,8 @@
+import { Tags as TagsComponent } from './Tags';
+import { TagsItem } from './item';
+export * from './base.component';
+export { setupTags } from './setup.component';
+export * from './item';
+export declare const Tags: typeof TagsComponent & {
+    Item: typeof TagsItem;
+};

package/dist/components/tags/index.js

@@ -0,0 +1,9 @@
+import "./item/setup.component.js";
+import { TagsItem } from "./item/Item.js";
+import "./setup.component.js";
+import { Tags as Tags$1 } from "./Tags.js";
+import { withParts } from "@soxa-ui/setup";
+//#region src/components/tags/index.ts
+var Tags = withParts(Tags$1, { Item: TagsItem });
+//#endregion
+export { Tags };

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import type { TagsItemProps } from './base.component';
+/**
+ * Тег: строка — `ItemRow` на `div` с набором `aria`, кнопка закрытия — её сосед:
+ * потомки опции скринридеру презентационны. Выбор — по `press` строки: на клик
+ * выключенный тег выбирался бы. Крестик — `Show`, а не `rendered` кнопки: скрытая
+ * кнопка собирала бы у каждого тега свой контекст.
+ */
+export declare function TagsItem(props: TagsItemProps): JSX.Element;

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

@@ -0,0 +1,118 @@
+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 { ItemRow } from "../../item-row/ItemRow.js";
+import { setupTagsItem } from "./setup.component.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/components/tags/item/Item.tsx
+/** Глиф крестика без слота — компонент на роль: `tag` у Icon — корень, а не роль. */
+var CLOSE = roleIcon("close");
+/**
+* Тег: строка — `ItemRow` на `div` с набором `aria`, кнопка закрытия — её сосед:
+* потомки опции скринридеру презентационны. Выбор — по `press` строки: на клик
+* выключенный тег выбирался бы. Крестик — `Show`, а не `rendered` кнопки: скрытая
+* кнопка собирала бы у каждого тега свой контекст.
+*/
+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 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(ItemRow, mergeProps({
+						embedded: "tags.row",
+						tag: "div",
+						get direction() {
+							return state.direction;
+						},
+						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);
+						},
+						onActionPress: toggle
+					}, () => state.aria, row, { get children() {
+						return content() ?? state.text;
+					} })), createComponent(Show, {
+						get when() {
+							return state.tag_closable === true;
+						},
+						get children() {
+							return createComponent(Button, mergeProps({
+								embedded: "tags.close",
+								type: "button",
+								"class": "so-tags-item__close",
+								get disabled() {
+									return state.disabled;
+								},
+								get size() {
+									return state.size;
+								}
+							}, () => state.closeAria, {
+								ref: close,
+								get children() {
+									return closeIcon() ?? createComponent(Icon, {
+										embedded: "tags.close-icon",
+										tag: CLOSE,
+										get size() {
+											return state.size;
+										}
+									});
+								}
+							}));
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { TagsItem };

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

@@ -0,0 +1,9 @@
+import type { ITagsItem } from '@soxa-ui/core';
+import type { TagsCollectionItemDescriptor, TagsItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+/** События тега — свои (ядро и плагины) и фасада: выбор, порядок, закрываемость. */
+export type TagsItemEventProps = EventProps<typeof TagsItemDescriptor> & EventProps<typeof TagsCollectionItemDescriptor>;
+/** Атрибуты тега: класс и стиль — корню, остальное — строке. */
+export type TagsItemAttributes = TDomAttributes<typeof TagsItemDescriptor, TagsItemEventProps>;
+/** Пропсы тега; членство в коллекции (`selected`) несёт интерфейс ядра. */
+export type TagsItemProps = UseDomProps<typeof TagsItemDescriptor, ITagsItem, TagsItemEventProps>;

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

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

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

@@ -0,0 +1,35 @@
+import type { TagsItemProps } from './base.component';
+export declare function setupTagsItem(props: TagsItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").ITagsItem<import("@soxa-ui/core").ITagsItemProps, import("@soxa-ui/core").TTagsItemEvents>, import("@soxa-ui/core").TTagsCollectionExtensions> | undefined;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITagsItem<import("@soxa-ui/core").ITagsItemProps, import("@soxa-ui/core").TTagsItemEvents>;
+    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").ITagsItem<import("@soxa-ui/core").ITagsItemProps, import("@soxa-ui/core").TTagsItemEvents>, {
+        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 & {} & {} & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTagsItemCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TagsItemProps>;
+};

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

@@ -0,0 +1,24 @@
+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, TagsCollectionItemDescriptor, TagsItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/tags/item/setup.component.ts
+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
+	};
+}
+//#endregion
+export { setupTagsItem };

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

@@ -0,0 +1,35 @@
+import type { TagsProps } from './base.component';
+export declare function setupTags(props: TagsProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").ITags<import("@soxa-ui/core").ITagsProps, import("@soxa-ui/core").TTagsEvents>;
+    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").ITags<import("@soxa-ui/core").ITagsProps, import("@soxa-ui/core").TTagsEvents>, {
+        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 & {} & {} & {} & {} & {} & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTagsCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<TagsProps>;
+};

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

@@ -0,0 +1,27 @@
+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, TagsCollectionDescriptor, TagsDescriptor } from "@soxa-ui/setup";
+//#region src/components/tags/setup.component.ts
+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
+	};
+}
+//#endregion
+export { setupTags };

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

@@ -0,0 +1,6 @@
+import type { ITextable } from '@soxa-ui/core';
+import type { TextableDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+/** События слоя Textable (core + плагины), выведены из дескриптора автоматически. */
+export type TextableEventProps = EventProps<typeof TextableDescriptor>;
+export type TextableProps = UseProps<typeof TextableDescriptor, ITextable, TextableEventProps>;

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

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

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

@@ -0,0 +1,22 @@
+import type { TextableProps } from './base.component';
+export declare function setupTextable(props: TextableProps): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITextable<import("@soxa-ui/core").ITextableProps, import("@soxa-ui/core").TTextableEvents>, {
+    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 & {} & {} & {} & {};
+}>, TextableProps>;

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { TextareaProps } from './base.component';
+/** Многострочное поле: `<textarea>` внутри корня, под ним — счётчик символов при `counter`. */
+export declare function Textarea(props: TextareaProps): JSX.Element;

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,84 @@
+import { Show } from "../../adapter/runtime/flow.js";
+import { createPartProps, createRootProps, toControlAttrs, toRootForward } from "../../adapter/common/root.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { textareaText } from "../../adapter/runtime/field-text.js";
+import { setupTextarea } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/textarea/Textarea.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<textarea>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class=so-textarea__counter>`);
+/** Многострочное поле: `<textarea>` внутри корня, под ним — счётчик символов при `counter`. */
+function Textarea(props) {
+	const binding = setupTextarea(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()));
+	const counterAria = createPartProps(() => state.counterAria);
+	const text = textareaText(() => state.value);
+	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 [(() => {
+						var _el$ = _tmpl$();
+						spread(_el$, mergeProps({
+							get id() {
+								return state.id;
+							},
+							get name() {
+								return state.name;
+							},
+							get rows() {
+								return state.rows;
+							},
+							get maxlength() {
+								return state.maxlength;
+							},
+							get disabled() {
+								return state.disabled;
+							},
+							get readonly() {
+								return state.readonly;
+							},
+							get required() {
+								return state.required;
+							},
+							get placeholder() {
+								return state.placeholder;
+							}
+						}, aria, control, text), false, false);
+						return _el$;
+					})(), createComponent(Show, {
+						get when() {
+							return state.counter;
+						},
+						get children() {
+							var _el$2 = _tmpl$2();
+							spread(_el$2, mergeProps(counterAria), false, true);
+							insert(_el$2, () => state.names_counter);
+							return _el$2;
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Textarea };

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

@@ -0,0 +1,8 @@
+import type { ITextarea } from '@soxa-ui/core';
+import type { TextareaDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TTextareaAttributes, UseDomProps } from '../../types';
+/** События слоя Textarea (core + плагины), выведены из дескриптора автоматически. */
+export type TextareaEventProps = EventProps<typeof TextareaDescriptor>;
+/** Атрибуты Textarea: класс и стиль — корню, остальное — полю `<textarea>`. */
+export type TextareaAttributes = TDomAttributes<typeof TextareaDescriptor, TextareaEventProps, TTextareaAttributes>;
+export type TextareaProps = UseDomProps<typeof TextareaDescriptor, ITextarea, TextareaEventProps, TTextareaAttributes>;

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupTextarea } from './setup.component';
+export { Textarea } from './Textarea';

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

@@ -0,0 +1,28 @@
+import type { TextareaProps } from './base.component';
+export declare function setupTextarea(props: TextareaProps): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ITextarea, {
+    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 & {} & {} & {} & {} & {} & {} & {} & {
+        readonly names_counter: string;
+    } & {} & {};
+}>, TextareaProps>;