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

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