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

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

@@ -0,0 +1,47 @@
+import { type TRootReceiver } from '../../adapter';
+import type { TabsProps } from './base.component';
+export declare function setupTabs(getProps: () => TabsProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>, TabsProps, import("../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTabsCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, 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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>>>>;

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

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

package/dist/components/tags/Tags.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { TagsItem } from './item'
+	import { setupTags } from './setup.component'
+	import type { TagsProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: TagsProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupTags(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!--
+	Слот `default` получает показанные теги в scope и петлю заменяет: каждый тег рисуется
+	ровно один раз — вторая отрисовка перетёрла бы его запись в реестре bundles.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag="div"
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	{#if props.children}
+		{@render props.children({ shown: state.shown ?? [] })}
+	{:else}
+		{#each state.shown ?? [] as tag (tag.uid)}
+			{#snippet leading()}{@render props['item-leading']?.({ item: tag })}{/snippet}
+			{#snippet content(scope: { text: string; selected: boolean })}
+				{@render props.item?.({ ...scope, item: tag })}
+			{/snippet}
+			{#snippet trailing()}{@render props['item-trailing']?.({ item: tag })}{/snippet}
+			{#snippet closeIcon()}
+				{@render props['item-close-icon']?.({ item: tag })}
+			{/snippet}
+			<TagsItem
+				ctrl={tag}
+				leading={props['item-leading'] ? leading : undefined}
+				trailing={props['item-trailing'] ? trailing : undefined}
+				close-icon={props['item-close-icon'] ? closeIcon : undefined}
+				children={props.item ? content : undefined}
+			/>
+		{/each}
+	{/if}
+</Dynamic>

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

@@ -0,0 +1,4 @@
+import type { TagsProps } from './base.component';
+declare const Tags: import("svelte").Component<TagsProps, {}, "ref">;
+type Tags = ReturnType<typeof Tags>;
+export default Tags;

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

@@ -0,0 +1,6 @@
+import type { ITags } from '@soxa-ui/core';
+import type { TagsCollectionDescriptor, TagsDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type TagsEventProps = EventProps<typeof TagsDescriptor> & EventProps<typeof TagsCollectionDescriptor>;
+/** Атрибуты — корню: набор тегов и есть ряд с ролью. */
+export type TagsProps = UseDomProps<typeof TagsDescriptor, ITags, TagsEventProps>;

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

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

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

@@ -0,0 +1,6 @@
+export * from './base.component';
+export { setupTags } from './setup.component';
+export * from './item';
+export declare const Tags: import("svelte").Component<import("./base.component").TagsProps, {}, "ref"> & {
+    Item: import("svelte").Component<import("./item").TagsItemProps, {}, "ref">;
+};

package/dist/components/tags/index.js

@@ -0,0 +1,7 @@
+import { withParts } from '@soxa-ui/setup';
+import TagsComponent from './Tags.svelte';
+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/components/tags/item/Item.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toControlAttrs, toRootForward, toRootProps } from '../../../adapter'
+	import { Button } from '../../button'
+	import { ItemRow } from '../../item-row'
+	import { Icon } from '../../icon'
+	import { setupTagsItem } from './setup.component'
+	import type { TagsItemAttributes, TagsItemProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: TagsItemProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupTagsItem(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+
+	const CLOSE = roleIcon('close')
+
+	// По `action:press`, а не клику: строка — `div`, клик из Enter и пробела даёт `TActionPlugin`
+	function toggle(): void {
+		context?.adapters.selection.toggle()
+	}
+
+	// Stopped at the cross: the roots of the tag and the set would give `action:press`,
+	// and the Select field the tags stand in would open its panel
+	const close = clickAction((event) => {
+		event.stopPropagation()
+		context?.adapters.tags.close()
+	})
+</script>
+
+<!--
+	Вид тега рисует корень, а не строка: фон и выбор обязаны покрывать и крестик рядом с ней.
+	Крестик — сосед строки: потомки опции для скринридера презентационны, и его подпись
+	приклеилась бы к названию тега. Строка и крестик вплотную: пробел Svelte оставил бы текстом.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.dataset, state.attrs],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	<ItemRow
+		embedded="tags.row"
+		tag="div"
+		direction={state.direction}
+		disabled={state.disabled}
+		size={state.size}
+		variant={state.variant}
+		leading={props.leading}
+		trailing={props.trailing}
+		onActionPress={toggle}
+		{...state.aria}
+		{...toControlAttrs<TagsItemAttributes>(binding.forwardProps)}
+	>
+		{#if props.children}
+			{@render props.children({
+				text: state.text ?? '',
+				selected: state.selected ?? false,
+			})}
+		{:else}
+			{state.text}
+		{/if}
+	</ItemRow>{#if state.tag_closable === true}<Button
+		embedded="tags.close"
+		type="button"
+		class="so-tags-item__close"
+		disabled={state.disabled}
+		size={state.size}
+		{...state.closeAria}
+		{@attach close}
+	>
+		{#if props['close-icon']}
+			{@render props['close-icon']()}
+		{:else}
+			<Icon embedded="tags.close-icon" tag={CLOSE} size={state.size} />
+		{/if}
+	</Button>{/if}
+</Dynamic>

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

@@ -0,0 +1,4 @@
+import type { TagsItemProps } from './base.component';
+declare const Item: import("svelte").Component<TagsItemProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

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

@@ -0,0 +1,7 @@
+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>;
+export type TagsItemProps = UseDomProps<typeof TagsItemDescriptor, ITagsItem, TagsItemEventProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { TagsItemProps } from './base.component';
+export declare function setupTagsItem(getProps: () => TagsItemProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<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 & {} & {} & {} & {} & {} & {};
+}>, TagsItemProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTagsItemCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, 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 & {} & {} & {} & {} & {} & {};
+}>>>> & {
+    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;
+};

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

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

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

@@ -0,0 +1,47 @@
+import { type TRootReceiver } from '../../adapter';
+import type { TagsProps } from './base.component';
+export declare function setupTags(getProps: () => TagsProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<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 & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>, TagsProps, import("../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TTagsCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, 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 & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>>>>;

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

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

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

@@ -0,0 +1,5 @@
+import type { ITextable } from '@soxa-ui/core';
+import type { TextableDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type TextableEventProps = EventProps<typeof TextableDescriptor>;
+export type TextableProps = UseProps<typeof TextableDescriptor, ITextable, TextableEventProps>;

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

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

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

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

package/dist/components/textable/index.js

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

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

@@ -0,0 +1,42 @@
+import type { TextableProps } from './base.component';
+export declare function setupTextable(getProps: () => TextableProps, mountId: string): 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, import("@soxa-ui/setup").TAdapterState<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 & {} & {} & {} & {};
+}>>>;

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

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

package/dist/components/textarea/Textarea.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Dynamic, textareaText, toControlAttrs, toRootForward, toRootProps } from '../../adapter'
+	import { setupTextarea } from './setup.component'
+	import type { TextareaAttributes, TextareaProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: TextareaProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupTextarea(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+
+	// `value` поля — для сервера, там он становится содержимым `<textarea>`; в браузере пуст
+	const text = textareaText(() => state.value)
+</script>
+
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.dataset],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	<textarea
+		id={state.id}
+		name={state.name}
+		rows={state.rows}
+		maxlength={state.maxlength}
+		disabled={state.disabled}
+		readonly={state.readonly}
+		required={state.required}
+		placeholder={state.placeholder}
+		{...state.aria}
+		{...toControlAttrs<TextareaAttributes>(binding.forwardProps)}
+		{...text.attributes}
+		value={text.value}
+	></textarea>{#if state.counter}<div class="so-textarea__counter" {...state.counterAria}>
+			{state.names_counter}
+		</div>{/if}
+</Dynamic>

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

@@ -0,0 +1,4 @@
+import type { TextareaProps } from './base.component';
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -0,0 +1,7 @@
+import type { ITextarea } from '@soxa-ui/core';
+import type { TextareaDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TTextareaAttributes, UseDomProps } from '../../types';
+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/base.component.js

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

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

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

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,55 @@
+import { type TRootReceiver } from '../../adapter';
+import type { TextareaProps } from './base.component';
+export declare function setupTextarea(getProps: () => TextareaProps, mountId: string, receive: TRootReceiver): 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, import("@soxa-ui/setup").TAdapterState<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;
+    } & {} & {};
+}>>>;

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

@@ -0,0 +1,11 @@
+import { TextareaDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSvelteAdapterContext, useAdapter, useElevator, } from '../../adapter';
+export function setupTextarea(getProps, mountId, receive) {
+    const elevator = useElevator();
+    const adapter = createSvelteAdapterContext(TextareaDescriptor(), {
+        ctrl: getProps().ctrl,
+        props: getProps(),
+        mountId,
+    }).use(TFieldControlExtension, { elevator });
+    return useAdapter(adapter, getProps, receive);
+}