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

package/dist/components/menu/submenu/Submenu.svelte

@@ -0,0 +1,180 @@
+<script lang="ts" module>
+	import type { IMenuItem, TGroupSection, TMenuSubmenuEntries } from '@soxa-ui/core'
+	import { MenuGroup } from '../group'
+	import { MenuItem } from '../item'
+	import { MenuSeparator } from '../separator'
+	import MenuSubmenu from './Submenu.svelte'
+	import type { MenuSubmenuProps } from './base.component'
+
+	/** Что пунктам из данных нужно от состояния владельца — меню или подменю. */
+	type TItemsState = {
+		readonly sections?: ReadonlyArray<TGroupSection<IMenuItem>>
+		readonly submenus?: TMenuSubmenuEntries
+		readonly groupSeparators?: boolean
+	}
+
+	/** Слоты пунктов из данных — одни на все уровни: подменю получает их под теми же именами. */
+	type TItemSlots = Pick<
+		MenuSubmenuProps,
+		'item' | 'item-leading' | 'item-trailing' | 'item-header' | 'item-arrow-icon' | 'item-content'
+	>
+
+	export { drawItems }
+</script>
+
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toControlAttrs, toRootForward, toRootProps } from '../../../adapter'
+	import { ItemRow } from '../../item-row'
+	import { Frame } from '../../frame'
+	import { Icon } from '../../icon'
+	import { setupMenuSubmenu } from './setup.component'
+	import type { MenuSubmenuAttributes } from './base.component'
+
+	let { ref = $bindable(), ...props }: MenuSubmenuProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupMenuSubmenu(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const context = binding.context
+	const expand = clickAction(() => context?.adapters.menu.open())
+
+	const ARROW = roleIcon('arrowRight')
+</script>
+
+<!--
+	Пункты из данных — сниппет модуля, один на меню и подменю: инстансного `<script>` он
+	не видит, поэтому части меню и само подменю — импорты модуля.
+-->
+{#snippet drawItems(state: TItemsState, slots: TItemSlots)}
+	{#each state.sections ?? [] as section, index (section.key)}
+		{#if state.groupSeparators && index > 0}<MenuSeparator />{/if}{#if section.group}
+			<MenuGroup label={section.group.label}
+				>{@render drawSection(section, state, slots)}</MenuGroup
+			>
+		{:else}
+			{@render drawSection(section, state, slots)}
+		{/if}
+	{/each}
+{/snippet}
+
+{#snippet drawSection(section: TGroupSection<IMenuItem>, state: TItemsState, slots: TItemSlots)}
+	{#each section.items as item (item.uid)}
+		{@render drawItem(item, state, slots)}
+	{/each}
+{/snippet}
+
+<!--
+	Снятое с пунктом подменю Svelte читает и после ухода записи: спред пустой записи безопасен,
+	а `entry.ctrl` бросил бы. Проброс — только заданного слота: сниппет непрозрачен.
+-->
+{#snippet drawItem(item: IMenuItem, state: TItemsState, slots: TItemSlots)}
+	{@const entry = state.submenus?.get(item)}
+	{#snippet leading()}
+		{@render slots['item-leading']?.({ item })}
+	{/snippet}
+	{#snippet content(scope: { text: string })}
+		{@render slots.item?.({ ...scope, item })}
+	{/snippet}
+	{#snippet trailing()}
+		{@render slots['item-trailing']?.({ item })}
+	{/snippet}
+	{#snippet header(scope: { text: string; open: boolean })}
+		{@render slots['item-header']?.({ ...scope, item })}
+	{/snippet}
+	{#snippet arrow()}
+		{@render slots['item-arrow-icon']?.({ item })}
+	{/snippet}
+	{#snippet panel()}
+		{@render slots['item-content']?.({ item })}
+	{/snippet}
+	{#if entry}
+		<MenuSubmenu
+			{...entry}
+			leading={slots['item-leading'] ? leading : undefined}
+			header={slots['item-header'] ? header : undefined}
+			arrow-icon={slots['item-arrow-icon'] ? arrow : undefined}
+			children={slots['item-content'] ? panel : undefined}
+			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']}
+		/>
+	{:else}
+		<MenuItem
+			ctrl={item}
+			leading={slots['item-leading'] ? leading : undefined}
+			trailing={slots['item-trailing'] ? trailing : undefined}
+			children={slots.item ? content : undefined}
+		/>
+	{/if}
+{/snippet}
+
+<!--
+	Открытость — `visible` панели, а не `rendered`: закрытие не должно вычищать коллекцию.
+	Пункты в панели читают лифт подменю: `Teleport` монтирует её с контекстами места.
+	Части и обёртка значка — вплотную: пробел между блоками Svelte оставил бы текст, а пустой
+	значок тема прячет по `:empty`.
+-->
+{#snippet arrowIcon()}
+	{#if props['arrow-icon']}
+		{@render props['arrow-icon']()}
+	{:else}
+		<Icon embedded="menu.arrow" tag={ARROW} 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<MenuSubmenuAttributes>(binding.forwardProps)}
+		{@attach expand}
+	>
+		{#snippet leading()}
+			<span class="so-menu-item__icon">{@render props.leading?.()}</span>
+		{/snippet}
+		{#if props.header}
+			{@render props.header({ text: state.text ?? '', open: state.open ?? false })}
+		{:else}
+			{state.text}
+		{/if}
+		{#snippet trailing()}
+			<span class="so-menu-item__arrow" aria-hidden="true">{@render arrowIcon()}</span>
+		{/snippet}
+	</ItemRow><Frame
+		embedded="menu.submenu-frame"
+		class={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">
+			{#if state.contentRendered}
+				{#if props.children}
+					{@render props.children()}
+				{:else}
+					{@render drawItems(state, props)}
+				{/if}
+			{/if}
+		</div>
+	</Frame>
+</Dynamic>

package/dist/components/menu/submenu/Submenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { IMenuItem, TGroupSection, TMenuSubmenuEntries } from '@soxa-ui/core';
+import type { MenuSubmenuProps } from './base.component';
+/** Что пунктам из данных нужно от состояния владельца — меню или подменю. */
+type TItemsState = {
+    readonly sections?: ReadonlyArray<TGroupSection<IMenuItem>>;
+    readonly submenus?: TMenuSubmenuEntries;
+    readonly groupSeparators?: boolean;
+};
+/** Слоты пунктов из данных — одни на все уровни: подменю получает их под теми же именами. */
+type TItemSlots = Pick<MenuSubmenuProps, 'item' | 'item-leading' | 'item-trailing' | 'item-header' | 'item-arrow-icon' | 'item-content'>;
+export { drawItems };
+declare const drawItems: (state: TItemsState, slots: TItemSlots) => ReturnType<import("svelte").Snippet>;
+declare const Submenu: import("svelte").Component<MenuSubmenuProps, {}, "ref">;
+type Submenu = ReturnType<typeof Submenu>;
+export default Submenu;

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

@@ -0,0 +1,7 @@
+import type { IMenuSubmenu } from '@soxa-ui/core';
+import type { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type MenuSubmenuEventProps = EventProps<typeof MenuSubmenuDescriptor> & EventProps<typeof MenuCollectionItemDescriptor> & EventProps<typeof MenuSubmenuCollectionDescriptor>;
+/** Атрибуты пункта с подменю: класс и стиль — корню, остальное — строке с `role="menuitem"`. */
+export type MenuSubmenuAttributes = TDomAttributes<typeof MenuSubmenuDescriptor, MenuSubmenuEventProps>;
+export type MenuSubmenuProps = UseDomProps<typeof MenuSubmenuDescriptor, IMenuSubmenu, MenuSubmenuEventProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,79 @@
+import { type TRootReceiver } from '../../../adapter';
+import type { MenuSubmenuProps } from './base.component';
+export declare function setupMenuSubmenu(getProps: () => MenuSubmenuProps, mountId: string, receive: TRootReceiver): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuSubmenu, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {} & {} & {} & {
+        dismiss_enabled?: boolean | 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;
+    } & {} & {} & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {} & {};
+}>, MenuSubmenuProps, import("../../../adapter/runtime/state").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuCollectionFacade, {
+    props: object;
+    events: object;
+    outputs: object;
+}>>, 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").IMenuSubmenu, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {} & {} & {} & {
+        dismiss_enabled?: boolean | 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;
+    } & {} & {} & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {} & {} & {};
+}>>>>> & {
+    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/submenu/setup.component.js

@@ -0,0 +1,21 @@
+import { MenuCollectionItemDescriptor, MenuSubmenuCollectionDescriptor, MenuSubmenuDescriptor, TCollectionExtension, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSvelteAdapterContext, joinBindings, useAdapter, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupMenuSubmenu(getProps, mountId, receive) {
+    const elevator = useElevator();
+    const props = getProps();
+    const adapter = createSvelteAdapterContext(MenuSubmenuDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+        mountId,
+    });
+    // В меню над ним — пункт
+    const item = createSvelteAdapterContext(MenuCollectionItemDescriptor(), { props, mountId }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    // Для своих пунктов — меню
+    const collectionAdapter = createSvelteAdapterContext(MenuSubmenuCollectionDescriptor(), { props, mountId, options: { owner: adapter.instance, engine: props.engine } }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const itemBinding = useCollectionAdapter(item, getProps);
+    const menuBinding = useCollectionAdapter(collectionAdapter, getProps);
+    const owner = useAdapter(adapter, getProps, receive);
+    return Object.assign(joinBindings(owner, itemBinding, menuBinding), {
+        context: item.instance.context,
+    });
+}

package/dist/components/number-input/NumberInput.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import {
+		clickAction,
+		Dynamic,
+		fieldText,
+		roleIcon,
+		toControlAttrs,
+		toRootForward,
+		toRootProps,
+	} from '../../adapter'
+	import { Button } from '../button'
+	import { Icon } from '../icon'
+	import { setupNumberInput } from './setup.component'
+	import type { NumberInputAttributes, NumberInputProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: NumberInputProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupNumberInput(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+
+	// Буфер правки ядра, а не `value`: пока набирают — набранное, после — строка формата
+	const text = fieldText(() => state.text)
+
+	const CLOSE = roleIcon('close')
+	const MINUS = roleIcon('minus')
+	const PLUS = roleIcon('plus')
+
+	const clear = clickAction((event) => {
+		event.stopPropagation()
+		ctrl.clear()
+	})
+</script>
+
+<!--
+	NumberInput — кнопки шага последними из видимых, у края поля: их место не зависит от
+	слотов. Ввод и кнопки плагины находят по классам. `name` у ввода нет: в форму уходит
+	число скрытым полем, а не текст.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.dataset],
+		toRootForward(binding.forwardProps),
+	)}
+	attach={binding.attachElement}
+>
+	{#if props.leading}<div class="so-number-input__leading">{@render props.leading({ ctrl })}</div>{/if}<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"
+		{...state.inputAttrs}
+		{...state.aria}
+		{...state.inputAria}
+		{...toControlAttrs<NumberInputAttributes>(binding.forwardProps)}
+		{...text}
+	/>{#if state.clearable || props.clear || props.trailing}
+		<div class="so-number-input__trailing">
+			{#if props.clear}
+				{@render props.clear({ clear: ctrl.clear })}
+			{:else if state.clearable}
+				<Button
+					embedded="number-input.clear"
+					type="button"
+					class="so-number-input__clear"
+					size={state.size}
+					disabled={state.disabled}
+					{...state.clearAria}
+					{@attach clear}
+				>
+					<Icon embedded="number-input.clear-icon" tag={CLOSE} size={state.size} />
+				</Button>
+			{/if}{#if props.trailing}{@render props.trailing({ ctrl })}{/if}
+		</div>{/if}<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}
+		>
+			{#if props['decrement-icon']}
+				{@render props['decrement-icon']()}
+			{:else}
+				<Icon embedded="number-input.decrement-icon" tag={MINUS} size={state.size} />
+			{/if}
+		</Button><Button
+			embedded="number-input.increment"
+			type="button"
+			class="so-number-input__increment"
+			size={state.size}
+			disabled={state.incrementDisabled}
+			{...state.incrementAria}
+			{...state.incrementDataset}
+		>
+			{#if props['increment-icon']}
+				{@render props['increment-icon']()}
+			{:else}
+				<Icon embedded="number-input.increment-icon" tag={PLUS} size={state.size} />
+			{/if}
+		</Button>
+	</div><input
+		type="hidden"
+		name={state.name}
+		value={state.value === undefined ? '' : String(state.value)}
+		disabled={state.disabled}
+	/>
+</Dynamic>

package/dist/components/number-input/NumberInput.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { INumberInput } from '@soxa-ui/core';
+import type { NumberInputDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+export type NumberInputEventProps = EventProps<typeof NumberInputDescriptor>;
+/** Атрибуты NumberInput: класс и стиль — корню, остальное — вводу `<input>`. */
+export type NumberInputAttributes = TDomAttributes<typeof NumberInputDescriptor, NumberInputEventProps, TFieldAttributes>;
+export type NumberInputProps = UseDomProps<typeof NumberInputDescriptor, INumberInput, NumberInputEventProps, TFieldAttributes>;

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { type TRootReceiver } from '../../adapter';
+import type { NumberInputProps } from './base.component';
+export declare function setupNumberInput(getProps: () => NumberInputProps, mountId: string, receive: TRootReceiver): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").INumberInput, {
+    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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>, NumberInputProps, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").INumberInput, {
+    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 & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>>>;

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

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

package/dist/components/pagination/Pagination.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { clickAction, Dynamic, roleIcon, toRootProps } from '../../adapter'
+	import { Button } from '../button'
+	import { Icon } from '../icon'
+	import { PaginationItem } from './item'
+	import { setupPagination } from './setup.component'
+	import type { PaginationProps } from './base.component'
+
+	let { ref = $bindable(), ...props }: PaginationProps = $props()
+	const mountId = $props.id()
+
+	const binding = setupPagination(() => props, mountId, (node) => (ref = node))
+	const state = binding.state
+	const ctrl = binding.ctrl
+	const prev = clickAction(() => ctrl.prev())
+	const next = clickAction(() => ctrl.next())
+
+	// Одна иконка на обе стрелки: роли «влево» нет, стрелку «назад» зеркалит тема
+	const ARROW = roleIcon('arrowRight')
+</script>
+
+<!--
+	Стрелки — вне списка: в списке только страницы и пропуски, по порядку окна (`cells`).
+	Петля — по ключу места (`cell.key`): страница, оставшаяся при сдвиге окна, — тот же
+	экземпляр, и узел с фокусом на нём не пересобирается.
+-->
+<Dynamic
+	rendered={state.rendered}
+	tag={state.tag}
+	attributes={toRootProps(
+		state,
+		[state.attrs, state.aria, state.dataset],
+		binding.forwardProps,
+	)}
+	attach={binding.attachElement}
+>
+	<Button
+		embedded="pagination.prev"
+		type="button"
+		class="so-pagination__prev"
+		size={state.size}
+		variant={state.variant}
+		disabled={state.prevDisabled}
+		{@attach prev}
+		{...state.prevAria}
+	>
+		{#if props['prev-icon']}
+			{@render props['prev-icon']()}
+		{:else}
+			<Icon embedded="pagination.prev-icon" tag={ARROW} size={state.size} />
+		{/if}
+	</Button><ol class="so-pagination__list">
+		{#each state.cells ?? [] as cell (cell.key)}
+			{#if cell.kind === 'item'}
+				{@const page = cell.item}
+				{#snippet content(scope: { text: string })}
+					{@render props.item?.({ ...scope, item: page })}
+				{/snippet}
+				<PaginationItem ctrl={page} children={props.item ? content : undefined} />
+			{:else}
+				<li class="so-pagination__ellipsis">…</li>
+			{/if}
+		{/each}
+	</ol><Button
+		embedded="pagination.next"
+		type="button"
+		class="so-pagination__next"
+		size={state.size}
+		variant={state.variant}
+		disabled={state.nextDisabled}
+		{@attach next}
+		{...state.nextAria}
+	>
+		{#if props['next-icon']}
+			{@render props['next-icon']()}
+		{:else}
+			<Icon embedded="pagination.next-icon" tag={ARROW} size={state.size} />
+		{/if}
+	</Button>
+</Dynamic>

package/dist/components/pagination/Pagination.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IPagination } from '@soxa-ui/core';
+import type { PaginationCollectionDescriptor, PaginationDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type PaginationEventProps = EventProps<typeof PaginationDescriptor> & EventProps<typeof PaginationCollectionDescriptor>;
+/** Атрибуты — корню, `nav`. */
+export type PaginationProps = UseDomProps<typeof PaginationDescriptor, IPagination, PaginationEventProps>;

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

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

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

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

package/dist/components/pagination/index.js

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