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

package/dist/source/components/accordion/item/Item.jsx

@@ -0,0 +1,51 @@
+import { Root, clickAction, createPartProps, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+import { setupAccordionItem } from './setup.component';
+/** Стрелка без слота — иконка по роли. */
+const ARROW = roleIcon('arrowRight');
+/**
+ * Секция: заголовок — Button с `aria`, панель — узел с набором `contentAria`. Класс
+ * стрелки — на обёртке, а не на иконке: тема поворачивает и подменённую слотом.
+ */
+export function AccordionItem(props) {
+    const binding = setupAccordionItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const contentAria = createPartProps(() => state.contentAria);
+    const title = resolveSlot(() => props.header, () => ({ item: binding.ctrl, text: state.text ?? '', selected: state.selected ?? false }));
+    const arrowIcon = resolveSlot(() => props['arrow-icon'], () => ({ item: binding.ctrl }));
+    /** The header's attributes: all of the consumer's but the class and the style. */
+    const header = () => toControlAttrs(binding.forwardProps());
+    const toggle = clickAction(() => context?.adapters.selection.toggle());
+    /** Стрелка стороны: слот, а без него — иконка, если стрелка на этой стороне. */
+    const arrow = (side, icon) => (<Show when={state.arrowPlacement === side}>
+			<span class="so-accordion-item__arrow">
+				{icon() ?? <Icon embedded="accordion.arrow" tag={ARROW} size={state.size}/>}
+			</span>
+		</Show>);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Button embedded="accordion.header" type="button" class="so-accordion-item__header" view={state.view} disabled={state.disabled} size={state.size} variant={state.variant} {...state.aria} {...header()} ref={toggle} leading={<>
+							{arrow('start', arrowIcon)}
+							{renderSlot(props.leading, { item: binding.ctrl })}
+						</>} trailing={<>
+							{renderSlot(props.trailing, { item: binding.ctrl })}
+							{arrow('end', arrowIcon)}
+						</>}>
+					{title() ?? state.text}
+				</Button>
+				<div class="so-accordion-item__body">
+					<div class="so-accordion-item__content" {...contentAria()}>
+						{renderSlot(props.children, { item: binding.ctrl })}
+					</div>
+				</div>
+			</Root>
+		</Show>);
+}

package/dist/source/components/accordion/item/base.component.js

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

package/dist/source/components/accordion/item/index.js

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

package/dist/source/components/accordion/item/setup.component.js

@@ -0,0 +1,13 @@
+import { AccordionCollectionItemDescriptor, AccordionItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupAccordionItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(AccordionItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(AccordionCollectionItemDescriptor(), { 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 };
+}

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

@@ -0,0 +1,15 @@
+import { AccordionCollectionDescriptor, AccordionDescriptor, TCollectionExtension, TDragAndDropCollectionExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupAccordion(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(AccordionDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(AccordionCollectionDescriptor(), {
+        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 };
+}

package/dist/source/components/button/Button.jsx

@@ -0,0 +1,27 @@
+import { Root, createRootProps, renderSlot, resolveSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupButton } from './setup.component';
+/** Кнопка: на месте незаданного `children` — текст из ядра. */
+export function Button(props) {
+    return renderButton(setupButton(props), props);
+}
+/**
+ * Разметка кнопки по её связке. Одна на Button и строку элемента коллекции
+ * (`ItemRow`): у них разная сборка, а разметка та же.
+ */
+export function renderButton(binding, props) {
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '' }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{renderSlot(props.leading)}
+				<span class="so-button__text">{content() ?? state.text}</span>
+				{renderSlot(props.trailing)}
+			</Root>
+		</Show>);
+}

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

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

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

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

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

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

package/dist/source/components/calendar/Calendar.jsx

@@ -0,0 +1,115 @@
+import { Elevate, KeyedFor, ResolvedSlot, Root, createPartProps, createRootProps, relaySlot, roleIcon, } from '../../adapter';
+import { Index, Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { ListBox } from '../list-box';
+import { Popover } from '../popover';
+import { CalendarItem } from './item';
+import { setupCalendar } from './setup.component';
+/** One icon for all arrows: there is no «left» role, the theme mirrors the arrow to the line start. */
+const ARROW = roleIcon('arrowRight');
+/**
+ * Calendar: grids of the shown months, one pair of paging buttons at the first month, and the footer.
+ * A month goes by place (`Index`): the heading button, its popover and the live region survive
+ * paging as the same node. The picker panel is the place's Popover, `contained` on a `div`.
+ */
+export function Calendar(props) {
+    const binding = setupCalendar(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    /** A week cell: a day is a collection item, a placeholder is an empty cell. */
+    const cell = (entry) => {
+        const aria = createPartProps(() => entry().aria);
+        return (<Show when={entry().item} keyed fallback={<td class="so-calendar__filler" {...aria()}/>}>
+				{(item) => (<CalendarItem ctrl={item}>{relaySlot(props.item, { item })}</CalendarItem>)}
+			</Show>);
+    };
+    /**
+     * A week — seven cells from the first day of the week, by its place (`Index`): a new
+     * first day of the week keeps six days of seven in their row.
+     */
+    const week = (entry) => (<tr class="so-calendar__week">
+			<KeyedFor each={entry()} by={(day) => day.date}>
+				{cell}
+			</KeyedFor>
+		</tr>);
+    /** Month heading — the trigger button of the picker panel; text and live region inside. */
+    const title = (grid) => (scope) => {
+        const titleAria = createPartProps(() => grid().titleAria);
+        return (<Button embedded="calendar.title" type="button" class="so-calendar__title" size={state.size} disabled={state.disabled} {...scope.triggerAria} {...scope.triggerDataset}>
+				<span class="so-calendar__title-text" {...titleAria()}>
+					{grid().title}
+				</span>
+			</Button>);
+    };
+    /**
+     * The picker's card: the place's list, then the header. The list comes with the first
+     * opening of the popover — a branch by its presence, and ListBox takes `ctrl` and `engine`
+     * at assembly.
+     */
+    const card = (picker) => (<div class="so-calendar__picker">
+			<Show when={picker().list}>
+				{(list) => (<ListBox embedded="calendar.picker-list" class="so-calendar__picker-list" ctrl={list().ctrl} engine={list().engine} size={state.size} indicator="none" aria_labelledBy={picker().labelledBy}/>)}
+			</Show>
+			<div class="so-calendar__picker-header">
+				<Button embedded="calendar.picker-heading" type="button" class="so-calendar__picker-heading" size={state.size} {...picker().headingAria}>
+					{picker().heading}
+				</Button>
+				<Button embedded="calendar.picker-prev" type="button" class="so-calendar__picker-prev" size={state.size} disabled={picker().prevDisabled} {...picker().prevAria}>
+					<Icon embedded="calendar.picker-prev-icon" tag={ARROW} size={state.size}/>
+				</Button>
+				<Button embedded="calendar.picker-next" type="button" class="so-calendar__picker-next" size={state.size} disabled={picker().nextDisabled} {...picker().nextAria}>
+					<Icon embedded="calendar.picker-next-icon" tag={ARROW} size={state.size}/>
+				</Button>
+			</div>
+		</div>);
+    /** The pair of paging buttons — one per calendar, at the first month. */
+    const paging = () => (<>
+			<Button embedded="calendar.prev" type="button" class="so-calendar__prev" size={state.size} disabled={state.prevDisabled} {...state.prevAria}>
+				<ResolvedSlot content={props['prev-icon']} fallback={<Icon embedded="calendar.prev-icon" tag={ARROW} size={state.size}/>}/>
+			</Button>
+			<Button embedded="calendar.next" type="button" class="so-calendar__next" size={state.size} disabled={state.nextDisabled} {...state.nextAria}>
+				<ResolvedSlot content={props['next-icon']} fallback={<Icon embedded="calendar.next-icon" tag={ARROW} size={state.size}/>}/>
+			</Button>
+		</>);
+    /** The month at place `index`: heading with the picker panel, paging at the first, the grid. */
+    const month = (grid, index) => {
+        const gridAria = createPartProps(() => grid().gridAria);
+        return (<div class="so-calendar__month">
+				<Show when={state.pickers?.[index]}>
+					{(picker) => (<Popover embedded="calendar.picker" class="so-calendar__heading" tag="div" contained edge="top" ctrl={picker().popover} aria_labelledBy={picker().labelledBy} trigger={title(grid)}>
+							{card(picker)}
+						</Popover>)}
+				</Show>
+				<Show when={index === 0}>{paging()}</Show>
+				<table class="so-calendar__grid" {...gridAria()}>
+					<thead aria-hidden="true">
+						<tr class="so-calendar__weekdays">
+							<Index each={state.weekdays}>
+								{(weekday) => (<th class="so-calendar__weekday">{weekday().label}</th>)}
+							</Index>
+						</tr>
+					</thead>
+					<tbody>
+						<Index each={grid().weeks}>{week}</Index>
+					</tbody>
+				</table>
+			</div>);
+    };
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<div class="so-calendar__months">
+						<Index each={state.grids}>{month}</Index>
+					</div>
+					<ResolvedSlot content={props.footer}>
+						{(nodes) => <div class="so-calendar__footer">{nodes()}</div>}
+					</ResolvedSlot>
+				</Elevate>
+			</Root>
+		</Show>);
+}

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

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

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

@@ -0,0 +1,7 @@
+import { withParts } from '@soxa-ui/setup';
+import { Calendar as CalendarComponent } from './Calendar';
+import { CalendarItem } from './item';
+export * from './base.component';
+export { setupCalendar } from './setup.component';
+export * from './item';
+export const Calendar = withParts(CalendarComponent, { Item: CalendarItem });

package/dist/source/components/calendar/item/Item.jsx

@@ -0,0 +1,23 @@
+import { Root, createRootProps, resolveSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupCalendarItem } from './setup.component';
+/**
+ * День календаря — сама ячейка сетки (`td`), фокус и наборы на ней. Плитка дня — `div`,
+ * а не `span`: в слот кладут и блочное содержимое. Полосу диапазона тема рисует
+ * псевдоэлементом ячейки — своего узла у неё нет.
+ */
+export function CalendarItem(props) {
+    const binding = setupCalendarItem(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '' }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<div class="so-calendar-item__day">{content() ?? state.text}</div>
+			</Root>
+		</Show>);
+}

package/dist/source/components/calendar/item/base.component.js

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

package/dist/source/components/calendar/item/index.js

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

package/dist/source/components/calendar/item/setup.component.js

@@ -0,0 +1,13 @@
+import { CalendarCollectionItemDescriptor, CalendarItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupCalendarItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(CalendarItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(CalendarCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return joinBindings(owner, itemBinding);
+}

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

@@ -0,0 +1,17 @@
+import { CalendarCollectionDescriptor, CalendarDescriptor, TCollectionExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+/** `engine` снаружи держит тот, кто зовёт команды расширений календаря, — панель DatePicker. */
+export function setupCalendar(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(CalendarDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const collectionAdapter = createSolidAdapterContext(CalendarCollectionDescriptor(), {
+        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 };
+}

package/dist/source/components/check-box/CheckBox.jsx

@@ -0,0 +1,52 @@
+import { Elevate, Root, createPartNode, createRootProps, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupCheckBox } from './setup.component';
+/** Отметки без слота — иконки по ролям, компонент на роль один на модуль (`roleIcon`). */
+const CheckMark = roleIcon('check');
+const IndeterminateMark = roleIcon('checkIndeterminate');
+/**
+ * Флажок: нативный `<input type="checkbox">` и коробка с отметкой; всё — `span` (кладут в `Label`).
+ * Отметка — `svg` роли, а не Icon: она пропадает с каждой сменой, и Icon собирал бы
+ * контекст и плагины на каждую — в таблице «выбрать все» тысячами.
+ */
+export function CheckBox(props) {
+    const binding = setupCheckBox(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const scope = () => ({ value: state.value, indeterminate: state.indeterminate ?? false });
+    function content() {
+        const icon = resolveSlot(() => props.icon, scope);
+        const indeterminateIcon = resolveSlot(() => props['indeterminate-icon'], scope);
+        // Узел — в теле, а не вызовом в разметке: вызов компилятор обернул бы в мемо
+        const input = createPartNode('input', () => ({
+            type: 'checkbox',
+            id: state.id,
+            name: state.name,
+            disabled: state.disabled,
+            required: state.required,
+            ...state.aria,
+            ...toControlAttrs(binding.forwardProps()),
+            checked: state.value,
+            'prop:indeterminate': state.indeterminate,
+        }));
+        return (<>
+				{input}
+				<span class="so-check-box__container" aria-hidden="true">
+					<Show when={state.indeterminate} fallback={<Show when={state.value}>
+								{icon() ?? <CheckMark class="so-check-box__mark"/>}
+							</Show>}>
+						{indeterminateIcon() ?? <IndeterminateMark class="so-check-box__mark"/>}
+					</Show>
+				</span>
+			</>);
+    }
+    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/check-box/base.component.js

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

package/dist/source/components/check-box/index.js

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

package/dist/source/components/check-box/setup.component.js

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

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

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

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

@@ -0,0 +1 @@
+export * from './base.component';

package/dist/source/components/component-view/ComponentView.jsx

@@ -0,0 +1,18 @@
+import { Root, createRootProps, renderSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupComponentView } from './setup.component';
+/** Визуальная база: корень по `tag` с наборами ядра — их пишут наследники (Icon, Skeleton). */
+export function ComponentView(props) {
+    const binding = setupComponentView(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{renderSlot(props.children)}
+			</Root>
+		</Show>);
+}

package/dist/source/components/component-view/base.component.js

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

package/dist/source/components/component-view/index.js

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

package/dist/source/components/component-view/setup.component.js

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

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

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

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

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

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

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

package/dist/source/components/date-input/DateInput.jsx

@@ -0,0 +1,78 @@
+import { Elevate, KeyedFor, Root, clickAction, createPartProps, createRootProps, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupDateInput } from './setup.component';
+/** Глиф кнопки очистки — компонент на роль: `tag` у Icon — корень, а не роль. */
+const CloseGlyph = roleIcon('close');
+/** Часть поля; у разделителя её нет. */
+function partOf(segment) {
+    return segment.type === 'literal' ? undefined : segment;
+}
+/**
+ * Поле даты из частей по формату локали; атрибуты потребителя — корню целиком. Текст части —
+ * `textContent`, а не ребёнок разметки: редактируемую часть браузер правит сам.
+ */
+export function DateInput(props) {
+    const binding = setupDateInput(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const segmentsAttrs = createPartProps(() => state.segmentsAttrs);
+    /** The clear click does not bubble to an ancestor that listens to the field. */
+    const clear = clickAction((event) => {
+        event.stopPropagation();
+        ctrl.clear();
+    });
+    /** Часть или разделитель: тип у записи с одним ключом не меняется, ветка `Show` у узла одна. */
+    function segment(entry) {
+        const aria = createPartProps(() => entry().aria);
+        return (<Show when={partOf(entry())} fallback={<span class="so-date-input__literal" {...aria()} textContent={entry().text}/>}>
+				{(part) => {
+                const attrs = createPartProps(() => part().attrs);
+                const dataset = createPartProps(() => part().dataset);
+                return (<span class="so-date-input__segment" {...attrs()} {...aria()} {...dataset()} textContent={part().text}/>);
+            }}
+			</Show>);
+    }
+    /** Содержимое корня: зовётся внутри `Elevate`, и слоты разворачиваются в слое поля. */
+    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-date-input__leading">{leadingSlot()}</div>
+				</Show>
+				<span class="so-date-input__segments" {...segmentsAttrs()}>
+					<KeyedFor each={state.segments} by={(entry) => entry.key}>
+						{segment}
+					</KeyedFor>
+				</span>
+				<Show when={state.clearable === true ||
+                clearSlot() !== undefined ||
+                trailingSlot() !== undefined}>
+					<div class="so-date-input__trailing">
+						<Show when={clearSlot()} fallback={<Show when={state.clearable}>
+									<Button embedded="date-input.clear" type="button" class="so-date-input__clear" size={state.size} disabled={state.disabled} {...state.clearAria} ref={clear}>
+										<Icon embedded="date-input.clear-icon" tag={CloseGlyph} size={state.size}/>
+									</Button>
+								</Show>}>
+							{clearSlot()}
+						</Show>
+						{trailingSlot()}
+					</div>
+				</Show>
+				<input type="hidden" name={state.name} value={state.value ?? ''} disabled={state.disabled}/>
+			</>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={() => ({ id: state.id, ...root() })} ref={binding.ref}>
+				<Elevate layer={binding.layer}>{content()}</Elevate>
+			</Root>
+		</Show>);
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { DateInputDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+/** Связку `Field` над полем берёт `TFieldControlExtension`, содержимому — пустую. */
+export function setupDateInput(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(DateInputDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}