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

package/dist/components/listbox/list-rows.d.ts

@@ -0,0 +1,12 @@
+import type { ItemSource } from '../../parts/list/item-source';
+import { type SelectAllRow } from './select-all-row';
+/** The rows of a list over items that load while they are looked at: a "Select all" row first, when it is on. */
+export declare class ListRows<T> implements ItemSource<T | SelectAllRow> {
+    withSelectAll: boolean;
+    private readonly items;
+    constructor(items: ItemSource<T>);
+    get count(): number;
+    at(index: number): T | SelectAllRow | undefined;
+    ensure(first: number, end: number): void;
+    private get offset();
+}

package/dist/components/listbox/list-selection-mode.d.ts

@@ -0,0 +1,2 @@
+/** One chosen item, or any number of them. */
+export type ListSelectionMode = 'single' | 'multiple';

package/dist/components/listbox/select-all-row.d.ts

@@ -0,0 +1,5 @@
+/** The "Select all" row a multiple list shows before its items. */
+export declare const selectAllRow: {
+    readonly selectAll: true;
+};
+export type SelectAllRow = typeof selectAllRow;

package/dist/components/listbox/select-all-state.d.ts

@@ -0,0 +1,3 @@
+import type { DataItems } from '../../parts/data/DataItems';
+/** Whether the items the list shows are all chosen (`true`), none of them (`false`) or some (`'mixed'`). */
+export declare function selectAllState<T>(items: DataItems<T>, chosen: ReadonlySet<unknown>, valueOf: (item: T) => unknown, enabledOf: (item: T) => boolean): boolean | 'mixed';

package/dist/components/listbox/value-items.d.ts

@@ -0,0 +1,21 @@
+import type { DataItems } from '../../parts/data/DataItems';
+/** The items of chosen values, kept so they can be shown while they are on no loaded page. */
+export declare class ValueItems<T> {
+    valueOf: (item: T) => unknown;
+    private readonly items;
+    private readonly known;
+    private readonly asking;
+    /** Values the data source has no item for. */
+    private readonly missing;
+    constructor(items: DataItems<T>);
+    remember(item: T): void;
+    /** The item of `value` when it is known now. */
+    itemOf(value: unknown): T | undefined;
+    /** The data source is being asked for the item of `value`. */
+    isAsking(value: unknown): boolean;
+    /** Asks the data source for the values that have no item yet; `answered` runs after each answer. */
+    lookUp(values: readonly unknown[], answered: () => void): void;
+    /** Lets go of the items of values no longer chosen. */
+    keep(values: readonly unknown[]): void;
+    clear(): void;
+}

package/dist/components/lookup/Lookup.d.ts

@@ -0,0 +1,33 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import type { OptionList } from '../../parts/list/OptionList';
+import type { Popup } from '../../parts/popup/Popup';
+import { DropDown } from '../dropdown/DropDown';
+import type { LookupColumn } from './lookup-column';
+import type { LookupProps } from './lookup-props';
+/**
+ * Picks one row of a table-like list, typically from a data source searched on the server: a
+ * customer by name, city and phone. The field shows the chosen row's text.
+ *
+ * @example
+ * <Lookup label="Customer" dataSource={this.customers} textField="CompanyName" valueField="CustomerID"
+ *   columns={[{ field: 'CompanyName', caption: 'Company' }, { field: 'City', caption: 'City', width: '8rem' }]} />
+ */
+export declare class Lookup<T = unknown, V = unknown> extends DropDown<T, V> {
+    constructor(props?: IBaseProp<LookupProps<T, V>>);
+    get columns(): readonly LookupColumn<T>[];
+    set columns(value: Bind<readonly LookupColumn<T>[]>);
+    get showColumnHeaders(): boolean;
+    set showColumnHeaders(value: Bind<boolean>);
+    get popupWidth(): string;
+    set popupWidth(value: Bind<string>);
+    /**
+     * Reads the items and the columns again after they were changed in place. Your items and columns may be plain or
+     * reactive; the lookup reads them as they are.
+     */
+    refresh(): void;
+    protected popupCreated(popup: Popup, list: OptionList<T>): void;
+    private get lookupParts();
+    /** The columns lay out every row (and the header) on one grid. */
+    private applyColumns;
+    private cell;
+}

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

@@ -0,0 +1,3 @@
+export { Lookup } from './Lookup';
+export type { LookupProps } from './lookup-props';
+export type { LookupColumn } from './lookup-column';

package/dist/components/lookup/lookup-column.d.ts

@@ -0,0 +1,11 @@
+import type { Bind } from '@motifx/core';
+import type { ItemField } from '../../parts/list/item-field';
+/** One column of a lookup's list. */
+export interface LookupColumn<T> {
+    field: ItemField<T>;
+    caption?: Bind<string>;
+    /** A CSS grid track: `8rem`, `2fr`. Default `1fr`. */
+    width?: Bind<string>;
+    /** Default `'start'`. */
+    align?: Bind<'start' | 'center' | 'end'>;
+}

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

@@ -0,0 +1,12 @@
+import type { Bind } from '@motifx/core';
+import type { DropDownProps } from '../dropdown/drop-down-props';
+import type { LookupColumn } from './lookup-column';
+/** Props of `Lookup`: the drop-down props plus its columns. */
+export interface LookupProps<T, V> extends DropDownProps<T, V> {
+    /** The columns of the list, under a header. Without them it lists the text. */
+    columns?: Bind<readonly LookupColumn<T>[]>;
+    /** Default `true`. */
+    showColumnHeaders?: Bind<boolean>;
+    /** The least width of the list, a CSS length. Default from the `lookup.popup-width` token. */
+    popupWidth?: Bind<string>;
+}

package/dist/components/menubar/MenuBar.d.ts

@@ -0,0 +1,59 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { MenuBarProps } from './menu-bar-props';
+/**
+ * A bar of menus (`role="menubar"`), as at the top of an app: File, Edit, View. Left and Right
+ * move along the bar and, while a menu is open, open the next one; Down, Enter and Space open a
+ * menu; Escape closes it back to the bar; a letter goes to the item that starts with it; `&File`
+ * makes Alt+F open File. Menus hold submenus, check and radio items and shortcuts (`MenuItem`).
+ *
+ * @example
+ * <MenuBar label="Main" items={[{ text: '&File', items: [{ text: '&New', shortcut: 'Ctrl+N', click: () => this.create() }] }]} />
+ *
+ * const bar = new MenuBar({ items: this.menus, focusOnF10: true });
+ * bar.onItemClick((e) => console.log(e.item.text));
+ */
+export declare class MenuBar extends Control<HTMLDivElement, MenuBarProps> {
+    constructor(props?: IBaseProp<MenuBarProps>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get items(): readonly MenuItem[];
+    set items(value: Bind<readonly MenuItem[]>);
+    get focusOnF10(): boolean;
+    set focusOnF10(value: Bind<boolean>);
+    get openOnHover(): boolean;
+    set openOnHover(value: Bind<boolean>);
+    /** The top item whose menu is open, `null` while none is. Reactive. */
+    get openItem(): MenuItem | null;
+    /** An item was chosen (a top item without a menu, or an item in a menu), after the item's own `click`. */
+    get onItemClick(): MotifEvent<MenuItemClickEventArgs>;
+    /** Opens the menu of a top item (or the item at an index) with focus on its first item; `false` when it has none or cannot be used. */
+    open(item: MenuItem | number): boolean;
+    close(): void;
+    /**
+     * Reads the items again after they were changed in place: the bar, the open menu and its submenus. Your items
+     * may be plain or reactive; the bar reads them as they are.
+     */
+    refresh(): void;
+    /** The top item Tab reaches. */
+    protected get focusElement(): HTMLElement;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    /** Draws the items again whenever a function in one of them reads something that changes, or on `reState()`. */
+    private followItems;
+    private draw;
+    /** The item Tab reaches: the last one focused, else the first. */
+    private stop;
+    private renderRoving;
+    private renderF10;
+    private openMenu;
+    private createPopup;
+    private chosen;
+    private entryOf;
+    private listen;
+    private onClick;
+    private onKeyDown;
+}

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

@@ -0,0 +1,2 @@
+export { MenuBar } from './MenuBar';
+export type { MenuBarProps } from './menu-bar-props';

package/dist/components/menubar/menu-bar-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+/** Props of `MenuBar`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface MenuBarProps extends ControlProps {
+    /** Names the bar for screen readers. The same property as `text`. */
+    label?: Bind<string>;
+    /** The top items; their `items` are the menus they open. `&File` makes Alt+F open File. */
+    items?: Bind<readonly MenuItem[]>;
+    /** F10 moves focus to the bar from anywhere on the page. Default `false`: browsers use F10 themselves. */
+    focusOnF10?: Bind<boolean>;
+    /** While a menu is open, pointing at another top item opens its menu; pointing at an item opens its submenu. Default `true`. */
+    openOnHover?: Bind<boolean>;
+    /** An item was chosen, after the item's own `click`. */
+    onItemClick?: (e: MenuItemClickEventArgs) => void;
+}

package/dist/components/numberbox/NumberBox.d.ts

@@ -0,0 +1,115 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { EnterKeyEventArgs } from '../../parts/field/enter-key-event-args';
+import { Field } from '../../parts/field/Field';
+import type { ValidationRule } from '../../parts/validation/validation-rule';
+import type { NumberBoxProps } from './number-box-props';
+import type { SpinLayout } from './spin-layout';
+/**
+ * A number field: arrow keys, PageUp/PageDown, Home/End, spin buttons that repeat while held and
+ * an optional mouse wheel change the value by `step`; `min`, `max` and `decimals` shape what is
+ * entered. Without focus it shows the value formatted (`Intl.NumberFormat`: currency, percent…);
+ * with focus the plain number, typed in the locale's own way. `x-model` binds a number (or `null`).
+ *
+ * @example
+ * <NumberBox label="&Price" min={0} step={0.5} format={{ style: 'currency', currency: 'TRY' }} locale="tr-TR" x-model={() => this.item.price} />
+ *
+ * const qty = new NumberBox({ label: 'Quantity', min: 1, max: 99, allowEmpty: false });
+ * this.panel.controls.add(qty);
+ * qty.value = 3;
+ */
+export declare class NumberBox extends Field<number | null, NumberBoxProps> {
+    /** A spin layout not given is the design language's, or the one of the place the box sits in. */
+    private readonly spinLook;
+    constructor(props?: IBaseProp<NumberBoxProps>);
+    get min(): number | null;
+    set min(value: Bind<number | null>);
+    get max(): number | null;
+    set max(value: Bind<number | null>);
+    get step(): number;
+    set step(value: Bind<number>);
+    get largeStep(): number;
+    set largeStep(value: Bind<number>);
+    get showSpinButtons(): boolean;
+    set showSpinButtons(value: Bind<boolean>);
+    get spinLayout(): SpinLayout;
+    set spinLayout(value: Bind<SpinLayout>);
+    get wheel(): boolean;
+    set wheel(value: Bind<boolean>);
+    get format(): Intl.NumberFormatOptions;
+    set format(value: Bind<Intl.NumberFormatOptions>);
+    /** The locale in use: the one set, else the page's. */
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get decimals(): number | null;
+    set decimals(value: Bind<number | null>);
+    get clamp(): boolean;
+    set clamp(value: Bind<boolean>);
+    get allowEmpty(): boolean;
+    set allowEmpty(value: Bind<boolean>);
+    get updateOn(): 'input' | 'change';
+    set updateOn(value: Bind<'input' | 'change'>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get selectOnFocus(): boolean;
+    set selectOnFocus(value: Bind<boolean>);
+    get align(): 'start' | 'center' | 'end';
+    set align(value: Bind<'start' | 'center' | 'end'>);
+    get name(): string;
+    set name(value: Bind<string>);
+    get autocomplete(): string;
+    set autocomplete(value: Bind<string>);
+    /** The value as it shows without focus, `''` when empty. Reactive. */
+    get formattedValue(): string;
+    get inputElement(): HTMLInputElement;
+    get onEnter(): MotifEvent<EnterKeyEventArgs<number | null>>;
+    /** Adds `step` × `times`, kept within `min` / `max`, as the up arrow does. */
+    stepUp(times?: number): void;
+    /** Takes `step` × `times` away, as the down arrow does. */
+    stepDown(times?: number): void;
+    /** Selects the whole text. */
+    select(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): number | null;
+    protected normalizeValue(value: number | null): number | null;
+    /** `decimals` changed: the value takes it, and `x-model` gets the rounded value. */
+    private roundStored;
+    protected renderValue(value: number | null): void;
+    protected renderReadOnly(on: boolean): void;
+    protected builtInRules(): ValidationRule<number | null>[];
+    private get numberParts();
+    private peekLocale;
+    private peekStep;
+    private peekLargeStep;
+    /** Percent values are edited as the number shown: 0.25 as 25. */
+    private scale;
+    private formatter;
+    private editTextOf;
+    /** What the field holds, as a value: `null` when empty, `NaN` when it is not a number. */
+    private readText;
+    private clampToRange;
+    private inRange;
+    private showText;
+    private listen;
+    private typed;
+    private commitTyped;
+    /** The text is entered (the field is left, Enter): read, rounded, kept in range and shown again. */
+    private enterText;
+    private keyDown;
+    private canChange;
+    private goTo;
+    /** Adds `delta` to what the field holds now; `false` when nothing changed. */
+    private spin;
+    private gotFocus;
+    private lostFocus;
+    private setAttribute;
+    private renderPlaceholder;
+    private renderShown;
+    private renderRange;
+    private renderAria;
+    private renderWheel;
+    onMounted(): void;
+    private renderSpin;
+    private spinButton;
+    private stopRepeat;
+    private renderSpinState;
+}

package/dist/components/numberbox/decimal-math.d.ts

@@ -0,0 +1,7 @@
+/** `value` × 10^`places`, moved on the written digits: `shiftDecimal(0.07, 2)` is exactly 7. */
+export declare function shiftDecimal(value: number, places: number): number;
+/** How many digits a number has after the decimal point. */
+export declare function decimalPlaces(value: number): number;
+export declare function addDecimal(a: number, b: number): number;
+/** Rounds half away from zero to `places` digits after the point. */
+export declare function roundDecimal(value: number, places: number): number;

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

@@ -0,0 +1,3 @@
+export { NumberBox } from './NumberBox';
+export type { NumberBoxProps } from './number-box-props';
+export type { SpinLayout } from './spin-layout';

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

@@ -0,0 +1,44 @@
+import type { Bind } from '@motifx/core';
+import type { EnterKeyEventArgs } from '../../parts/field/enter-key-event-args';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { SpinLayout } from './spin-layout';
+/** Props of `NumberBox`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface NumberBoxProps extends FieldProps<number | null> {
+    min?: Bind<number | null>;
+    max?: Bind<number | null>;
+    /** What the arrow keys, the spin buttons and the wheel add. Default `1`. */
+    step?: Bind<number>;
+    /** What PageUp and PageDown add. Default 10 × `step`. */
+    largeStep?: Bind<number>;
+    /** Default `true`. */
+    showSpinButtons?: Bind<boolean>;
+    /** `stacked` (default): up and down arrows on top of each other; `inline`: − and + side by side. */
+    spinLayout?: Bind<SpinLayout>;
+    /** The mouse wheel changes the value while the field has focus. Default `false`. */
+    wheel?: Bind<boolean>;
+    /** How the value shows when the field does not have focus: currency, percent, digits… */
+    format?: Bind<Intl.NumberFormatOptions>;
+    /** The locale of the format and of what is typed. Default the page's `lang`. */
+    locale?: Bind<string>;
+    /**
+     * Digits after the decimal point: every value is rounded to them (entered, given or set from code, written back
+     * to `x-model`), and shown with exactly that many while the field is not edited. Default: as given.
+     */
+    decimals?: Bind<number | null>;
+    /** A value outside `min` / `max` is brought inside when entered. Default `true`; `false` leaves it to the range check. */
+    clamp?: Bind<boolean>;
+    /** An empty field is `null`. Default `true`; `false` puts `min` (or 0) in its place. */
+    allowEmpty?: Bind<boolean>;
+    /** `input` (default) changes the value as soon as the text is a whole number, `change` when the field is left or Enter is pressed. */
+    updateOn?: Bind<'input' | 'change'>;
+    placeholder?: Bind<string>;
+    /** Selects the whole text when the field gets focus. */
+    selectOnFocus?: Bind<boolean>;
+    /** Default `'start'`. */
+    align?: Bind<'start' | 'center' | 'end'>;
+    /** The name it is sent with in a form. */
+    name?: Bind<string>;
+    /** Default `'off'`. */
+    autocomplete?: Bind<string>;
+    onEnter?: (e: EnterKeyEventArgs<number | null>) => void;
+}

package/dist/components/numberbox/number-text.d.ts

@@ -0,0 +1,12 @@
+/** The locale itself when it is valid, else the page's. */
+export declare function checkedLocale(locale: string | null | undefined): string;
+/**
+ * Reads what was typed: `null` for nothing, `NaN` for text that is not a number. Group
+ * separators, spaces, currency and percent signs are skipped. A `.` is also read as the decimal
+ * point where it cannot be a group separator (`12.5` in `tr-TR`).
+ */
+export declare function parseNumber(text: string, locale: string): number | null;
+/** The text ends where more is still to come: a sign or a decimal point. */
+export declare function isPartialNumber(text: string, locale: string): boolean;
+/** A number to edit: no grouping, the locale's decimal separator and digits. */
+export declare function plainNumber(value: number, locale: string): string;

package/dist/components/numberbox/spin-layout.d.ts

@@ -0,0 +1,2 @@
+/** How the spin buttons of a `NumberBox` sit: on top of each other, or side by side. */
+export type SpinLayout = 'stacked' | 'inline';

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,92 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { PageChangedEventArgs } from './page-changed-event-args';
+import type { PaginationMode } from './pagination-mode';
+import type { PaginationProps } from './pagination-props';
+/**
+ * Moving through pages of items: the page sizes, where the page stands ("Page 3 of 12 (250 items)"), the first,
+ * previous, next and last steps and a button per page around the current one, with gaps. The compact look has a box for
+ * the page number and a drop-down of the sizes instead; `adaptive` is compact while the full one does not fit. Its
+ * buttons stay while their page does, so focus stays on a button pressed.
+ *
+ * @example
+ * <Pagination total={() => this.orders.total} pageSizes={[10, 25, 50]} pageSize={() => this.orders.pageSize}
+ *   x-model={() => this.orders.page} onPageChanged={(e) => this.orders.load(e.page, e.pageSize)} />
+ */
+export declare class Pagination extends Control<HTMLElement, PaginationProps> {
+    private readonly changed;
+    private readonly look;
+    private readonly sizeGroup;
+    private readonly sizeList;
+    private readonly info;
+    private readonly steps;
+    private readonly pagesPart;
+    private readonly jump;
+    private readonly pageText;
+    private readonly pageBox;
+    private readonly countText;
+    private readonly pageParts;
+    private readonly sizeButtons;
+    private readonly sizes;
+    /** The full look does not fit (adaptive), and the room it did not fit in. */
+    private narrow;
+    private narrowRoom;
+    private readonly watch;
+    private ready;
+    constructor(props?: IBaseProp<PaginationProps>);
+    get page(): number;
+    set page(value: Bind<number>);
+    /** The page, as `x-model` binds it: the same as `page`. */
+    get value(): number;
+    set value(value: Bind<number>);
+    get total(): number;
+    set total(value: Bind<number>);
+    get pageSize(): number;
+    set pageSize(value: Bind<number>);
+    get pageCount(): number;
+    set pageCount(value: Bind<number | null>);
+    get pageSizes(): readonly number[];
+    set pageSizes(value: Bind<readonly number[]>);
+    get showInfo(): boolean;
+    set showInfo(value: Bind<boolean>);
+    get showNavigation(): boolean;
+    set showNavigation(value: Bind<boolean>);
+    get neighbors(): number;
+    set neighbors(value: Bind<number>);
+    get mode(): PaginationMode;
+    set mode(value: Bind<PaginationMode>);
+    get infoText(): string;
+    set infoText(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The page or the page size changed, by the user or by code (`e.byUser`). */
+    get onPageChanged(): MotifEvent<PageChangedEventArgs>;
+    /** Whether the compact look shows now. */
+    get compact(): boolean;
+    /** Goes to a page (from 1), as a press would. */
+    goTo(page: number, byUser?: boolean): void;
+    onMounted(): void;
+    /** Items per page, read. */
+    private get size();
+    /** How many pages, from `pageCount`, else from `total` and the page size. */
+    private get count();
+    /** The page now, within the pages there are. */
+    private get current();
+    /** A change the user made: stored, told, written back to `x-model` (the page). */
+    private userMoved;
+    /** Another page size: the first item of the page stays on the page shown. */
+    private setSize;
+    /**
+     * The adaptive look: compact while the full one is wider than the room it has. The full look is drawn and measured
+     * in the same frame (nothing is painted in between), so its width is the one it has now.
+     */
+    private fit;
+    /** Draws it as it is now; `fit` again afterwards unless the drawing is the fit's own. */
+    private draw;
+    /** A button per page size, kept while the size stays, the one in use pressed. */
+    private drawSizes;
+    /** The page buttons and gaps, kept by page while they stay. */
+    private drawPages;
+    /** The page sizes of the drop-down, the same item for the same size. */
+    private sizeItems;
+}

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

@@ -0,0 +1,4 @@
+export { Pagination } from './Pagination';
+export type { PageChangedEventArgs } from './page-changed-event-args';
+export type { PaginationMode } from './pagination-mode';
+export type { PaginationProps } from './pagination-props';

package/dist/components/pagination/page-changed-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { Pagination } from './Pagination';
+export interface PageChangedEventArgs {
+    /** The page now, from 1. */
+    page: number;
+    /** Items per page now; 0: all on one page. */
+    pageSize: number;
+    /** `true` when the user moved, `false` when code did. */
+    byUser: boolean;
+    source: Pagination;
+}

package/dist/components/pagination/pagination-mode.d.ts

@@ -0,0 +1,2 @@
+/** How a pagination shows itself: every part, the compact look (a page number box), or compact only when the full one does not fit. */
+export type PaginationMode = 'full' | 'compact' | 'adaptive';

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

@@ -0,0 +1,32 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { PageChangedEventArgs } from './page-changed-event-args';
+import type { PaginationMode } from './pagination-mode';
+/** Props of `Pagination`. Each one is also a settable property; a function is followed. */
+export interface PaginationProps extends ControlProps {
+    /** The page, from 1. Default `1`. */
+    page?: Bind<number>;
+    /** The same as `page`: what `x-model` binds, two-way. */
+    value?: Bind<number>;
+    /** How many items there are in all; the pages are counted from it and `pageSize`. */
+    total?: Bind<number>;
+    /** Items per page; 0: all on one page. Default `10`. */
+    pageSize?: Bind<number>;
+    /** How many pages, when there is no `total` to count them from. */
+    pageCount?: Bind<number | null>;
+    /** The page sizes to choose from (0: all). Default: none, no choice shown. */
+    pageSizes?: Bind<readonly number[]>;
+    /** "Page 3 of 12 (250 items)". Default `true`. */
+    showInfo?: Bind<boolean>;
+    /** The first, previous, next and last steps. Default `true`. */
+    showNavigation?: Bind<boolean>;
+    /** Page buttons on each side of the current one. Default `1`. */
+    neighbors?: Bind<number>;
+    /** Default `'adaptive'`: compact while the full one does not fit. */
+    mode?: Bind<PaginationMode>;
+    /** The info of your own: `{page}`, `{count}` (pages) and `{total}` are filled in. */
+    infoText?: Bind<string>;
+    /** What screen readers call it. Default: the kit's "Pages". */
+    label?: Bind<string>;
+    onPageChanged?: (e: PageChangedEventArgs) => void;
+}

package/dist/components/progress/ProgressBar.d.ts

@@ -0,0 +1,67 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { ProgressBarProps } from './progress-bar-props';
+import type { ProgressLabelPosition } from './progress-label-position';
+import type { ProgressShape } from './progress-shape';
+import type { ProgressTone } from './progress-tone';
+/**
+ * Shows how far some work is: a bar that fills from `min` to `max`, or an arc that goes round a circle
+ * (`shape="circle"`); while `value` is `null`, a part that runs to and fro, or an arc that turns. A label and
+ * the percent can go above it, under it or beside it. Where the design language gives it a wave, the line
+ * or the arc swings while it grows.
+ *
+ * @example
+ * <ProgressBar label="Uploading" value={() => this.upload.sent} max={() => this.upload.size} showValue />
+ * <ProgressBar label="Preparing" value={null} />
+ *
+ * const bar = new ProgressBar({ label: 'Import', showValue: true, tone: 'success' });
+ * this.panel.controls.add(bar);
+ * bar.value = 40;
+ */
+export declare class ProgressBar extends Control<HTMLDivElement, ProgressBarProps> {
+    /** What the design language decides: a wave, and how it swings. */
+    private readonly waveLook;
+    constructor(props?: IBaseProp<ProgressBarProps>);
+    /** `null` while the progress is not known. */
+    get value(): number | null;
+    set value(value: Bind<number | null>);
+    get min(): number;
+    set min(value: Bind<number>);
+    get max(): number;
+    set max(value: Bind<number>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get shape(): ProgressShape;
+    set shape(value: Bind<ProgressShape>);
+    get labelPosition(): ProgressLabelPosition;
+    set labelPosition(value: Bind<ProgressLabelPosition>);
+    get showValue(): boolean;
+    set showValue(value: Bind<boolean>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get tone(): ProgressTone;
+    set tone(value: Bind<ProgressTone>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get stretch(): boolean;
+    set stretch(value: Bind<boolean>);
+    /** A function, so it is stored as it is, never bound. */
+    get valueText(): ((value: number, fraction: number) => string) | null;
+    set valueText(value: ((value: number, fraction: number) => string) | null);
+    /** How much is done, from 0 to 1; `null` while it is not known. Reactive. */
+    get fraction(): number | null;
+    onMounted(): void;
+    private get parts();
+    private buildParts;
+    private buildCircle;
+    private renderLabel;
+    private renderValue;
+    /** Whole percents, rounded down: 99.6 % of the work is not 100 %. */
+    private formatPercent;
+    private renderHead;
+    private renderLook;
+    /** A wave while the value is known and the language gives the shape one; nothing is drawn by script otherwise. */
+    private renderWave;
+    private readWave;
+}