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

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

@@ -0,0 +1,47 @@
+import { type TRootReceiver } from '../../adapter';
+import type { ListBoxProps } from './base.component';
+export declare function setupListBox(getProps: () => ListBoxProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IListBox<import("@soxa-ui/core").IListBoxProps, import("@soxa-ui/core").TListBoxEvents>, {
+    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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>, ListBoxProps, import("../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TListBoxCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IListBox<import("@soxa-ui/core").IListBoxProps, import("@soxa-ui/core").TListBoxEvents>, {
+    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/list-box/setup.component.js

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

package/dist/components/menu/Menu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Dynamic, toRootProps } from '../../adapter'
+	import { Frame } from '../frame'
+	import { drawItems } from './submenu/Submenu.svelte'
+	import { setupMenu } from './setup.component'
+	import type { MenuProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: MenuProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupMenu(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+</script>
+
+<!--
+	Триггер — внутри корня: нажатие по открытому — нажатие внутри владельца, и панель не мигает.
+	Открытость — `visible` панели, а не `rendered`: закрытие не должно вычищать коллекцию.
+	Роль `menu` — у панели, а не у списка: узел с ролью и фокусом должен быть один.
+	Части вплотную: пробел между блоками Svelte оставил бы в корне и в списке текстом.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(state, [state.attrs, state.dataset], binding.forwardProps)}
+	attach={binding.attachElement}
+>
+	{@render props.trigger?.({
+		triggerAria: state.triggerAria ?? {},
+		triggerDataset: state.triggerDataset ?? {},
+	})}<Frame
+		embedded="menu.frame"
+		class={state.panelClasses}
+		tabindex={-1}
+		visible={state.visible && state.open}
+		strategy="fixed"
+		anchor_anchor={binding.rootElement}
+		anchor_point={state.point}
+		anchor_placement={state.placement}
+		anchor_offset={4}
+		{...state.aria}
+		{...state.dismiss_ownerAttribute}
+	>
+		<!-- Items from the panel's first opening on (`contentRendered`) -->
+		<div class="so-menu__list">
+			{#if state.contentRendered}
+				{#if props.children}
+					{@render props.children()}
+				{:else}
+					{@render drawItems(state, props)}
+				{/if}
+			{/if}
+		</div>
+	</Frame>
+</Dynamic>

package/dist/components/menu/Menu.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IMenu } from '@soxa-ui/core';
+import type { MenuCollectionDescriptor, MenuDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type MenuEventProps = EventProps<typeof MenuDescriptor> & EventProps<typeof MenuCollectionDescriptor>;
+/** Атрибуты — обёртке триггера, как у Popover: ARIA меню — у панели. */
+export type MenuProps = UseDomProps<typeof MenuDescriptor, IMenu, MenuEventProps>;

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

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

package/dist/components/menu/checkbox-item/CheckboxItem.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toControlAttrs, toRootForward, toRootProps } from '../../../adapter'
+	import { ItemRow } from '../../item-row'
+	import { Icon } from '../../icon'
+	import { setupMenuCheckboxItem } from './setup.component'
+	import type { MenuCheckboxItemAttributes, MenuCheckboxItemProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: MenuCheckboxItemProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupMenuCheckboxItem(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+	const toggle = clickAction(() => context?.adapters.menu.toggle())
+
+	const CHECK = roleIcon('check')
+</script>
+
+<!--
+	Отметка — и у неотмеченного: обёртка держит колонку отметок. `aria-hidden`: состояние
+	объявляет `aria-checked`. Обёртки без пробелов: пустую тема прячет по `:empty`.
+-->
+{#snippet mark()}
+	{#if props['indicator-icon']}
+		{@render props['indicator-icon']({ selected: state.selected ?? false })}
+	{:else if state.selected}
+		<Icon embedded="menu.indicator" tag={CHECK} size={state.size} />
+	{/if}
+{/snippet}
+
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.dataset, state.attrs],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	<ItemRow
+		embedded="menu.row"
+		tag="div"
+		size={state.size}
+		disabled={state.disabled}
+		{...state.aria}
+		{...toControlAttrs<MenuCheckboxItemAttributes>(binding.forwardProps)}
+		{@attach toggle}
+	>
+		{#snippet leading()}
+			<span class="so-menu-item__indicator" aria-hidden="true">{@render mark()}</span><span
+				class="so-menu-item__icon">{@render props.leading?.()}</span
+			>
+		{/snippet}
+		{#if props.children}
+			{@render props.children({
+				text: state.text ?? '',
+				selected: state.selected ?? false,
+			})}
+		{:else}
+			{state.text}
+		{/if}
+		{#snippet trailing()}
+			<span class="so-menu-item__shortcut">{@render props.trailing?.()}</span>
+		{/snippet}
+	</ItemRow>
+</Dynamic>

package/dist/components/menu/checkbox-item/CheckboxItem.svelte.d.ts

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

package/dist/components/menu/checkbox-item/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { IMenuCheckboxItem } from '@soxa-ui/core';
+import type { MenuCheckboxItemDescriptor, MenuCollectionCheckboxItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type MenuCheckboxItemEventProps = EventProps<typeof MenuCheckboxItemDescriptor> & EventProps<typeof MenuCollectionCheckboxItemDescriptor>;
+/** Атрибуты флажка: класс и стиль — корню, остальное — строке с `role="menuitemcheckbox"`. */
+export type MenuCheckboxItemAttributes = TDomAttributes<typeof MenuCheckboxItemDescriptor, MenuCheckboxItemEventProps>;
+export type MenuCheckboxItemProps = UseDomProps<typeof MenuCheckboxItemDescriptor, IMenuCheckboxItem, MenuCheckboxItemEventProps>;

package/dist/components/menu/checkbox-item/base.component.js

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

package/dist/components/menu/checkbox-item/index.d.ts

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

package/dist/components/menu/checkbox-item/index.js

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

package/dist/components/menu/checkbox-item/setup.component.d.ts

@@ -0,0 +1,53 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { MenuCheckboxItemProps } from './base.component';
+export declare function setupMenuCheckboxItem(getProps: () => MenuCheckboxItemProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuCheckboxItem, {
+    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 & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    };
+}>, MenuCheckboxItemProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuItemCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuCheckboxItem, {
+    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 & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    };
+}>>>> & {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+};

package/dist/components/menu/checkbox-item/setup.component.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+export * from './base.component';
+export { setupMenu } from './setup.component';
+export * from './item';
+export * from './checkbox-item';
+export * from './radio-item';
+export * from './submenu';
+export * from './popover-item';
+export * from './group';
+export * from './radio-group';
+export * from './separator';
+export declare const Menu: import("svelte").Component<import("./base.component").MenuProps, {}, "ref"> & {
+    Item: import("svelte").Component<import("./item").MenuItemProps, {}, "ref">;
+    CheckboxItem: import("svelte").Component<import("./checkbox-item").MenuCheckboxItemProps, {}, "ref">;
+    RadioItem: import("svelte").Component<import("./radio-item").MenuRadioItemProps, {}, "ref">;
+    Submenu: import("svelte").Component<import("./submenu").MenuSubmenuProps, {}, "ref">;
+    PopoverItem: import("svelte").Component<import("./popover-item").MenuPopoverItemProps, {}, "ref">;
+    Group: import("svelte").Component<import("./group").MenuGroupProps, {}, "ref">;
+    RadioGroup: import("svelte").Component<import("./radio-group").MenuRadioGroupProps, {}, "ref">;
+    Separator: import("svelte").Component<import("./separator").MenuSeparatorProps, {}, "ref">;
+};

package/dist/components/menu/index.js

@@ -0,0 +1,30 @@
+import { withParts } from '@soxa-ui/setup';
+import MenuComponent from './Menu.svelte';
+import { MenuItem } from './item';
+import { MenuCheckboxItem } from './checkbox-item';
+import { MenuRadioItem } from './radio-item';
+import { MenuSubmenu } from './submenu';
+import { MenuPopoverItem } from './popover-item';
+import { MenuGroup } from './group';
+import { MenuRadioGroup } from './radio-group';
+import { MenuSeparator } from './separator';
+export * from './base.component';
+export { setupMenu } from './setup.component';
+export * from './item';
+export * from './checkbox-item';
+export * from './radio-item';
+export * from './submenu';
+export * from './popover-item';
+export * from './group';
+export * from './radio-group';
+export * from './separator';
+export const Menu = withParts(MenuComponent, {
+    Item: MenuItem,
+    CheckboxItem: MenuCheckboxItem,
+    RadioItem: MenuRadioItem,
+    Submenu: MenuSubmenu,
+    PopoverItem: MenuPopoverItem,
+    Group: MenuGroup,
+    RadioGroup: MenuRadioGroup,
+    Separator: MenuSeparator,
+});

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { clickAction, Dynamic, toControlAttrs, toRootForward, toRootProps } from '../../../adapter'
+	import { ItemRow } from '../../item-row'
+	import { setupMenuItem } from './setup.component'
+	import type { MenuItemAttributes, MenuItemProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: MenuItemProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupMenuItem(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+	const choose = clickAction(() => context?.adapters.menu.choose())
+</script>
+
+<!-- Обёртки значка и сочетания — у каждого пункта, без пробелов: пустую тема прячет по `:empty`. -->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.dataset, state.attrs],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	<ItemRow
+		embedded="menu.row"
+		tag="div"
+		size={state.size}
+		disabled={state.disabled}
+		{...state.aria}
+		{...toControlAttrs<MenuItemAttributes>(binding.forwardProps)}
+		{@attach choose}
+	>
+		{#snippet leading()}
+			<span class="so-menu-item__icon">{@render props.leading?.()}</span>
+		{/snippet}
+		{#if props.children}
+			{@render props.children({ text: state.text ?? '' })}
+		{:else}
+			{state.text}
+		{/if}
+		{#snippet trailing()}
+			<span class="so-menu-item__shortcut">{@render props.trailing?.()}</span>
+		{/snippet}
+	</ItemRow>
+</Dynamic>

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

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

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

@@ -0,0 +1,8 @@
+import type { IMenuItem } from '@soxa-ui/core';
+import type { MenuCollectionItemDescriptor, MenuItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type MenuItemEventProps = EventProps<typeof MenuItemDescriptor> & EventProps<typeof MenuCollectionItemDescriptor>;
+/** Атрибуты пункта: класс и стиль — корню, остальное — строке с `role="menuitem"`. */
+export type MenuItemAttributes = TDomAttributes<typeof MenuItemDescriptor, MenuItemEventProps>;
+/** Размер диктует меню, вариант — свой. */
+export type MenuItemProps = UseDomProps<typeof MenuItemDescriptor, IMenuItem, MenuItemEventProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { MenuItemProps } from './base.component';
+export declare function setupMenuItem(getProps: () => MenuItemProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, {
+    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 & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    };
+}>, MenuItemProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuItemCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, {
+    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 & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    };
+}>>>> & {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+};

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

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