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

package/dist/source/components/menu/radio-item/RadioItem.jsx

@@ -0,0 +1,33 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { setupMenuRadioItem } from './setup.component';
+/** Переключатель меню: строка пункта с отметкой в начале; точку отмеченного рисует тема. */
+export function MenuRadioItem(props) {
+    const binding = setupMenuRadioItem(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 check = clickAction(() => context?.adapters.menu.check());
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="menu.row" tag="div" size={state.size} disabled={state.disabled} {...state.aria} {...row()} ref={check} leading={<>
+							<span class="so-menu-item__indicator" aria-hidden="true">
+								{indicatorIcon() ??
+                (state.selected ? <span class="so-menu-item__dot"/> : null)}
+							</span>
+							<span class="so-menu-item__icon">{renderSlot(props.leading)}</span>
+						</>} trailing={<span class="so-menu-item__shortcut">{renderSlot(props.trailing)}</span>}>
+					{content() ?? state.text}
+				</ItemRow>
+			</Root>
+		</Show>);
+}

package/dist/source/components/menu/radio-item/base.component.js

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

package/dist/source/components/menu/radio-item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuRadioItem } from './setup.component';
+export { MenuRadioItem } from './RadioItem';

package/dist/source/components/menu/radio-item/setup.component.js

@@ -0,0 +1,13 @@
+import { MenuCollectionRadioItemDescriptor, MenuRadioItemDescriptor, TCollectionItemExtension, TMenuRadioItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupMenuRadioItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(MenuRadioItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TMenuRadioItemExtension, { elevator });
+    const item = createSolidAdapterContext(MenuCollectionRadioItemDescriptor(), { 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 };
+}

package/dist/source/components/menu/separator/Separator.jsx

@@ -0,0 +1,16 @@
+import { Root, createRootProps } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupMenuSeparator } from './setup.component';
+/** Разделитель меню: корень без содержимого. */
+export function MenuSeparator(props) {
+    const binding = setupMenuSeparator(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}/>
+		</Show>);
+}

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

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

package/dist/source/components/menu/separator/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuSeparator } from './setup.component';
+export { MenuSeparator } from './Separator';

package/dist/source/components/menu/separator/setup.component.js

@@ -0,0 +1,9 @@
+import { MenuSeparatorDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../../adapter';
+export function setupMenuSeparator(props) {
+    const adapter = createSolidAdapterContext(MenuSeparatorDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    return useAdapter(adapter, props);
+}

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

@@ -0,0 +1,13 @@
+import { MenuCollectionDescriptor, MenuDescriptor, TCollectionExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupMenu(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(MenuDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(MenuCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/menu/submenu/Submenu.jsx

@@ -0,0 +1,74 @@
+import { Elevate, KeyedFor, ResolvedSlot, Root, clickAction, createRootProps, relaySlot, renderSlot, resolveSlot, roleIcon, toControlAttrs, toPartClass, toRootForward, } from '../../../adapter';
+import { For, Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { Frame } from '../../frame';
+import { Icon } from '../../icon';
+import { MenuGroup } from '../group';
+import { MenuItem } from '../item';
+import { MenuSeparator } from '../separator';
+import { setupMenuSubmenu } from './setup.component';
+/** Стрелка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+const ARROW = roleIcon('arrowRight');
+/**
+ * Пункты из данных (`items`) — одна разметка на меню и подменю. Подменю из данных —
+ * `Show` по записи `submenus` (`keyed`): запись у пункта устойчива, а `ctrl` и
+ * `engine` подменю читает при сборке.
+ */
+export function drawItems(state, slots) {
+    /** Пункт из данных — подменю, если коллекция завела ему движок, иначе действие. */
+    const drawItem = (item) => (<Show when={state.submenus?.get(item)} keyed fallback={<MenuItem ctrl={item} leading={renderSlot(slots['item-leading'], { item })} trailing={renderSlot(slots['item-trailing'], { item })}>
+					{relaySlot(slots.item, { item })}
+				</MenuItem>}>
+			{(entry) => (<MenuSubmenu ctrl={entry.ctrl} engine={entry.engine} leading={renderSlot(slots['item-leading'], { item })} header={relaySlot(slots['item-header'], { item })} arrow-icon={renderSlot(slots['item-arrow-icon'], { item })} item={slots.item} item-leading={slots['item-leading']} item-trailing={slots['item-trailing']} item-header={slots['item-header']} item-arrow-icon={slots['item-arrow-icon']} item-content={slots['item-content']}>
+					{renderSlot(slots['item-content'], { item })}
+				</MenuSubmenu>)}
+		</Show>);
+    const drawSectionItems = (section) => (<For each={section().items}>{drawItem}</For>);
+    const isFirst = (section) => state.sections?.[0]?.key === section().key;
+    const drawSection = (section) => (<>
+			<Show when={state.groupSeparators && !isFirst(section)}>
+				<MenuSeparator />
+			</Show>
+			<Show when={section().group} fallback={drawSectionItems(section)}>
+				{(group) => (<MenuGroup label={group().label}>{drawSectionItems(section)}</MenuGroup>)}
+			</Show>
+		</>);
+    return (<KeyedFor each={state.sections} by={(section) => section.key}>
+			{drawSection}
+		</KeyedFor>);
+}
+/** Пункт с подменю: строка пункта в меню над ним и своя панель с пунктами. */
+export function MenuSubmenu(props) {
+    const binding = setupMenuSubmenu(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const header = resolveSlot(() => props.header, () => ({ text: state.text ?? '', open: state.open ?? false }));
+    const arrowIcon = resolveSlot(() => props['arrow-icon'], () => ({}));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const expand = clickAction(() => context?.adapters.menu.open());
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="menu.row" tag="div" size={state.size} disabled={state.disabled} {...state.aria} {...row()} ref={expand} leading={<span class="so-menu-item__icon">{renderSlot(props.leading)}</span>} trailing={<span class="so-menu-item__arrow" aria-hidden="true">
+							{arrowIcon() ?? (<Icon embedded="menu.arrow" tag={ARROW} size={state.size}/>)}
+						</span>}>
+					{header() ?? state.text}
+				</ItemRow>
+				<Elevate layer={binding.layer}>
+					<Frame embedded="menu.submenu-frame" class={toPartClass(state.panelClasses)} tabindex="-1" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_placement="end-start" {...state.panelAria} {...state.dismiss_ownerAttribute}>
+						{/* Items from the panel's first opening on (`contentRendered`) */}
+						<div class="so-menu__list">
+							<Show when={state.contentRendered}>
+								<ResolvedSlot content={props.children} fallback={drawItems(state, props)}/>
+							</Show>
+						</div>
+					</Frame>
+				</Elevate>
+			</Root>
+		</Show>);
+}

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

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

package/dist/source/components/menu/submenu/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuSubmenu } from './setup.component';
+export { MenuSubmenu } from './Submenu';

package/dist/source/components/menu/submenu/setup.component.js

@@ -0,0 +1,20 @@
+import { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor, TCollectionExtension, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+/** Три контекста: свой, пункт в меню над ним (`up()`) и меню своих пунктов (`down()`). */
+export function setupMenuSubmenu(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(MenuSubmenuDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(MenuCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const collectionAdapter = createSolidAdapterContext(MenuSubmenuCollectionDescriptor(), { props, options: { owner: adapter.instance, engine: props.engine } }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const menuBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return {
+        ...joinBindings(owner, itemBinding, menuBinding),
+        context: item.instance.context,
+        layer,
+    };
+}

package/dist/source/components/number-input/NumberInput.jsx

@@ -0,0 +1,75 @@
+import { Elevate, Root, clickAction, createPartProps, createRootProps, fieldText, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupNumberInput } from './setup.component';
+/** Глифы кнопок — компоненты на роль: `tag` у Icon — корень, а не роль. */
+const CloseGlyph = roleIcon('close');
+const MinusGlyph = roleIcon('minus');
+const PlusGlyph = roleIcon('plus');
+/**
+ * A number field: the input, the step buttons and the hidden form field with the number as text.
+ * The clear button stops the click at itself: a select-only Select opens its panel on a click
+ * on the root.
+ */
+export function NumberInput(props) {
+    const binding = setupNumberInput(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const inputAttrs = createPartProps(() => state.inputAttrs);
+    const aria = createPartProps(() => state.aria);
+    const inputAria = createPartProps(() => state.inputAria);
+    const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+    const text = fieldText(() => state.text);
+    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 }));
+        const decrementIcon = resolveSlot(() => props['decrement-icon'], () => ({}));
+        const incrementIcon = resolveSlot(() => props['increment-icon'], () => ({}));
+        return (<>
+				<Show when={leadingSlot()}>
+					<div class="so-number-input__leading">{leadingSlot()}</div>
+				</Show>
+				<input type="text" class="so-number-input__input" id={state.id} placeholder={state.placeholder} disabled={state.disabled} readonly={state.readonly} required={state.required} autocomplete="off" spellcheck="false" {...inputAttrs()} {...aria()} {...inputAria()} {...control()} {...text}/>
+				<Show when={state.clearable === true ||
+                clearSlot() !== undefined ||
+                trailingSlot() !== undefined}>
+					<div class="so-number-input__trailing">
+						<Show when={clearSlot()} fallback={<Show when={state.clearable}>
+									<Button embedded="number-input.clear" type="button" class="so-number-input__clear" size={state.size} disabled={state.disabled} {...state.clearAria} ref={clear}>
+										<Icon embedded="number-input.clear-icon" tag={CloseGlyph} size={state.size}/>
+									</Button>
+								</Show>}>
+							{clearSlot()}
+						</Show>
+						{trailingSlot()}
+					</div>
+				</Show>
+				{/* Кнопки шага — последними, у края поля: их место не зависит от слотов */}
+				<div class="so-number-input__stepper">
+					<Button embedded="number-input.decrement" type="button" class="so-number-input__decrement" size={state.size} disabled={state.decrementDisabled} {...state.decrementAria} {...state.decrementDataset}>
+						{decrementIcon() ?? (<Icon embedded="number-input.decrement-icon" tag={MinusGlyph} size={state.size}/>)}
+					</Button>
+					<Button embedded="number-input.increment" type="button" class="so-number-input__increment" size={state.size} disabled={state.incrementDisabled} {...state.incrementAria} {...state.incrementDataset}>
+						{incrementIcon() ?? (<Icon embedded="number-input.increment-icon" tag={PlusGlyph} size={state.size}/>)}
+					</Button>
+				</div>
+				<input type="hidden" name={state.name} value={state.value === undefined ? '' : String(state.value)} disabled={state.disabled}/>
+			</>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>{content()}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/number-input/base.component.js

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

package/dist/source/components/number-input/index.js

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

package/dist/source/components/number-input/setup.component.js

@@ -0,0 +1,10 @@
+import { NumberInputDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+export function setupNumberInput(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(NumberInputDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/pagination/Pagination.jsx

@@ -0,0 +1,56 @@
+import { Elevate, KeyedFor, Root, clickAction, createRootProps, relaySlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { PaginationItem } from './item';
+import { setupPagination } from './setup.component';
+/** Одна иконка на обе стрелки: роли «влево» нет, стрелку «назад» зеркалит тема. */
+const ARROW = roleIcon('arrowRight');
+/** Страница места окна; у пропуска страницы нет. */
+function pageOf(cell) {
+    return cell.kind === 'item' ? cell.item : undefined;
+}
+/** Пагинация: стрелка «назад», список страниц и пропусков, стрелка «вперёд». */
+export function Pagination(props) {
+    const binding = setupPagination(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const prev = clickAction(() => ctrl.prev());
+    const next = clickAction(() => ctrl.next());
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    /** Место окна: страница — элемент коллекции, пропуск — многоточие текстом. */
+    function cell(entry) {
+        return (<Show when={pageOf(entry())} fallback={<li class="so-pagination__ellipsis">…</li>}>
+				{(page) => (<PaginationItem ctrl={page()}>
+						{relaySlot(props.item, { item: page() })}
+					</PaginationItem>)}
+			</Show>);
+    }
+    /** Содержимое корня — под слоем лифта пагинации: зовёт его `Elevate`, внутри себя. */
+    function content() {
+        const prevIcon = resolveSlot(() => props['prev-icon'], () => ({}));
+        const nextIcon = resolveSlot(() => props['next-icon'], () => ({}));
+        return (<>
+				<Button embedded="pagination.prev" type="button" class="so-pagination__prev" size={state.size} variant={state.variant} disabled={state.prevDisabled} {...state.prevAria} ref={prev}>
+					{prevIcon() ?? (<Icon embedded="pagination.prev-icon" tag={ARROW} size={state.size}/>)}
+				</Button>
+				<ol class="so-pagination__list">
+					<KeyedFor each={state.cells} by={(entry) => entry.key}>
+						{cell}
+					</KeyedFor>
+				</ol>
+				<Button embedded="pagination.next" type="button" class="so-pagination__next" size={state.size} variant={state.variant} disabled={state.nextDisabled} {...state.nextAria} ref={next}>
+					{nextIcon() ?? (<Icon embedded="pagination.next-icon" tag={ARROW} size={state.size}/>)}
+				</Button>
+			</>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>{content()}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/pagination/base.component.js

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

package/dist/source/components/pagination/index.js

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

package/dist/source/components/pagination/item/Item.jsx

@@ -0,0 +1,27 @@
+import { Root, clickAction, createRootProps, resolveSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { setupPaginationItem } from './setup.component';
+/** Страница — внутренняя часть Pagination: корень — место в списке, внутри — Button. */
+export function PaginationItem(props) {
+    const binding = setupPaginationItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '' }));
+    const activate = clickAction(() => {
+        if (context)
+            context.adapters.activation.active = true;
+    });
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Button embedded="pagination.page" type="button" disabled={state.disabled} size={state.size} variant={state.variant} {...state.aria} ref={activate}>
+					{content() ?? state.text}
+				</Button>
+			</Root>
+		</Show>);
+}

package/dist/source/components/pagination/item/base.component.js

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

package/dist/source/components/pagination/item/index.js

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

package/dist/source/components/pagination/item/setup.component.js

@@ -0,0 +1,13 @@
+import { PaginationCollectionItemDescriptor, PaginationItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupPaginationItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(PaginationItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(PaginationCollectionItemDescriptor(), { 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 };
+}

package/dist/source/components/pagination/setup.component.js

@@ -0,0 +1,16 @@
+import { PaginationCollectionDescriptor, PaginationDescriptor, TCollectionExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupPagination(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(PaginationDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const collectionAdapter = createSolidAdapterContext(PaginationCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/popover/Popover.jsx

@@ -0,0 +1,50 @@
+import { Root, clickAction, createRootProps, liveScope, renderSlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Frame } from '../frame';
+import { Icon } from '../icon';
+import { setupPopover } from './setup.component';
+/** Иконка кнопки закрытия по умолчанию. */
+const CLOSE = roleIcon('close');
+/**
+ * Панель у триггера: корень — обёртка триггера и якорь панели, панель — Frame.
+ * Связку триггер получает живым scope слота `trigger`.
+ */
+export function Popover(props) {
+    const binding = setupPopover(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const trigger = liveScope(() => ({
+        triggerAria: state.triggerAria ?? {},
+        triggerDataset: state.triggerDataset ?? {},
+    }));
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    /** The close button only closes the popover: returning the focus is the plugin's job. */
+    const close = clickAction(() => {
+        ctrl.open = false;
+    });
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{renderSlot(props.trigger, trigger)}
+				<Frame embedded="popover.frame" class="so-popover__panel" tabindex="-1" visible={state.visible && state.open} contained={state.contained} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_placement={state.placement} anchor_offset={8} {...state.aria} {...state.panelDataset} {...state.dismiss_ownerAttribute}>
+					<Show when={state.handleRendered}>
+						<div class="so-popover__handle" aria-hidden="true"/>
+					</Show>
+					{/* Крестик — после содержимого, последней остановкой Tab; `lazyMount` — на слот. */}
+					<div class="so-popover__content">
+						<Show when={state.contentRendered}>{renderSlot(props.children)}</Show>
+					</div>
+					<Show when={state.closable}>
+						<Button embedded="popover.close" type="button" class="so-popover__close" ref={close} {...state.closeAria}>
+							{closeIcon() ?? <Icon embedded="popover.close-icon" tag={CLOSE}/>}
+						</Button>
+					</Show>
+				</Frame>
+			</Root>
+		</Show>);
+}

package/dist/source/components/popover/base.component.js

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

package/dist/source/components/popover/index.js

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

package/dist/source/components/popover/setup.component.js

@@ -0,0 +1,6 @@
+import { PopoverDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupPopover(props) {
+    const adapter = createSolidAdapterContext(PopoverDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/progress-linear/ProgressLinear.jsx

@@ -0,0 +1,20 @@
+import { Root, createRootProps } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupProgressLinear } from './setup.component';
+/** Индикатор выполнения линией: корень — дорожка с заливкой; всё — `span` (кладут в `Label`). */
+export function ProgressLinear(props) {
+    const binding = setupProgressLinear(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+        style: state.percentStyle,
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{/* Бегущий отрезок тема рисует псевдоэлементом корня — своего узла у него нет. */}
+				<span class="so-progress-linear__range"/>
+			</Root>
+		</Show>);
+}

package/dist/source/components/progress-linear/base.component.js

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

package/dist/source/components/progress-linear/index.js

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

package/dist/source/components/progress-linear/setup.component.js

@@ -0,0 +1,9 @@
+import { ProgressLinearDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupProgressLinear(props) {
+    const adapter = createSolidAdapterContext(ProgressLinearDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/progress-spinner/ProgressSpinner.jsx

@@ -0,0 +1,27 @@
+import { Root, createRootProps } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupProgressSpinner } from './setup.component';
+/** Индикатор выполнения кольцом; корень — `span`: кольцо кладут в `Button` и `Label`. */
+export function ProgressSpinner(props) {
+    const binding = setupProgressSpinner(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+        style: state.fractionStyle,
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{/*
+            Три окружности одной геометрии: центр поля 16 × 16, радиус 7 — при толщине
+            темы 2 кольцо ровно касается краёв поля. Дуги меряются долями (`pathLength`).
+        */}
+				<svg class="so-progress-spinner__ring" viewBox="0 0 16 16" aria-hidden="true">
+					<circle class="so-progress-spinner__track" cx="8" cy="8" r="7"/>
+					<circle class="so-progress-spinner__range" cx="8" cy="8" r="7" pathLength="1"/>
+					<circle class="so-progress-spinner__runner" cx="8" cy="8" r="7" pathLength="1"/>
+				</svg>
+			</Root>
+		</Show>);
+}

package/dist/source/components/progress-spinner/base.component.js

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

package/dist/source/components/progress-spinner/index.js

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

package/dist/source/components/progress-spinner/setup.component.js

@@ -0,0 +1,9 @@
+import { ProgressSpinnerDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupProgressSpinner(props) {
+    const adapter = createSolidAdapterContext(ProgressSpinnerDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/radio-group/RadioGroup.jsx

@@ -0,0 +1,25 @@
+import { Elevate, ResolvedSlot, Root, createRootProps, relaySlot } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { RadioGroupItem } from './item';
+import { setupRadioGroup } from './setup.component';
+/** Группа радио: радио — содержимое или `shown`. */
+export function RadioGroup(props) {
+    const binding = setupRadioGroup(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<ResolvedSlot content={props.children} fallback={<For each={state.shown}>
+								{(item) => (<RadioGroupItem ctrl={item}>
+										{relaySlot(props.item, { item })}
+									</RadioGroupItem>)}
+							</For>}/>
+				</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/radio-group/base.component.js

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