@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

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

@@ -0,0 +1,86 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { FocusContainer } from '../../core/container';
+import type { LayoutOrientation } from './layout-orientation';
+import { Panel } from './Panel';
+import type { SplitContainerProps } from './split-container-props';
+import type { SplitPanel } from './split-panel';
+import type { SplitPosition } from './split-position';
+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
+ * to `split.first.controls` / `split.second.controls`.
+ *
+ * @example
+ * <SplitContainer position={240} fixedPanel="first" firstMinSize={160} x-model={() => this.state.width}>
+ *   <FolderTree />
+ *   <MessageList />
+ * </SplitContainer>
+ *
+ * const split = new SplitContainer({ orientation: 'vertical', position: '70%' });
+ * split.first.controls.add(new Editor());
+ * split.second.controls.add(new Output());
+ * split.onSplitterMoved((e) => this.settings.save(e.position));
+ */
+export declare class SplitContainer extends FocusContainer<HTMLDivElement, SplitContainerProps> {
+    constructor(props?: IBaseProp<SplitContainerProps>);
+    /** The first pane (start or top), a `Panel`. */
+    get first(): Panel;
+    /** The second pane (end or bottom), a `Panel`. */
+    get second(): Panel;
+    /** The splitter element (`role="separator"`). */
+    get splitterElement(): HTMLDivElement;
+    get orientation(): LayoutOrientation;
+    set orientation(value: Bind<LayoutOrientation>);
+    get position(): SplitPosition;
+    set position(value: Bind<SplitPosition>);
+    /** `position`, for `x-model`. */
+    get value(): SplitPosition;
+    set value(value: SplitPosition);
+    get fixedPanel(): SplitPanel;
+    set fixedPanel(value: Bind<SplitPanel>);
+    get firstMinSize(): number;
+    set firstMinSize(value: Bind<number>);
+    get secondMinSize(): number;
+    set secondMinSize(value: Bind<number>);
+    get collapsed(): SplitPanel;
+    set collapsed(value: Bind<SplitPanel>);
+    get resizable(): boolean;
+    set resizable(value: Bind<boolean>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get step(): number;
+    set step(value: Bind<number>);
+    get splitterLabel(): string;
+    set splitterLabel(value: Bind<string>);
+    /** The splitter was moved, or a pane hidden or restored, by the user or by code (`e.byUser`). */
+    get onSplitterMoved(): MotifEvent<SplitterMovedEventArgs>;
+    /** Hides a pane; the other one takes all the room. */
+    collapse(pane?: 'first' | 'second'): void;
+    /** Shows both panes again, the splitter where it was. */
+    restore(): void;
+    protected get focusElement(): HTMLElement;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    private get horizontal();
+    private route;
+    private renderLayout;
+    private tracks;
+    /** `aria-valuenow`: the first pane's share of the room, 0 to 100. */
+    private renderValue;
+    private renderSplitter;
+    /** The first pane's size and the room both panes share, in pixels; 0 when not laid out. */
+    private measure;
+    /** Puts the splitter so the first pane is `size` pixels, within the minimum sizes. */
+    private moveTo;
+    private userChange;
+    private toggleCollapsed;
+    private listen;
+    private onKey;
+    private dragStart;
+    private dragMove;
+    private dragEnd;
+}

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

@@ -0,0 +1,45 @@
+import type { Bind, ComponentBase, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { LayoutAlign } from './layout-align';
+import type { LayoutOrientation } from './layout-orientation';
+import type { LayoutSpace } from './layout-space';
+import type { StackJustify } from './stack-justify';
+import type { StackProps } from './stack-props';
+/**
+ * Children in a row or a column with a gap between them, aligned across and spread along the
+ * direction, wrapping if asked. A child that says `grow` takes the free space.
+ *
+ * @example
+ * <Stack orientation="horizontal" gap="sm" align="center">
+ *   <TextBox label="Search" grow />
+ *   <Button text="Go" />
+ * </Stack>
+ *
+ * const bar = new Stack({ orientation: 'horizontal', justify: 'end' });
+ * bar.controls.add(new Button({ text: 'Cancel' }), new Button({ text: 'OK', tone: 'accent' }));
+ */
+export declare class Stack extends Control<HTMLDivElement, StackProps> {
+    constructor(props?: IBaseProp<StackProps>);
+    get orientation(): LayoutOrientation;
+    set orientation(value: Bind<LayoutOrientation>);
+    get gap(): LayoutSpace | undefined;
+    set gap(value: Bind<LayoutSpace | undefined>);
+    get padding(): LayoutSpace | undefined;
+    set padding(value: Bind<LayoutSpace | undefined>);
+    get align(): LayoutAlign;
+    set align(value: Bind<LayoutAlign>);
+    get justify(): StackJustify;
+    set justify(value: Bind<StackJustify>);
+    get wrap(): boolean;
+    set wrap(value: Bind<boolean>);
+    get reverse(): boolean;
+    set reverse(value: Bind<boolean>);
+    get inline(): boolean;
+    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. */
+    setGrow(child: ComponentBase, grow: Bind<boolean | number>): void;
+    private get settings();
+    private renderLook;
+}

package/dist/components/layout/dock-child-props.d.ts

@@ -0,0 +1,16 @@
+import type { Bind } from '@motifx/core';
+import type { Dock } from './dock';
+/**
+ * What a child of a `DockPanel` may say about its place, in its own props:
+ * `<Panel dock="start" />`, `<Button dock="float" right={16} bottom={16} />`.
+ * The edges given to a `float` child are its anchors (a number is pixels): `left` and `right`
+ * together stretch it.
+ */
+export interface DockChildProps {
+    /** Default `'fill'`. */
+    dock?: Bind<Dock>;
+    left?: Bind<number | string>;
+    top?: Bind<number | string>;
+    right?: Bind<number | string>;
+    bottom?: Bind<number | string>;
+}

package/dist/components/layout/dock-panel-props.d.ts

@@ -0,0 +1,10 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LayoutSpace } from './layout-space';
+/** Props of `DockPanel`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface DockPanelProps extends ControlProps {
+    /** The space between docked children and what they dock against. Default none. */
+    gap?: Bind<LayoutSpace>;
+    /** The space inside the edges, one to four values as in CSS. Default none. */
+    padding?: Bind<LayoutSpace>;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Where a child of a `DockPanel` goes: against an edge (`start` / `end` follow the reading
+ * direction), the space left over (`fill`), or placed by its own `left` / `top` / `right` /
+ * `bottom` over the rest (`float`).
+ */
+export type Dock = 'top' | 'bottom' | 'start' | 'end' | 'fill' | 'float';

package/dist/components/layout/grid-cell.d.ts

@@ -0,0 +1,11 @@
+import type { Bind } from '@motifx/core';
+/**
+ * Where a child of a `Grid` goes, in its own props: `<TextBox row={2} column={1} columnSpan={2} />`.
+ * Lines count from 1, as in CSS; a string is passed to CSS as it is (`'-1'`, `'span 2'`).
+ */
+export interface GridCell {
+    row?: Bind<number | string>;
+    column?: Bind<number | string>;
+    rowSpan?: Bind<number>;
+    columnSpan?: Bind<number>;
+}

package/dist/components/layout/grid-flow.d.ts

@@ -0,0 +1,2 @@
+/** How children without a `row` / `column` fill the grid (CSS `grid-auto-flow`). */
+export type GridFlow = 'row' | 'column' | 'row dense' | 'column dense';

package/dist/components/layout/grid-justify.d.ts

@@ -0,0 +1,2 @@
+/** Where children sit inside their cells along the row (CSS `justify-items`). */
+export type GridJustify = 'start' | 'center' | 'end' | 'stretch';

package/dist/components/layout/grid-props.d.ts

@@ -0,0 +1,34 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { GridFlow } from './grid-flow';
+import type { GridJustify } from './grid-justify';
+import type { GridTracks } from './grid-tracks';
+import type { LayoutAlign } from './layout-align';
+import type { LayoutSpace } from './layout-space';
+/** Props of `Grid`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface GridProps extends ControlProps {
+    /** The rows: `'auto 1fr 120'` (a bare number is pixels, `*` is `1fr`), a list, or a count. Default none: rows are made as needed. */
+    rows?: Bind<GridTracks>;
+    /** The columns, written like `rows`. Default one column. */
+    columns?: Bind<GridTracks>;
+    /** The space between rows and columns. Default the `layout.gap` token. */
+    gap?: Bind<LayoutSpace>;
+    /** The space between rows; wins over `gap`. */
+    rowGap?: Bind<LayoutSpace>;
+    /** The space between columns; wins over `gap`. */
+    columnGap?: Bind<LayoutSpace>;
+    /** The space inside the edges, one to four values as in CSS. Default none. */
+    padding?: Bind<LayoutSpace>;
+    /** The size of rows made as needed (a number is pixels). Default `'auto'`. */
+    autoRows?: Bind<number | string>;
+    /** The size of columns made as needed (a number is pixels). Default `'auto'`. */
+    autoColumns?: Bind<number | string>;
+    /** How children without a place fill the grid. Default `'row'`. */
+    flow?: Bind<GridFlow>;
+    /** Where children sit in their cells, up and down. Default `'stretch'`. */
+    align?: Bind<LayoutAlign>;
+    /** Where children sit in their cells, along the row. Default `'stretch'`. */
+    justify?: Bind<GridJustify>;
+    /** Flows inside a line of text, as wide as its content. Default `false`. */
+    inline?: Bind<boolean>;
+}

package/dist/components/layout/grid-tracks.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Rows or columns of a `Grid`: CSS-like sizes (`'auto 1fr 2fr 120'`, a bare number is pixels,
+ * `*` is `1fr` and `2*` is `2fr`), the same as a list, or a number of equal tracks.
+ */
+export type GridTracks = string | number | readonly (string | number)[];

package/dist/components/layout/group-box-props.d.ts

@@ -0,0 +1,22 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { GroupBoxToggledEventArgs } from './group-box-toggled-event-args';
+import type { GroupBoxVariant } from './group-box-variant';
+import type { LayoutSpace } from './layout-space';
+/** Props of `GroupBox`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface GroupBoxProps extends ControlProps {
+    /** The title; `&Address` makes Alt+A focus the first control inside. The same property as `text`. */
+    title?: Bind<string>;
+    /** The title is a button that shows and hides the content. Default `false`. */
+    collapsible?: Bind<boolean>;
+    /** The content is hidden (with `collapsible`). Default `false`. */
+    collapsed?: Bind<boolean>;
+    /** The space inside the frame, one to four values as in CSS. Default the `layout.group-box.padding` token. */
+    padding?: Bind<LayoutSpace>;
+    /** The space between the children. Default the `layout.group-box.gap` token. */
+    gap?: Bind<LayoutSpace>;
+    /** Default `'outline'`. */
+    variant?: Bind<GroupBoxVariant>;
+    /** The content was shown or hidden, by the user or by code. */
+    onToggled?: (e: GroupBoxToggledEventArgs) => void;
+}

package/dist/components/layout/group-box-toggled-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { GroupBox } from './GroupBox';
+export interface GroupBoxToggledEventArgs {
+    collapsed: boolean;
+    /** `true` when the user opened or closed it, `false` when code did. */
+    byUser: boolean;
+    source: GroupBox;
+}

package/dist/components/layout/group-box-variant.d.ts

@@ -0,0 +1,2 @@
+/** `outline`: a frame with the title on its edge; `plain`: the title over the content, no frame. */
+export type GroupBoxVariant = 'outline' | 'plain';

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

@@ -0,0 +1,33 @@
+export { Stack } from './Stack';
+export { Grid } from './Grid';
+export { Panel } from './Panel';
+export { GroupBox } from './GroupBox';
+export { SplitContainer } from './SplitContainer';
+export { DockPanel } from './DockPanel';
+export { ChildSettings } from './ChildSettings';
+export { spaceValue } from './space-value';
+export { trackList } from './track-list';
+export type { StackProps } from './stack-props';
+export type { StackChildProps } from './stack-child-props';
+export type { StackJustify } from './stack-justify';
+export type { GridProps } from './grid-props';
+export type { GridCell } from './grid-cell';
+export type { GridTracks } from './grid-tracks';
+export type { GridFlow } from './grid-flow';
+export type { GridJustify } from './grid-justify';
+export type { PanelProps } from './panel-props';
+export type { PanelScroll } from './panel-scroll';
+export type { PanelVariant } from './panel-variant';
+export type { GroupBoxProps } from './group-box-props';
+export type { GroupBoxVariant } from './group-box-variant';
+export type { GroupBoxToggledEventArgs } from './group-box-toggled-event-args';
+export type { SplitContainerProps } from './split-container-props';
+export type { SplitPanel } from './split-panel';
+export type { SplitPosition } from './split-position';
+export type { SplitterMovedEventArgs } from './splitter-moved-event-args';
+export type { DockPanelProps } from './dock-panel-props';
+export type { DockChildProps } from './dock-child-props';
+export type { Dock } from './dock';
+export type { LayoutSpace } from './layout-space';
+export type { LayoutAlign } from './layout-align';
+export type { LayoutOrientation } from './layout-orientation';

package/dist/components/layout/layout-align.d.ts

@@ -0,0 +1,2 @@
+/** Where children sit across the main direction (CSS `align-items`). */
+export type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';

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

@@ -0,0 +1,2 @@
+/** `'horizontal'`: side by side, along the reading direction; `'vertical'`: one under the other. */
+export type LayoutOrientation = 'horizontal' | 'vertical';

package/dist/components/layout/layout-space.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A gap or a padding: a step of the spacing scale (`'xs'` … `'xxl'`, from the layout tokens),
+ * a number of pixels, or any CSS length (`'1.5rem'`). A padding may list up to four values, as in CSS.
+ */
+export type LayoutSpace = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | (string & {});

package/dist/components/layout/panel-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LayoutSpace } from './layout-space';
+import type { PanelScroll } from './panel-scroll';
+import type { PanelVariant } from './panel-variant';
+/**
+ * Props of `Panel`: the shared `ControlProps` plus its own. Each one is also a settable,
+ * reactive property. `text` names the panel: it becomes a region landmark with that name.
+ */
+export interface PanelProps extends ControlProps {
+    /** Scrolls its content; a scrolling panel is a Tab stop, so the keys scroll it. Default `false`. */
+    scrollable?: Bind<PanelScroll>;
+    /** The space inside the edges, one to four values as in CSS. Default none. */
+    padding?: Bind<LayoutSpace>;
+    /** Default `'plain'`. */
+    variant?: Bind<PanelVariant>;
+}

package/dist/components/layout/panel-scroll.d.ts

@@ -0,0 +1,2 @@
+/** Which way a `Panel` scrolls its content: `true` is `'both'`, `false` none. */
+export type PanelScroll = boolean | 'vertical' | 'horizontal' | 'both';

package/dist/components/layout/panel-variant.d.ts

@@ -0,0 +1,2 @@
+/** `plain`: no frame; `outline`: a border; `card`: a card surface with a border and a shadow. */
+export type PanelVariant = 'plain' | 'outline' | 'card';

package/dist/components/layout/set-padding.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutSpace } from './layout-space';
+/**
+ * Writes a padding the way CSS reads one to four values (block-start, inline-end, block-end,
+ * inline-start), on the logical sides, so it follows the reading direction.
+ */
+export declare function setPadding(el: HTMLElement, value: LayoutSpace | null | undefined): void;

package/dist/components/layout/set-space.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutSpace } from './layout-space';
+/** Writes a space to a custom property of the element the CSS reads (`--_gap`), or removes it. */
+export declare function setSpace(el: HTMLElement, variable: string, value: LayoutSpace | null | undefined): void;

package/dist/components/layout/space-value.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutSpace } from './layout-space';
+/** One CSS value per word: a step becomes its token, a bare number pixels; `''` for nothing. */
+export declare function spaceValue(value: LayoutSpace | null | undefined): string;

package/dist/components/layout/split-container-props.d.ts

@@ -0,0 +1,34 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LayoutOrientation } from './layout-orientation';
+import type { SplitPanel } from './split-panel';
+import type { SplitPosition } from './split-position';
+import type { SplitterMovedEventArgs } from './splitter-moved-event-args';
+/** Props of `SplitContainer`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface SplitContainerProps extends ControlProps {
+    /** `'horizontal'`: the panes side by side (default); `'vertical'`: one over the other. */
+    orientation?: Bind<LayoutOrientation>;
+    /**
+     * The size of the pane that keeps its size (`fixedPanel`; the first one with `'none'`): pixels,
+     * a share (`'30%'`) or a CSS length. Default `'50%'`. `x-model` binds it two-way.
+     */
+    position?: Bind<SplitPosition>;
+    /** The pane that keeps its size when the container is resized. `'none'` (default): both grow, the position is kept as a share. */
+    fixedPanel?: Bind<SplitPanel>;
+    /** The smallest size of the first pane, in pixels. Default 0. */
+    firstMinSize?: Bind<number>;
+    /** The smallest size of the second pane, in pixels. Default 0. */
+    secondMinSize?: Bind<number>;
+    /** A pane that is hidden, the other one taking all the room. Default `'none'`. */
+    collapsed?: Bind<SplitPanel>;
+    /** The splitter can be moved with the pointer and the keys. Default `true`. */
+    resizable?: Bind<boolean>;
+    /** Enter and a double click on the splitter hide and restore the first pane. Default `true`. */
+    collapsible?: Bind<boolean>;
+    /** How far an arrow key moves the splitter, in pixels. Default 10. */
+    step?: Bind<number>;
+    /** The splitter's accessible name. Default `uiLocale.strings.resize`. */
+    splitterLabel?: Bind<string>;
+    /** The splitter was moved, or a pane hidden or restored. */
+    onSplitterMoved?: (e: SplitterMovedEventArgs) => void;
+}

package/dist/components/layout/split-panel.d.ts

@@ -0,0 +1,2 @@
+/** One pane of a `SplitContainer`, or neither. */
+export type SplitPanel = 'none' | 'first' | 'second';

package/dist/components/layout/split-position.d.ts

@@ -0,0 +1,2 @@
+/** Where the splitter of a `SplitContainer` is: pixels (`240`), a share (`'30%'`) or a CSS length (`'15rem'`). */
+export type SplitPosition = number | string;

package/dist/components/layout/splitter-moved-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { SplitContainer } from './SplitContainer';
+import type { SplitPanel } from './split-panel';
+import type { SplitPosition } from './split-position';
+export interface SplitterMovedEventArgs {
+    position: SplitPosition;
+    collapsed: SplitPanel;
+    /** `true` when the user moved it (pointer or keys), `false` when code did. */
+    byUser: boolean;
+    source: SplitContainer;
+}

package/dist/components/layout/stack-child-props.d.ts

@@ -0,0 +1,6 @@
+import type { Bind } from '@motifx/core';
+/** What a child of a `Stack` may say about its place, in its own props: `<TextBox grow />`. */
+export interface StackChildProps {
+    /** Takes the free space along the direction; a number shares it in proportion. */
+    grow?: Bind<boolean | number>;
+}

package/dist/components/layout/stack-justify.d.ts

@@ -0,0 +1,2 @@
+/** How a `Stack` spreads its children along its direction (CSS `justify-content`). */
+export type StackJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';

package/dist/components/layout/stack-props.d.ts

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { LayoutAlign } from './layout-align';
+import type { LayoutOrientation } from './layout-orientation';
+import type { LayoutSpace } from './layout-space';
+import type { StackJustify } from './stack-justify';
+/** Props of `Stack`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface StackProps extends ControlProps {
+    /** Default `'vertical'`. */
+    orientation?: Bind<LayoutOrientation>;
+    /** The space between the children. Default the `layout.gap` token. */
+    gap?: Bind<LayoutSpace>;
+    /** The space inside the edges, one to four values as in CSS. Default none. */
+    padding?: Bind<LayoutSpace>;
+    /** Across the direction. Default `'stretch'`. */
+    align?: Bind<LayoutAlign>;
+    /** Along the direction. Default `'start'`. */
+    justify?: Bind<StackJustify>;
+    /** Children that do not fit go on to a new line. Default `false`. */
+    wrap?: Bind<boolean>;
+    /** The children are laid out from the other end. Default `false`. */
+    reverse?: Bind<boolean>;
+    /** Flows inside a line of text, as wide as its children. Default `false`. */
+    inline?: Bind<boolean>;
+}

package/dist/components/layout/track-list.d.ts

@@ -0,0 +1,3 @@
+import type { GridTracks } from './grid-tracks';
+/** The CSS `grid-template-rows` / `-columns` value of `GridTracks`; `''` for none. */
+export declare function trackList(value: GridTracks | null | undefined): string;

package/dist/components/listbox/ListBox.d.ts

@@ -0,0 +1,112 @@
+import { type Bind, type IBaseProp } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import { DataItems } from '../../parts/data/DataItems';
+import { Field } from '../../parts/field/Field';
+import type { ItemField } from '../../parts/list/item-field';
+import { TextBox } from '../textbox/TextBox';
+import type { ItemTemplate } from './item-template';
+import type { ListBoxProps } from './list-box-props';
+import type { ListSelectionMode } from './list-selection-mode';
+/**
+ * A list that stays on the page (the APG listbox): one item or several are chosen, with the keys
+ * or the pointer. Items come from memory or from a `DataSource`; long lists draw only the rows in
+ * view. A search box, groups, check boxes and a "Select all" row can be turned on.
+ *
+ * @example
+ * <ListBox label="&City" items={cities} x-model={() => this.form.city} />
+ * <ListBox label="Tags" items={tags} selectionMode="multiple" selectAll x-model={() => this.form.tags} />
+ */
+export declare class ListBox<T = unknown, V = unknown> extends Field<V | V[] | null, ListBoxProps<T, V>> {
+    constructor(props?: IBaseProp<ListBoxProps<T, V>>);
+    get items(): readonly T[];
+    set items(value: Bind<readonly T[]>);
+    get dataSource(): data.DataSource<T, unknown> | null;
+    set dataSource(value: Bind<data.DataSource<T, unknown> | null>);
+    get textField(): ItemField<T> | undefined;
+    set textField(value: Bind<ItemField<T>>);
+    get valueField(): ItemField<T> | undefined;
+    set valueField(value: Bind<ItemField<T>>);
+    get iconField(): ItemField<T> | undefined;
+    set iconField(value: Bind<ItemField<T>>);
+    get groupField(): ItemField<T> | undefined;
+    set groupField(value: Bind<ItemField<T>>);
+    get enabledField(): ItemField<T> | undefined;
+    set enabledField(value: Bind<ItemField<T>>);
+    get selectionMode(): ListSelectionMode;
+    set selectionMode(value: Bind<ListSelectionMode>);
+    get showCheckBoxes(): boolean;
+    set showCheckBoxes(value: Bind<boolean>);
+    get selectAll(): boolean;
+    set selectAll(value: Bind<boolean>);
+    get selectionFollowsFocus(): boolean;
+    set selectionFollowsFocus(value: Bind<boolean>);
+    get searchEnabled(): boolean;
+    set searchEnabled(value: Bind<boolean>);
+    get searchMode(): 'contains' | 'startswith';
+    set searchMode(value: Bind<'contains' | 'startswith'>);
+    get searchDelay(): number;
+    set searchDelay(value: Bind<number>);
+    get height(): number | string | null;
+    set height(value: Bind<number | string | null>);
+    get itemTemplate(): ItemTemplate<T> | null;
+    set itemTemplate(value: Bind<ItemTemplate<T> | null>);
+    get noItemsText(): string;
+    set noItemsText(value: Bind<string>);
+    /** The items of the chosen values that are known; with a data source the others are asked by key and follow. Reactive. */
+    get selectedItems(): T[];
+    /** The first of `selectedItems`. Reactive. */
+    get selectedItem(): T | undefined;
+    /** The items the list shows: what matched the last search. */
+    get listItems(): DataItems<T>;
+    /** The search box, while `searchEnabled` is on. */
+    get searchBox(): TextBox | null;
+    /** Multiple: chooses every item the list shows (with a data source, after they load). */
+    selectAllItems(): Promise<void>;
+    /** Chooses nothing. */
+    clear(): void;
+    /**
+     * Reads the items again after they were changed in place: which there are, their texts and values, the chosen
+     * ones. Your items may be plain or reactive; the list reads them as they are.
+     */
+    refresh(): void;
+    /** Scrolls an item into view and highlights it. */
+    scrollToItem(item: T): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): V | V[] | null;
+    protected sameValue(a: V | V[] | null, b: V | V[] | null): boolean;
+    protected renderValue(value: V | V[] | null): void;
+    protected itemText(item: T): string;
+    protected itemValue(item: T): unknown;
+    private get listParts();
+    private setUpList;
+    private isMultiple;
+    private valuesOf;
+    private canChoose;
+    private canChange;
+    private allState;
+    private renderSource;
+    private renderHeight;
+    private renderSearch;
+    /** Above the list, in the box; the build places controls at the end. */
+    private placeSearch;
+    private searchFor;
+    /** `all`: the rows' look may have changed too, not only which rows there are. */
+    private drawList;
+    private markSelectAll;
+    /** The "Select all" row is chosen when every item is, and shows a dash when some are. */
+    private markSelectAllRow;
+    private pointAt;
+    private listen;
+    private gotFocus;
+    private keyDown;
+    /** The highlight moved with a key: the item follows it in a single list; Shift chooses in a multiple one. */
+    private moved;
+    private pageRows;
+    private chosen;
+    /** `add` chooses the item (the only one in a single list), `toggle` flips it, `only` makes it the only one. */
+    private chooseAt;
+    /** Chooses every item from one index to another (Shift + Space, Shift + click). */
+    private chooseRange;
+    /** Chooses (`on`) or lets go of every item the list shows. */
+    private chooseAll;
+}

package/dist/components/listbox/all-values.d.ts

@@ -0,0 +1,7 @@
+import type { DataItems } from '../../parts/data/DataItems';
+/**
+ * The values of every item the list shows, the search applied: at once for items in memory; with a
+ * data source in pages or blocks, loaded through its adapter (its filter, then the search text over
+ * the item text).
+ */
+export declare function allValues<T>(items: DataItems<T>, valueOf: (item: T) => unknown, enabledOf: (item: T) => boolean): unknown[] | Promise<unknown[]>;

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

@@ -0,0 +1,4 @@
+export { ListBox } from './ListBox';
+export type { ListBoxProps } from './list-box-props';
+export type { ListSelectionMode } from './list-selection-mode';
+export type { ItemTemplate } from './item-template';

package/dist/components/listbox/item-template.d.ts

@@ -0,0 +1,2 @@
+/** Draws an item into `host` instead of its text; may return a cleanup. */
+export type ItemTemplate<T> = (item: T, host: HTMLElement) => (() => void) | void;

package/dist/components/listbox/list-box-props.d.ts

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { ItemField } from '../../parts/list/item-field';
+import type { ItemTemplate } from './item-template';
+import type { ListSelectionMode } from './list-selection-mode';
+/** Props of `ListBox`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface ListBoxProps<T, V> extends FieldProps<V | V[] | null> {
+    /** Items in memory; searched here. */
+    items?: Bind<readonly T[]>;
+    /** Items from the data layer; the search goes to it (`searchFields`). Wins over `items`. */
+    dataSource?: Bind<data.DataSource<T, unknown> | null>;
+    textField?: Bind<ItemField<T>>;
+    valueField?: Bind<ItemField<T>>;
+    iconField?: Bind<ItemField<T>>;
+    /** Items in memory only. */
+    groupField?: Bind<ItemField<T>>;
+    enabledField?: Bind<ItemField<T>>;
+    /** `'single'` (default): the value is one value; `'multiple'`: an array. */
+    selectionMode?: Bind<ListSelectionMode>;
+    /** Multiple: check boxes in front of the items; `false` shows a check mark. Default `true`. */
+    showCheckBoxes?: Bind<boolean>;
+    /** Multiple: a "Select all" row before the items. */
+    selectAll?: Bind<boolean>;
+    /** Single: moving through the list with the keys chooses the item. Default `true`. */
+    selectionFollowsFocus?: Bind<boolean>;
+    /** A search box above the list. */
+    searchEnabled?: Bind<boolean>;
+    /** Default `'contains'` (items in memory; a data source uses its own `searchOperator`). */
+    searchMode?: Bind<'contains' | 'startswith'>;
+    /** Milliseconds between the last key and the search. Default `0` in memory, `250` with a data source. */
+    searchDelay?: Bind<number>;
+    /** The list's height: a number of rows, or a CSS length. Default: as high as its items, up to the list's `max-height` (`list.container`). */
+    height?: Bind<number | string | null>;
+    itemTemplate?: Bind<ItemTemplate<T> | null>;
+    /** What an empty list says; `uiLocale`'s "No items" by default. */
+    noItemsText?: Bind<string>;
+}