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

package/dist/components/check-box/CheckBox.svelte.d.ts

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

package/dist/components/check-box/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { ICheckBox } from '@soxa-ui/core';
+import type { CheckBoxDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+export type CheckBoxEventProps = EventProps<typeof CheckBoxDescriptor>;
+/** Атрибуты CheckBox: класс и стиль — корню, остальное — полю `<input>`. */
+export type CheckBoxAttributes = TDomAttributes<typeof CheckBoxDescriptor, CheckBoxEventProps, TFieldAttributes>;
+export type CheckBoxProps = UseDomProps<typeof CheckBoxDescriptor, ICheckBox, CheckBoxEventProps, TFieldAttributes>;

package/dist/components/check-box/base.component.js

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

package/dist/components/check-box/index.d.ts

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

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

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

package/dist/components/check-box/setup.component.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+import type { IComponent } from '@soxa-ui/core';
+import type { ComponentDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type ComponentEventProps = EventProps<typeof ComponentDescriptor>;
+export type ComponentProps = UseProps<typeof ComponentDescriptor, IComponent, ComponentEventProps>;

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

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

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

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

package/dist/components/component/index.js

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

package/dist/components/component-view/ComponentView.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { setupComponentView } from './setup.component'
+	import type { ComponentViewProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: ComponentViewProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupComponentView(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!-- Наборы ядра раскладываются и здесь: сам ComponentView в них не пишет, пишут наследники. -->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	{@render props.children?.()}
+</Dynamic>

package/dist/components/component-view/ComponentView.svelte.d.ts

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

package/dist/components/component-view/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IComponentView } from '@soxa-ui/core';
+import type { ComponentViewDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type ComponentViewEventProps = EventProps<typeof ComponentViewDescriptor>;
+export type ComponentViewProps = UseDomProps<typeof ComponentViewDescriptor, IComponentView, ComponentViewEventProps>;

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

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

package/dist/components/component-view/index.d.ts

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

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

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

package/dist/components/component-view/setup.component.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+import type { IControl } from '@soxa-ui/core';
+import type { ControlDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type ControlEventProps = EventProps<typeof ControlDescriptor>;
+export type ControlProps = UseProps<typeof ControlDescriptor, IControl, ControlEventProps>;

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

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

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

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

package/dist/components/control/index.js

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

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

@@ -0,0 +1,42 @@
+import type { ControlProps } from './base.component';
+export declare function setupControl(getProps: () => ControlProps, mountId: string): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IControl<import("@soxa-ui/core").IControlProps, import("@soxa-ui/core").TControlEvents>, {
+    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 & {} & {} & {} & {};
+}>, ControlProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IControl<import("@soxa-ui/core").IControlProps, import("@soxa-ui/core").TControlEvents>, {
+    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/control/setup.component.js

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

package/dist/components/date-input/DateInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { clickAction, Dynamic, TextSpan, roleIcon, toRootProps } from '../../adapter'
+	import { Button } from '../button'
+	import { Icon } from '../icon'
+	import { setupDateInput } from './setup.component'
+	import type { DateInputProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: DateInputProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupDateInput(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+
+	const CLOSE = roleIcon('close')
+
+	const clear = clickAction((event) => {
+		event.stopPropagation()
+		ctrl.clear()
+	})
+</script>
+
+<!--
+	DateInput — каждая часть и разделитель — своя коробка: в строке текста Chrome переносит
+	начало протяжки в соседний текст. Ключ части — тип, разделителя — место: при наборе узел
+	части с фокусом остаётся. Текст части — только `TextSpan`: на касание она редактируемая.
+	Узлы вплотную: пробел Svelte оставил бы текстом, а ряд буфер обмена копирует целиком.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={{
+		id: state.id,
+		...toRootProps(state, [state.attrs, state.aria, state.dataset], binding.forwardProps),
+	}}
+	attach={binding.attachElement}
+>
+	{#if props.leading}<div class="so-date-input__leading">
+			{@render props.leading({ ctrl })}
+		</div>{/if}<span class="so-date-input__segments" {...state.segmentsAttrs}
+		>{#each state.segments ?? [] as segment (segment.key)}{#if segment.type === 'literal'}<span
+					class="so-date-input__literal"
+					{...segment.aria}>{segment.text}</span
+				>{:else}<TextSpan
+					class="so-date-input__segment"
+					{...segment.attrs}
+					{...segment.aria}
+					{...segment.dataset}
+					text={segment.text}
+				/>{/if}{/each}</span
+	>{#if state.clearable || props.clear || props.trailing}<div
+			class="so-date-input__trailing"
+		>
+			{#if props.clear}
+				{@render props.clear({ clear: ctrl.clear })}
+			{:else if state.clearable}
+				<Button
+					embedded="date-input.clear"
+					type="button"
+					class="so-date-input__clear"
+					size={state.size}
+					disabled={state.disabled}
+					{...state.clearAria}
+					{@attach clear}
+				>
+					<Icon embedded="date-input.clear-icon" tag={CLOSE} size={state.size} />
+				</Button>
+			{/if}{#if props.trailing}{@render props.trailing({ ctrl })}{/if}
+		</div>{/if}<input
+		type="hidden"
+		name={state.name}
+		value={state.value ?? ''}
+		disabled={state.disabled}
+	/>
+</Dynamic>

package/dist/components/date-input/DateInput.svelte.d.ts

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

package/dist/components/date-input/base.component.d.ts

@@ -0,0 +1,6 @@
+import type { IDateInput } from '@soxa-ui/core';
+import type { DateInputDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DateInputEventProps = EventProps<typeof DateInputDescriptor>;
+/** Атрибуты — корню целиком: поля ввода, с которым их делить, нет. */
+export type DateInputProps = UseDomProps<typeof DateInputDescriptor, IDateInput, DateInputEventProps>;

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

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

package/dist/components/date-input/index.d.ts

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

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

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

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

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

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

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

package/dist/components/date-picker/DatePicker.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toRootProps } from '../../adapter'
+	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'
+	import type { DatePickerProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: DatePickerProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupDatePicker(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+
+	const CLOSE = roleIcon('close')
+	const CALENDAR = roleIcon('calendar')
+
+	const clear = clickAction((event) => {
+		event.stopPropagation()
+		ctrl.clear()
+	})
+
+	/** Closing itself drops the draft of the choice. */
+	const cancel = clickAction(() => {
+		ctrl.open = false
+	})
+
+	const confirm = clickAction(() => ctrl.confirm())
+</script>
+
+<!--
+	DatePicker — кнопки диапазона стоят после поля конца, а не в его сниппете: они
+	работают со всем периодом. Узлы вплотную: пробел между блоками Svelte оставил бы
+	текстом.
+-->
+<!--
+	Полю очистка уходит сниппетом без scope: поле позвало бы его со своей командой
+	`clear`, а очищает DatePicker.
+-->
+{#snippet clearButton()}
+	{#if props.clear}
+		{@render props.clear({ clear: ctrl.clear })}
+	{:else if state.clearable}
+		<Button
+			embedded="date-picker.clear"
+			type="button"
+			class="so-date-picker__clear"
+			size={state.size}
+			disabled={state.disabled}
+			{...state.clearAria}
+			{@attach clear}
+		>
+			<Icon embedded="date-picker.clear-icon" tag={CLOSE} size={state.size} />
+		</Button>
+	{/if}
+{/snippet}
+{#snippet trigger()}
+	<Button
+		embedded="date-picker.trigger"
+		type="button"
+		class="so-date-picker__trigger"
+		size={state.size}
+		disabled={!state.openable}
+		{...state.triggerAria}
+		{...state.triggerDataset}
+	>
+		{#if props['trigger-icon']}
+			{@render props['trigger-icon']()}
+		{:else}
+			<Icon embedded="date-picker.trigger-icon" tag={CALENDAR} />
+		{/if}
+	</Button>
+{/snippet}
+<!-- Подвал — только при `confirmable`: сниппет непрозрачен, строка стояла бы пустой. -->
+{#snippet footer()}
+	<Button
+		embedded="date-picker.cancel"
+		type="button"
+		class="so-date-picker__cancel"
+		size={state.size}
+		text={state.names_cancel}
+		{@attach cancel}
+	/><Button
+		embedded="date-picker.confirm"
+		type="button"
+		class="so-date-picker__confirm"
+		size={state.size}
+		disabled={state.confirmDisabled}
+		text={state.names_confirm}
+		{@attach confirm}
+	/>
+{/snippet}
+<Dynamic
+	rendered={state.rendered}
+	tag="div"
+	attributes={{
+		id: state.id,
+		...toRootProps(
+			state,
+			[state.attrs, state.rootAria, state.dataset],
+			binding.forwardProps,
+		),
+	}}
+	attach={binding.attachElement}
+>
+	<!-- The name goes to the field: it is the group of the parts, so the name reaches them too. -->
+	{#if state.mode === '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={props.clear || state.clearable ? clearButton : undefined}
+			trailing={trigger}
+		/>{:else}<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}
+		/>{@render clearButton()}{@render trigger()}{/if}<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}
+	>
+		{#if state.handleRendered}<div
+				class="so-date-picker__handle"
+				aria-hidden="true"
+			></div>{/if}<div class="so-date-picker__content">
+			<!-- The calendar from the panel's first opening on (`contentRendered`) -->
+			{#if state.contentRendered}
+				<Calendar
+					embedded="date-picker.calendar"
+					class="so-date-picker__calendar"
+					ctrl={ctrl.calendar}
+					engine={ctrl.engine}
+					item={props.item}
+					footer={state.confirmable ? footer : undefined}
+				/>
+			{/if}
+		</div>
+	</Frame>
+</Dynamic>

package/dist/components/date-picker/DatePicker.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IDatePicker } from '@soxa-ui/core';
+import type { DatePickerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DatePickerEventProps = EventProps<typeof DatePickerDescriptor>;
+/** Атрибуты — корню: якорю панели и коробке полей диапазона. */
+export type DatePickerProps = UseDomProps<typeof DatePickerDescriptor, IDatePicker, DatePickerEventProps>;

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

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

package/dist/components/date-picker/index.d.ts

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

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

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