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

package/dist/source/components/date-picker/DatePicker.jsx

@@ -0,0 +1,86 @@
+import { Elevate, ResolvedSlot, clickAction, createRootProps, roleIcon } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Calendar } from '../calendar';
+import { DateInput } from '../date-input';
+import { Frame } from '../frame';
+import { Icon } from '../icon';
+import { setupDatePicker } from './setup.component';
+/** Глифы кнопок — компоненты на роль: `tag` у Icon — корень, а не роль. */
+const CloseGlyph = roleIcon('close');
+const CalendarGlyph = roleIcon('calendar');
+/**
+ * Поле даты и календарь в панели, как Select — поле и список. Подвал календаря задан
+ * значением только при `confirmable`: `Show` в слоте оставил бы пустую строку подвала.
+ */
+export function DatePicker(props) {
+    const binding = setupDatePicker(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.rootAria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    /** Clears by the DatePicker's command; the click does not bubble to an ancestor that listens to the field. */
+    const clear = clickAction((event) => {
+        event.stopPropagation();
+        ctrl.clear();
+    });
+    const cancel = clickAction(() => {
+        ctrl.open = false;
+    });
+    const confirm = clickAction(() => ctrl.confirm());
+    /** Встроенная кнопка очистки — по `clearable`. */
+    const clearButton = () => (<Show when={state.clearable}>
+			<Button embedded="date-picker.clear" type="button" class="so-date-picker__clear" size={state.size} disabled={state.disabled} {...state.clearAria} ref={clear}>
+				<Icon embedded="date-picker.clear-icon" tag={CloseGlyph} size={state.size}/>
+			</Button>
+		</Show>);
+    /**
+     * Очистка — своя кнопка из слота `clear` с командой DatePicker в scope или встроенная.
+     * Полю уходит готовыми узлами: функцию слота поле позвало бы со своей командой `clear`.
+     */
+    const clearSlot = () => (<ResolvedSlot content={props.clear} scope={() => ({ clear: ctrl.clear })} fallback={clearButton()}/>);
+    /** Кнопка календаря: связка с панелью, вид «нажат», значок — слот `trigger-icon`. */
+    const trigger = () => (<Button embedded="date-picker.trigger" type="button" class="so-date-picker__trigger" size={state.size} disabled={!state.openable} {...state.triggerAria} {...state.triggerDataset}>
+			<ResolvedSlot content={props['trigger-icon']} fallback={<Icon embedded="date-picker.trigger-icon" tag={CalendarGlyph}/>}/>
+		</Button>);
+    /** Одна дата: поле с именем DatePicker, очистка и кнопка календаря — в его слотах. */
+    const single = () => (<DateInput embedded="date-picker.field" class="so-date-picker__field" ctrl={ctrl.field} aria_label={props.aria_label} aria_labelledBy={props.aria_labelledBy} aria_describedBy={props.aria_describedBy} {...state.aria} clear={clearSlot()} trailing={trigger()}/>);
+    /** Диапазон: поля концов через тире, очистка периода и кнопка календаря. */
+    const range = () => (<>
+			<DateInput embedded="date-picker.start" class="so-date-picker__start" ctrl={ctrl.start} aria_label={state.names_start}/>
+			<span class="so-date-picker__dash" aria-hidden="true">
+				–
+			</span>
+			<DateInput embedded="date-picker.end" class="so-date-picker__end" ctrl={ctrl.end} aria_label={state.names_end}/>
+			{clearSlot()}
+			{trigger()}
+		</>);
+    /** Подвал календаря: «Отмена», затем «OK». Задан он, только пока `confirmable`. */
+    const footer = () => (<>
+			<Button embedded="date-picker.cancel" type="button" class="so-date-picker__cancel" size={state.size} text={state.names_cancel} ref={cancel}/>
+			<Button embedded="date-picker.confirm" type="button" class="so-date-picker__confirm" size={state.size} disabled={state.confirmDisabled} text={state.names_confirm} ref={confirm}/>
+		</>);
+    return (<Show when={state.rendered}>
+			<div id={state.id} {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<Show when={state.mode === 'single'} fallback={range()}>
+						{single()}
+					</Show>
+					<Frame embedded="date-picker.frame" class="so-date-picker__panel" tabindex="-1" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_offset={4} {...state.panelAria} {...state.panelDataset} {...state.dismiss_ownerAttribute}>
+						<Show when={state.handleRendered}>
+							<div class="so-date-picker__handle" aria-hidden="true"/>
+						</Show>
+						{/* The calendar from the panel's first opening on (`contentRendered`) */}
+						<div class="so-date-picker__content">
+							<Show when={state.contentRendered}>
+								<Calendar embedded="date-picker.calendar" class="so-date-picker__calendar" ctrl={binding.calendar} engine={binding.engine} item={props.item} footer={state.confirmable && footer()}/>
+							</Show>
+						</div>
+					</Frame>
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/date-picker/base.component.js

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

package/dist/source/components/date-picker/index.js

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

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

@@ -0,0 +1,21 @@
+import { DatePickerDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+/**
+ * DatePicker takes the `Field` link for itself and lowers an empty one to its
+ * content. A mode's fields the markup reads from the instance in that mode's
+ * branch: the core creates a field when its mode needs it.
+ */
+export function setupDatePicker(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(DatePickerDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    const picker = adapter.instance;
+    return {
+        ...useAdapter(adapter, props),
+        layer,
+        calendar: picker.calendar,
+        engine: picker.engine,
+    };
+}

package/dist/source/components/dialog/Dialog.jsx

@@ -0,0 +1,67 @@
+import { Root, Teleport, clickAction, createPartProps, createRootProps, renderSlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupDialog } from './setup.component';
+/** Иконки кнопок шапки по умолчанию. */
+const CLOSE = roleIcon('close');
+const MAXIMIZE = roleIcon('arrowsOutward');
+const RESTORE = roleIcon('arrowsInward');
+/** Класс подложки — её разметка: своего экземпляра у подложки нет. */
+const BACKDROP = ['so-dialog__backdrop'];
+/**
+ * Модальное окно: подложка и панель — соседи в телепорте, подложка раньше; корень — панель.
+ * Кнопки шапки — после подвала: в строку заголовка их переносит тема.
+ */
+export function Dialog(props) {
+    const binding = setupDialog(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const toggleMaximized = clickAction(() => ctrl.toggleMaximized());
+    const close = clickAction(() => ctrl.requestClose('button'));
+    const backdrop = createRootProps(() => ({
+        state: {
+            classes: BACKDROP,
+            layout_styles: state.layout_backdropStyles,
+            visible: state.visible,
+        },
+        sets: [state.backdropDataset],
+        forward: {},
+    }));
+    const panel = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset, state.dismiss_ownerAttribute],
+        forward: binding.forwardProps(),
+    }));
+    const titleAria = createPartProps(() => state.titleAria);
+    const bodyAria = createPartProps(() => state.bodyAria);
+    const maximizeIcon = resolveSlot(() => props['maximize-icon'], () => ({}));
+    const restoreIcon = resolveSlot(() => props['restore-icon'], () => ({}));
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    return (<Show when={state.rendered}>
+			<Teleport to={state.target}>
+				<div {...backdrop()}/>
+				<Root tag={state.tag} attributes={() => ({ tabindex: '-1', ...panel() })} ref={binding.ref}>
+					<h2 class="so-dialog__title" {...titleAria()}>
+						{renderSlot(props.title)}
+					</h2>
+					<div class="so-dialog__body" {...bodyAria()}>
+						{renderSlot(props.children)}
+					</div>
+					<div class="so-dialog__footer">{renderSlot(props.footer)}</div>
+					<Show when={state.maximizable}>
+						<Button embedded="dialog.maximize" type="button" class="so-dialog__maximize" ref={toggleMaximized} {...state.maximizeAria}>
+							<Show when={state.maximized} fallback={maximizeIcon() ?? (<Icon embedded="dialog.maximize-icon" tag={MAXIMIZE}/>)}>
+								{restoreIcon() ?? (<Icon embedded="dialog.restore-icon" tag={RESTORE}/>)}
+							</Show>
+						</Button>
+					</Show>
+					<Show when={state.closable}>
+						<Button embedded="dialog.close" type="button" class="so-dialog__close" ref={close} {...state.closeAria}>
+							{closeIcon() ?? <Icon embedded="dialog.close-icon" tag={CLOSE}/>}
+						</Button>
+					</Show>
+				</Root>
+			</Teleport>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/drag-and-drop/DragAndDrop.jsx

@@ -0,0 +1,7 @@
+import { Elevate, renderSlot } from '../../adapter';
+import { setupDragAndDrop } from './setup.component';
+/** Перестановка элементов коллекций внутри жестом; своего узла нет — только дети в слое лифта. */
+export function DragAndDrop(props) {
+    const binding = setupDragAndDrop(props);
+    return <Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>;
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { DragAndDropDescriptor, TDragAndDropExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+/** Узла у обёртки нет: `useAdapter` — ради событий перестановки, `ref` не отдаётся. */
+export function setupDragAndDrop(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(DragAndDropDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TDragAndDropExtension, { elevator });
+    const binding = useAdapter(adapter, props);
+    return { ctrl: binding.ctrl, state: binding.state, layer };
+}

package/dist/source/components/drawer/Drawer.jsx

@@ -0,0 +1,52 @@
+import { Root, Teleport, clickAction, createPartProps, createRootProps, renderSlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupDrawer } from './setup.component';
+/** Иконка кнопки закрытия по умолчанию. */
+const CLOSE = roleIcon('close');
+/** Класс подложки — её разметка: своего экземпляра у подложки нет. */
+const BACKDROP = ['so-drawer__backdrop'];
+/** Выезжающая панель: подложка и панель — соседи в телепорте, подложка раньше; корень — панель. */
+export function Drawer(props) {
+    const binding = setupDrawer(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const close = clickAction(() => ctrl.requestClose('button'));
+    const backdrop = createRootProps(() => ({
+        state: {
+            classes: BACKDROP,
+            layout_styles: state.layout_backdropStyles,
+            visible: state.visible,
+        },
+        sets: [state.backdropDataset],
+        forward: {},
+    }));
+    const panel = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset, state.dismiss_ownerAttribute],
+        forward: binding.forwardProps(),
+    }));
+    const titleAria = createPartProps(() => state.titleAria);
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    return (<Show when={state.rendered}>
+			<Teleport to={state.target} disabled={state.contained}>
+				<div {...backdrop()}/>
+				<Root tag={state.tag} attributes={() => ({ tabindex: '-1', ...panel() })} ref={binding.ref}>
+					<Show when={state.handleRendered}>
+						<div class="so-drawer__handle" aria-hidden="true"/>
+					</Show>
+					<h2 class="so-drawer__title" {...titleAria()}>
+						{renderSlot(props.title)}
+					</h2>
+					<div class="so-drawer__body">{renderSlot(props.children)}</div>
+					<div class="so-drawer__footer">{renderSlot(props.footer)}</div>
+					<Show when={state.closable}>
+						<Button embedded="drawer.close" type="button" class="so-drawer__close" ref={close} {...state.closeAria}>
+							{closeIcon() ?? <Icon embedded="drawer.close-icon" tag={CLOSE}/>}
+						</Button>
+					</Show>
+				</Root>
+			</Teleport>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/field/Field.jsx

@@ -0,0 +1,48 @@
+import { Elevate, Root, createPartProps, createRootProps, renderSlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Icon } from '../icon';
+import { setupField } from './setup.component';
+/** Значок ошибки — компонент на роль: `tag` у Icon — корень, а не роль. */
+const ErrorGlyph = roleIcon('error');
+/** Поле формы: подпись, контрол, подсказка и ошибка — один порядок на все стороны. */
+export function Field(props) {
+    const binding = setupField(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const labelAria = createPartProps(() => state.labelAria);
+    const helperAria = createPartProps(() => state.helperAria);
+    const errorAria = createPartProps(() => state.errorAria);
+    function parts() {
+        const label = resolveSlot(() => props['label-content'], () => ({}));
+        const helper = resolveSlot(() => props['helper-content'], () => ({}));
+        const error = resolveSlot(() => props['error-content'], () => ({}));
+        return (<>
+				<Show when={state.label}>
+					<label class="so-field__label" {...labelAria()}>
+						{label() ?? state.label}
+					</label>
+				</Show>
+				<div class="so-field__control">{renderSlot(props.children)}</div>
+				<Show when={state.helperRendered}>
+					<div class="so-field__helper" {...helperAria()}>
+						{helper() ?? state.helper}
+					</div>
+				</Show>
+				<Show when={state.errorRendered}>
+					<div class="so-field__error" {...errorAria()}>
+						<Icon embedded="field.error-icon" class="so-field__error-icon" tag={ErrorGlyph}/>
+						<div class="so-field__error-text">{error() ?? state.error}</div>
+					</div>
+				</Show>
+			</>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>{parts()}</Elevate>
+			</Root>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/frame/Frame.jsx

@@ -0,0 +1,20 @@
+import { Root, Teleport, createRootProps, renderSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupFrame } from './setup.component';
+/** Слой поверх страницы: корень уходит телепортом в `target`, `contained` телепорт выключает. */
+export function Frame(props) {
+    const binding = setupFrame(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Teleport to={state.target} disabled={state.contained}>
+				<Root tag={state.tag} attributes={root} ref={binding.ref}>
+					{renderSlot(props.children)}
+				</Root>
+			</Teleport>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/icon/Icon.jsx

@@ -0,0 +1,19 @@
+import { Root, createRootProps } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupIcon } from './setup.component';
+/**
+ * Иконка: корень по `tag` без содержимого. Компонент в `tag` обязан положить на свой
+ * корень `ref`, `class`, `style` и ARIA — иначе нет `element:ready`, размера и скрытия.
+ */
+export function Icon(props) {
+    const binding = setupIcon(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}/>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/index.js

@@ -0,0 +1,43 @@
+export * from './component';
+export * from './component-view';
+export * from './stylable';
+export * from './control';
+export * from './interactive';
+export * from './value-control';
+export * from './input-control';
+export * from './textable';
+export * from './button';
+export * from './icon';
+export * from './label';
+export * from './field';
+export * from './frame';
+export * from './popover';
+export * from './tooltip';
+export * from './dialog';
+export * from './drawer';
+export * from './toasts';
+export * from './menu';
+export * from './progress-spinner';
+export * from './progress-linear';
+export * from './skeleton';
+export * from './input';
+export * from './number-input';
+export * from './date-input';
+export * from './textarea';
+export * from './check-box';
+export * from './switch';
+export * from './slider';
+export * from './rating';
+export * from './radio-group';
+export * from './list-box';
+export * from './tabs';
+export * from './tags';
+export * from './select';
+export * from './calendar';
+export * from './date-picker';
+export * from './accordion';
+export * from './pagination';
+export * from './scroller';
+export * from './table';
+export * from './virtual';
+export * from './drag-and-drop';

package/dist/source/components/input/Input.jsx

@@ -0,0 +1,60 @@
+import { Elevate, Root, clickAction, createPartProps, createRootProps, fieldText, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupInput } from './setup.component';
+/** Глиф кнопки очистки — компонент на роль: `tag` у Icon — корень, а не роль. */
+const CloseGlyph = roleIcon('close');
+/**
+ * A text field: `<input>` inside the root, the slots at the sides, the clear button before
+ * `trailing`. The clear button stops the click at itself: a select-only Select opens its panel
+ * on a click on the root.
+ */
+export function Input(props) {
+    const binding = setupInput(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    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 text = fieldText(() => state.value);
+    const clear = clickAction((event) => {
+        event.stopPropagation();
+        ctrl.clear();
+    });
+    function content() {
+        const leadingSlot = resolveSlot(() => props.leading, () => ({ ctrl }));
+        const clearSlot = resolveSlot(() => props.clear, () => ({ clear: ctrl.clear }));
+        const trailingSlot = resolveSlot(() => props.trailing, () => ({ ctrl }));
+        return (<>
+				<Show when={leadingSlot()}>
+					<div class="so-input__leading">{leadingSlot()}</div>
+				</Show>
+				<input type="text" id={state.id} name={state.name} disabled={state.disabled} readonly={state.readonly} required={state.required} placeholder={state.placeholder} {...aria()} {...control()} {...text}/>
+				<Show when={state.clearable === true ||
+                clearSlot() !== undefined ||
+                trailingSlot() !== undefined}>
+					<div class="so-input__trailing">
+						<Show when={clearSlot()} fallback={<Show when={state.clearable}>
+									{/* `readonly` очистку не гасит: select-only Select — тоже `readonly` */}
+									<Button embedded="input.clear" type="button" class="so-input__clear" size={state.size} disabled={state.disabled} {...state.clearAria} ref={clear}>
+										<Icon embedded="input.clear-icon" tag={CloseGlyph} size={state.size}/>
+									</Button>
+								</Show>}>
+							{clearSlot()}
+						</Show>
+						{trailingSlot()}
+					</div>
+				</Show>
+			</>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>{content()}</Elevate>
+			</Root>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/input-control/base.component.js

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

package/dist/source/components/input-control/index.js

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

package/dist/source/components/input-control/setup.component.js

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

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

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

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

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

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

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

package/dist/source/components/item-row/ItemRow.jsx

@@ -0,0 +1,15 @@
+import { renderButton } from '../button/Button';
+import { setupItemRow } from './setup.component';
+/**
+ * Строка элемента коллекции — деталь разметки ListBox.Item, опции Select,
+ * пунктов меню и тега. Пропсы и разметка — Button (`renderButton`), сборка
+ * своя — по `ItemRowDescriptor`: её экземпляр (`TItemRow`) роль и остановку
+ * Tab себе не пишет, их несёт набор `aria` элемента, который разметка кладёт
+ * на строку.
+ *
+ * Экземпляр создаёт это монтирование и отпускает его снятие: строка живёт,
+ * пока нарисована, и окно `Virtual` держит их столько, сколько показывает.
+ */
+export function ItemRow(props) {
+    return renderButton(setupItemRow(props), props);
+}

package/dist/source/components/item-row/index.js

@@ -0,0 +1,2 @@
+/** Внутренняя деталь разметки элементов коллекций: наружу пакета не выходит. */
+export { ItemRow } from './ItemRow';

package/dist/source/components/item-row/setup.component.js

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