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

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

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LayoutOrientation } from '../layout/layout-orientation';
+import type { SplitterCollapseEventArgs } from './splitter-collapse-event-args';
+import type { SplitterResizeEventArgs } from './splitter-resize-event-args';
+/** Props of `Splitter`. Each one is also a settable property; a function is followed. */
+export interface SplitterProps extends ControlProps {
+    /** `horizontal`: the panes side by side; `vertical`: one under the other. Default `'horizontal'`. */
+    orientation?: Bind<LayoutOrientation>;
+    /** The handles can be dragged and moved with the keys (a pane's own `resizable` wins). Default `true`. */
+    resizable?: Bind<boolean>;
+    /** Every pane can be hidden from the handle next to it (a pane's own `collapsible` wins). Default `false`. */
+    collapsible?: Bind<boolean>;
+    /** Pixels an arrow key moves a handle. Default `10`. */
+    step?: Bind<number>;
+    /** The panes' sizes in pane order (pixels, a share or `null`): given, they take the place of the panes' own `size`. After a drag or a key the pixels are written to `x-model`. */
+    sizes?: Bind<readonly (number | string | null)[] | null>;
+    /** A handle is being dragged; `sizes` are the pixels now. */
+    onResizing?: (e: SplitterResizeEventArgs) => void;
+    /** A drag ended or a key moved a handle. */
+    onResized?: (e: SplitterResizeEventArgs) => void;
+    /** A pane is about to be hidden or shown again; cancelable. */
+    onCollapsing?: (e: SplitterCollapseEventArgs) => void;
+    onCollapsed?: (e: SplitterCollapseEventArgs) => void;
+}

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

@@ -0,0 +1,10 @@
+import type { Splitter } from './Splitter';
+/** A handle moved: `handle` is its index (between the panes `handle` and `handle + 1`), `sizes` the panes' pixels now. */
+export interface SplitterResizeEventArgs {
+    handle: number;
+    sizes: number[];
+    /** By a drag or a key, else programmatically. */
+    byUser: boolean;
+    source: Splitter;
+    event?: Event;
+}

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

@@ -81,7 +81,7 @@ export declare class Stepper extends Control<HTMLElement, StepperProps> {
     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 from code (`byUser`). */
+    /** 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;

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

@@ -6,7 +6,7 @@ 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 from code.
+ * the step is first shown (see `lazy`); `content` makes it programmatically.
  *
  * @example
  * <Wizard>

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

@@ -5,7 +5,7 @@ export interface StepChangedEventArgs {
     /** The item as given; `null` when there is no current step. */
     item: unknown;
     previous: number;
-    /** By a press on a step, else from code. */
+    /** By a press on a step, else programmatically. */
     byUser: boolean;
     source: Stepper;
 }

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

@@ -10,7 +10,7 @@ export interface StepChangingEventArgs extends EventArgs {
     /** The items as given; `null` when there is none (no current step). */
     fromItem: unknown;
     toItem: unknown;
-    /** By a press on a step, else from code. */
+    /** By a press on a step, else programmatically. */
     byUser: boolean;
     promise?: Promise<boolean>;
     source: Stepper;

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

@@ -9,7 +9,7 @@ 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 from code, each as the props of a `WizardStep` (`title`, `content`, …); the JSX `WizardStep` children come first. */
+    /** 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>;

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

package/dist/components/tileview/tile-click-event-args.d.ts

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

package/dist/components/tileview/tile-reorder-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { TileView } from './TileView';
+/** A tile is about to be moved (`onReordering`, `cancel = true` keeps it) or was moved (`onReordered`): from one index to another. */
+export interface TileReorderEventArgs extends EventArgs {
+    /** The item as given. */
+    item: unknown;
+    fromIndex: number;
+    toIndex: number;
+    source: TileView;
+    event?: Event;
+}

package/dist/components/tileview/tile-selection-changed-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { TileView } from './TileView';
+/** The chosen tiles changed. */
+export interface TileSelectionChangedEventArgs {
+    /** The chosen tiles' indexes, in tile order. */
+    indexes: number[];
+    /** Their items as given. */
+    items: unknown[];
+    /** By a press or a key, else programmatically. */
+    byUser: boolean;
+    source: TileView;
+}

package/dist/components/tileview/tile-view-item.d.ts

@@ -0,0 +1,18 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+/** A tile of the `TileView`: a text, or any content, on a tile of so many base cells. Each field may be a function of your state. */
+export interface TileViewItem {
+    /** Names the tile in `value`; without one its index does. */
+    key?: string;
+    /** The tile's text. */
+    text?: Bind<string>;
+    /** How many base cells wide the tile is. Default `1`. */
+    widthRatio?: Bind<number>;
+    /** How many base cells tall the tile is. Default `1`. */
+    heightRatio?: Bind<number>;
+    /** Any content in place of the text, made when the tile is. */
+    content?: () => ComponentBase;
+    /** A tile that cannot be chosen or moved. Default `true`. */
+    enabled?: Bind<boolean>;
+    /** Anything of your own; the item comes back as given in the events. */
+    data?: unknown;
+}

package/dist/components/tileview/tile-view-props.d.ts

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+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';
+/** Tiles flow down the columns (`horizontal`, the view scrolls sideways) or along the rows (`vertical`). */
+export type TileViewDirection = 'horizontal' | 'vertical';
+/** `none`: nothing is chosen; `single`: one tile; `multiple`: any number. */
+export type TileViewSelectionMode = 'none' | 'single' | 'multiple';
+/** Props of `TileView`. Each one is also a settable property; a function is followed. */
+export interface TileViewProps extends ControlProps {
+    /** The tiles in order: `TileViewItem`s or plain texts. */
+    items?: Bind<readonly (TileViewItem | string)[]>;
+    /** A base cell's width in pixels; a tile is `widthRatio` of them. Default `100`. */
+    baseItemWidth?: Bind<number>;
+    /** A base cell's height in pixels; a tile is `heightRatio` of them. Default `100`. */
+    baseItemHeight?: Bind<number>;
+    /** Default `'horizontal'`: the tiles fill the height in columns, the view scrolls sideways; give it a `height`. */
+    direction?: Bind<TileViewDirection>;
+    /** Default `'none'`. */
+    selectionMode?: Bind<TileViewSelectionMode>;
+    /** The chosen tile (`single`): its `key`, else its index; the chosen tiles (`multiple`) as a list. `x-model` binds it two-way. */
+    value?: Bind<string | number | null | readonly (string | number)[]>;
+    /** The tiles can be put in another order by dragging, or with Ctrl and an arrow key. Default `false`. */
+    allowReorder?: Bind<boolean>;
+    /** The view's height, a CSS length or pixels. */
+    height?: Bind<string | number | null>;
+    /** What screen readers call it. Default: the kit's "Tiles". */
+    label?: Bind<string>;
+    /** A press on a tile that was not a drag. */
+    onItemClick?: (e: TileClickEventArgs) => void;
+    onSelectionChanged?: (e: TileSelectionChangedEventArgs) => void;
+    /** A tile is about to be dragged; cancelable. */
+    onReordering?: (e: TileReorderEventArgs) => void;
+    /** A tile was dropped or moved with the keys to a new place: your data is yours to reorder. */
+    onReordered?: (e: TileReorderEventArgs) => void;
+}

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,113 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { IconSource } from "../../core/icon-source";
+import type { TimelineItem, TimelineTone } from "./timeline-item";
+import type { TimelineItemClickEventArgs } from "./timeline-item-click-event-args";
+import type { TimelineDateFormat, TimelineOrientation, TimelineProps } from "./timeline-props";
+import type { TimelineSelectionChangedEventArgs } from "./timeline-selection-changed-event-args";
+interface Look {
+    item: unknown;
+    key: string | null;
+    date: Date | null;
+    title: string;
+    description: string;
+    glyph: string;
+    icon: IconSource | null;
+    tone: TimelineTone;
+    content: (() => ComponentBase) | null;
+}
+interface Entry {
+    item: unknown;
+    li: Component<HTMLLIElement>;
+    dot: Component<HTMLSpanElement>;
+    dotGlyph: Component<HTMLSpanElement>;
+    dotIcon: ComponentBase | null;
+    face: Component<HTMLElement>;
+    date: Component<HTMLTimeElement>;
+    title: Component<HTMLSpanElement>;
+    description: Component<HTMLDivElement> | null;
+    content: ComponentBase | null;
+}
+/**
+ * Events in time order: down the page, each a card beside a line with a dot (the cards taking turns on either side
+ * when `alternate`, folded until pressed when `collapsible`); or along a line of dates (`horizontal`), where a
+ * press on a date, or the arrow keys, shows that event's card under the line. The dates are written in the kit's
+ * language.
+ *
+ * @example
+ * <Timeline items={[{ date: '2026-03-01', title: 'Kick-off', description: 'The plan agreed' }, { date: '2026-05-14', title: 'Beta', tone: 'accent' }]} />
+ * <Timeline orientation="horizontal" items={() => this.milestones} x-model={() => this.shown} />
+ */
+export declare class Timeline extends Control<HTMLDivElement, TimelineProps> {
+    itemClick: Emitter<TimelineItemClickEventArgs>;
+    selectionChanged: Emitter<TimelineSelectionChangedEventArgs>;
+    track: Component<HTMLDivElement>;
+    list: Component<HTMLOListElement>;
+    previousButton: Component<HTMLButtonElement>;
+    nextButton: Component<HTMLButtonElement>;
+    detail: Component<HTMLDivElement>;
+    detailDate: Component<HTMLTimeElement>;
+    detailTitle: Component<HTMLSpanElement>;
+    detailDescription: Component<HTMLDivElement>;
+    detailContent: Component<HTMLDivElement>;
+    entries: Entry[];
+    looks: Look[];
+    expanded: Set<unknown>;
+    stopItems: (() => void) | null;
+    drawnAs: TimelineOrientation | null;
+    previousIndex: number;
+    byUser: boolean;
+    ready: boolean;
+    constructor(props?: IBaseProp<TimelineProps>);
+    get items(): readonly TimelineItem[];
+    set items(value: Bind<readonly TimelineItem[]>);
+    get orientation(): TimelineOrientation;
+    set orientation(value: Bind<TimelineOrientation>);
+    get alternate(): boolean;
+    set alternate(value: Bind<boolean>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get dateFormat(): TimelineDateFormat;
+    set dateFormat(value: Bind<TimelineDateFormat>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** A press on an event's card or flag (`index`, `item`). */
+    get onItemClick(): MotifEvent<TimelineItemClickEventArgs>;
+    /** Horizontal: the shown event changed (`index`, `item`, `previous`, `byUser`). */
+    get onSelectionChanged(): MotifEvent<TimelineSelectionChangedEventArgs>;
+    /** Horizontal: the index of the shown event; -1 when there is none. */
+    get selectedIndex(): number;
+    /** How many events there are. */
+    get count(): number;
+    get horizontal(): boolean;
+    /** Horizontal: shows an event, by index or key. Vertical: unfolds its card. */
+    goTo(event: number | string): boolean;
+    /** Vertical, `collapsible`: unfolds or folds an event's card. */
+    unfold(event: number | string, on?: boolean): void;
+    /** Whether an event's card is unfolded. */
+    isUnfolded(event: number | string): 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;
+    valueAt(index: number): string | number;
+    /** A date as the kit's language writes it with `dateFormat`. */
+    formatDate(date: Date | null): string;
+    renderName(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawEntries(): void;
+    pressable(): boolean;
+    makeEntry(look: Look, as: TimelineOrientation): Entry;
+    drawTexts(): void;
+    drawStates(): void;
+    drawDetail(index: number): void;
+    drawNav(): void;
+    makeNav(direction: 'previous' | 'next'): Component<HTMLButtonElement>;
+    select(index: number, byUser: boolean, event?: Event): boolean;
+    click(e: MouseEvent): void;
+    keyDown(e: KeyboardEvent): void;
+}
+export {};

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

@@ -0,0 +1,5 @@
+export { Timeline } from './Timeline';
+export type { TimelineItem, TimelineTone } from './timeline-item';
+export type { TimelineProps, TimelineOrientation, TimelineDateFormat } from './timeline-props';
+export type { TimelineItemClickEventArgs } from './timeline-item-click-event-args';
+export type { TimelineSelectionChangedEventArgs } from './timeline-selection-changed-event-args';

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

@@ -0,0 +1,9 @@
+import type { Timeline } from './Timeline';
+/** A press on an event's card (vertical) or flag (horizontal). */
+export interface TimelineItemClickEventArgs {
+    index: number;
+    /** The item as given. */
+    item: unknown;
+    source: Timeline;
+    event: Event;
+}

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

@@ -0,0 +1,24 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** The colour of an event's dot and flag. */
+export type TimelineTone = 'default' | 'accent' | 'success' | 'caution' | 'danger' | 'info';
+/** One event on the `Timeline`. Each field may be a function of your state. */
+export interface TimelineItem {
+    /** Names the event in `value` and the events; without one its index does. */
+    key?: string;
+    /** When: a `Date`, an ISO text, or milliseconds. */
+    date: Bind<Date | string | number>;
+    title: Bind<string>;
+    /** The text under the title; folded until the card is pressed when the timeline is `collapsible`. */
+    description?: Bind<string>;
+    /** A glyph of the kit's set in the dot. */
+    glyph?: Bind<string>;
+    /** An icon of your own in the dot, in place of the glyph. */
+    icon?: IconSource;
+    /** Default `'default'`. */
+    tone?: Bind<TimelineTone>;
+    /** Any content in the card, made when the card is. */
+    content?: () => ComponentBase;
+    /** Anything of your own; the item comes back as given in the events. */
+    data?: unknown;
+}

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

@@ -0,0 +1,30 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { TimelineItem } from './timeline-item';
+import type { TimelineItemClickEventArgs } from './timeline-item-click-event-args';
+import type { TimelineSelectionChangedEventArgs } from './timeline-selection-changed-event-args';
+/** Down the page with a card per event, or along a line of dates with the chosen event's card under it. */
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/** How a date is written: a preset, or the options of `Intl.DateTimeFormat`. */
+export type TimelineDateFormat = 'short' | 'medium' | 'long' | Intl.DateTimeFormatOptions;
+/** Props of `Timeline`. Each one is also a settable property; a function is followed. */
+export interface TimelineProps extends ControlProps {
+    /** The events, in order. */
+    items?: Bind<readonly TimelineItem[]>;
+    /** Default `'vertical'`. */
+    orientation?: Bind<TimelineOrientation>;
+    /** Vertical: the cards take turns on either side of the line. Default `false`. */
+    alternate?: Bind<boolean>;
+    /** Vertical: a card shows its description only when pressed. Default `false`. */
+    collapsible?: Bind<boolean>;
+    /** How the dates are written, in the kit's language. Default `'medium'`. */
+    dateFormat?: Bind<TimelineDateFormat>;
+    /** Horizontal: the event whose card is shown, its `key` else its index. `x-model` binds it two-way. Default `0`. */
+    value?: Bind<string | number | null>;
+    /** What screen readers call it. Default: the kit's "Timeline". */
+    label?: Bind<string>;
+    /** A press on an event's card or flag. */
+    onItemClick?: (e: TimelineItemClickEventArgs) => void;
+    /** Horizontal: the shown event changed. */
+    onSelectionChanged?: (e: TimelineSelectionChangedEventArgs) => void;
+}

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

@@ -0,0 +1,11 @@
+import type { Timeline } from './Timeline';
+/** Horizontal: the event whose card is shown changed. */
+export interface TimelineSelectionChangedEventArgs {
+    index: number;
+    /** The item as given; `null` when there is none. */
+    item: unknown;
+    previous: number;
+    /** By a press or a key, else from code. */
+    byUser: boolean;
+    source: Timeline;
+}

package/dist/components/tooltip/Tooltip.d.ts

@@ -6,7 +6,7 @@ import type { TooltipShowOn } from './tooltip-show-on';
 import type { TooltipTarget } from './tooltip-target';
 /**
  * A short description shown next to an element: after the pointer rests on it, when it gets
- * keyboard focus, or from code. The pointer can move onto the tooltip without closing it; Escape,
+ * keyboard focus, or programmatically. The pointer can move onto the tooltip without closing it; Escape,
  * a press, leaving focus and scrolling close it. One tooltip is open at a time on the page, and
  * all of them share one set of document listeners. It never takes focus and holds nothing
  * interactive; the target is described by it (`aria-describedby`) while it is shown.

package/dist/components/treeview/TreeView.d.ts

@@ -103,7 +103,7 @@ export declare class TreeView<T = unknown> extends Control<HTMLDivElement, TreeV
     /** Opens every row whose children are known (children not loaded yet are not loaded). */
     expandAll(): void;
     collapseAll(): void;
-    /** Selects a row from code (`multiple`: adds it to the selection). */
+    /** Selects a row programmatically (`multiple`: adds it to the selection). */
     select(key: unknown): void;
     unselect(key: unknown): void;
     /** With `multiple`: every known row that can be selected. */

package/dist/components/validationsummary/ValidationSummary.d.ts

@@ -0,0 +1,56 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { ValidationGroup } from "../../parts/validation/ValidationGroup";
+import type { ValidationTarget } from "../../parts/validation/validation-target";
+import type { SummaryItemClickEventArgs } from "./summary-item-click-event-args";
+import type { ValidationSummaryProps } from "./validation-summary-props";
+interface Row {
+    target: ValidationTarget;
+    text: string;
+    li: Component<HTMLLIElement>;
+    button: Component<HTMLButtonElement>;
+}
+/**
+ * The failed fields of a `ValidationGroup`, one line each with the field's label and its message, under a header;
+ * a press on a line focuses the field. It draws itself again whenever a field of the group is checked, and stays
+ * out of sight while nothing has failed.
+ *
+ * @example
+ * const group = new ValidationGroup();
+ * <ValidationSummary group={group} />
+ * <TextBox label="Name" required validationGroup={group} />
+ * <Button text="Save" onclick={() => group.validate()} />
+ */
+export declare class ValidationSummary extends Control<HTMLDivElement, ValidationSummaryProps> {
+    itemClick: Emitter<SummaryItemClickEventArgs>;
+    head: Component<HTMLParagraphElement>;
+    headText: Component<HTMLSpanElement>;
+    list: Component<HTMLUListElement>;
+    rows: Row[];
+    targets: readonly ValidationTarget[];
+    stopTargets: (() => void) | null;
+    constructor(props?: IBaseProp<ValidationSummaryProps>);
+    get group(): ValidationGroup | null;
+    set group(value: Bind<ValidationGroup | null>);
+    get header(): string;
+    set header(value: Bind<string>);
+    get showHeader(): boolean;
+    set showHeader(value: Bind<boolean>);
+    get focusOnClick(): boolean;
+    set focusOnClick(value: Bind<boolean>);
+    /** A line was pressed (`target`, `text`). */
+    get onItemClick(): MotifEvent<SummaryItemClickEventArgs>;
+    /** The failed targets listed now, in the group's order. */
+    get failed(): readonly ValidationTarget[];
+    /** How many lines there are. */
+    get count(): number;
+    /** Draws the lines again from the fields as they are now. */
+    refresh(): void;
+    renderTargets(): void;
+    messageOf(target: ValidationTarget): string;
+    textOf(target: ValidationTarget): string;
+    draw(): void;
+    drawHeader(): void;
+    click(e: MouseEvent): void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export { ValidationSummary } from './ValidationSummary';
+export type { ValidationSummaryProps } from './validation-summary-props';
+export type { SummaryItemClickEventArgs } from './summary-item-click-event-args';

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

@@ -0,0 +1,11 @@
+import type { ValidationTarget } from '../../parts/validation/validation-target';
+import type { ValidationSummary } from './ValidationSummary';
+/** A line of the summary was pressed. */
+export interface SummaryItemClickEventArgs {
+    /** The field (or other target) the line stands for. */
+    target: ValidationTarget;
+    /** The line's text. */
+    text: string;
+    source: ValidationSummary;
+    event: Event;
+}