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

package/dist/components/item-row/ItemRow.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { setupItemRow } from './setup.component'
+	import type { ButtonProps } from '../button/base.component'
+
+	let { ref = $bindable(), ...props }: ButtonProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupItemRow(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!--
+	Строка элемента коллекции — деталь разметки ListBox.Item, опции Select,
+	пунктов меню и тега. Пропсы и разметка — Button, сборка своя — по
+	`ItemRowDescriptor`: её экземпляр (`TItemRow`) роль и остановку Tab себе не
+	пишет, их несёт набор `aria` элемента, который разметка кладёт на строку.
+
+	Экземпляр создаёт это монтирование и отпускает его снятие: строка живёт,
+	пока нарисована, и окно `Virtual` держит их столько, сколько показывает.
+-->
+
+<!--
+	Slots render by a call, not by a block around: the owners (an option, a menu item) hand their
+	markup to all three slots of the row, and a set slot behind `{#if}` cost two blocks. The text
+	falls back to `state.text` in the block of the content. The parts are glued: Svelte would keep
+	a space between them as text.
+-->
+{#snippet plain()}{state.text}{/snippet}
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	{@render props.leading?.()}<span class="so-button__text"
+		>{@render (props.children ?? plain)({ text: state.text ?? '' })}</span
+	>{@render props.trailing?.()}
+</Dynamic>

package/dist/components/item-row/ItemRow.svelte.d.ts

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

package/dist/components/item-row/index.d.ts

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

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

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

package/dist/components/item-row/setup.component.d.ts

@@ -0,0 +1,43 @@
+import { type TRootReceiver } from '../../adapter';
+import type { ButtonProps } from '../button/base.component';
+export declare function setupItemRow(getProps: () => ButtonProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IButton, {
+    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 & {} & {} & {} & {};
+}>, ButtonProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IButton, {
+    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/item-row/setup.component.js

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

package/dist/components/label/Label.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { setupLabel } from './setup.component'
+	import type { LabelProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: LabelProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupLabel(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!--
+	Label — без `for` и `id`: контрол — первый labelable-потомок `label`. Внутри только
+	`span`: `div` и вложенный `label` HTML запрещает. Пустой текст не рисуется вовсе: метку
+	блока Svelte — комментарий — `:empty` темы не видит. Части вплотную: пробел между
+	соседями Svelte оставил бы.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	<span class="so-label__control">{@render props.children?.()}</span><span
+		class="so-label__text"
+	>
+		{#if props.content}
+			{@render props.content()}
+		{:else if state.text}
+			{state.text}
+		{/if}
+	</span>
+</Dynamic>

package/dist/components/label/Label.svelte.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { ILabel } from '@soxa-ui/core';
+import type { LabelDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type LabelEventProps = EventProps<typeof LabelDescriptor>;
+export type LabelProps = UseDomProps<typeof LabelDescriptor, ILabel, LabelEventProps>;

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

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

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

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

package/dist/components/label/index.js

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

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

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

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

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

package/dist/components/list-box/ListBox.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { IListBoxItem, TDrawnEntry } from '@soxa-ui/core'
+	import { Dynamic, toControlAttrs, toRootForward, toRootProps, toStyleText } from '../../adapter'
+	import { ListBoxItem } from './item'
+	import { ListBoxGroup } from './group'
+	import { setupListBox } from './setup.component'
+	import type { ListBoxAttributes, ListBoxProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: ListBoxProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupListBox(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+
+	// Остановка Tab — набором ниже `aria` и атрибутов потребителя: их `tabindex` главнее
+	const FOCUSABLE = { tabindex: 0 }
+</script>
+
+<!--
+	Набор `aria` — на узле списка, а не на корне: шапка и подвал — место полей и кнопок, а в
+	`listbox` ARIA пускает только опции и группы (поэтому и разделитель немой).
+	Одна петля на элементы и распорки: петли по блокам перемонтировали бы элемент. Проброс
+	слотов — только заданных: сниппет непрозрачен. Части вплотную: пробел Svelte оставил бы текстом.
+-->
+{#snippet entries(list: ReadonlyArray<TDrawnEntry<IListBoxItem>>)}
+	{#each list as entry (entry.key)}
+		{#if entry.kind === 'filler'}
+			<div
+				class="so-list-box__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}
+			<ListBoxItem
+				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}
+<Dynamic
+	rendered={state.rendered}
+	tag="div"
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.dataset],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	{@render props.header?.()}<div
+		class="so-list-box__list"
+		{...FOCUSABLE}
+		{...state.aria}
+		{...toControlAttrs<ListBoxAttributes>(binding.forwardProps)}
+	>
+		{#if props.children}
+			{@render props.children()}
+		{:else}
+			{#each state.drawnSections ?? [] as section, index (section.key)}
+				{#if state.groupSeparators && index > 0}<div
+						class="so-list-box__separator"
+						aria-hidden="true"
+					></div>{/if}{#if section.group}<ListBoxGroup label={section.group.label}
+						>{@render entries(section.entries)}</ListBoxGroup
+					>{:else}{@render entries(section.entries)}{/if}
+			{/each}
+		{/if}{#if state.shown?.length === 0}
+			{@render props.empty?.()}
+		{/if}
+	</div>{@render props.footer?.()}
+</Dynamic>

package/dist/components/list-box/ListBox.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { IListBox } from '@soxa-ui/core';
+import type { ListBoxCollectionDescriptor, ListBoxDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../types';
+export type ListBoxEventProps = EventProps<typeof ListBoxDescriptor> & EventProps<typeof ListBoxCollectionDescriptor>;
+/** Атрибуты списка: класс и стиль — корню, остальное — узлу списка с `role="listbox"`. */
+export type ListBoxAttributes = TDomAttributes<typeof ListBoxDescriptor, ListBoxEventProps>;
+export type ListBoxProps = UseDomProps<typeof ListBoxDescriptor, IListBox, ListBoxEventProps>;

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

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

package/dist/components/list-box/group/Group.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../../adapter'
+	import { setupListBoxGroup } from './setup.component'
+	import type { ListBoxGroupProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: ListBoxGroupProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupListBoxGroup(() => 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-list-box-group__label" {...state.labelAria}>
+			{state.label}
+		</div>{/if}{@render props.children?.()}
+</Dynamic>

package/dist/components/list-box/group/Group.svelte.d.ts

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

package/dist/components/list-box/group/base.component.d.ts

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

package/dist/components/list-box/group/base.component.js

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

package/dist/components/list-box/group/index.d.ts

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

package/dist/components/list-box/group/index.js

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

package/dist/components/list-box/group/setup.component.d.ts

@@ -0,0 +1,17 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { ListBoxGroupProps } from './base.component';
+export declare function setupListBoxGroup(getProps: () => ListBoxGroupProps, 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 & {} & {} & {};
+}>, ListBoxGroupProps, 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/list-box/group/setup.component.js

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

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

@@ -0,0 +1,8 @@
+export * from './base.component';
+export { setupListBox } from './setup.component';
+export * from './item';
+export * from './group';
+export declare const ListBox: import("svelte").Component<import("./base.component").ListBoxProps, {}, "ref"> & {
+    Item: import("svelte").Component<import("./item").ListBoxItemProps, {}, "ref">;
+    Group: import("svelte").Component<import("./group").ListBoxGroupProps, {}, "ref">;
+};

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

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import ListBoxComponent from './ListBox.svelte';
+import { ListBoxItem } from './item';
+import { ListBoxGroup } from './group';
+export * from './base.component';
+export { setupListBox } from './setup.component';
+export * from './item';
+export * from './group';
+export const ListBox = withParts(ListBoxComponent, { Item: ListBoxItem, Group: ListBoxGroup });

package/dist/components/list-box/item/Item.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toControlAttrs, toRootForward, toRootProps } from '../../../adapter'
+	import { ItemRow } from '../../item-row'
+	import { Icon } from '../../icon'
+	import { setupListBoxItem } from './setup.component'
+	import type { ListBoxItemAttributes, ListBoxItemProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: ListBoxItemProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupListBoxItem(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+	const choose = clickAction(() => context?.adapters.list.choose())
+
+	const CHECK = roleIcon('check')
+</script>
+
+<!--
+	Тег строки фиксирован (`div`): под него написан `TListBoxItem._ariaTag`. Своих роли и
+	`tabindex` строка (`ItemRow`) не пишет: их несёт набор элемента.
+	Отметка рисуется и у невыбранных: она держит место. `aria-hidden`: выбор скринридеру
+	объявляет `aria-selected`.
+-->
+{#snippet mark()}
+	<span class="so-list-box-item__indicator" aria-hidden="true">
+		{#if props['indicator-icon']}
+			{@render props['indicator-icon']({ selected: state.selected ?? false })}
+		{:else if state.selected}
+			<Icon embedded="list-box.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="list-box.row"
+		tag="div"
+		view={state.view}
+		disabled={state.disabled}
+		size={state.size}
+		variant={state.variant}
+		{...state.aria}
+		{...state.dataset}
+		{...toControlAttrs<ListBoxItemAttributes>(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/list-box/item/Item.svelte.d.ts

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

package/dist/components/list-box/item/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { IListBoxItem } from '@soxa-ui/core';
+import type { ListBoxCollectionItemDescriptor, ListBoxItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type ListBoxItemEventProps = EventProps<typeof ListBoxItemDescriptor> & EventProps<typeof ListBoxCollectionItemDescriptor>;
+/** Атрибуты элемента: класс и стиль — корню, остальное — строке. */
+export type ListBoxItemAttributes = TDomAttributes<typeof ListBoxItemDescriptor, ListBoxItemEventProps>;
+export type ListBoxItemProps = UseDomProps<typeof ListBoxItemDescriptor, IListBoxItem, ListBoxItemEventProps>;

package/dist/components/list-box/item/base.component.js

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

package/dist/components/list-box/item/index.d.ts

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

package/dist/components/list-box/item/index.js

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

package/dist/components/list-box/item/setup.component.d.ts

@@ -0,0 +1,61 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { ListBoxItemProps } from './base.component';
+export declare function setupListBoxItem(getProps: () => ListBoxItemProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IListBoxItem<import("@soxa-ui/core").IListBoxItemProps, import("@soxa-ui/core").TListBoxItemEvents>, {
+    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;
+    } & {} & {};
+}>, ListBoxItemProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TListBoxItemCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IListBoxItem<import("@soxa-ui/core").IListBoxItemProps, import("@soxa-ui/core").TListBoxItemEvents>, {
+    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").IListBoxItem<import("@soxa-ui/core").IListBoxItemProps, import("@soxa-ui/core").TListBoxItemEvents>, import("@soxa-ui/core").TListBoxCollectionExtensions> | undefined;
+};

package/dist/components/list-box/item/setup.component.js

@@ -0,0 +1,15 @@
+import { ListBoxCollectionItemDescriptor, ListBoxItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSvelteAdapterContext, joinBindings, useAdapter, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupListBoxItem(getProps, mountId, receive) {
+    const elevator = useElevator();
+    const props = getProps();
+    const adapter = createSvelteAdapterContext(ListBoxItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+        mountId,
+    });
+    const item = createSvelteAdapterContext(ListBoxCollectionItemDescriptor(), { 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 });
+}