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

package/dist/components/input/Input.js

@@ -0,0 +1,159 @@
+import { resolveSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { clickAction } from "../../adapter/common/click-action.js";
+import { createPartProps, createRootProps, toControlAttrs, toRootForward } from "../../adapter/common/root.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { fieldText } from "../../adapter/runtime/field-text.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { setupInput } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/input/Input.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-input__leading>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<input type=text>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-input__trailing>`);
+/** Глиф кнопки очистки — компонент на роль: `tag` у Icon — корень, а не роль. */
+var CloseGlyph = roleIcon("close");
+/**
+* A text field: `<input>` inside the root, the slots at the sides, the clear button before
+* `trailing`. The clear button stops the click at itself: a select-only Select opens its panel
+* on a click on the root.
+*/
+function Input(props) {
+	const binding = setupInput(props);
+	const state = binding.state;
+	const ctrl = binding.ctrl;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.attrs, state.dataset],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const aria = createPartProps(() => state.aria);
+	const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+	const text = fieldText(() => state.value);
+	const clear = clickAction((event) => {
+		event.stopPropagation();
+		ctrl.clear();
+	});
+	function content() {
+		const leadingSlot = resolveSlot(() => props.leading, () => ({ ctrl }));
+		const clearSlot = resolveSlot(() => props.clear, () => ({ clear: ctrl.clear }));
+		const trailingSlot = resolveSlot(() => props.trailing, () => ({ ctrl }));
+		return [
+			createComponent(Show, {
+				get when() {
+					return leadingSlot();
+				},
+				get children() {
+					var _el$ = _tmpl$();
+					insert(_el$, leadingSlot);
+					return _el$;
+				}
+			}),
+			(() => {
+				var _el$2 = _tmpl$2();
+				spread(_el$2, mergeProps({
+					get id() {
+						return state.id;
+					},
+					get name() {
+						return state.name;
+					},
+					get disabled() {
+						return state.disabled;
+					},
+					get readonly() {
+						return state.readonly;
+					},
+					get required() {
+						return state.required;
+					},
+					get placeholder() {
+						return state.placeholder;
+					}
+				}, aria, control, text), false, false);
+				return _el$2;
+			})(),
+			createComponent(Show, {
+				get when() {
+					return state.clearable === true || clearSlot() !== void 0 || trailingSlot() !== void 0;
+				},
+				get children() {
+					var _el$3 = _tmpl$3();
+					insert(_el$3, createComponent(Show, {
+						get when() {
+							return clearSlot();
+						},
+						get fallback() {
+							return createComponent(Show, {
+								get when() {
+									return state.clearable;
+								},
+								get children() {
+									return createComponent(Button, mergeProps({
+										embedded: "input.clear",
+										type: "button",
+										"class": "so-input__clear",
+										get size() {
+											return state.size;
+										},
+										get disabled() {
+											return state.disabled;
+										}
+									}, () => state.clearAria, {
+										ref: clear,
+										get children() {
+											return createComponent(Icon, {
+												embedded: "input.clear-icon",
+												tag: CloseGlyph,
+												get size() {
+													return state.size;
+												}
+											});
+										}
+									}));
+								}
+							});
+						},
+						get children() {
+							return clearSlot();
+						}
+					}), null);
+					insert(_el$3, trailingSlot, null);
+					return _el$3;
+				}
+			})
+		];
+	}
+	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 content();
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Input };

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

@@ -0,0 +1,8 @@
+import type { IInput } from '@soxa-ui/core';
+import type { InputDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+/** События слоя Input (core + плагины), выведены из дескриптора автоматически. */
+export type InputEventProps = EventProps<typeof InputDescriptor>;
+/** Атрибуты Input: класс и стиль — корню, остальное — полю `<input>`. */
+export type InputAttributes = TDomAttributes<typeof InputDescriptor, InputEventProps, TFieldAttributes>;
+export type InputProps = UseDomProps<typeof InputDescriptor, IInput, InputEventProps, TFieldAttributes>;

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupInput } from './setup.component';
+export { Input } from './Input';

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

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

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

@@ -0,0 +1,18 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { InputDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/input/setup.component.ts
+function setupInput(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(InputDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator });
+	return {
+		...useAdapter(adapter, props),
+		layer
+	};
+}
+//#endregion
+export { setupInput };

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

@@ -0,0 +1,7 @@
+import type { IInputControl } from '@soxa-ui/core';
+import type { InputControlDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+/** События слоя InputControl (core + плагины), выведены из дескриптора автоматически. */
+export type InputControlEventProps = EventProps<typeof InputControlDescriptor>;
+/** Значение слоя — любого типа: число у оценки, строка у поля. */
+export type InputControlProps = UseProps<typeof InputControlDescriptor, IInputControl<unknown>, InputControlEventProps>;

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

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

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

@@ -0,0 +1,26 @@
+import type { InputControlProps } from './base.component';
+export declare function setupInputControl(props: InputControlProps): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IInputControl<unknown, import("@soxa-ui/core").IInputControlProps<unknown>, import("@soxa-ui/core").TInputControlEvents<unknown>>, {
+    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 & {} & {} & {} & {} & {};
+}>, InputControlProps>;

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

@@ -0,0 +1,6 @@
+import type { IInteractive } from '@soxa-ui/core';
+import type { InteractiveDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+/** События слоя Interactive (core + плагины), выведены из дескриптора автоматически. */
+export type InteractiveEventProps = EventProps<typeof InteractiveDescriptor>;
+export type InteractiveProps = UseProps<typeof InteractiveDescriptor, IInteractive, InteractiveEventProps>;

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

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

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

@@ -0,0 +1,9 @@
+import type { InteractiveProps } from './base.component';
+export declare function setupInteractive(props: InteractiveProps): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IInteractive<import("@soxa-ui/core").IInteractiveProps, import("@soxa-ui/core").TInteractiveEvents>, {
+    props: object & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {};
+    outputs: object & {} & {};
+}>, InteractiveProps>;

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

@@ -0,0 +1,13 @@
+import type { JSX } from 'solid-js';
+import type { ButtonProps } from '../button/base.component';
+/**
+ * Строка элемента коллекции — деталь разметки ListBox.Item, опции Select,
+ * пунктов меню и тега. Пропсы и разметка — Button (`renderButton`), сборка
+ * своя — по `ItemRowDescriptor`: её экземпляр (`TItemRow`) роль и остановку
+ * Tab себе не пишет, их несёт набор `aria` элемента, который разметка кладёт
+ * на строку.
+ *
+ * Экземпляр создаёт это монтирование и отпускает его снятие: строка живёт,
+ * пока нарисована, и окно `Virtual` держит их столько, сколько показывает.
+ */
+export declare function ItemRow(props: ButtonProps): JSX.Element;

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

@@ -0,0 +1,18 @@
+import { renderButton } from "../button/Button.js";
+import { setupItemRow } from "./setup.component.js";
+//#region src/components/item-row/ItemRow.tsx
+/**
+* Строка элемента коллекции — деталь разметки ListBox.Item, опции Select,
+* пунктов меню и тега. Пропсы и разметка — Button (`renderButton`), сборка
+* своя — по `ItemRowDescriptor`: её экземпляр (`TItemRow`) роль и остановку
+* Tab себе не пишет, их несёт набор `aria` элемента, который разметка кладёт
+* на строку.
+*
+* Экземпляр создаёт это монтирование и отпускает его снятие: строка живёт,
+* пока нарисована, и окно `Virtual` держит их столько, сколько показывает.
+*/
+function ItemRow(props) {
+	return renderButton(setupItemRow(props), props);
+}
+//#endregion
+export { ItemRow };

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

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

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

@@ -0,0 +1,22 @@
+import type { ButtonProps } from '../button/base.component';
+export declare function setupItemRow(props: ButtonProps): 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>;

package/dist/components/item-row/setup.component.js

@@ -0,0 +1,13 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { ItemRowDescriptor } from "@soxa-ui/setup";
+//#region src/components/item-row/setup.component.ts
+function setupItemRow(props) {
+	const adapter = createSolidAdapterContext(ItemRowDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	return useAdapter(adapter, props);
+}
+//#endregion
+export { setupItemRow };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { LabelProps } from './base.component';
+/**
+ * Подпись контрола: контрол — первый labelable-потомок `label`, внутри — только `span`.
+ * Пустой текст не рисуется вовсе: Solid оставил бы от снятого текста пустой
+ * текстовый узел, и тема не спрятала бы обёртку по `:empty`.
+ */
+export declare function Label(props: LabelProps): JSX.Element;

package/dist/components/label/Label.js

@@ -0,0 +1,58 @@
+import { renderSlot, resolveSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { createRootProps } from "../../adapter/common/root.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { setupLabel } from "./setup.component.js";
+import { createComponent, insert, template } from "solid-js/web";
+//#region src/components/label/Label.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-label__control>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=so-label__text>`);
+/**
+* Подпись контрола: контрол — первый labelable-потомок `label`, внутри — только `span`.
+* Пустой текст не рисуется вовсе: Solid оставил бы от снятого текста пустой
+* текстовый узел, и тема не спрятала бы обёртку по `:empty`.
+*/
+function Label(props) {
+	const binding = setupLabel(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	const content = resolveSlot(() => props.content, () => ({}));
+	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 [(() => {
+						var _el$ = _tmpl$();
+						insert(_el$, () => renderSlot(props.children));
+						return _el$;
+					})(), (() => {
+						var _el$2 = _tmpl$2();
+						insert(_el$2, () => content() ?? (state.text || void 0));
+						return _el$2;
+					})()];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Label };

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

@@ -0,0 +1,6 @@
+import type { ILabel } from '@soxa-ui/core';
+import type { LabelDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События слоя Label (core + плагины), выведены из дескриптора автоматически. */
+export type LabelEventProps = EventProps<typeof LabelDescriptor>;
+export type LabelProps = UseDomProps<typeof LabelDescriptor, ILabel, LabelEventProps>;

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

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

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

@@ -0,0 +1,9 @@
+import type { LabelProps } from './base.component';
+export declare function setupLabel(props: LabelProps): 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>;

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

@@ -0,0 +1,13 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { LabelDescriptor } from "@soxa-ui/setup";
+//#region src/components/label/setup.component.ts
+function setupLabel(props) {
+	const adapter = createSolidAdapterContext(LabelDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	return useAdapter(adapter, props);
+}
+//#endregion
+export { setupLabel };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { ListBoxProps } from './base.component';
+/**
+ * Список с выбором: корень — рамка (шапка, узел списка, подвал), а набор `aria` и
+ * атрибуты потребителя, кроме класса и стиля, — узлу списка. Элементы и распорки
+ * секции — одной петлёй: петли по блокам перемонтировали бы элемент при переходе.
+ */
+export declare function ListBox(props: ListBoxProps): JSX.Element;

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

@@ -0,0 +1,160 @@
+import { relaySlot, renderSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { createPartProps, createRootProps, toControlAttrs, toRootForward } from "../../adapter/common/root.js";
+import { KeyedFor } from "../../adapter/runtime/KeyedFor.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { ListBoxItem } from "./item/Item.js";
+import { ListBoxGroup } from "./group/Group.js";
+import { setupListBox } from "./setup.component.js";
+import { createComponent, effect, insert, memo, mergeProps, spread, style, template, use } from "solid-js/web";
+//#region src/components/list-box/ListBox.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-list-box__filler aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class=so-list-box__separator aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-list-box__list tabindex=0>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+/** Элемент записи; у распорки его нет. */
+function itemOf(entry) {
+	return entry.kind === "item" ? entry.item : void 0;
+}
+/** Стиль распорки — высота пропущенных элементов; у записи элемента его нет. */
+function fillerStyleOf(entry) {
+	return entry.kind === "filler" ? entry.style : void 0;
+}
+/**
+* Список с выбором: корень — рамка (шапка, узел списка, подвал), а набор `aria` и
+* атрибуты потребителя, кроме класса и стиля, — узлу списка. Элементы и распорки
+* секции — одной петлёй: петли по блокам перемонтировали бы элемент при переходе.
+*/
+function ListBox(props) {
+	const binding = setupListBox(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.attrs, state.dataset],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const aria = createPartProps(() => state.aria);
+	const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+	/** Элемент из данных — со слотами списка, проброшенными целиком. */
+	const drawItem = (item) => createComponent(ListBoxItem, {
+		ctrl: item,
+		get leading() {
+			return renderSlot(props["item-leading"], { item });
+		},
+		get trailing() {
+			return renderSlot(props["item-trailing"], { item });
+		},
+		get ["indicator-icon"]() {
+			return relaySlot(props["item-indicator-icon"], { item });
+		},
+		get children() {
+			return relaySlot(props.item, { item });
+		}
+	});
+	/** Запись `drawn`: элемент или распорка на месте пропущенных. */
+	const drawEntry = (entry) => createComponent(Show, {
+		get when() {
+			return itemOf(entry());
+		},
+		keyed: true,
+		get fallback() {
+			return (() => {
+				var _el$ = _tmpl$();
+				effect((_$p) => style(_el$, fillerStyleOf(entry()), _$p));
+				return _el$;
+			})();
+		},
+		children: drawItem
+	});
+	/** Записи секции по порядку — по ключу записи. */
+	const drawEntries = (section) => createComponent(KeyedFor, {
+		get each() {
+			return section().entries;
+		},
+		by: (entry) => entry.key,
+		children: drawEntry
+	});
+	/** Первая ли секция: перед ней разделителя нет. */
+	const isFirst = (section) => state.drawnSections?.[0]?.key === section().key;
+	/**
+	* Секция: разделитель перед ней, если она не первая и список их просит
+	* (`groupSeparators`), а дальше группа с подписью или записи без группы
+	* прямо в списке.
+	*/
+	const drawSection = (section) => [createComponent(Show, {
+		get when() {
+			return memo(() => !!state.groupSeparators)() && !isFirst(section);
+		},
+		get children() {
+			return _tmpl$2();
+		}
+	}), createComponent(Show, {
+		get when() {
+			return section().group;
+		},
+		get fallback() {
+			return drawEntries(section);
+		},
+		children: (group) => createComponent(ListBoxGroup, {
+			get label() {
+				return group().label;
+			},
+			get children() {
+				return drawEntries(section);
+			}
+		})
+	})];
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			var _el$3 = _tmpl$4();
+			var _ref$ = binding.ref;
+			typeof _ref$ === "function" ? use(_ref$, _el$3) : binding.ref = _el$3;
+			spread(_el$3, mergeProps(root), false, true);
+			insert(_el$3, createComponent(Elevate, {
+				get layer() {
+					return binding.layer;
+				},
+				get children() {
+					return [
+						memo(() => renderSlot(props.header)),
+						(() => {
+							var _el$4 = _tmpl$3();
+							spread(_el$4, mergeProps(aria, control), false, true);
+							insert(_el$4, createComponent(ResolvedSlot, {
+								get content() {
+									return props.children;
+								},
+								get fallback() {
+									return createComponent(KeyedFor, {
+										get each() {
+											return state.drawnSections;
+										},
+										by: (section) => section.key,
+										children: drawSection
+									});
+								}
+							}), null);
+							insert(_el$4, createComponent(Show, {
+								get when() {
+									return state.shown?.length === 0;
+								},
+								get children() {
+									return renderSlot(props.empty);
+								}
+							}), null);
+							return _el$4;
+						})(),
+						memo(() => renderSlot(props.footer))
+					];
+				}
+			}));
+			return _el$3;
+		}
+	});
+}
+//#endregion
+export { ListBox };

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

@@ -0,0 +1,9 @@
+import type { IListBox } from '@soxa-ui/core';
+import type { ListBoxCollectionDescriptor, ListBoxDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../types';
+/** События ListBox — свои и фасада коллекции. */
+export type ListBoxEventProps = EventProps<typeof ListBoxDescriptor> & EventProps<typeof ListBoxCollectionDescriptor>;
+/** Атрибуты списка: класс и стиль — корню, остальное — узлу списка с `role="listbox"`. */
+export type ListBoxAttributes = TDomAttributes<typeof ListBoxDescriptor, ListBoxEventProps>;
+/** Пропсы ListBox: коллекционные входы несёт интерфейс пропсов ядра (`IListBoxProps`). */
+export type ListBoxProps = UseDomProps<typeof ListBoxDescriptor, IListBox, ListBoxEventProps>;