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

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { ListBoxGroupProps } from './base.component';
+/** Элементы списка под общей подписью: ключ группы элементы читают из её слоя (`Elevate`). */
+export declare function ListBoxGroup(props: ListBoxGroupProps): JSX.Element;

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

@@ -0,0 +1,63 @@
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { createPartProps, createRootProps } from "../../../adapter/common/root.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { Elevate } from "../../../adapter/elevator/Elevate.js";
+import { setupListBoxGroup } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/list-box/group/Group.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-list-box-group__label>`);
+/** Элементы списка под общей подписью: ключ группы элементы читают из её слоя (`Elevate`). */
+function ListBoxGroup(props) {
+	const binding = setupListBoxGroup(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	const labelAria = createPartProps(() => state.labelAria);
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return [createComponent(Show, {
+						get when() {
+							return state.label;
+						},
+						get children() {
+							var _el$ = _tmpl$();
+							spread(_el$, mergeProps(labelAria), false, true);
+							insert(_el$, () => state.label);
+							return _el$;
+						}
+					}), createComponent(Elevate, {
+						get layer() {
+							return binding.layer;
+						},
+						get children() {
+							return renderSlot(props.children);
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { ListBoxGroup };

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

@@ -0,0 +1,7 @@
+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>;
+/** Пропсы группы: подпись — проп `label`, элементы — дети. */
+export type ListBoxGroupProps = UseDomProps<typeof ListBoxGroupDescriptor, IItemGroup, ListBoxGroupEventProps>;

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

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

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

@@ -0,0 +1,19 @@
+import type { ListBoxGroupProps } from './base.component';
+/** В коллекцию группа не входит: `TItemGroupExtension` опускает элементам её ключ. */
+export declare function setupListBoxGroup(props: ListBoxGroupProps): {
+    layer: import("../../../adapter").TElevatorLayer;
+    ctrl: object & import("@soxa-ui/core").IItemGroup<import("@soxa-ui/core").IItemGroupProps, import("@soxa-ui/core").TItemGroupEvents>;
+    state: 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 & {} & {} & {};
+    }>>;
+    forwardProps: () => Partial<ListBoxGroupProps>;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ref: (el: Element) => void;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+};

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

@@ -0,0 +1,19 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { ListBoxGroupDescriptor, TItemGroupExtension } from "@soxa-ui/setup";
+//#region src/components/list-box/group/setup.component.ts
+/** В коллекцию группа не входит: `TItemGroupExtension` опускает элементам её ключ. */
+function setupListBoxGroup(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(ListBoxGroupDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TItemGroupExtension, { elevator });
+	return {
+		...useAdapter(adapter, props),
+		layer
+	};
+}
+//#endregion
+export { setupListBoxGroup };

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

@@ -0,0 +1,11 @@
+import { ListBox as ListBoxComponent } from './ListBox';
+import { ListBoxItem } from './item';
+import { ListBoxGroup } from './group';
+export * from './base.component';
+export { setupListBox } from './setup.component';
+export * from './item';
+export * from './group';
+export declare const ListBox: typeof ListBoxComponent & {
+    Item: typeof ListBoxItem;
+    Group: typeof ListBoxGroup;
+};

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

@@ -0,0 +1,14 @@
+import "./item/setup.component.js";
+import { ListBoxItem } from "./item/Item.js";
+import "./group/setup.component.js";
+import { ListBoxGroup } from "./group/Group.js";
+import "./setup.component.js";
+import { ListBox as ListBox$1 } from "./ListBox.js";
+import { withParts } from "@soxa-ui/setup";
+//#region src/components/list-box/index.ts
+var ListBox = withParts(ListBox$1, {
+	Item: ListBoxItem,
+	Group: ListBoxGroup
+});
+//#endregion
+export { ListBox };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { ListBoxItemProps } from './base.component';
+/**
+ * Элемент списка: строка — `ItemRow` на `div` (под этот тег написан `TListBoxItem._ariaTag`),
+ * написанное на корне, кроме класса и стиля, получает она. Клик — `list.choose()`
+ * item-адаптера, а не `selection.toggle()`: выключенному откажет список, как клавиатуре.
+ */
+export declare function ListBoxItem(props: ListBoxItemProps): JSX.Element;

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

@@ -0,0 +1,97 @@
+import { renderSlot, resolveSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { clickAction } from "../../../adapter/common/click-action.js";
+import { createRootProps, toControlAttrs, toRootForward } from "../../../adapter/common/root.js";
+import { roleIcon } from "../../../adapter/common/icon.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { Icon } from "../../icon/Icon.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { setupListBoxItem } from "./setup.component.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+//#region src/components/list-box/item/Item.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-list-box-item__indicator aria-hidden=true>`);
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+var CHECK = roleIcon("check");
+/**
+* Элемент списка: строка — `ItemRow` на `div` (под этот тег написан `TListBoxItem._ariaTag`),
+* написанное на корне, кроме класса и стиля, получает она. Клик — `list.choose()`
+* item-адаптера, а не `selection.toggle()`: выключенному откажет список, как клавиатуре.
+*/
+function ListBoxItem(props) {
+	const binding = setupListBoxItem(props);
+	const state = binding.state;
+	const context = binding.context;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.dataset, state.attrs],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const content = resolveSlot(() => props.children, () => ({
+		text: state.text ?? "",
+		selected: state.selected ?? false
+	}));
+	const indicatorIcon = resolveSlot(() => props["indicator-icon"], () => ({ selected: state.selected ?? false }));
+	/** The row's attributes: all of the consumer's but the class and the style. */
+	const row = () => toControlAttrs(binding.forwardProps());
+	const choose = clickAction(() => context?.adapters.list.choose());
+	/** Обёртка отметки — и у невыбранных: она резервирует место. */
+	const mark = () => (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => indicatorIcon() ?? (state.selected ? createComponent(Icon, {
+			embedded: "list-box.indicator",
+			tag: CHECK,
+			get size() {
+				return state.size;
+			}
+		}) : null));
+		return _el$;
+	})();
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return createComponent(ItemRow, mergeProps({
+						embedded: "list-box.row",
+						tag: "div",
+						get view() {
+							return state.view;
+						},
+						get disabled() {
+							return state.disabled;
+						},
+						get size() {
+							return state.size;
+						},
+						get variant() {
+							return state.variant;
+						}
+					}, () => state.aria, () => state.dataset, row, {
+						ref: choose,
+						get leading() {
+							return [memo(() => memo(() => state.indicator === "start")() ? mark() : null), memo(() => renderSlot(props.leading))];
+						},
+						get trailing() {
+							return [memo(() => renderSlot(props.trailing)), memo(() => memo(() => state.indicator === "end")() ? mark() : null)];
+						},
+						get children() {
+							return content() ?? state.text;
+						}
+					}));
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { ListBoxItem };

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

@@ -0,0 +1,9 @@
+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>;
+/** Пропсы элемента: членство в коллекции (`selected`) несёт интерфейс пропсов ядра. */
+export type ListBoxItemProps = UseDomProps<typeof ListBoxItemDescriptor, IListBoxItem, ListBoxItemEventProps>;

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

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

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

@@ -0,0 +1,42 @@
+import type { ListBoxItemProps } from './base.component';
+/** `context` — разметке: выбор — метод item-адаптера. */
+export declare function setupListBoxItem(props: ListBoxItemProps): {
+    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;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").IListBoxItem<import("@soxa-ui/core").IListBoxItemProps, import("@soxa-ui/core").TListBoxItemEvents>;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../../adapter").TJoinedState<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;
+        } & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TListBoxItemCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<ListBoxItemProps>;
+};

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

@@ -0,0 +1,25 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { ListBoxCollectionItemDescriptor, ListBoxItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/list-box/item/setup.component.ts
+/** `context` — разметке: выбор — метод item-адаптера. */
+function setupListBoxItem(props) {
+	const { elevator } = useElevator();
+	const adapter = createSolidAdapterContext(ListBoxItemDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	const item = createSolidAdapterContext(ListBoxCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator
+	});
+	const itemBinding = useCollectionAdapter(item, props);
+	const owner = useAdapter(adapter, props);
+	return {
+		...joinBindings(owner, itemBinding),
+		context: item.instance.context
+	};
+}
+//#endregion
+export { setupListBoxItem };

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

@@ -0,0 +1,35 @@
+import type { ListBoxProps } from './base.component';
+export declare function setupListBox(props: ListBoxProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").IListBox<import("@soxa-ui/core").IListBoxProps, import("@soxa-ui/core").TListBoxEvents>;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../adapter").TJoinedState<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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TListBoxCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<ListBoxProps>;
+};

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

@@ -0,0 +1,27 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { ListBoxCollectionDescriptor, ListBoxDescriptor, TCollectionExtension, TDragAndDropCollectionExtension, TVirtualCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/list-box/setup.component.ts
+function setupListBox(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(ListBoxDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	const collectionAdapter = createSolidAdapterContext(ListBoxCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props.engine
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator }).use(TDragAndDropCollectionExtension, { elevator }).use(TVirtualCollectionExtension, { elevator });
+	const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+	const owner = useAdapter(adapter, props);
+	return {
+		...joinBindings(owner, collectionBinding),
+		layer
+	};
+}
+//#endregion
+export { setupListBox };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { MenuProps } from './base.component';
+/**
+ * Меню у кнопки или контекстное: корень — обёртка триггера и якорь панели. Роль
+ * `menu` — у панели, а не у списка `so-menu__list`: фокус без подсветки держит
+ * панель, и узел с ролью и фокусом должен быть один.
+ */
+export declare function Menu(props: MenuProps): JSX.Element;

package/dist/components/menu/Menu.js

@@ -0,0 +1,97 @@
+import { liveScope, renderSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { createRootProps, toPartClass } from "../../adapter/common/root.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { Frame } from "../frame/Frame.js";
+import { drawItems } from "./submenu/Submenu.js";
+import { setupMenu } from "./setup.component.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+//#region src/components/menu/Menu.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-menu__list>`);
+/**
+* Меню у кнопки или контекстное: корень — обёртка триггера и якорь панели. Роль
+* `menu` — у панели, а не у списка `so-menu__list`: фокус без подсветки держит
+* панель, и узел с ролью и фокусом должен быть один.
+*/
+function Menu(props) {
+	const binding = setupMenu(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.attrs, state.dataset],
+		forward: binding.forwardProps()
+	}));
+	const trigger = liveScope(() => ({
+		triggerAria: state.triggerAria ?? {},
+		triggerDataset: state.triggerDataset ?? {}
+	}));
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return createComponent(Elevate, {
+						get layer() {
+							return binding.layer;
+						},
+						get children() {
+							return [memo(() => renderSlot(props.trigger, trigger)), createComponent(Frame, mergeProps({
+								embedded: "menu.frame",
+								get ["class"]() {
+									return toPartClass(state.panelClasses);
+								},
+								tabindex: "-1",
+								get visible() {
+									return memo(() => !!state.visible)() && state.open;
+								},
+								strategy: "fixed",
+								get anchor_anchor() {
+									return binding.rootElement();
+								},
+								get anchor_point() {
+									return state.point;
+								},
+								get anchor_placement() {
+									return state.placement;
+								},
+								anchor_offset: 4
+							}, () => state.aria, () => state.dismiss_ownerAttribute, { get children() {
+								var _el$ = _tmpl$();
+								insert(_el$, createComponent(Show, {
+									get when() {
+										return state.contentRendered;
+									},
+									get children() {
+										return createComponent(ResolvedSlot, {
+											get content() {
+												return props.children;
+											},
+											get fallback() {
+												return drawItems(state, props);
+											}
+										});
+									}
+								}));
+								return _el$;
+							} }))];
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Menu };

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

@@ -0,0 +1,7 @@
+import type { IMenu } from '@soxa-ui/core';
+import type { MenuCollectionDescriptor, MenuDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События Menu — свои и фасада коллекции. */
+export type MenuEventProps = EventProps<typeof MenuDescriptor> & EventProps<typeof MenuCollectionDescriptor>;
+/** Пропсы Menu; атрибуты потребителя — корню, обёртке триггера. */
+export type MenuProps = UseDomProps<typeof MenuDescriptor, IMenu, MenuEventProps>;

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'solid-js';
+import type { MenuCheckboxItemProps } from './base.component';
+/**
+ * Флажок меню: строка пункта с отметкой в начале. Обёртка отметки — и у
+ * неотмеченного: по ней тема видит у меню колонку отметок.
+ */
+export declare function MenuCheckboxItem(props: MenuCheckboxItemProps): JSX.Element;

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

@@ -0,0 +1,98 @@
+import { renderSlot, resolveSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { clickAction } from "../../../adapter/common/click-action.js";
+import { createRootProps, toControlAttrs, toRootForward } from "../../../adapter/common/root.js";
+import { roleIcon } from "../../../adapter/common/icon.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { Icon } from "../../icon/Icon.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { setupMenuCheckboxItem } from "./setup.component.js";
+import { createComponent, insert, mergeProps, template } from "solid-js/web";
+//#region src/components/menu/checkbox-item/CheckboxItem.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-menu-item__indicator aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=so-menu-item__icon>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=so-menu-item__shortcut>`);
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+var CHECK = roleIcon("check");
+/**
+* Флажок меню: строка пункта с отметкой в начале. Обёртка отметки — и у
+* неотмеченного: по ней тема видит у меню колонку отметок.
+*/
+function MenuCheckboxItem(props) {
+	const binding = setupMenuCheckboxItem(props);
+	const state = binding.state;
+	const context = binding.context;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.dataset, state.attrs],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const content = resolveSlot(() => props.children, () => ({
+		text: state.text ?? "",
+		selected: state.selected ?? false
+	}));
+	const indicatorIcon = resolveSlot(() => props["indicator-icon"], () => ({ selected: state.selected ?? false }));
+	/** The row's attributes: all of the consumer's but the class and the style. */
+	const row = () => toControlAttrs(binding.forwardProps());
+	const toggle = clickAction(() => context?.adapters.menu.toggle());
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return createComponent(ItemRow, mergeProps({
+						embedded: "menu.row",
+						tag: "div",
+						get size() {
+							return state.size;
+						},
+						get disabled() {
+							return state.disabled;
+						}
+					}, () => state.aria, row, {
+						ref: toggle,
+						get leading() {
+							return [(() => {
+								var _el$ = _tmpl$();
+								insert(_el$, () => indicatorIcon() ?? (state.selected ? createComponent(Icon, {
+									embedded: "menu.indicator",
+									tag: CHECK,
+									get size() {
+										return state.size;
+									}
+								}) : null));
+								return _el$;
+							})(), (() => {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, () => renderSlot(props.leading));
+								return _el$2;
+							})()];
+						},
+						get trailing() {
+							return (() => {
+								var _el$3 = _tmpl$3();
+								insert(_el$3, () => renderSlot(props.trailing));
+								return _el$3;
+							})();
+						},
+						get children() {
+							return content() ?? state.text;
+						}
+					}));
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { MenuCheckboxItem };

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

@@ -0,0 +1,9 @@
+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>;
+/** Пропсы флажка; отметка (`selected`) — выбор коллекции меню. */
+export type MenuCheckboxItemProps = UseDomProps<typeof MenuCheckboxItemDescriptor, IMenuCheckboxItem, MenuCheckboxItemEventProps>;

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

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