@motifx-community/ui 0.1.0-beta.1 → 0.1.0-beta.3

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 programmatically; 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 programmatically, 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/resizable/Resizable.d.ts

@@ -0,0 +1,84 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { WindowBox } from "../../parts/window/window-box";
+import type { ResizeEventArgs } from "./resize-event-args";
+import type { ResizableProps, ResizeEdge, ResizeHandles, ResizeSize } from "./resizable-props";
+interface Limits {
+    minW: number;
+    minH: number;
+    maxW: number;
+    maxH: number;
+}
+/**
+ * A box the user resizes from its sides and corners with the pointer, or with the arrow keys on the grip in its
+ * end corner. The JSX children are its content. It stays at least `minWidth` × `minHeight`, at most the maximums,
+ * and inside `area` when one is given; `keepAspectRatio` keeps its shape. A box laid out by its position
+ * (`absolute`, `fixed`) also moves when a start or top side is dragged, so the far side stays; one in the flow
+ * only changes size.
+ *
+ * @example
+ * <Resizable minWidth={160} minHeight={100} x-model={() => this.layout.size}><Panel padding="md">…</Panel></Resizable>
+ * <Resizable handles={['end', 'bottom', 'bottom-end']} area="parent" keepAspectRatio><img src="…" /></Resizable>
+ */
+export declare class Resizable extends Control<HTMLDivElement, ResizableProps> {
+    starting: Emitter<ResizeEventArgs>;
+    resizing: Emitter<ResizeEventArgs>;
+    resized: Emitter<ResizeEventArgs>;
+    frame: HTMLDivElement;
+    grip: Component<HTMLDivElement>;
+    live: Component<HTMLSpanElement>;
+    constructor(props?: IBaseProp<ResizableProps>);
+    get handles(): ResizeHandles;
+    set handles(value: Bind<ResizeHandles>);
+    get minWidth(): number;
+    set minWidth(value: Bind<number>);
+    get minHeight(): number;
+    set minHeight(value: Bind<number>);
+    get maxWidth(): number | null;
+    set maxWidth(value: Bind<number | null>);
+    get maxHeight(): number | null;
+    set maxHeight(value: Bind<number | null>);
+    get area(): 'parent' | HTMLElement | null;
+    set area(value: Bind<'parent' | HTMLElement | null>);
+    get keepAspectRatio(): boolean;
+    set keepAspectRatio(value: Bind<boolean>);
+    get step(): number;
+    set step(value: Bind<number>);
+    get width(): number | string | null;
+    set width(value: Bind<number | string | null>);
+    get height(): number | string | null;
+    set height(value: Bind<number | string | null>);
+    get size(): ResizeSize | null;
+    set size(value: Bind<ResizeSize | null>);
+    /** `size`, for `x-model`. */
+    get value(): ResizeSize | null;
+    set value(value: ResizeSize | null);
+    /** A resize is about to begin from a handle (`edge`); `cancel` keeps the size. */
+    get onResizeStarting(): MotifEvent<ResizeEventArgs>;
+    /** The box is being resized (`width`, `height` so far). */
+    get onResizing(): MotifEvent<ResizeEventArgs>;
+    /** A resize ended: the pointer let go, or a key moved a side. */
+    get onResized(): MotifEvent<ResizeEventArgs>;
+    /** The box's size in pixels now. */
+    get currentSize(): ResizeSize;
+    /** The grip in the end corner, the Tab stop that takes the keys. */
+    get gripElement(): HTMLDivElement;
+    length(value: number | string | null | undefined): string;
+    allowed(): Set<ResizeEdge>;
+    drawHandles(): void;
+    box(): WindowBox;
+    room(): {
+        w: number;
+        h: number;
+    };
+    limits(): Limits;
+    get positioned(): boolean;
+    physical(edge: ResizeEdge): ResizeEdge;
+    next(edge: ResizeEdge, start: WindowBox, dx: number, dy: number): WindowBox;
+    applyBox(box: WindowBox): void;
+    args(edge: ResizeEdge, box: WindowBox, event?: Event): ResizeEventArgs;
+    pointerDown(e: PointerEvent, given: ResizeEdge | null): void;
+    keyDown(e: KeyboardEvent): void;
+    finish(edge: ResizeEdge, box: WindowBox, event?: Event): void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export { Resizable } from './Resizable';
+export type { ResizableProps, ResizeEdge, ResizeHandles, ResizeSize } from './resizable-props';
+export type { ResizeEventArgs } from './resize-event-args';

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

@@ -0,0 +1,41 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { WindowEdge } from '../../parts/window/window-edge';
+import type { ResizeEventArgs } from './resize-event-args';
+/** A side or a corner the box is resized from; `start` and `end` follow the reading direction. */
+export type ResizeEdge = WindowEdge;
+/** Which handles the box has: every side and corner, the sides, the corners, or a list of them. */
+export type ResizeHandles = 'all' | 'edges' | 'corners' | readonly ResizeEdge[];
+/** The box's size in pixels. */
+export interface ResizeSize {
+    width: number;
+    height: number;
+}
+/** Props of `Resizable`. Each one is also a settable property; a function is followed. */
+export interface ResizableProps extends ControlProps {
+    /** Default `'all'`. */
+    handles?: Bind<ResizeHandles>;
+    /** The least width and height, in pixels. Default `30`. */
+    minWidth?: Bind<number>;
+    minHeight?: Bind<number>;
+    /** The most width and height, in pixels; `null` for no limit. Default `null`. */
+    maxWidth?: Bind<number | null>;
+    maxHeight?: Bind<number | null>;
+    /** The box stays inside this: its parent, or an element it lies in. Default `null`, no limit. */
+    area?: Bind<'parent' | HTMLElement | null>;
+    /** The width and the height keep their ratio. Default `false`. */
+    keepAspectRatio?: Bind<boolean>;
+    /** Pixels an arrow key changes a side by. Default `10`. */
+    step?: Bind<number>;
+    /** The width to start with, a CSS length or pixels. Without one the content decides. */
+    width?: Bind<number | string | null>;
+    height?: Bind<number | string | null>;
+    /** The size in pixels: given, it is applied; after every resize the new one is written to `x-model`. */
+    size?: Bind<ResizeSize | null>;
+    /** A resize is about to begin from a handle; cancelable. */
+    onResizeStarting?: (e: ResizeEventArgs) => void;
+    /** The box is being resized. */
+    onResizing?: (e: ResizeEventArgs) => void;
+    /** A resize ended (the pointer let go, or a key moved a side). */
+    onResized?: (e: ResizeEventArgs) => void;
+}

package/dist/components/resizable/resize-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { EventArgs } from '@motifx/core';
+import type { Resizable } from './Resizable';
+import type { ResizeEdge } from './resizable-props';
+/** A resize begins (`cancel = true` keeps the size), goes on, or ended: the edge it is from and the size in pixels. */
+export interface ResizeEventArgs extends EventArgs {
+    edge: ResizeEdge;
+    width: number;
+    height: number;
+    /** By a handle or a key, else from the props. */
+    byUser: boolean;
+    source: Resizable;
+    event?: Event;
+}

package/dist/components/scheduler/AppointmentEditor.d.ts

@@ -129,7 +129,7 @@ export declare class AppointmentEditor<T> implements DragHost<T> {
     private unsave;
     /** A change to a series that did not go through: `onDataError` says what was saved and whether it was taken back. */
     private failed;
-    /** What a change reaches: the setting's answer, the occurrence from code, else the user's answer. */
+    /** What a change reaches: the setting's answer, the occurrence programmatically, else the user's answer. */
     private scopeFor;
     /**
      * Asks the user what a change (or a delete) of an occurrence reaches: `onSeriesAsking` first (it

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

@@ -112,7 +112,7 @@ export interface SchedulerProps<T> extends ControlProps, SchedulerTemplates<T> {
      * browser's. An appointment's own zone (`fields.startTimeZone`) is the one its series repeats in.
      */
     timeZone?: Bind<string | null>;
-    /** What changing or deleting an occurrence of a series reaches: `'ask'` (default) asks the user; from code it is the occurrence. */
+    /** What changing or deleting an occurrence of a series reaches: `'ask'` (default) asks the user; programmatically it is the occurrence. */
     seriesEdit?: Bind<SeriesEditMode>;
     /** Occurrences of a series, and ones changed apart from it, carry a mark where the design language draws one. Default `true`. */
     recurrenceMarks?: Bind<boolean>;

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 programmatically.
+ *
+ * @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/skeleton/Skeleton.d.ts

@@ -34,7 +34,7 @@ export declare class Skeleton extends Control<HTMLDivElement, SkeletonProps> {
     set loading(value: Bind<boolean>);
     get label(): string;
     set label(value: Bind<string>);
-    /** The part holding what shows once loaded, for adding to it from code. */
+    /** The part holding what shows once loaded, for adding to it programmatically. */
     get content(): Component<HTMLDivElement>;
     onMounted(): void;
     private countOf;

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';