@motifx-community/ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/components/fileuploader/upload-status.d.ts

@@ -0,0 +1,2 @@
+/** Where a file stands: chosen and waiting, being uploaded, uploaded, failed, cancelled, or refused (its type, size or count). */
+export type UploadStatus = 'ready' | 'uploading' | 'done' | 'error' | 'aborted' | 'invalid';

package/dist/components/loadpanel/LoadPanel.d.ts

@@ -0,0 +1,70 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { Button } from "../button/Button";
+import { Spinner } from "../progress/Spinner";
+import type { LoadPanelProps } from "./load-panel-props";
+import type { LoadPanelTarget } from "./load-panel-target";
+/**
+ * A "loading" layer over a container or the whole page: a shade, a pane with a turning indicator and a message,
+ * a Cancel button when the work can be stopped. What is under it cannot be pressed or focused meanwhile; focus
+ * that was inside waits on the pane and comes back afterwards. It shows after `delay`, so quick work does not
+ * flash it. `value` (or `x-model`) shows and hides it; so do `show()` and `hide()`.
+ *
+ * @example
+ * <LoadPanel target={() => this.ordersPanel} message="Loading orders" x-model={() => this.state.loading} />
+ *
+ * const panel = new LoadPanel({ cancelable: true, onCancel: () => this.job.stop() });
+ * panel.show();
+ */
+export declare class LoadPanel extends Control<HTMLDivElement, LoadPanelProps> {
+    pane: Component<HTMLDivElement>;
+    spinner: Spinner;
+    messagePart: Component<HTMLDivElement>;
+    cancelButton: Button;
+    shownNow: boolean;
+    timer: ReturnType<typeof setTimeout> | null;
+    host: HTMLElement | null;
+    undo: (() => void) | null;
+    returnTo: HTMLElement | null;
+    telling: boolean;
+    shownEmitter: Emitter<void>;
+    hiddenEmitter: Emitter<void>;
+    cancelled: Emitter<void>;
+    constructor(props?: IBaseProp<LoadPanelProps>);
+    get target(): LoadPanelTarget;
+    set target(value: Bind<LoadPanelTarget>);
+    get message(): string;
+    set message(value: Bind<string>);
+    /** Shown or not. Reactive; setting it shows or hides. */
+    get value(): boolean;
+    set value(value: Bind<boolean>);
+    get delay(): number;
+    set delay(value: Bind<number>);
+    get shade(): boolean;
+    set shade(value: Bind<boolean>);
+    get showPane(): boolean;
+    set showPane(value: Bind<boolean>);
+    get showIndicator(): boolean;
+    set showIndicator(value: Bind<boolean>);
+    get cancelable(): boolean;
+    set cancelable(value: Bind<boolean>);
+    get cancelText(): string;
+    set cancelText(value: Bind<string>);
+    get closeOnOutside(): boolean;
+    set closeOnOutside(value: Bind<boolean>);
+    /** Whether it is on the screen now (after its delay). */
+    get isShown(): boolean;
+    get onShown(): MotifEvent<void>;
+    get onHidden(): MotifEvent<void>;
+    /** The Cancel button was pressed (or Escape); the panel hides after. */
+    get onCancel(): MotifEvent<void>;
+    /** Shows it over its target after `delay`; `false` when it is shown or waiting already. */
+    show(): boolean;
+    /** Hides it; what it covered can be used again, and focus goes back where it was. */
+    hide(): void;
+    /** What the Cancel button does: tells `onCancel`, then hides. */
+    cancel(): void;
+    mount(): void;
+    tell(value: boolean): void;
+    drawTexts(): void;
+}

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

@@ -0,0 +1,3 @@
+export { LoadPanel } from './LoadPanel';
+export type { LoadPanelProps } from './load-panel-props';
+export type { LoadPanelTarget } from './load-panel-target';

package/dist/components/loadpanel/load-panel-props.d.ts

@@ -0,0 +1,29 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LoadPanelTarget } from './load-panel-target';
+/** Props of `LoadPanel`. Each one is also a settable property; a function is followed. */
+export interface LoadPanelProps extends ControlProps {
+    /** What it covers: a component or an element; `null` (the default) covers the whole page. */
+    target?: Bind<LoadPanelTarget | undefined>;
+    /** The message under the indicator. The same property as `text`. Default: the kit's "Loading…". */
+    message?: Bind<string>;
+    /** Shown or not; `x-model` binds it two-way. Default `false`. */
+    value?: Bind<boolean>;
+    /** Milliseconds before it shows, so quick work does not flash it. Default `0`. */
+    delay?: Bind<number>;
+    /** Dims what it covers. Default `true`. */
+    shade?: Bind<boolean>;
+    /** The pane behind the indicator and the message. Default `true`. */
+    showPane?: Bind<boolean>;
+    /** The turning indicator. Default `true`. */
+    showIndicator?: Bind<boolean>;
+    /** A Cancel button in the pane; `onCancel` tells, and the panel hides. Default `false`. */
+    cancelable?: Bind<boolean>;
+    /** The Cancel button's text. Default: the kit's "Cancel". */
+    cancelText?: Bind<string>;
+    /** A press on the shade hides it. Default `false`. */
+    closeOnOutside?: Bind<boolean>;
+    onShown?: () => void;
+    onHidden?: () => void;
+    onCancel?: () => void;
+}

package/dist/components/loadpanel/load-panel-target.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentBase } from '@motifx/core';
+/** What a load panel covers: a component, an element, or the whole page (`null`). */
+export type LoadPanelTarget = ComponentBase | HTMLElement | null;

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,98 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { PopupPlacement } from "../../parts/popup/popup-placement";
+import { Button } from "../button/Button";
+import type { TooltipTarget } from "../tooltip/tooltip-target";
+import type { PopoverCloseReason } from "./popover-close-reason";
+import type { PopoverClosingEventArgs } from "./popover-closing-event-args";
+import type { PopoverProps } from "./popover-props";
+import type { PopoverShowOn } from "./popover-show-on";
+/**
+ * Content next to the element it belongs to: a title, a close button, anything in it. It opens on a press on its
+ * target (`showOn: 'click'`), when the pointer rests on the target (`'hover'`) or from code; it follows the target
+ * while the page scrolls, opens on the other side when there is no room, and points at the target with an arrow
+ * where the design language draws one. Focus goes in when it opens by a press and back to the target when it
+ * closes; Escape, a press outside, focus leaving and the close button close it.
+ *
+ * @example
+ * <Button ref={b => (this.info = b)} text="Details" />
+ * <Popover target={() => this.info} title="Order 42" showClose>
+ *   <p>Shipped yesterday.</p>
+ * </Popover>
+ */
+export declare class Popover extends Control<HTMLDivElement, PopoverProps> {
+    arrowPart: Component<HTMLSpanElement>;
+    header: Component<HTMLDivElement>;
+    titlePart: Component<HTMLDivElement>;
+    closeButton: Button;
+    body: Component<HTMLDivElement>;
+    contentPart: ComponentBase | null;
+    anchor: HTMLElement | null;
+    opened: boolean;
+    placedItself: boolean;
+    watched: Document | null;
+    frame: number;
+    showTimer: ReturnType<typeof setTimeout> | null;
+    hideTimer: ReturnType<typeof setTimeout> | null;
+    unlink: (() => void) | null;
+    telling: boolean;
+    openedEmitter: Emitter<void>;
+    closing: Emitter<PopoverClosingEventArgs>;
+    closed: Emitter<PopoverCloseReason>;
+    constructor(props?: IBaseProp<PopoverProps>);
+    get target(): TooltipTarget | null;
+    set target(value: Bind<TooltipTarget | null>);
+    get title(): string;
+    set title(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get content(): ComponentBase | null;
+    set content(value: Bind<ComponentBase | null>);
+    get showOn(): PopoverShowOn;
+    set showOn(value: Bind<PopoverShowOn>);
+    get placement(): PopupPlacement;
+    set placement(value: Bind<PopupPlacement>);
+    get arrow(): boolean;
+    set arrow(value: Bind<boolean>);
+    get showClose(): boolean;
+    set showClose(value: Bind<boolean>);
+    get width(): string | number | null;
+    set width(value: Bind<string | number | null>);
+    get closeOnOutside(): boolean;
+    set closeOnOutside(value: Bind<boolean>);
+    get delay(): number;
+    set delay(value: Bind<number>);
+    get hideDelay(): number;
+    set hideDelay(value: Bind<number>);
+    /** Open or not. Reactive; setting it opens or closes. */
+    get value(): boolean;
+    set value(value: Bind<boolean>);
+    /** Whether it is open now. */
+    get isOpen(): boolean;
+    get onOpened(): MotifEvent<void>;
+    /** About to close (`reason`); `cancel = true` keeps it open. */
+    get onClosing(): MotifEvent<PopoverClosingEventArgs>;
+    get onClosed(): MotifEvent<PopoverCloseReason>;
+    /** Opens it next to its target; `false` without a target on the page, or when disabled. Focus goes in. */
+    open(): boolean;
+    /** Closes it; `onClosing` may keep it open. Focus inside goes back to the target. */
+    close(reason?: PopoverCloseReason): boolean;
+    toggle(): void;
+    /** Lines it up with its target again, e.g. after its content changed size. */
+    place(): void;
+    tell(open: boolean): void;
+    drawHeader(): void;
+    drawContent(): void;
+    attach(anchor: HTMLElement | null, again?: boolean): void;
+    pointerIn(): void;
+    pointerOut(): void;
+    clearTimers(): void;
+    listen(doc: Document): void;
+    stopListening(): void;
+    schedule: () => void;
+    onScroll: (e: Event) => void;
+    onPointerDown: (e: PointerEvent) => void;
+    keyDown(e: KeyboardEvent): void;
+    focusOut(e: FocusEvent): void;
+    protected applyProperty(name: string, value: unknown): void;
+}

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

@@ -0,0 +1,5 @@
+export { Popover } from './Popover';
+export type { PopoverProps } from './popover-props';
+export type { PopoverShowOn } from './popover-show-on';
+export type { PopoverCloseReason } from './popover-close-reason';
+export type { PopoverClosingEventArgs } from './popover-closing-event-args';

package/dist/components/popover/popover-close-reason.d.ts

@@ -0,0 +1,2 @@
+/** Why a popover closed. */
+export type PopoverCloseReason = 'escape' | 'outside' | 'focus' | 'toggle' | 'hover' | 'close-button' | 'code';

package/dist/components/popover/popover-closing-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { EventArgs } from '@motifx/core';
+import type { Popover } from './Popover';
+import type { PopoverCloseReason } from './popover-close-reason';
+/** The popover is about to close. `cancel = true` keeps it open. */
+export interface PopoverClosingEventArgs extends EventArgs {
+    reason: PopoverCloseReason;
+    source: Popover;
+}

package/dist/components/popover/popover-props.d.ts

@@ -0,0 +1,39 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { PopupPlacement } from '../../parts/popup/popup-placement';
+import type { TooltipTarget } from '../tooltip/tooltip-target';
+import type { PopoverClosingEventArgs } from './popover-closing-event-args';
+import type { PopoverShowOn } from './popover-show-on';
+/** Props of `Popover`. Each one is also a settable property; a function is followed. */
+export interface PopoverProps extends ControlProps {
+    /** The element or component it opens next to. */
+    target?: Bind<TooltipTarget | null | undefined>;
+    /** A title in the header. The same property as `text`. */
+    title?: Bind<string>;
+    /** What screen readers call it when it has no title. */
+    label?: Bind<string>;
+    /** Content from code, after the JSX children. */
+    content?: Bind<ComponentBase | null | undefined>;
+    /** Default `'click'`. */
+    showOn?: Bind<PopoverShowOn>;
+    /** Default `'bottom'`. It opens on the other side when there is no room. */
+    placement?: Bind<PopupPlacement>;
+    /** An arrow towards the target, where the design language draws one. Default `true`. */
+    arrow?: Bind<boolean>;
+    /** A close button in the header. Default `false`. */
+    showClose?: Bind<boolean>;
+    /** A width of its own (a CSS length, or pixels); without one it takes its content's. */
+    width?: Bind<string | number | null>;
+    /** Closes on a press outside it and its target. Default `true`. */
+    closeOnOutside?: Bind<boolean>;
+    /** Milliseconds the pointer rests on the target before it opens (`showOn: 'hover'`). Default 300. */
+    delay?: Bind<number>;
+    /** Milliseconds it stays after the pointer leaves both, so the pointer can move onto it. Default 200. */
+    hideDelay?: Bind<number>;
+    /** Open or not; `x-model` binds it two-way. */
+    value?: Bind<boolean>;
+    onOpened?: () => void;
+    /** About to close; cancelable. */
+    onClosing?: (e: PopoverClosingEventArgs) => void;
+    onClosed?: (reason: unknown) => void;
+}

package/dist/components/popover/popover-show-on.d.ts

@@ -0,0 +1,2 @@
+/** What opens a popover: a press on its target, the pointer resting on it (and keyboard focus), or only code. */
+export type PopoverShowOn = 'click' | 'hover' | 'manual';

package/dist/components/scheduler/view/AgendaView.d.ts

@@ -27,7 +27,7 @@ export declare class AgendaView<T> extends Component<HTMLDivElement, Props<T>> {
     constructor(props: Props<T>);
     private get host();
     onConfigured(): void;
-    onMounted(): void;
+    onConfig(): void;
     onDisposing(): void;
     /** All of the list, as the model has it now. */
     draw(): void;

package/dist/components/scrollview/ScrollView.d.ts

@@ -0,0 +1,109 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { ResizeWatch } from "../../core/resize-watch";
+import { Spinner } from "../progress/Spinner";
+import type { PullDownEventArgs } from "./pull-down-event-args";
+import type { ReachBottomEventArgs } from "./reach-bottom-event-args";
+import type { ScrollEventArgs } from "./scroll-event-args";
+import type { ScrollViewBars } from "./scroll-view-bars";
+import type { ScrollViewDirection } from "./scroll-view-direction";
+import type { ScrollViewProps } from "./scroll-view-props";
+interface Pull {
+    pointerId: number;
+    startY: number;
+    distance: number;
+    taken: boolean;
+}
+/**
+ * Content that scrolls in a box of its own, with the scrollbars shown as told (`showScrollbar`), a pull from the top
+ * that asks for what is new (`pullToRefresh`, `onPullDown`) and a reach near the end that asks for more
+ * (`loadOnReachBottom`, `onReachBottom`). `scrollTo`, `scrollBy` and `scrollToElement` move it from code.
+ *
+ * @example
+ * <ScrollView style="block-size: 20rem" pullToRefresh onPullDown={e => (e.promise = this.reload())} loadOnReachBottom onReachBottom={e => (e.promise = this.loadMore())}>
+ *   {this.rows.map(row => <Row key={row.id} row={row} />)}
+ * </ScrollView>
+ */
+export declare class ScrollView extends Control<HTMLDivElement, ScrollViewProps> {
+    content: Component<HTMLDivElement>;
+    pullPanel: Component<HTMLDivElement>;
+    pullSpinner: Spinner;
+    pullText: Component<HTMLSpanElement>;
+    bottomPanel: Component<HTMLDivElement>;
+    bottomSpinner: Spinner;
+    bottomText: Component<HTMLSpanElement>;
+    pull: Pull | null;
+    refreshing: boolean;
+    loading: boolean;
+    ended: boolean;
+    scrollTimer: ReturnType<typeof setTimeout> | null;
+    sizes: ResizeWatch;
+    refreshCount: number;
+    pulled: Emitter<PullDownEventArgs>;
+    reached: Emitter<ReachBottomEventArgs>;
+    scrolled: Emitter<ScrollEventArgs>;
+    stops: (() => void)[];
+    constructor(props?: IBaseProp<ScrollViewProps>);
+    get direction(): ScrollViewDirection;
+    set direction(value: Bind<ScrollViewDirection>);
+    get showScrollbar(): ScrollViewBars;
+    set showScrollbar(value: Bind<ScrollViewBars>);
+    get pullToRefresh(): boolean;
+    set pullToRefresh(value: Bind<boolean>);
+    get loadOnReachBottom(): boolean;
+    set loadOnReachBottom(value: Bind<boolean>);
+    get reachBottomOffset(): number;
+    set reachBottomOffset(value: Bind<number>);
+    get pullDownText(): string;
+    set pullDownText(value: Bind<string>);
+    get releaseText(): string;
+    set releaseText(value: Bind<string>);
+    get refreshingText(): string;
+    set refreshingText(value: Bind<string>);
+    get reachBottomText(): string;
+    set reachBottomText(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get onPullDown(): MotifEvent<PullDownEventArgs>;
+    get onReachBottom(): MotifEvent<ReachBottomEventArgs>;
+    get onScrolled(): MotifEvent<ScrollEventArgs>;
+    /** Where the content stands. */
+    get scrollTop(): number;
+    get scrollLeft(): number;
+    /** A refresh (a pull) is going on. */
+    get isRefreshing(): boolean;
+    /** More is being loaded (a reach near the end). */
+    get isLoading(): boolean;
+    /** Scrolls to a position: `{ top, left }`, or a top. */
+    scrollTo(where: number | {
+        top?: number;
+        left?: number;
+    }, smooth?: boolean): void;
+    scrollBy(by: {
+        top?: number;
+        left?: number;
+    }, smooth?: boolean): void;
+    /** Brings an element of the content into view. */
+    scrollToElement(target: Element | {
+        element: Element;
+    }, smooth?: boolean): void;
+    /** Starts a refresh as a pull would: the panel shows, `onPullDown` is asked. */
+    refresh(): void;
+    /** Ends a refresh: the panel goes back. */
+    release(): void;
+    /** Asks for more now, as a reach near the end would. */
+    loadMore(): boolean;
+    /** Looks at the position again (the content changed): near the end, more is asked for. */
+    update(): void;
+    pullHeight(): number;
+    drawTexts(): void;
+    handleScroll(): void;
+    onMounted(): void;
+    check(): void;
+    pointerDown(e: PointerEvent): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+    stopPull(): void;
+    touchMove(e: TouchEvent): void;
+}
+export {};

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

@@ -0,0 +1,7 @@
+export { ScrollView } from './ScrollView';
+export type { ScrollViewProps } from './scroll-view-props';
+export type { ScrollViewDirection } from './scroll-view-direction';
+export type { ScrollViewBars } from './scroll-view-bars';
+export type { PullDownEventArgs } from './pull-down-event-args';
+export type { ReachBottomEventArgs } from './reach-bottom-event-args';
+export type { ScrollEventArgs } from './scroll-event-args';

package/dist/components/scrollview/pull-down-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { ScrollView } from './ScrollView';
+/** The content was pulled down and let go: load what is new, then `release()` (or set `promise`) and the indicator goes. */
+export interface PullDownEventArgs {
+    /** Ends the refresh. */
+    release: () => void;
+    /** Set it to wait: the refresh ends when it settles. */
+    promise?: Promise<unknown>;
+    source: ScrollView;
+}

package/dist/components/scrollview/reach-bottom-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { ScrollView } from './ScrollView';
+/** The content was scrolled near its end: load more, then `release()` (or set `promise`) and the indicator goes. */
+export interface ReachBottomEventArgs {
+    /** Ends the loading; `done = true` says there is no more and the view stops asking. */
+    release: (done?: boolean) => void;
+    /** Set it to wait: the loading ends when it settles. */
+    promise?: Promise<unknown>;
+    source: ScrollView;
+}

package/dist/components/scrollview/scroll-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollView } from './ScrollView';
+/** The content moved: where it stands now. */
+export interface ScrollEventArgs {
+    top: number;
+    left: number;
+    source: ScrollView;
+}

package/dist/components/scrollview/scroll-view-bars.d.ts

@@ -0,0 +1,2 @@
+/** When the scrollbars show: while scrolling, while the pointer is over the view, always, or never. */
+export type ScrollViewBars = 'onScroll' | 'onHover' | 'always' | 'never';

package/dist/components/scrollview/scroll-view-direction.d.ts

@@ -0,0 +1,2 @@
+/** Which way the content scrolls. */
+export type ScrollViewDirection = 'vertical' | 'horizontal' | 'both';

package/dist/components/scrollview/scroll-view-props.d.ts

@@ -0,0 +1,31 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { PullDownEventArgs } from './pull-down-event-args';
+import type { ReachBottomEventArgs } from './reach-bottom-event-args';
+import type { ScrollEventArgs } from './scroll-event-args';
+import type { ScrollViewBars } from './scroll-view-bars';
+import type { ScrollViewDirection } from './scroll-view-direction';
+/** Props of `ScrollView`. Each one is also a settable property; a function is followed. */
+export interface ScrollViewProps extends ControlProps {
+    /** Default `'vertical'`. */
+    direction?: Bind<ScrollViewDirection>;
+    /** When the scrollbars show. Default `'onScroll'`. */
+    showScrollbar?: Bind<ScrollViewBars>;
+    /** Pulling the content down from the top asks `onPullDown` for what is new. Default `false`. */
+    pullToRefresh?: Bind<boolean>;
+    /** Scrolling near the end asks `onReachBottom` for more. Default `false`. */
+    loadOnReachBottom?: Bind<boolean>;
+    /** Pixels from the end at which `onReachBottom` is asked. Default `100`. */
+    reachBottomOffset?: Bind<number>;
+    /** The texts of the pull-down panel; the kit's when not given. */
+    pullDownText?: Bind<string>;
+    releaseText?: Bind<string>;
+    refreshingText?: Bind<string>;
+    /** The text under the content while more is loading; the kit's "Loading…" when not given. */
+    reachBottomText?: Bind<string>;
+    /** What screen readers call the scrolling region. */
+    label?: Bind<string>;
+    onPullDown?: (e: PullDownEventArgs) => void;
+    onReachBottom?: (e: ReachBottomEventArgs) => void;
+    onScrolled?: (e: ScrollEventArgs) => void;
+}

package/dist/components/sortable/Sortable.d.ts

@@ -0,0 +1,106 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { DragGhost } from "../../parts/drag/DragGhost";
+import type { SortableDragEventArgs } from "./sortable-drag-event-args";
+import type { SortableDropEventArgs } from "./sortable-drop-event-args";
+import type { SortableOrientation } from "./sortable-orientation";
+import type { SortableProps } from "./sortable-props";
+interface Session {
+    pointerId: number;
+    touch: boolean;
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    item: unknown;
+    element: HTMLElement;
+    fromIndex: number;
+    started: boolean;
+    to: Sortable<unknown> | null;
+    toIndex: number;
+    refused: boolean;
+    timer: ReturnType<typeof setTimeout> | null;
+    frame: number;
+}
+/**
+ * Items the user puts in order by dragging them, with the pointer or a finger (a long press), or with the keys
+ * (Ctrl + an arrow moves the focused item a place); sortables of one `group` take each other's items. The items
+ * are the JSX children, or `items` drawn with `itemTemplate`. A drop moves the item's element and tells
+ * `onReorder` (`onRemove` and `onAdd` across sortables) with the indexes: your data is yours to reorder.
+ *
+ * @example
+ * <Sortable label="Steps" onReorder={e => this.steps.splice(e.toIndex, 0, ...this.steps.splice(e.fromIndex, 1))}>
+ *   {this.steps.map(step => <StepRow key={step.id} step={step} />)}
+ * </Sortable>
+ * <Sortable items={() => this.todo} itemTemplate={item => new TodoRow({ item })} group="tasks" onAdd={…} onRemove={…} />
+ */
+export declare class Sortable<T = unknown> extends Control<HTMLDivElement, SortableProps<T>> {
+    dragStarting: Emitter<SortableDragEventArgs<T>>;
+    dragChanging: Emitter<SortableDragEventArgs<T>>;
+    dragEnding: Emitter<SortableDragEventArgs<T>>;
+    reordered: Emitter<SortableDropEventArgs<T>>;
+    added: Emitter<SortableDropEventArgs<T>>;
+    removed: Emitter<SortableDropEventArgs<T>>;
+    rows: Map<unknown, ComponentBase<any, any>>;
+    stopItems: (() => void) | null;
+    session: Session | null;
+    stops: (() => void)[];
+    line: Component<HTMLSpanElement>;
+    live: Component<HTMLSpanElement>;
+    ghost: DragGhost;
+    focusedAt: number;
+    constructor(props?: IBaseProp<SortableProps<T>>);
+    get items(): readonly T[];
+    set items(value: Bind<readonly T[]>);
+    get itemTemplate(): ((item: T, index: number) => ComponentBase) | undefined;
+    set itemTemplate(value: ((item: T, index: number) => ComponentBase) | undefined);
+    get handle(): string | null;
+    set handle(value: Bind<string | null>);
+    get group(): string | null;
+    set group(value: Bind<string | null>);
+    get allowReordering(): boolean;
+    set allowReordering(value: Bind<boolean>);
+    get orientation(): SortableOrientation;
+    set orientation(value: Bind<SortableOrientation>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get onDragStarting(): MotifEvent<SortableDragEventArgs<T>>;
+    get onDragChanging(): MotifEvent<SortableDragEventArgs<T>>;
+    get onDragEnding(): MotifEvent<SortableDragEventArgs<T>>;
+    get onReorder(): MotifEvent<SortableDropEventArgs<T>>;
+    get onAdd(): MotifEvent<SortableDropEventArgs<T>>;
+    get onRemove(): MotifEvent<SortableDropEventArgs<T>>;
+    /** The items' elements, in order. */
+    get elements(): readonly HTMLElement[];
+    /** Whether an item is being dragged. */
+    get isDragging(): boolean;
+    /** Moves the item at `fromIndex` to `toIndex` as a drop would, and tells `onReorder`; `false` when nothing moved. */
+    move(fromIndex: number, toIndex: number, event?: Event): boolean;
+    onBuilt(): void;
+    /** Reads the items again after they were changed in place. */
+    refresh(): void;
+    itemElements(): HTMLElement[];
+    itemOf(el: HTMLElement): T;
+    renderItems(): void;
+    drawRows(items: T[]): void;
+    plainRow(item: T): ComponentBase;
+    drawItems(): void;
+    focusableOf(el: HTMLElement): HTMLElement | null;
+    drawStops(): void;
+    place(el: HTMLElement, toIndex: number): void;
+    announce(toIndex: number): void;
+    keyDown(e: KeyboardEvent): void;
+    pointerDown(e: PointerEvent): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+    args(s: Session, event?: Event): SortableDragEventArgs<T>;
+    start(e: PointerEvent): boolean;
+    track(e: PointerEvent): void;
+    takes(from: Sortable<unknown>): boolean;
+    indexAt(x: number, y: number, dragged: HTMLElement): number;
+    showLine(index: number, dragged: HTMLElement): void;
+    autoScroll(): void;
+    end(e: Event | null, drop: boolean): void;
+    drop(s: Session, to: Sortable<unknown>, event?: Event): void;
+}
+export {};

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

@@ -0,0 +1,5 @@
+export { Sortable } from './Sortable';
+export type { SortableProps } from './sortable-props';
+export type { SortableOrientation } from './sortable-orientation';
+export type { SortableDragEventArgs } from './sortable-drag-event-args';
+export type { SortableDropEventArgs } from './sortable-drop-event-args';

package/dist/components/sortable/sortable-drag-event-args.d.ts

@@ -0,0 +1,15 @@
+import type { EventArgs } from '@motifx/core';
+import type { Sortable } from './Sortable';
+/** A drag in a sortable: the item, where it comes from and where it would go. `cancel = true` refuses. */
+export interface SortableDragEventArgs<T = unknown> extends EventArgs {
+    /** The item as given, or the component when the children are the items. */
+    item: T;
+    fromIndex: number;
+    /** Where it would land in `to`; -1 while nowhere. */
+    toIndex: number;
+    from: Sortable<T>;
+    /** The sortable under the pointer; `null` while nowhere. */
+    to: Sortable<T> | null;
+    source: Sortable<T>;
+    event?: Event;
+}

package/dist/components/sortable/sortable-drop-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { Sortable } from './Sortable';
+/** An item was dropped: moved within a sortable (`onReorder`), taken out of one (`onRemove`) or into another (`onAdd`). */
+export interface SortableDropEventArgs<T = unknown> {
+    item: T;
+    fromIndex: number;
+    toIndex: number;
+    from: Sortable<T>;
+    to: Sortable<T>;
+    source: Sortable<T>;
+    event?: Event;
+}

package/dist/components/sortable/sortable-orientation.d.ts

@@ -0,0 +1,2 @@
+/** How the items lie: one under the other, or side by side (the drop line and the move keys follow). */
+export type SortableOrientation = 'vertical' | 'horizontal';