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

package/dist/components/date-picker/setup.component.d.ts

@@ -0,0 +1,83 @@
+import { type TRootReceiver } from '../../adapter';
+import type { DatePickerProps } from './base.component';
+export declare function setupDatePicker(getProps: () => DatePickerProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDatePicker, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: string | undefined;
+    } & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | 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;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {} & {
+        readonly names_start: string;
+        readonly names_end: string;
+        readonly names_confirm: string;
+        readonly names_cancel: string;
+    };
+}>, DatePickerProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDatePicker, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: string | undefined;
+    } & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | 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;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {} & {
+        readonly names_start: string;
+        readonly names_end: string;
+        readonly names_confirm: string;
+        readonly names_cancel: string;
+    };
+}>>>;

package/dist/components/date-picker/setup.component.js

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

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { TAttributesMap } from '@soxa-ui/core'
+	import { clickAction, Dynamic, Teleport, roleIcon, toRootProps, toShownStyleText } from '../../adapter'
+	import { Button } from '../button'
+	import { Icon } from '../icon'
+	import { setupDialog } from './setup.component'
+	import type { DialogProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: DialogProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupDialog(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+	const toggleMaximized = clickAction(() => ctrl.toggleMaximized())
+	const close = clickAction(() => ctrl.requestClose('button'))
+
+	// Первым, под наборами ядра: фокус встаёт на панель, когда внутри нечего фокусировать
+	const PANEL: TAttributesMap = { tabindex: '-1' }
+
+	const CLOSE = roleIcon('close')
+	const MAXIMIZE = roleIcon('arrowsOutward')
+	const RESTORE = roleIcon('arrowsInward')
+</script>
+
+<!--
+	The backdrop and the panel are siblings, the backdrop first: they share one layer, and the panel
+	is on top just by order. Order in the panel — title, body, footer, buttons: the cross is the last
+	Tab stop. The buttons are mounted only while on (`{#if}`): the theme relies on their absence
+	from the DOM, and a hidden button would still assemble its instance and plugins. The nodes are
+	glued: Svelte would keep a space as text, and the theme collapses an empty title and footer by
+	`:empty`.
+-->
+{#if state.rendered}
+	<Teleport to={state.target}>
+		<div
+			class="so-dialog__backdrop"
+			style={toShownStyleText(state.layout_backdropStyles, state.visible === true)}
+			{...state.backdropDataset}
+		></div><Dynamic
+			rendered
+			tag={state.tag}
+			attributes={toRootProps(
+				state,
+				[PANEL, state.attrs, state.aria, state.dataset, state.dismiss_ownerAttribute],
+				binding.forwardProps,
+			)}
+			attach={binding.attachElement}
+		>
+			<h2 class="so-dialog__title" {...state.titleAria}>{@render props.title?.()}</h2><div
+				class="so-dialog__body"
+				{...state.bodyAria}
+			>
+				{@render props.children?.()}
+			</div><div class="so-dialog__footer">{@render props.footer?.()}</div>{#if state.maximizable}
+				<Button
+					embedded="dialog.maximize"
+					type="button"
+					class="so-dialog__maximize"
+					{@attach toggleMaximized}
+					{...state.maximizeAria}
+				>
+					{#if state.maximized}
+						{#if props['restore-icon']}
+							{@render props['restore-icon']()}
+						{:else}
+							<Icon embedded="dialog.restore-icon" tag={RESTORE} />
+						{/if}
+					{:else if props['maximize-icon']}
+						{@render props['maximize-icon']()}
+					{:else}
+						<Icon embedded="dialog.maximize-icon" tag={MAXIMIZE} />
+					{/if}
+				</Button>{/if}{#if state.closable}
+				<Button
+					embedded="dialog.close"
+					type="button"
+					class="so-dialog__close"
+					{@attach close}
+					{...state.closeAria}
+				>
+					{#if props['close-icon']}
+						{@render props['close-icon']()}
+					{:else}
+						<Icon embedded="dialog.close-icon" tag={CLOSE} />
+					{/if}
+				</Button>{/if}
+		</Dynamic>
+	</Teleport>
+{/if}

package/dist/components/dialog/Dialog.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IDialog } from '@soxa-ui/core';
+import type { DialogDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DialogEventProps = EventProps<typeof DialogDescriptor>;
+/** Атрибуты — панели: подложка — её сосед без экземпляра. */
+export type DialogProps = UseDomProps<typeof DialogDescriptor, IDialog, DialogEventProps>;

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

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

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

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

package/dist/components/dialog/index.js

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

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

@@ -0,0 +1,57 @@
+import { type TRootReceiver } from '../../adapter';
+import type { DialogProps } from './base.component';
+export declare function setupDialog(getProps: () => DialogProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDialog, {
+    props: object & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "layout:offset:before": (e: import("@soxa-ui/plugins").TDialogOffsetEvent) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {};
+}>, DialogProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDialog, {
+    props: object & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "layout:offset:before": (e: import("@soxa-ui/plugins").TDialogOffsetEvent) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {};
+}>>>;

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

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

package/dist/components/drag-and-drop/DragAndDrop.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { setupDragAndDrop } from './setup.component'
+	import type { DragAndDropProps } from './base.component'
+
+	const props: DragAndDropProps = $props()
+	const mountId = $props.id()
+
+	setupDragAndDrop(() => props, mountId)
+</script>
+
+<!-- Своего узла нет: экземпляр обёртки коллекция в детях подхватывает лифтом. -->
+{@render props.children?.()}

package/dist/components/drag-and-drop/DragAndDrop.svelte.d.ts

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

package/dist/components/drag-and-drop/base.component.d.ts

@@ -0,0 +1,6 @@
+import type { IDragAndDrop } from '@soxa-ui/core';
+import type { DragAndDropDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type DragAndDropEventProps = EventProps<typeof DragAndDropDescriptor>;
+/** Без атрибутов и `ref`: своего узла у обёртки нет. */
+export type DragAndDropProps = UseProps<typeof DragAndDropDescriptor, IDragAndDrop, DragAndDropEventProps>;

package/dist/components/drag-and-drop/base.component.js

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

package/dist/components/drag-and-drop/index.d.ts

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

package/dist/components/drag-and-drop/index.js

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

package/dist/components/drag-and-drop/setup.component.d.ts

@@ -0,0 +1,10 @@
+import type { DragAndDropProps } from './base.component';
+export declare function setupDragAndDrop(getProps: () => DragAndDropProps, mountId: string): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDragAndDrop, {
+    props: object;
+    events: object;
+    outputs: object;
+}>, DragAndDropProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDragAndDrop, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>>;

package/dist/components/drag-and-drop/setup.component.js

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

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { TAttributesMap } from '@soxa-ui/core'
+	import { clickAction, Dynamic, Teleport, roleIcon, toRootProps, toShownStyleText } from '../../adapter'
+	import { Button } from '../button'
+	import { Icon } from '../icon'
+	import { setupDrawer } from './setup.component'
+	import type { DrawerProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: DrawerProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupDrawer(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+	const close = clickAction(() => ctrl.requestClose('button'))
+
+	// Первым, под наборами ядра: фокус встаёт на панель, когда внутри нечего фокусировать
+	const PANEL: TAttributesMap = { tabindex: '-1' }
+
+	const CLOSE = roleIcon('close')
+</script>
+
+<!--
+	The backdrop and the panel are siblings, the backdrop first: they share one layer, and the panel
+	is on top just by order. Order in the panel — gesture handle, title, body, footer, cross: it is
+	the last Tab stop. The cross is mounted only while on (`{#if}`): the theme relies on its
+	absence from the DOM, and a hidden button would still assemble its instance and plugins. The
+	nodes are glued: Svelte would keep a space as text, and the theme collapses an empty title and
+	footer by `:empty`.
+-->
+{#if state.rendered}
+	<Teleport to={state.target} disabled={state.contained}>
+		<div
+			class="so-drawer__backdrop"
+			style={toShownStyleText(state.layout_backdropStyles, state.visible === true)}
+			{...state.backdropDataset}
+		></div><Dynamic
+			rendered
+			tag={state.tag}
+			attributes={toRootProps(
+				state,
+				[PANEL, state.attrs, state.aria, state.dataset, state.dismiss_ownerAttribute],
+				binding.forwardProps,
+			)}
+			attach={binding.attachElement}
+		>
+			{#if state.handleRendered}
+				<div class="so-drawer__handle" aria-hidden="true"></div>
+			{/if}<h2 class="so-drawer__title" {...state.titleAria}>{@render props.title?.()}</h2><div
+				class="so-drawer__body"
+			>
+				{@render props.children?.()}
+			</div><div class="so-drawer__footer">{@render props.footer?.()}</div>{#if state.closable}
+				<Button
+					embedded="drawer.close"
+					type="button"
+					class="so-drawer__close"
+					{@attach close}
+					{...state.closeAria}
+				>
+					{#if props['close-icon']}
+						{@render props['close-icon']()}
+					{:else}
+						<Icon embedded="drawer.close-icon" tag={CLOSE} />
+					{/if}
+				</Button>{/if}
+		</Dynamic>
+	</Teleport>
+{/if}

package/dist/components/drawer/Drawer.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IDrawer } from '@soxa-ui/core';
+import type { DrawerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DrawerEventProps = EventProps<typeof DrawerDescriptor>;
+/** Атрибуты — панели: подложка — её сосед без экземпляра. */
+export type DrawerProps = UseDomProps<typeof DrawerDescriptor, IDrawer, DrawerEventProps>;

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

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

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

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

package/dist/components/drawer/index.js

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

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

@@ -0,0 +1,57 @@
+import { type TRootReceiver } from '../../adapter';
+import type { DrawerProps } from './base.component';
+export declare function setupDrawer(getProps: () => DrawerProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDrawer, {
+    props: object & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {} & {};
+}>, DrawerProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDrawer, {
+    props: object & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {} & {};
+}>>>;

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

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

package/dist/components/field/Field.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Dynamic, roleIcon, toRootProps } from '../../adapter'
+	import { Icon } from '../icon'
+	import { setupField } from './setup.component'
+	import type { FieldProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: FieldProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupField(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+
+	const ERROR = roleIcon('error')
+</script>
+
+<!--
+	Field — порядок частей один на все стороны, сторону рисует тема. Часть стоит, пока задан
+	её текст: ссылки контрола на части ставит ядро, а слотов оно не видит. Текст ошибки — в
+	своей обёртке: ряд из значка и текста — флекс. Пробелы по краям блока Svelte срезает сам.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	{#if state.label}
+		<label class="so-field__label" {...state.labelAria}>
+			{#if props['label-content']}
+				{@render props['label-content']()}
+			{:else}
+				{state.label}
+			{/if}
+		</label>{/if}<div class="so-field__control">{@render props.children?.()}</div>{#if state.helperRendered}
+		<div class="so-field__helper" {...state.helperAria}>
+			{#if props['helper-content']}
+				{@render props['helper-content']()}
+			{:else}
+				{state.helper}
+			{/if}
+		</div>{/if}{#if state.errorRendered}
+		<div class="so-field__error" {...state.errorAria}>
+			<Icon embedded="field.error-icon" class="so-field__error-icon" tag={ERROR} /><div
+				class="so-field__error-text"
+			>
+				{#if props['error-content']}
+					{@render props['error-content']()}
+				{:else}
+					{state.error}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</Dynamic>

package/dist/components/field/Field.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { IField } from '@soxa-ui/core';
+import type { FieldDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type FieldEventProps = EventProps<typeof FieldDescriptor>;
+export type FieldProps = UseDomProps<typeof FieldDescriptor, IField, FieldEventProps>;

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

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

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

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

package/dist/components/field/index.js

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

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

@@ -0,0 +1,17 @@
+import { type TRootReceiver } from '../../adapter';
+import type { FieldProps } from './base.component';
+export declare function setupField(getProps: () => FieldProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IField, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {};
+    outputs: object & {} & {} & {};
+}>, FieldProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IField, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {};
+    outputs: object & {} & {} & {};
+}>>>;

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

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