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

package/dist/components/select/Select.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { ISelectItem, TDrawnEntry } from '@soxa-ui/core'
+	import {
+		Dynamic,
+		roleIcon,
+		toControlAttrs,
+		toRootForward,
+		toRootProps,
+		toStyleText,
+	} from '../../adapter'
+	import { Frame } from '../frame'
+	import { Icon } from '../icon'
+	import { Input } from '../input'
+	import { Tags } from '../tags'
+	import { SelectItem } from './item'
+	import { SelectGroup } from './group'
+	import { setupSelect } from './setup.component'
+	import type { SelectAttributes, SelectProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: SelectProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupSelect(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const field = binding.ctrl.field
+
+	const ARROW = roleIcon('arrowDown')
+</script>
+
+<!--
+	Проброс слотов опции — только заданных: сниппет непрозрачен, и без него опция рисует своё.
+	Слоты поля по сторонам отдаются всегда: обёртки поля стоят и без тегов. Класс стрелки — на
+	обёртке: иконка слота поворачивается так же. Открытость — `visible` панели, а не `rendered`:
+	снятие опций вычистило бы выбор. Части вплотную: пробел Svelte оставил бы текстом.
+-->
+{#snippet entries(list: ReadonlyArray<TDrawnEntry<ISelectItem>>)}
+	{#each list as entry (entry.key)}
+		{#if entry.kind === 'filler'}
+			<div class="so-select__filler" aria-hidden="true" style={toStyleText(entry.style)}></div>
+		{:else}
+			{#snippet leading()}
+				{@render props['item-leading']?.({ item: entry.item })}
+			{/snippet}
+			{#snippet content(scope: { text: string; selected: boolean })}
+				{@render props.item?.({ ...scope, item: entry.item })}
+			{/snippet}
+			{#snippet trailing()}
+				{@render props['item-trailing']?.({ item: entry.item })}
+			{/snippet}
+			{#snippet indicator(scope: { selected: boolean })}
+				{@render props['item-indicator-icon']?.({ ...scope, item: entry.item })}
+			{/snippet}
+			<SelectItem
+				ctrl={entry.item}
+				leading={props['item-leading'] ? leading : undefined}
+				trailing={props['item-trailing'] ? trailing : undefined}
+				indicator-icon={props['item-indicator-icon'] ? indicator : undefined}
+				children={props.item ? content : undefined}
+			/>
+		{/if}
+	{/each}
+{/snippet}
+{#snippet fieldLeading()}
+	{#if state.tags && state.tags_engine}
+		{#if props.tags}
+			{@render props.tags({ tags: state.tags, engine: state.tags_engine })}
+		{:else}
+			<Tags
+				embedded="select.tags"
+				class="so-select__tags"
+				ctrl={state.tags}
+				engine={state.tags_engine}
+			/>
+		{/if}
+	{/if}{@render props.leading?.()}
+{/snippet}
+{#snippet fieldTrailing()}
+	<span class="so-select__arrow"
+		>{#if props['arrow-icon']}
+			{@render props['arrow-icon']()}
+		{:else}
+			<Icon embedded="select.arrow" tag={ARROW} size={state.size} />
+		{/if}</span
+	>{@render props.trailing?.()}
+{/snippet}
+<Dynamic
+	rendered={state.rendered}
+	tag="div"
+	attributes={toRootProps(
+		state,
+		[state.dataset, state.attrs],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	{#if props.field}
+		{@render props.field({ field })}
+	{:else}
+		<Input
+			embedded="select.field"
+			class="so-select__field"
+			ctrl={field}
+			id={state.id}
+			leading={fieldLeading}
+			trailing={fieldTrailing}
+			clear={props.clear}
+			{...state.aria}
+			{...toControlAttrs<SelectAttributes>(binding.forwardProps)}
+		/>
+	{/if}<Frame
+		embedded="select.frame"
+		class="so-select__panel"
+		visible={state.visible && state.open}
+		strategy="fixed"
+		anchor_anchor={binding.rootElement}
+		anchor_placement={state.panelPlacement}
+		anchor_flip={state.panelFlip}
+		anchor_matchWidth={state.autoFitWidth}
+		anchor_offset={4}
+		{...state.panelDataset}
+		{...state.dismiss_ownerAttribute}
+	>
+		{#if state.handleRendered}
+			<div class="so-select__handle" aria-hidden="true"></div>
+		{/if}<div class="so-select__list" {...state.listAria}>
+			<!-- Options from data from the panel's first opening on (`contentRendered`) -->
+			{#if props.children}
+				{@render props.children()}
+			{:else if state.contentRendered}
+				{#each state.drawnSections ?? [] as section, index (section.key)}
+					{#if state.groupSeparators && index > 0}<div
+							class="so-select__separator"
+							aria-hidden="true"
+						></div>{/if}{#if section.group}<SelectGroup label={section.group.label}
+							>{@render entries(section.entries)}</SelectGroup
+						>{:else}{@render entries(section.entries)}{/if}
+				{/each}
+			{/if}{#if state.shown?.length === 0}
+				{@render props.empty?.()}
+			{/if}
+		</div>
+	</Frame>
+</Dynamic>

package/dist/components/select/Select.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { ISelect } from '@soxa-ui/core';
+import type { SelectCollectionDescriptor, SelectDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+export type SelectEventProps = EventProps<typeof SelectDescriptor> & EventProps<typeof SelectCollectionDescriptor>;
+/** Атрибуты Select: класс и стиль — корню, остальное — `<input>` поля. */
+export type SelectAttributes = TDomAttributes<typeof SelectDescriptor, SelectEventProps, TFieldAttributes>;
+export type SelectProps = UseDomProps<typeof SelectDescriptor, ISelect, SelectEventProps, TFieldAttributes>;

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

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

package/dist/components/select/group/Group.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../../adapter'
+	import { setupSelectGroup } from './setup.component'
+	import type { SelectGroupProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: SelectGroupProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupSelectGroup(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!-- Части вплотную: пробел между блоками 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}<div class="so-select-group__label" {...state.labelAria}>
+			{state.label}
+		</div>{/if}{@render props.children?.()}
+</Dynamic>

package/dist/components/select/group/Group.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { IItemGroup } from '@soxa-ui/core';
+import type { SelectGroupDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+export type SelectGroupEventProps = EventProps<typeof SelectGroupDescriptor>;
+export type SelectGroupProps = UseDomProps<typeof SelectGroupDescriptor, IItemGroup, SelectGroupEventProps>;

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

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

package/dist/components/select/group/index.d.ts

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

package/dist/components/select/group/index.js

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

package/dist/components/select/group/setup.component.d.ts

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

package/dist/components/select/group/setup.component.js

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

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

@@ -0,0 +1,8 @@
+export * from './base.component';
+export { setupSelect } from './setup.component';
+export * from './item';
+export * from './group';
+export declare const Select: import("svelte").Component<import("./base.component").SelectProps, {}, "ref"> & {
+    Item: import("svelte").Component<import("./item").SelectItemProps, {}, "ref">;
+    Group: import("svelte").Component<import("./group").SelectGroupProps, {}, "ref">;
+};

package/dist/components/select/index.js

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import SelectComponent from './Select.svelte';
+import { SelectItem } from './item';
+import { SelectGroup } from './group';
+export * from './base.component';
+export { setupSelect } from './setup.component';
+export * from './item';
+export * from './group';
+export const Select = withParts(SelectComponent, { Item: SelectItem, Group: SelectGroup });

package/dist/components/select/item/Item.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import {
+		clickAction,
+		Dynamic,
+		roleIcon,
+		toControlAttrs,
+		toRootForward,
+		toRootProps,
+	} from '../../../adapter'
+	import { ItemRow } from '../../item-row'
+	import { Icon } from '../../icon'
+	import { setupSelectItem } from './setup.component'
+	import type { SelectItemAttributes, SelectItemProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: SelectItemProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupSelectItem(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+	const choose = clickAction(() => context?.adapters.select.choose())
+
+	const CHECK = roleIcon('check')
+</script>
+
+<!--
+	Тег строки фиксирован (`span`): под него написан `TSelectItem._ariaTag`. `dataset` — и на
+	строке: фон выбора и подсветки тема рисует на кнопке.
+	Отметка рисуется и у невыбранных: она держит место, и строка не прыгает при выборе.
+	`aria-hidden`: выбор скринридеру объявляет `aria-selected`.
+-->
+{#snippet mark()}
+	<span class="so-select-item__indicator" aria-hidden="true">
+		{#if props['indicator-icon']}
+			{@render props['indicator-icon']({ selected: state.selected ?? false })}
+		{:else if state.selected}
+			<Icon embedded="select.indicator" tag={CHECK} size={state.size} />
+		{/if}
+	</span>
+{/snippet}
+
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(state, [state.dataset, state.attrs], toRootForward(binding.forwardProps))}
+	attach={binding.attachElement}
+>
+	<ItemRow
+		embedded="select.row"
+		tag="span"
+		size={state.size}
+		variant={state.variant}
+		disabled={state.disabled}
+		{...state.aria}
+		{...state.dataset}
+		{...toControlAttrs<SelectItemAttributes>(binding.forwardProps)}
+		{@attach choose}
+	>
+		{#snippet leading()}
+			{#if state.indicator === 'start'}{@render mark()}{/if}{@render props.leading?.()}
+		{/snippet}
+		{#if props.children}
+			{@render props.children({
+				text: state.text ?? '',
+				selected: state.selected ?? false,
+			})}
+		{:else}
+			{state.text}
+		{/if}
+		{#snippet trailing()}
+			{@render props.trailing?.()}{#if state.indicator === 'end'}{@render mark()}{/if}
+		{/snippet}
+	</ItemRow>
+</Dynamic>

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

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

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

@@ -0,0 +1,7 @@
+import type { ISelectItem } from '@soxa-ui/core';
+import type { SelectCollectionItemDescriptor, SelectItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type SelectItemEventProps = EventProps<typeof SelectItemDescriptor> & EventProps<typeof SelectCollectionItemDescriptor>;
+/** Атрибуты опции: класс и стиль — корню, остальное — строке с `role="option"`. */
+export type SelectItemAttributes = TDomAttributes<typeof SelectItemDescriptor, SelectItemEventProps>;
+export type SelectItemProps = UseDomProps<typeof SelectItemDescriptor, ISelectItem, SelectItemEventProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { SelectItemProps } from './base.component';
+export declare function setupSelectItem(getProps: () => SelectItemProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {
+        id?: string | undefined;
+    };
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "action:click": (event: MouseEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:blur": (event: FocusEvent) => void;
+    } & {
+        "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {
+        "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {};
+}>, SelectItemProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TSelectItemCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {
+        id?: string | undefined;
+    };
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "action:click": (event: MouseEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:blur": (event: FocusEvent) => void;
+    } & {
+        "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {
+        "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {};
+}>>>> & {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>, import("@soxa-ui/core").TSelectCollectionExtensions> | undefined;
+};

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

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

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

@@ -0,0 +1,85 @@
+import { type TRootReceiver } from '../../adapter';
+import type { SelectProps } from './base.component';
+export declare function setupSelect(getProps: () => SelectProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISelect<import("@soxa-ui/core").ISelectProps, import("@soxa-ui/core").TSelectEvents>, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: string | undefined;
+    } & {} & {} & {} & {} & {} & {
+        dismiss_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;
+    } & {} & {
+        "keyboard:change:highlight": (payload: import("@soxa-ui/core").TValuePayload<import("@soxa-ui/plugins").THighlightPayload>) => void;
+    } & {
+        "editable:change:query": (payload: import("@soxa-ui/core").TValuePayload<string>) => void;
+    } & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {
+        readonly keyboard_highlightedUid: string | number | null;
+    } & {
+        readonly editable_query: string;
+    } & {} & {} & {};
+}>, SelectProps, import("../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TSelectCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISelect<import("@soxa-ui/core").ISelectProps, import("@soxa-ui/core").TSelectEvents>, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: string | undefined;
+    } & {} & {} & {} & {} & {} & {
+        dismiss_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;
+    } & {} & {
+        "keyboard:change:highlight": (payload: import("@soxa-ui/core").TValuePayload<import("@soxa-ui/plugins").THighlightPayload>) => void;
+    } & {
+        "editable:change:query": (payload: import("@soxa-ui/core").TValuePayload<string>) => void;
+    } & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {
+        readonly keyboard_highlightedUid: string | number | null;
+    } & {
+        readonly editable_query: string;
+    } & {} & {} & {};
+}>>>>;

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

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

package/dist/components/skeleton/Skeleton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { setupSkeleton } from './setup.component'
+	import type { SkeletonProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: SkeletonProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupSkeleton(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!--
+	Корень есть всегда — в нём содержимое; `rendered` и `visible` решают только, показана ли
+	заглушка, поэтому видимость в раскладку корня не передаётся. `aria-hidden` — на заглушке:
+	скрывать содержимое нельзя.
+-->
+<Dynamic
+	rendered
+	tag={state.tag}
+	attributes={toRootProps(
+		{ classes: state.classes, layout_styles: state.layout_styles },
+		[state.attrs, state.aria],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	{#if state.present}<div
+			class="so-skeleton__placeholder"
+			aria-hidden="true"
+		></div>{/if}{@render props.children?.()}
+</Dynamic>

package/dist/components/skeleton/Skeleton.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { ISkeleton } from '@soxa-ui/core';
+import type { SkeletonDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type SkeletonEventProps = EventProps<typeof SkeletonDescriptor>;
+export type SkeletonProps = UseDomProps<typeof SkeletonDescriptor, ISkeleton, SkeletonEventProps>;

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

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

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

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

package/dist/components/skeleton/index.js

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

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

@@ -0,0 +1,21 @@
+import { type TRootReceiver } from '../../adapter';
+import type { SkeletonProps } from './base.component';
+export declare function setupSkeleton(getProps: () => SkeletonProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISkeleton, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {};
+    outputs: object & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+    };
+}>, SkeletonProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISkeleton, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {};
+    outputs: object & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+    };
+}>>>;