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

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

@@ -0,0 +1,37 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { DraggableEventArgs } from './draggable-event-args';
+/** The way a draggable may move. */
+export type DragAxis = 'both' | 'x' | 'y';
+/** Where a draggable stands, in pixels from where it was laid out. */
+export interface DragPosition {
+    x: number;
+    y: number;
+}
+/** Props of `Draggable`. Each one is also a settable property; a function is followed. */
+export interface DraggableProps extends ControlProps {
+    /** Default `'both'`. */
+    axis?: Bind<DragAxis>;
+    /** The draggable stays inside this: its parent, or an element it lies in. Default `null`, no limit. */
+    boundary?: Bind<'parent' | HTMLElement | null>;
+    /** A selector inside the draggable: only a press there drags it, and it takes the keys. Default `null`, the whole draggable. */
+    handle?: Bind<string | null>;
+    /** A copy follows the pointer and the draggable stays where it is; for a drop target to take. Default `false`. */
+    clone?: Bind<boolean>;
+    /** Drop targets of the same group take it. Default `null`. */
+    group?: Bind<string | null>;
+    /** Anything of your own, given to the drop target. */
+    data?: unknown;
+    /** Pixels an arrow key moves it by. Default `10`. */
+    step?: Bind<number>;
+    /** Where it stands: given, it is applied; after every drag or key the new place is written to `x-model`. */
+    position?: Bind<DragPosition | null>;
+    /** A drag is about to begin; cancelable. */
+    onDragStarting?: (e: DraggableEventArgs) => void;
+    /** It is being dragged (`x`, `y`, the `target` under the pointer). */
+    onDragging?: (e: DraggableEventArgs) => void;
+    /** The pointer let go; `cancel = true` brings it back where it started. */
+    onDragEnding?: (e: DraggableEventArgs) => void;
+    /** The drag ended: where it stands, and whether a target took it (`dropped`). */
+    onDragEnded?: (e: DraggableEventArgs) => void;
+}

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

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { Draggable } from './Draggable';
+import type { DropTarget } from './DropTarget';
+/** A draggable came over a target (`cancel = true` refuses it), left it, or was dropped on it. */
+export interface DropEventArgs extends EventArgs {
+    draggable: Draggable;
+    /** The draggable's `data`, as given. */
+    data: unknown;
+    source: DropTarget;
+    event?: Event;
+}

package/dist/components/draggable/drop-target-props.d.ts

@@ -0,0 +1,13 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { DropEventArgs } from './drop-event-args';
+/** Props of `DropTarget`. Each one is also a settable property; a function is followed. */
+export interface DropTargetProps extends ControlProps {
+    /** Takes the draggables of this group; `null` takes those without one. Default `null`. */
+    group?: Bind<string | null>;
+    /** A draggable came over it; `cancel = true` refuses it. */
+    onDragEntering?: (e: DropEventArgs) => void;
+    onDragLeaving?: (e: DropEventArgs) => void;
+    /** A draggable was dropped on it: your data is yours to move. */
+    onDropped?: (e: DropEventArgs) => void;
+}

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

@@ -0,0 +1,6 @@
+export { Draggable } from './Draggable';
+export { DropTarget } from './DropTarget';
+export type { DraggableProps, DragAxis, DragPosition } from './draggable-props';
+export type { DropTargetProps } from './drop-target-props';
+export type { DraggableEventArgs } from './draggable-event-args';
+export type { DropEventArgs } from './drop-event-args';

package/dist/components/fileuploader/FileUploader.d.ts

@@ -33,7 +33,7 @@ interface Row {
 }
 /**
  * Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as
- * they come (`uploadUrl`, in one piece or in chunks, or your own `upload`), on an Upload button, or from code;
+ * they come (`uploadUrl`, in one piece or in chunks, or your own `upload`), on an Upload button, or programmatically;
  * progress, cancel, retry and remove on each. `accept`, `maxFileSize`, `minFileSize` and `maxFiles` turn files
  * away, each listed with the reason. The value is the files taken; `x-model` binds it.
  *

package/dist/components/fileuploader/file-uploader-props.d.ts

@@ -16,7 +16,7 @@ export interface FileUploaderProps extends FieldProps<readonly File[]> {
     maxFiles?: Bind<number | null>;
     /** Files may be dropped on the box. Default `true`. */
     allowDrop?: Bind<boolean>;
-    /** When files are uploaded: `instant` (as chosen), `button` (an Upload button), `manual` (`upload()` from code). Default `instant` with `uploadUrl` or `upload`, else `manual`. */
+    /** When files are uploaded: `instant` (as chosen), `button` (an Upload button), `manual` (`upload()` programmatically). Default `instant` with `uploadUrl` or `upload`, else `manual`. */
     uploadMode?: Bind<UploadMode>;
     /** Where files are sent, by the uploader itself (XMLHttpRequest, with progress). */
     uploadUrl?: Bind<string | null>;

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

@@ -1,2 +1,2 @@
-/** When files are uploaded: as soon as they are chosen, when the Upload button is pressed, or never by the uploader (`upload()` from code). */
+/** When files are uploaded: as soon as they are chosen, when the Upload button is pressed, or never by the uploader (`upload()` programmatically). */
 export type UploadMode = 'instant' | 'button' | 'manual';

package/dist/components/filterbuilder/FilterBuilder.d.ts

@@ -124,7 +124,7 @@ export declare class FilterBuilder extends Control<HTMLDivElement, FilterBuilder
     private fitToField;
     /** The tree changed: the value follows (when it is another filter) and the rows are drawn again. */
     private changed;
-    /** A value from the prop or from code: the tree is built again, unless it is the value the tree stands for already. */
+    /** A value from the prop or programmatically: the tree is built again, unless it is the value the tree stands for already. */
     private takeValue;
     private inTree;
     /** Reads what the rows show, so the drawing effect follows it. */

package/dist/components/gallery/Gallery.d.ts

@@ -0,0 +1,132 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { SlideTrack } from "../../parts/slide/slide-track";
+import type { GalleryItem } from "./gallery-item";
+import type { GalleryItemClickEventArgs } from "./gallery-item-click-event-args";
+import type { GalleryProps } from "./gallery-props";
+import type { SlideChangedEventArgs } from "./slide-changed-event-args";
+import type { SlideChangingEventArgs } from "./slide-changing-event-args";
+interface Look {
+    item: unknown;
+    key: string | null;
+    image: string;
+    alt: string;
+    text: string;
+    description: string;
+    content: (() => ComponentBase) | null;
+}
+interface Pane {
+    item: unknown;
+    pane: Component<HTMLDivElement>;
+    figure: Component<HTMLDivElement>;
+    image: HTMLImageElement | null;
+    content: ComponentBase | null;
+    caption: Component<HTMLDivElement>;
+    title: Component<HTMLSpanElement>;
+    description: Component<HTMLSpanElement>;
+}
+type Hold = 'hover' | 'focus' | 'drag';
+/**
+ * Panes side by side, one in view (or several), moved by the buttons at the sides, the dots under them, a swipe
+ * or the arrow keys; a slideshow when `slideInterval` says so, which pauses under the pointer and while focus is
+ * inside. A pane is an image with a caption, or any content. The pane in view is `value`: a pane's `key`, else its
+ * index; `x-model` binds it two-way.
+ *
+ * @example
+ * <Gallery items={['/photos/1.jpg', '/photos/2.jpg']} loop slideInterval={4000} height={320} />
+ * <Gallery items={[{ image: '/a.jpg', text: 'Harbour', description: 'Early morning' }]} x-model={() => this.shown} />
+ */
+export declare class Gallery extends Control<HTMLElement, GalleryProps> {
+    changing: Emitter<SlideChangingEventArgs>;
+    changed: Emitter<SlideChangedEventArgs>;
+    itemClick: Emitter<GalleryItemClickEventArgs>;
+    bar: Component<HTMLDivElement>;
+    indicator: Component<HTMLDivElement>;
+    playButton: Component<HTMLButtonElement>;
+    previousButton: Component<HTMLButtonElement>;
+    nextButton: Component<HTMLButtonElement>;
+    viewport: Component<HTMLDivElement>;
+    list: Component<HTMLDivElement>;
+    slide: SlideTrack;
+    panes: Pane[];
+    dots: HTMLButtonElement[];
+    looks: Look[];
+    stopItems: (() => void) | null;
+    previousIndex: number;
+    byUser: boolean;
+    ready: boolean;
+    playing: boolean;
+    holds: Set<Hold>;
+    timer: number;
+    reduced: MediaQueryList | null;
+    constructor(props?: IBaseProp<GalleryProps>);
+    get items(): readonly (GalleryItem | string)[];
+    set items(value: Bind<readonly (GalleryItem | string)[]>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get loop(): boolean;
+    set loop(value: Bind<boolean>);
+    get showNavButtons(): boolean;
+    set showNavButtons(value: Bind<boolean>);
+    get showIndicator(): boolean;
+    set showIndicator(value: Bind<boolean>);
+    get slideInterval(): number;
+    set slideInterval(value: Bind<number>);
+    get pauseOnHover(): boolean;
+    set pauseOnHover(value: Bind<boolean>);
+    get swipeEnabled(): boolean;
+    set swipeEnabled(value: Bind<boolean>);
+    get itemsPerPage(): number;
+    set itemsPerPage(value: Bind<number>);
+    get stretchImages(): boolean;
+    set stretchImages(value: Bind<boolean>);
+    get height(): string | number | null;
+    set height(value: Bind<string | number | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The pane in view is about to change (`from`, `to`, `byUser`); `cancel` keeps the one there. */
+    get onSlideChanging(): MotifEvent<SlideChangingEventArgs>;
+    /** The pane in view changed, by the user, programmatically or by the slideshow (`byUser`). */
+    get onSlideChanged(): MotifEvent<SlideChangedEventArgs>;
+    /** A press on a pane that was not a drag. */
+    get onItemClick(): MotifEvent<GalleryItemClickEventArgs>;
+    /** The index of the pane in view; -1 when there is none. */
+    get selectedIndex(): number;
+    /** How many panes there are. */
+    get count(): number;
+    /** The slideshow runs: it was not paused, and nothing holds it (the pointer, focus, a drag, reduced motion). */
+    get isPlaying(): boolean;
+    /** Panes side by side, at least one. */
+    get perView(): number;
+    /** Goes to the pane after the one in view; `false` at the end without `loop`, or when the change was refused. */
+    next(): Promise<boolean>;
+    /** Goes to the pane before the one in view. */
+    previous(): Promise<boolean>;
+    /** Goes to a pane by index or key; `onSlideChanging` is asked first. */
+    goTo(pane: number | string): Promise<boolean>;
+    /** Starts the slideshow (`slideInterval` says how fast) after `pause()`. */
+    play(): void;
+    /** Stops the slideshow until `play()`. */
+    pause(): void;
+    /** Reads the items again after they were changed in place. */
+    refresh(): void;
+    /** The index a value names: a key, else an index in range; -1 for none. */
+    indexOf(value: string | number | null | undefined): number;
+    /** The value that names the pane at `index`: its key when it has one, else the index. */
+    valueAt(index: number): string | number;
+    renderName(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawPanes(): void;
+    makePane(look: Look): Pane;
+    writePane(pane: Pane, look: Look): void;
+    drawDots(): void;
+    drawStates(): void;
+    schedule: () => void;
+    hold(reason: Hold, on: boolean): void;
+    go(to: number, byUser: boolean, event?: Event): Promise<boolean>;
+    makeNav(direction: 'previous' | 'next'): Component<HTMLButtonElement>;
+    listen(): void;
+    keyDown(e: KeyboardEvent, onDots: boolean): void;
+}
+export {};

package/dist/components/gallery/gallery-item-click-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { Gallery } from './Gallery';
+/** A press on a pane that was not a drag. */
+export interface GalleryItemClickEventArgs {
+    index: number;
+    /** The item as given. */
+    item: unknown;
+    source: Gallery;
+    event: MouseEvent;
+}

package/dist/components/gallery/gallery-item.d.ts

@@ -0,0 +1,18 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+/** A pane of the gallery: an image, or any content, with a caption. Each field may be a function of your state. */
+export interface GalleryItem {
+    /** Names the pane in `value`; without one its index does. */
+    key?: string;
+    /** The address of the image. */
+    image?: Bind<string>;
+    /** What the image shows, for screen readers; empty for a decorative one. */
+    alt?: Bind<string>;
+    /** The caption's first line. */
+    text?: Bind<string>;
+    /** The caption's second line. */
+    description?: Bind<string>;
+    /** Any content in place of an image, made when the pane is. */
+    content?: () => ComponentBase;
+    /** Anything of your own; the item comes back as given in the events. */
+    data?: unknown;
+}

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

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { GalleryItem } from './gallery-item';
+import type { GalleryItemClickEventArgs } from './gallery-item-click-event-args';
+import type { SlideChangedEventArgs } from './slide-changed-event-args';
+import type { SlideChangingEventArgs } from './slide-changing-event-args';
+/** Props of `Gallery`. Each one is also a settable property; a function is followed. */
+export interface GalleryProps extends ControlProps {
+    /** The panes in order: `GalleryItem`s or image addresses. */
+    items?: Bind<readonly (GalleryItem | string)[]>;
+    /** The pane in view: its `key`, else its index. `x-model` binds it two-way. Default `0`. */
+    value?: Bind<string | number | null>;
+    /** After the last pane comes the first. Default `false`. */
+    loop?: Bind<boolean>;
+    /** The previous and next buttons at the sides. Default `true`. */
+    showNavButtons?: Bind<boolean>;
+    /** The dots under the panes, one per pane. Default `true`. */
+    showIndicator?: Bind<boolean>;
+    /** Milliseconds a pane stays in a slideshow; `0` for none. It pauses under the pointer, while focus is inside, out of sight and under reduced motion. Default `0`. */
+    slideInterval?: Bind<number>;
+    /** The slideshow pauses while the pointer rests on the gallery. Default `true`. */
+    pauseOnHover?: Bind<boolean>;
+    /** A finger or a pointer drags the panes. Default `true`. */
+    swipeEnabled?: Bind<boolean>;
+    /** Panes side by side in the width. Default `1`. */
+    itemsPerPage?: Bind<number>;
+    /** An image fills its pane, cut at the edges, instead of fitting inside it whole. Default `false`. */
+    stretchImages?: Bind<boolean>;
+    /** The gallery's height, a CSS length or pixels. Without one it is as tall as its tallest pane. */
+    height?: Bind<string | number | null>;
+    /** What screen readers call it. Default: the kit's "Gallery". */
+    label?: Bind<string>;
+    /** The pane in view is about to change; cancelable. */
+    onSlideChanging?: (e: SlideChangingEventArgs) => void;
+    onSlideChanged?: (e: SlideChangedEventArgs) => void;
+    /** A press on a pane that was not a drag. */
+    onItemClick?: (e: GalleryItemClickEventArgs) => void;
+}

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

@@ -0,0 +1,6 @@
+export { Gallery } from './Gallery';
+export type { GalleryItem } from './gallery-item';
+export type { GalleryProps } from './gallery-props';
+export type { GalleryItemClickEventArgs } from './gallery-item-click-event-args';
+export type { SlideChangingEventArgs } from './slide-changing-event-args';
+export type { SlideChangedEventArgs } from './slide-changed-event-args';

package/dist/components/gallery/slide-changed-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { Gallery } from './Gallery';
+/** The pane in view changed. */
+export interface SlideChangedEventArgs {
+    index: number;
+    /** The item as given; `null` when there is none. */
+    item: unknown;
+    previous: number;
+    /** By a press, a swipe or a key, else programmatically or the slideshow. */
+    byUser: boolean;
+    source: Gallery;
+}

package/dist/components/gallery/slide-changing-event-args.d.ts

@@ -0,0 +1,14 @@
+import type { EventArgs } from '@motifx/core';
+import type { Gallery } from './Gallery';
+/** The pane in view is about to change. `cancel = true` keeps the one there. */
+export interface SlideChangingEventArgs extends EventArgs {
+    from: number;
+    to: number;
+    /** The items as given; `null` when there is none. */
+    fromItem: unknown;
+    toItem: unknown;
+    /** By a press, a swipe or a key, else programmatically or the slideshow. */
+    byUser: boolean;
+    source: Gallery;
+    event?: Event;
+}

package/dist/components/layout/ChildSettings.d.ts

@@ -31,7 +31,7 @@ export declare class ChildSettings {
     /** The children that take part, in order. */
     get children(): ComponentBase[];
     get(child: ComponentBase, name: string): unknown;
-    /** Sets a child's setting from code: a value, or a function that is followed. */
+    /** Sets a child's setting programmatically: a value, or a function that is followed. */
     set(child: ComponentBase, name: string, value: Bind<unknown>): void;
     private add;
     private leave;

package/dist/components/layout/DockPanel.d.ts

@@ -30,9 +30,9 @@ export declare class DockPanel extends Control<HTMLDivElement, DockPanelProps> {
     set padding(value: Bind<LayoutSpace | undefined>);
     /** Where a child is docked, as its props say or as set with {@link setDock}. */
     dockOf(child: ComponentBase): Dock;
-    /** Docks a child from code: a value, or a function that is followed. */
+    /** Docks a child programmatically: a value, or a function that is followed. */
     setDock(child: ComponentBase, dock: Bind<Dock>): void;
-    /** Sets the anchors of a `float` child from code; each is a value or a function. Fields left out stay. */
+    /** Sets the anchors of a `float` child programmatically; each is a value or a function. Fields left out stay. */
     setAnchors(child: ComponentBase, anchors: Omit<DockChildProps, 'dock'>): void;
     private get settings();
     /** Gives every child its grid area: each docked one takes an edge of what the ones before it left. */

package/dist/components/layout/Grid.d.ts

@@ -49,7 +49,7 @@ export declare class Grid extends Control<HTMLDivElement, GridProps> {
     set inline(value: Bind<boolean>);
     /** A child's cell, as its props say or as set with {@link setCell}. */
     cellOf(child: ComponentBase): GridCell;
-    /** Places a child from code; each field is a value or a function that is followed. Fields left out stay. */
+    /** Places a child programmatically; each field is a value or a function that is followed. Fields left out stay. */
     setCell(child: ComponentBase, cell: GridCell): void;
     private get settings();
     private place;

package/dist/components/layout/SplitContainer.d.ts

@@ -10,7 +10,7 @@ import type { SplitterMovedEventArgs } from './splitter-moved-event-args';
  * Two panes, `first` and `second`, side by side or one over the other, with a splitter between
  * them that the pointer drags and the keys move (the ARIA window splitter pattern). The pane
  * named by `fixedPanel` keeps its size when the container is resized; `collapsed` hides one.
- * The first JSX child goes into the first pane, the second into the second one; from code, add
+ * The first JSX child goes into the first pane, the second into the second one; programmatically, add
  * to `split.first.controls` / `split.second.controls`.
  *
  * @example

package/dist/components/layout/Stack.d.ts

@@ -38,7 +38,7 @@ export declare class Stack extends Control<HTMLDivElement, StackProps> {
     set inline(value: Bind<boolean>);
     /** A child's `grow`, as its props say or as set with {@link setGrow}. */
     growOf(child: ComponentBase): boolean | number;
-    /** Sets a child's `grow` from code: a value, or a function that is followed. */
+    /** Sets a child's `grow` programmatically: a value, or a function that is followed. */
     setGrow(child: ComponentBase, grow: Bind<boolean | number>): void;
     private get settings();
     private renderLook;

package/dist/components/multiview/MultiView.d.ts

@@ -0,0 +1,87 @@
+import { Emitter, type Bind, type Component, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { SlideTrack } from "../../parts/slide/slide-track";
+import type { MultiViewProps } from "./multi-view-props";
+import { View } from "./View";
+import type { ViewSelectingEventArgs } from "./view-selecting-event-args";
+import type { ViewSelectionChangedEventArgs } from "./view-selection-changed-event-args";
+/**
+ * Pages side by side, one in sight: the JSX `View` children, or views added programmatically. A swipe brings the next or
+ * the previous one; programmatically `next()`, `previous()` and `goTo()` do, and a `Tabs`, a `Stepper` or buttons bound
+ * to `value` drive it. A view is built when first shown (`lazy`) and kept (`keepAlive`), as the panels of `Tabs`.
+ *
+ * @example
+ * <MultiView x-model={() => this.page} loop>
+ *   <View title="Details">…</View>
+ *   <View title="Review">…</View>
+ * </MultiView>
+ */
+export declare class MultiView extends Control<HTMLDivElement, MultiViewProps> {
+    selecting: Emitter<ViewSelectingEventArgs>;
+    selectionChanged: Emitter<ViewSelectionChangedEventArgs>;
+    viewport: Component<HTMLDivElement>;
+    track: Component<HTMLDivElement>;
+    slide: SlideTrack;
+    views: View[];
+    previousIndex: number;
+    byUser: boolean;
+    ready: boolean;
+    constructor(props?: IBaseProp<MultiViewProps>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get loop(): boolean;
+    set loop(value: Bind<boolean>);
+    get swipeEnabled(): boolean;
+    set swipeEnabled(value: Bind<boolean>);
+    get animated(): boolean;
+    set animated(value: Bind<boolean>);
+    get lazy(): boolean;
+    set lazy(value: Bind<boolean>);
+    get keepAlive(): boolean;
+    set keepAlive(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The view in sight is about to change (`from`, `to`, `byUser`); `cancel` keeps the one there. */
+    get onSelecting(): MotifEvent<ViewSelectingEventArgs>;
+    /** The view in sight changed, by a swipe or programmatically (`byUser`). */
+    get onSelectionChanged(): MotifEvent<ViewSelectionChangedEventArgs>;
+    /** The index of the view in sight; -1 when there is none. */
+    get selectedIndex(): number;
+    /** The view in sight, `null` when there is none. */
+    get selectedView(): View | null;
+    /** How many views there are, hidden ones too. */
+    get count(): number;
+    /** Adds a view at the end. */
+    add(view: View): View;
+    /** Adds a view at `index`. */
+    insert(index: number, view: View): View;
+    /** Removes a view and disposes it; the sight moves to a neighbour. */
+    remove(view: View): boolean;
+    /** Goes to the next view that is shown and enabled; `false` at the end without `loop`, or when refused. */
+    next(): Promise<boolean>;
+    /** Goes to the previous view that is shown and enabled. */
+    previous(): Promise<boolean>;
+    /** Goes to a view, by index or key; `onSelecting` is asked first. */
+    goTo(view: number | string | View): Promise<boolean>;
+    /** Brings a view into sight, as `goTo` does. */
+    select(view: View): Promise<boolean>;
+    /** The index a value names: a key, else an index in range; -1 for none. */
+    indexOf(value: string | number | null | undefined): number;
+    /** The value that names the view at `index`: its key when it has one, else the index. */
+    valueAt(index: number): string | number;
+    onDisposing(): void;
+    /** @internal A view's title, key, visibility or enabled changed. */
+    viewChanged(): void;
+    /** @internal A view was disposed on its own. */
+    viewGone(view: View): void;
+    lane(): View[];
+    laneIndex(index: number): number;
+    place(view: View, index: number): void;
+    forget(view: View): void;
+    renderName(): void;
+    drawStates(): void;
+    lazyOf(view: View): boolean;
+    keepAliveOf(view: View): boolean;
+    usable(from: number, direction: 1 | -1): number;
+    go(to: number, byUser: boolean, event?: Event): Promise<boolean>;
+}

package/dist/components/multiview/View.d.ts

@@ -0,0 +1,41 @@
+import { type Bind, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { PanelContent } from "../tabs/PanelContent";
+import type { MultiView } from "./MultiView";
+import type { ViewProps } from "./view-props";
+/**
+ * One page of a `MultiView`: the JSX children are its content, built when it is first in sight (see `lazy`), and
+ * what `content` makes besides them.
+ *
+ * @example
+ * <MultiView x-model={() => this.page}>
+ *   <View title="Details"><TextBox label="Name" /></View>
+ *   <View title="Review" content={() => new ReviewView()} />
+ * </MultiView>
+ */
+export declare class View extends Control<HTMLDivElement, ViewProps> {
+    content: PanelContent;
+    owner: MultiView | null;
+    constructor(props?: IBaseProp<ViewProps>);
+    /** The `key` prop (also when written as the JSX `key`), `''` without one. */
+    get key(): string;
+    set key(value: Bind<string>);
+    get title(): string;
+    set title(value: Bind<string>);
+    /** This view's own setting; `undefined` follows the multi-view. */
+    get lazy(): boolean | undefined;
+    set lazy(value: Bind<boolean | undefined>);
+    get keepAlive(): boolean | undefined;
+    set keepAlive(value: Bind<boolean | undefined>);
+    /** Whether it is the view in sight. */
+    get isSelected(): boolean;
+    /** Whether its content has been built (see `lazy`). */
+    get contentBuilt(): boolean;
+    /** Brings the view into sight; `false` when it is hidden, disabled or not in a `MultiView`. */
+    select(): Promise<boolean>;
+    /** @internal In sight or not; the multi-view decides. */
+    reveal(on: boolean, keepAlive: boolean): void;
+    /** @internal Builds the content now. */
+    buildContent(): void;
+    protected applyProperty(name: string, value: unknown): void;
+}

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

@@ -0,0 +1,6 @@
+export { MultiView } from './MultiView';
+export { View } from './View';
+export type { MultiViewProps } from './multi-view-props';
+export type { ViewProps } from './view-props';
+export type { ViewSelectingEventArgs } from './view-selecting-event-args';
+export type { ViewSelectionChangedEventArgs } from './view-selection-changed-event-args';

package/dist/components/multiview/multi-view-props.d.ts

@@ -0,0 +1,24 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ViewSelectingEventArgs } from './view-selecting-event-args';
+import type { ViewSelectionChangedEventArgs } from './view-selection-changed-event-args';
+/** Props of `MultiView`. Each one is also a settable property; a function is followed. */
+export interface MultiViewProps extends ControlProps {
+    /** The view in sight: its `key`, else its index. `x-model` binds it two-way. Default `0`. */
+    value?: Bind<string | number | null>;
+    /** After the last view comes the first. Default `false`. */
+    loop?: Bind<boolean>;
+    /** A finger or a pointer drags the views. Default `true`. */
+    swipeEnabled?: Bind<boolean>;
+    /** The views slide into sight. `false` shows the next one at once. Default `true`. */
+    animated?: Bind<boolean>;
+    /** A view is built when first shown, then kept (a view's own `lazy` wins). Default `true`. */
+    lazy?: Bind<boolean>;
+    /** `false`: content made by a view's `content` is disposed while out of sight (a view's own `keepAlive` wins). Default `true`. */
+    keepAlive?: Bind<boolean>;
+    /** What screen readers call it. Default: the kit's "Pages". */
+    label?: Bind<string>;
+    /** The view in sight is about to change; cancelable. */
+    onSelecting?: (e: ViewSelectingEventArgs) => void;
+    onSelectionChanged?: (e: ViewSelectionChangedEventArgs) => void;
+}

package/dist/components/multiview/view-props.d.ts

@@ -0,0 +1,15 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+/** Props of `View`, one page of a `MultiView`. Each one is also a settable property; a function is followed. */
+export interface ViewProps extends ControlProps {
+    /** Names the view in the multi-view's `value`; without one its index does. The JSX `key` is read too. */
+    key?: Bind<string>;
+    /** What screen readers call the page. Default: "Page 2 of 3" in the kit language. */
+    title?: Bind<string>;
+    /** Content made when the view is first shown, instead of (or besides) the JSX children. */
+    content?: () => ComponentBase | readonly ComponentBase[];
+    /** This view's own setting; `undefined` follows the multi-view. */
+    lazy?: Bind<boolean | undefined>;
+    /** This view's own setting; `undefined` follows the multi-view. */
+    keepAlive?: Bind<boolean | undefined>;
+}

package/dist/components/multiview/view-selecting-event-args.d.ts

@@ -0,0 +1,15 @@
+import type { EventArgs } from '@motifx/core';
+import type { MultiView } from './MultiView';
+import type { View } from './View';
+/** The view in sight is about to change. `cancel = true` keeps the one there. */
+export interface ViewSelectingEventArgs extends EventArgs {
+    from: number;
+    to: number;
+    /** `null` when there was none. */
+    fromView: View | null;
+    toView: View;
+    /** By a swipe, else programmatically. */
+    byUser: boolean;
+    source: MultiView;
+    event?: Event;
+}

package/dist/components/multiview/view-selection-changed-event-args.d.ts

@@ -0,0 +1,12 @@
+import type { MultiView } from './MultiView';
+import type { View } from './View';
+/** The view in sight changed. */
+export interface ViewSelectionChangedEventArgs {
+    index: number;
+    /** `null` when there is none. */
+    view: View | null;
+    previous: number;
+    /** By a swipe, else programmatically. */
+    byUser: boolean;
+    source: MultiView;
+}

package/dist/components/numberbox/number-box-props.d.ts

@@ -21,7 +21,7 @@ export interface NumberBoxProps extends FieldProps<number | null> {
     /** The locale of the format and of what is typed. Default the page's `lang`. */
     locale?: Bind<string>;
     /**
-     * Digits after the decimal point: every value is rounded to them (entered, given or set from code, written back
+     * Digits after the decimal point: every value is rounded to them (entered, given or set programmatically, written back
      * to `x-model`), and shown with exactly that many while the field is not edited. Default: as given.
      */
     decimals?: Bind<number | null>;

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

@@ -9,7 +9,7 @@ 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
+ * 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.