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

package/dist/components/stepper/Stepper.d.ts

@@ -0,0 +1,121 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { ControlSize } from "../../core/control-size";
+import type { IconSource } from "../../core/icon-source";
+import type { StepChangedEventArgs } from "./step-changed-event-args";
+import type { StepChangingEventArgs } from "./step-changing-event-args";
+import type { StepperItem } from "./stepper-item";
+import type { StepperLabelPosition } from "./stepper-label-position";
+import type { StepperOrientation } from "./stepper-orientation";
+import type { StepperProps } from "./stepper-props";
+import type { StepperStatus } from "./stepper-status";
+interface Look {
+    item: unknown;
+    key: string | null;
+    text: string;
+    description: string;
+    icon: IconSource | null;
+    status: 'done' | 'error' | 'pending' | null;
+    optional: boolean;
+    enabled: boolean;
+}
+interface Step {
+    li: Component<HTMLLIElement>;
+    face: Component<HTMLElement>;
+    indicator: Component<HTMLSpanElement>;
+    number: Component<HTMLSpanElement>;
+    mark: Component<HTMLSpanElement>;
+    icon: ComponentBase | null;
+    position: Component<HTMLSpanElement>;
+    label: Component<HTMLSpanElement>;
+    description: Component<HTMLSpanElement>;
+    note: Component<HTMLSpanElement>;
+    state: Component<HTMLSpanElement>;
+    line: Component<HTMLSpanElement>;
+}
+/**
+ * The steps of a longer task and where the user stands in them: a numbered indicator and a text per step, a line
+ * between them, the steps before the current one completed. A step is a button (`clickable`); in linear order a
+ * press reaches a completed step or the one right after the last completed, and `onStepChanging` may refuse or
+ * wait. One Tab stop: the arrow keys move between the steps, Enter and Space choose. The `Wizard` adds a page and
+ * the buttons to each step.
+ *
+ * @example
+ * <Stepper items={['Account', 'Address', 'Payment']} x-model={() => this.order.step} />
+ * <Stepper orientation="vertical" items={[{ text: 'Details', description: 'Name and e-mail' }, { text: 'Review', optional: true }]} />
+ */
+export declare class Stepper extends Control<HTMLElement, StepperProps> {
+    changing: Emitter<StepChangingEventArgs>;
+    changed: Emitter<StepChangedEventArgs>;
+    list: Component<HTMLOListElement>;
+    steps: Step[];
+    looks: Look[];
+    stopItems: (() => void) | null;
+    focusedAt: number;
+    byUser: boolean;
+    ready: boolean;
+    guard: ((e: {
+        from: number;
+        to: number;
+        byUser: boolean;
+    }) => boolean | Promise<boolean>) | null;
+    constructor(props?: IBaseProp<StepperProps>);
+    previousIndex: number;
+    get items(): readonly (StepperItem | string)[];
+    set items(value: Bind<readonly (StepperItem | string)[]>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get linear(): boolean;
+    set linear(value: Bind<boolean>);
+    get orientation(): StepperOrientation;
+    set orientation(value: Bind<StepperOrientation>);
+    get labelPosition(): StepperLabelPosition;
+    set labelPosition(value: Bind<StepperLabelPosition>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get clickable(): boolean;
+    set clickable(value: Bind<boolean>);
+    get showNumbers(): boolean;
+    set showNumbers(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The current step is about to change (`from`, `to`, `byUser`); `cancel` keeps it, `promise` waits. */
+    get onStepChanging(): MotifEvent<StepChangingEventArgs>;
+    /** The current step changed, by the user or programmatically (`byUser`). */
+    get onStepChanged(): MotifEvent<StepChangedEventArgs>;
+    /** The index of the current step; -1 when there is none. */
+    get selectedIndex(): number;
+    /** How many steps there are. */
+    get count(): number;
+    /** A step after the current one can be gone to with `next()`. */
+    get canGoNext(): boolean;
+    /** A step before the current one can be gone to with `previous()`. */
+    get canGoPrevious(): boolean;
+    /** The status of the step at `index`, as drawn. */
+    statusOf(index: number): StepperStatus;
+    /** Whether a press may reach the step at `index`: enabled, and in linear order with every step before it done or optional. */
+    canReach(index: number): boolean;
+    /** Goes to the step after the current one (the next enabled); `false` when there is none or the change was refused. */
+    next(): Promise<boolean>;
+    /** Goes to the step before the current one (the previous enabled). */
+    previous(): Promise<boolean>;
+    /** Goes to a step by index or key, whatever the order; `onStepChanging` is asked first. */
+    goTo(step: number | string): Promise<boolean>;
+    /** 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 step at `index`: its key when it has one, else the index. */
+    valueAt(index: number): string | number;
+    renderName(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawSteps(): void;
+    makeStep(index: number, clickable: boolean): Step;
+    drawStates(): void;
+    drawStops(): void;
+    nextIndex(direction: 1 | -1): number;
+    go(to: number, byUser: boolean, event?: Event): Promise<boolean>;
+    keyDown(e: KeyboardEvent): void;
+}
+export {};

package/dist/components/stepper/Wizard.d.ts

@@ -0,0 +1,112 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { ControlSize } from "../../core/control-size";
+import { Button } from "../button/Button";
+import type { StepChangedEventArgs } from "./step-changed-event-args";
+import type { StepChangingEventArgs } from "./step-changing-event-args";
+import { Stepper } from "./Stepper";
+import type { StepperLabelPosition } from "./stepper-label-position";
+import type { StepperOrientation } from "./stepper-orientation";
+import type { WizardFinishingEventArgs } from "./wizard-finishing-event-args";
+import type { WizardProps } from "./wizard-props";
+import { WizardStep } from "./WizardStep";
+/**
+ * A task in steps: a `Stepper` above (or beside) one page per step, and the Back and Next buttons under them. Next
+ * validates the page first: the kit's fields on it, then the step's own `validate`; a page that fails keeps the
+ * wizard and marks its step. On the last step Next finishes (`onFinishing`, `onFinished`). The steps are
+ * `WizardStep`s, from JSX or from `steps`, and the current one is `value` (`x-model`).
+ *
+ * @example
+ * <Wizard onFinished={() => this.save()}>
+ *   <WizardStep title="Account"><TextBox label="E-mail" required /></WizardStep>
+ *   <WizardStep title="Address"><TextBox label="City" required /></WizardStep>
+ *   <WizardStep title="Review"><p>All set.</p></WizardStep>
+ * </Wizard>
+ *
+ * new Wizard({ steps: [{ title: 'Account', content: () => new AccountPage() }, { title: 'Done', content: () => new DonePage() }] });
+ */
+export declare class Wizard extends Control<HTMLDivElement, WizardProps> {
+    stepper: Stepper;
+    pages: Component<HTMLDivElement>;
+    bar: Component<HTMLDivElement>;
+    previousButton: Button;
+    nextButton: Button;
+    steps: WizardStep[];
+    finishing: Emitter<WizardFinishingEventArgs>;
+    finished: Emitter<{
+        source: Wizard;
+    }>;
+    done: boolean;
+    shownStep: WizardStep | null;
+    ready: boolean;
+    constructor(props?: IBaseProp<WizardProps>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get linear(): boolean;
+    set linear(value: Bind<boolean>);
+    get orientation(): StepperOrientation;
+    set orientation(value: Bind<StepperOrientation>);
+    get labelPosition(): StepperLabelPosition;
+    set labelPosition(value: Bind<StepperLabelPosition>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get showStepper(): boolean;
+    set showStepper(value: Bind<boolean>);
+    get clickable(): boolean;
+    set clickable(value: Bind<boolean>);
+    get showNavigation(): boolean;
+    set showNavigation(value: Bind<boolean>);
+    get lazy(): boolean;
+    set lazy(value: Bind<boolean>);
+    get keepAlive(): boolean;
+    set keepAlive(value: Bind<boolean>);
+    get previousText(): string;
+    set previousText(value: Bind<string>);
+    get nextText(): string;
+    set nextText(value: Bind<string>);
+    get finishText(): string;
+    set finishText(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The current step is about to change (the stepper's event); `cancel` keeps it, `promise` waits. */
+    get onStepChanging(): MotifEvent<StepChangingEventArgs>;
+    /** The current step changed (the stepper's event). */
+    get onStepChanged(): MotifEvent<StepChangedEventArgs>;
+    /** The last page passed and the wizard is about to finish; `cancel` keeps it open, `promise` waits. */
+    get onFinishing(): MotifEvent<WizardFinishingEventArgs>;
+    /** The wizard finished. */
+    get onFinished(): MotifEvent<{
+        source: Wizard;
+    }>;
+    /** The step of the current page; `null` when there is none. */
+    get currentStep(): WizardStep | null;
+    /** The index of the current step; -1 when there is none. */
+    get selectedIndex(): number;
+    /** The current step is the last one that can be gone to: Next finishes. */
+    get isLast(): boolean;
+    /** The wizard finished (`finish()` passed). */
+    get isFinished(): boolean;
+    /** Adds a step at the end. */
+    add(step: WizardStep): WizardStep;
+    /** Adds a step at `index`. */
+    insert(index: number, step: WizardStep): WizardStep;
+    /** Takes a step out and disposes it. */
+    remove(step: WizardStep): boolean;
+    /** Validates the page, then goes to the next step; on the last one, finishes. */
+    next(): Promise<boolean>;
+    /** Goes back a step; nothing is validated. */
+    previous(): Promise<boolean>;
+    /** Goes to a step by index or key; going forward validates the page. */
+    goTo(step: number | string): Promise<boolean>;
+    /** Validates the page, asks `onFinishing`, then finishes: every step is drawn done and `onFinished` is raised. */
+    finish(): Promise<boolean>;
+    /** Validates the current page the way Next does: the kit's fields on it, then the step's own `validate`. The step is marked when it fails. */
+    leaveCheck(): Promise<boolean>;
+    /** The stepper's items are made again from the steps: a step changed, came or went. */
+    stepsChanged(): void;
+    stepChanged(e: StepChangedEventArgs): void;
+    showPage(): void;
+    drawBar(): void;
+    lazyOf(step: WizardStep): boolean;
+    keepAliveOf(step: WizardStep): boolean;
+}

package/dist/components/stepper/WizardStep.d.ts

@@ -0,0 +1,44 @@
+import { type Bind, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { IconSource } from "../../core/icon-source";
+import { PanelContent } from "../tabs/PanelContent";
+import type { Wizard } from "./Wizard";
+import type { WizardStepProps } from "./wizard-step-props";
+/**
+ * One step of a {@link Wizard}: its entry in the stepper and its page. The JSX children are the page, built when
+ * the step is first shown (see `lazy`); `content` makes it programmatically.
+ *
+ * @example
+ * <Wizard>
+ *   <WizardStep title="Account"><TextBox label="E-mail" required /></WizardStep>
+ *   <WizardStep title="Done" content={() => new Summary()} />
+ * </Wizard>
+ */
+export declare class WizardStep extends Control<HTMLDivElement, WizardStepProps> {
+    content: PanelContent;
+    validate: (() => boolean | Promise<boolean>) | null;
+    owner: Wizard | null;
+    constructor(props?: IBaseProp<WizardStepProps>);
+    get title(): string;
+    set title(value: Bind<string>);
+    get description(): string;
+    set description(value: Bind<string>);
+    get key(): string | undefined;
+    set key(value: Bind<string>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null | undefined>);
+    get optional(): boolean;
+    set optional(value: Bind<boolean>);
+    get error(): boolean;
+    set error(value: Bind<boolean>);
+    get lazy(): boolean | undefined;
+    set lazy(value: Bind<boolean | undefined>);
+    get keepAlive(): boolean | undefined;
+    set keepAlive(value: Bind<boolean | undefined>);
+    get validateFields(): boolean;
+    set validateFields(value: Bind<boolean>);
+    /** Whether this is the wizard's current step. */
+    get isCurrent(): boolean;
+    /** The wizard the step is in. */
+    get wizard(): Wizard | null;
+}

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

@@ -0,0 +1,13 @@
+export { Stepper } from './Stepper';
+export { Wizard } from './Wizard';
+export { WizardStep } from './WizardStep';
+export type { StepperItem } from './stepper-item';
+export type { StepperProps } from './stepper-props';
+export type { StepperStatus } from './stepper-status';
+export type { StepperOrientation } from './stepper-orientation';
+export type { StepperLabelPosition } from './stepper-label-position';
+export type { StepChangingEventArgs } from './step-changing-event-args';
+export type { StepChangedEventArgs } from './step-changed-event-args';
+export type { WizardProps } from './wizard-props';
+export type { WizardStepProps } from './wizard-step-props';
+export type { WizardFinishingEventArgs } from './wizard-finishing-event-args';

package/dist/components/stepper/step-changed-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { Stepper } from './Stepper';
+/** The current step changed. */
+export interface StepChangedEventArgs {
+    index: number;
+    /** The item as given; `null` when there is no current step. */
+    item: unknown;
+    previous: number;
+    /** By a press on a step, else programmatically. */
+    byUser: boolean;
+    source: Stepper;
+}

package/dist/components/stepper/step-changing-event-args.d.ts

@@ -0,0 +1,18 @@
+import type { EventArgs } from '@motifx/core';
+import type { Stepper } from './Stepper';
+/**
+ * The current step is about to change. `cancel = true` keeps it; `promise` may be set to wait (a validation, a
+ * server): the step changes when it resolves to `true`.
+ */
+export interface StepChangingEventArgs extends EventArgs {
+    from: number;
+    to: number;
+    /** The items as given; `null` when there is none (no current step). */
+    fromItem: unknown;
+    toItem: unknown;
+    /** By a press on a step, else programmatically. */
+    byUser: boolean;
+    promise?: Promise<boolean>;
+    source: Stepper;
+    event?: Event;
+}

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

@@ -0,0 +1,20 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** One step of a `Stepper`. Its fields may be functions of reactive state: the stepper follows them. */
+export interface StepperItem {
+    text: Bind<string>;
+    /** A second line under the text. */
+    description?: Bind<string>;
+    /** Names the step in `value`; without it the step's index does. */
+    key?: string;
+    /** Drawn in the indicator in place of the number. */
+    icon?: Bind<IconSource | null>;
+    /** `done` or `error` whatever the current step is; left out, the steps before the current one are done. */
+    status?: Bind<'done' | 'error' | 'pending' | null>;
+    /** May be skipped in linear order; says so under the text. */
+    optional?: Bind<boolean>;
+    /** `false` keeps it from being chosen. Default `true`. */
+    enabled?: Bind<boolean>;
+    /** The app's own value for the step. */
+    data?: unknown;
+}

package/dist/components/stepper/stepper-label-position.d.ts

@@ -0,0 +1,2 @@
+/** Where a step's texts sit next to its indicator: after it, or under it (horizontal steppers only). */
+export type StepperLabelPosition = 'end' | 'bottom';

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

@@ -0,0 +1 @@
+export type StepperOrientation = 'horizontal' | 'vertical';

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

@@ -0,0 +1,32 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { StepChangedEventArgs } from './step-changed-event-args';
+import type { StepChangingEventArgs } from './step-changing-event-args';
+import type { StepperItem } from './stepper-item';
+import type { StepperLabelPosition } from './stepper-label-position';
+import type { StepperOrientation } from './stepper-orientation';
+/** Props of `Stepper`. Each one is also a settable property; a function is followed. */
+export interface StepperProps extends ControlProps {
+    /** The steps in order: `StepperItem`s or plain texts. */
+    items?: Bind<readonly (StepperItem | string)[]>;
+    /** The current step: its `key`, else its index. `x-model` binds it two-way. Default `0`; `null` for none. */
+    value?: Bind<string | number | null>;
+    /** The steps are taken in order: a press reaches a completed step, or the one right after the last completed. Default `true`. */
+    linear?: Bind<boolean>;
+    /** Default `'horizontal'`. */
+    orientation?: Bind<StepperOrientation>;
+    /** Where the texts sit next to the indicator in a horizontal stepper. Default `'bottom'`. */
+    labelPosition?: Bind<StepperLabelPosition>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** The steps can be pressed. `false` shows the way only. Default `true`. */
+    clickable?: Bind<boolean>;
+    /** The indicator of a step to come shows its number. Default `true`. */
+    showNumbers?: Bind<boolean>;
+    /** What screen readers call it. Default: the kit's "Steps". */
+    label?: Bind<string>;
+    /** The current step is about to change; cancelable, may wait on `promise`. */
+    onStepChanging?: (e: StepChangingEventArgs) => void;
+    onStepChanged?: (e: StepChangedEventArgs) => void;
+}

package/dist/components/stepper/stepper-status.d.ts

@@ -0,0 +1,2 @@
+/** Where a step stands: still to come, the one in hand, completed, or with an error. */
+export type StepperStatus = 'pending' | 'current' | 'done' | 'error';

package/dist/components/stepper/wizard-finishing-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { EventArgs } from '@motifx/core';
+import type { Wizard } from './Wizard';
+/** The wizard is about to finish (after the last page validated). `cancel = true` keeps it open; `promise` may be set to wait: it finishes when it resolves to `true`. */
+export interface WizardFinishingEventArgs extends EventArgs {
+    promise?: Promise<boolean>;
+    source: Wizard;
+}

package/dist/components/stepper/wizard-props.d.ts

@@ -0,0 +1,48 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { StepChangedEventArgs } from './step-changed-event-args';
+import type { StepChangingEventArgs } from './step-changing-event-args';
+import type { StepperLabelPosition } from './stepper-label-position';
+import type { StepperOrientation } from './stepper-orientation';
+import type { WizardFinishingEventArgs } from './wizard-finishing-event-args';
+import type { WizardStepProps } from './wizard-step-props';
+/** Props of `Wizard`. Each one is also a settable property; a function is followed. */
+export interface WizardProps extends ControlProps {
+    /** Steps made programmatically, each as the props of a `WizardStep` (`title`, `content`, …); the JSX `WizardStep` children come first. */
+    steps?: readonly WizardStepProps[];
+    /** The current step: its `key`, else its index. `x-model` binds it two-way. Default `0`. */
+    value?: Bind<string | number | null>;
+    /** The steps are taken in order: a step is reached only after the ones before it. Default `true`. */
+    linear?: Bind<boolean>;
+    /** `horizontal`: the stepper above the pages; `vertical`: beside them. Default `'horizontal'`. */
+    orientation?: Bind<StepperOrientation>;
+    /** Where the stepper's texts sit, horizontal only. Default `'bottom'`. */
+    labelPosition?: Bind<StepperLabelPosition>;
+    /** The stepper's size. Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** The stepper is shown. Default `true`. */
+    showStepper?: Bind<boolean>;
+    /** The steps of the stepper can be pressed. Default `true`. */
+    clickable?: Bind<boolean>;
+    /** The bar with the Back and Next buttons. Default `true`. */
+    showNavigation?: Bind<boolean>;
+    /** A page is built when first shown, then kept (a step's own `lazy` wins). Default `true`. */
+    lazy?: Bind<boolean>;
+    /** `false`: content made by a step's `content` is disposed while hidden (a step's own `keepAlive` wins). Default `true`. */
+    keepAlive?: Bind<boolean>;
+    /** The buttons' texts; the kit's “Back”, “Next” and “Finish” when not given. */
+    previousText?: Bind<string>;
+    nextText?: Bind<string>;
+    finishText?: Bind<string>;
+    /** What screen readers call the stepper. Default: the kit's "Steps". */
+    label?: Bind<string>;
+    /** The current step is about to change; cancelable, may wait on `promise`. */
+    onStepChanging?: (e: StepChangingEventArgs) => void;
+    onStepChanged?: (e: StepChangedEventArgs) => void;
+    /** The last page validated and the wizard is about to finish; cancelable, may wait on `promise`. */
+    onFinishing?: (e: WizardFinishingEventArgs) => void;
+    onFinished?: (e: {
+        source: unknown;
+    }) => void;
+}

package/dist/components/stepper/wizard-step-props.d.ts

@@ -0,0 +1,32 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { ContentFactory } from '../tabs/PanelContent';
+/**
+ * Props of `WizardStep`: one step of a `Wizard`, its JSX children the page. Each one is also a settable property.
+ * `lazy` and `keepAlive` left unset follow the `Wizard`.
+ */
+export interface WizardStepProps extends ControlProps {
+    /** The step's text in the stepper. The same property as `text`. */
+    title?: Bind<string>;
+    /** A second line under the title. */
+    description?: Bind<string>;
+    /** Names the step in `Wizard.value`; without it the step's index does. */
+    key?: Bind<string>;
+    /** Drawn in the indicator in place of the number. */
+    icon?: Bind<IconSource | null | undefined>;
+    /** May be skipped; says so under the title. */
+    optional?: Bind<boolean>;
+    /** `true` draws the step with an error; the wizard sets it when the page does not validate. */
+    error?: Bind<boolean>;
+    /** Builds the page when it is first shown. */
+    lazy?: Bind<boolean | undefined>;
+    /** `false`: what `content` made is disposed while the page is hidden and made again when it shows. */
+    keepAlive?: Bind<boolean | undefined>;
+    /** The kit's fields on the page are validated before the wizard moves on from it. Default `true`. */
+    validateFields?: Bind<boolean>;
+    /** Asked before the wizard moves on from the page; `false` (or a promise of it) keeps the page and marks the step. */
+    validate?: () => boolean | Promise<boolean>;
+    /** Makes the page content, called when the page is built (instead of, or after, the JSX children). */
+    content?: ContentFactory;
+}

package/dist/components/tabdocs/TabDocumentManager.d.ts

@@ -937,7 +937,7 @@ export declare class TabDocumentManager extends FocusContainer<HTMLDivElement, T
      * active one staying active. A window left empty closes.
      */
     private mainWindowBy;
-    /** Closes a new window from code or a menu: its documents go back, or close (those that stay keep it open). */
+    /** Closes a new window programmatically or a menu: its documents go back, or close (those that stay keep it open). */
     private closeBrowserBy;
     /** The floating windows a layout saved as new windows: each one opens as a new window again, if the browser lets it. */
     private reopenWindowsBy;

package/dist/components/tabs/Tabs.d.ts

@@ -11,7 +11,7 @@ import type { TabsProps } from './tabs-props';
 import type { TabsVariant } from './tabs-variant';
 /**
  * Tabs: a strip of tabs and the panel of the selected one, following the ARIA tabs pattern.
- * Tabs come as `<Tab>` children or from code (`add`, `insert`, `remove`); `value` (two-way with
+ * Tabs come as `<Tab>` children or programmatically (`add`, `insert`, `remove`); `value` (two-way with
  * `x-model`) is the selected tab's `key`, else its index. Arrow keys move along the strip (and
  * select, with `activation="auto"`), Home and End go to the ends, Delete closes a closable tab,
  * a tab's `&` key selects it. Panels are built when first shown (`lazy`).
@@ -68,7 +68,7 @@ export declare class Tabs extends Control<HTMLDivElement, TabsProps> {
     insert(index: number, tab: Tab): Tab;
     /** Removes a tab and disposes it; the selection moves to a neighbour. No `onClose`. */
     remove(tab: Tab): boolean;
-    /** Selects a tab (or the tab at an index) from code; `false` when it is hidden or not here. */
+    /** Selects a tab (or the tab at an index) programmatically; `false` when it is hidden or not here. */
     select(tab: Tab | number): boolean;
     /** Closes a tab as the user would: `onClose` can cancel it. */
     close(tab: Tab, byUser?: boolean, event?: Event): boolean;

package/dist/components/tileview/TileView.d.ts

@@ -0,0 +1,128 @@
+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 { TileClickEventArgs } from "./tile-click-event-args";
+import type { TileReorderEventArgs } from "./tile-reorder-event-args";
+import type { TileSelectionChangedEventArgs } from "./tile-selection-changed-event-args";
+import type { TileViewItem } from "./tile-view-item";
+import type { TileViewDirection, TileViewProps, TileViewSelectionMode } from "./tile-view-props";
+interface Look {
+    item: unknown;
+    key: string | null;
+    text: string;
+    widthRatio: number;
+    heightRatio: number;
+    content: (() => ComponentBase) | null;
+    enabled: boolean;
+}
+interface Tile {
+    item: unknown;
+    el: Component<HTMLDivElement>;
+    text: Component<HTMLSpanElement>;
+    content: ComponentBase | null;
+}
+interface Session {
+    pointerId: number;
+    touch: boolean;
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    fromIndex: number;
+    element: HTMLElement;
+    started: boolean;
+    toIndex: number;
+    timer: ReturnType<typeof setTimeout> | null;
+    frame: number;
+}
+/**
+ * Tiles of different sizes packed on a grid of base cells: a tile is `widthRatio` × `heightRatio` cells. They
+ * fill the height in columns and the view scrolls sideways (`horizontal`), or fill the width in rows
+ * (`vertical`). Tiles can be chosen (`selectionMode`) and put in another order by dragging or with Ctrl and an
+ * arrow key (`allowReorder`); a drop tells `onReordered` with the indexes, your data is yours to reorder.
+ *
+ * @example
+ * <TileView height={320} items={[{ text: 'Sales', widthRatio: 2 }, { text: 'Stock' }, { text: 'Staff', heightRatio: 2 }]} />
+ * <TileView direction="vertical" selectionMode="multiple" x-model={() => this.chosen} items={() => this.tiles} />
+ */
+export declare class TileView extends Control<HTMLDivElement, TileViewProps> {
+    itemClick: Emitter<TileClickEventArgs>;
+    selectionChanged: Emitter<TileSelectionChangedEventArgs>;
+    reordering: Emitter<TileReorderEventArgs>;
+    reordered: Emitter<TileReorderEventArgs>;
+    grid: Component<HTMLDivElement>;
+    live: Component<HTMLSpanElement>;
+    ghost: DragGhost;
+    tiles: Map<unknown, Tile>;
+    looks: Look[];
+    stopItems: (() => void) | null;
+    stops: (() => void)[];
+    session: Session | null;
+    focusedAt: number;
+    byUser: boolean;
+    ready: boolean;
+    lastSelection: string;
+    constructor(props?: IBaseProp<TileViewProps>);
+    get items(): readonly (TileViewItem | string)[];
+    set items(value: Bind<readonly (TileViewItem | string)[]>);
+    get baseItemWidth(): number;
+    set baseItemWidth(value: Bind<number>);
+    get baseItemHeight(): number;
+    set baseItemHeight(value: Bind<number>);
+    get direction(): TileViewDirection;
+    set direction(value: Bind<TileViewDirection>);
+    get selectionMode(): TileViewSelectionMode;
+    set selectionMode(value: Bind<TileViewSelectionMode>);
+    get value(): string | number | null | readonly (string | number)[];
+    set value(value: Bind<string | number | null | readonly (string | number)[]>);
+    get allowReorder(): boolean;
+    set allowReorder(value: Bind<boolean>);
+    get height(): string | number | null;
+    set height(value: Bind<string | number | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** A press on a tile that was not a drag. */
+    get onItemClick(): MotifEvent<TileClickEventArgs>;
+    /** The chosen tiles changed (`indexes`, `items`, `byUser`). */
+    get onSelectionChanged(): MotifEvent<TileSelectionChangedEventArgs>;
+    /** A tile is about to be dragged or moved with the keys; `cancel` keeps it where it is. */
+    get onReordering(): MotifEvent<TileReorderEventArgs>;
+    /** A tile was moved to another place (`fromIndex`, `toIndex`). */
+    get onReordered(): MotifEvent<TileReorderEventArgs>;
+    /** The chosen tiles' indexes, in tile order. */
+    get selectedIndexes(): number[];
+    /** How many tiles there are. */
+    get count(): number;
+    /** Whether a tile is being dragged. */
+    get isDragging(): 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 tile at `index`: its key when it has one, else the index. */
+    valueAt(index: number): string | number;
+    /** Chooses a tile programmatically: the only one (`single`), or one more (`multiple`). */
+    select(index: number): void;
+    /** Reads the items again after they were changed in place. */
+    refresh(): void;
+    renderName(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawTiles(): void;
+    makeTile(look: Look): Tile;
+    tileElements(): HTMLElement[];
+    drawRole(): void;
+    drawStates(): void;
+    drawStops(): void;
+    choose(index: number, byUser: boolean, how: 'only' | 'add' | 'toggle'): void;
+    click(e: MouseEvent): void;
+    neighbour(from: number, dx: number, dy: number): number;
+    keyDown(e: KeyboardEvent): void;
+    move(from: number, to: number, event: Event | undefined, ask: boolean): boolean;
+    pointerDown(e: PointerEvent): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+    start(e: PointerEvent): boolean;
+    track(): void;
+    autoScroll(): void;
+    end(e: Event | null, drop: boolean): void;
+}
+export {};

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

@@ -0,0 +1,6 @@
+export { TileView } from './TileView';
+export type { TileViewItem } from './tile-view-item';
+export type { TileViewProps, TileViewDirection, TileViewSelectionMode } from './tile-view-props';
+export type { TileClickEventArgs } from './tile-click-event-args';
+export type { TileSelectionChangedEventArgs } from './tile-selection-changed-event-args';
+export type { TileReorderEventArgs } from './tile-reorder-event-args';