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

package/CHANGELOG.md

@@ -6,6 +6,70 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 
 ## [Unreleased]
 
+## [0.1.0-beta.2] - 2026-11-05
+
+### New components
+
+- `Stepper`: the steps of a longer task and where the user stands, an indicator and a text per step, a line between
+  them; completed, current, pending and error statuses, optional and disabled steps, an icon in place of the number;
+  linear order (a press reaches a completed step or the next one) or free; `onStepChanging` may refuse or wait on a
+  promise; `next()`, `previous()`, `goTo()`; horizontal with the texts under or after the indicators, or vertical;
+  one Tab stop with the arrow keys; `x-model`. Units in the five languages: the step, its indicator, the mark, the
+  texts and the line (which turns a quarter standing).
+- `Wizard` and `WizardStep`: a stepper above or beside a page per step and the Back and Next buttons. Next validates
+  the kit's fields on the page, then the step's own `validate`; a page that fails keeps the wizard, marks its step
+  and focuses the first invalid field. On the last step Next finishes (`onFinishing` may wait, `onFinished`). Steps
+  from JSX or from `steps` with content factories, `add`, `insert`, `remove`; `lazy` and `keepAlive` as in `Tabs`.
+- Kit texts `steps`, `stepOf`, `stepOptional`, `stepDone`, `stepError`, `wizardNext`, `wizardPrevious`,
+  `wizardFinish` in English and Turkish.
+- `Popover`: content next to the element it belongs to, with a title, a close button and an arrow where the
+  design language draws one (Tactile, Fluent, Lilac); opened by a press on the target, by the pointer resting on it
+  (`showOn: 'hover'`, keyboard focus too) or from code; every placement of the kit's popups, a width of its own;
+  focus goes in and comes back; Escape, a press outside, focus leaving and the close button close it, and
+  `onClosing` may keep it open; `value` and `x-model`.
+- `LoadPanel`: a loading layer over a container or the whole page: a shade, a pane with the kit's spinner and a
+  message, a Cancel button (`onCancel`, Escape too); what is under it is inert and `aria-busy`, focus waits on the
+  panel and comes back; `delay` keeps quick work from flashing it; `value` and `x-model`, `show()` and `hide()`.
+- `homeOf` in the core: where a surface made from code goes for its anchor (the tooltip's rule, now shared).
+- `DateRangeBox`: a start and an end in one field, typed through two masks or picked on two months side by side
+  (the first pick the start, the second the end, the pointer showing the range meanwhile), ready-made ranges
+  (`presets`), `min`, `max`, `disabledDates`, the least and the most days a range may span (`minDays`, `maxDays`),
+  `datetime` too; the value a `[start, end]` pair, `x-model`. The `Calendar` draws a range over its days
+  (`rangeStart`, `rangeEnd`: the cell states `range-start`, `range-end`, `range-single`, `range-in` in every
+  language) and tells the day under the pointer (`onDayPointed`).
+- `FileUploader`: files chosen with a button or dropped on the box, listed with their size and what happens to
+  them; `accept`, `maxFileSize`, `minFileSize` and `maxFiles` turn files away with the reason; uploaded as they come,
+  on an Upload button or from code, by the uploader itself (`uploadUrl`, in one piece or in chunks with
+  `Content-Range`, with progress) or by your own `upload`; cancel, retry and remove on each row; a field (label,
+  `required`, rules); kit glyphs `upload` and `file`.
+- Kit texts for both, in English and Turkish.
+- `Sortable`: items the user puts in order by dragging them, with the pointer or a finger (a long press), or
+  with the keys (Ctrl + an arrow, Home, End; each move read out); a copy follows the pointer, a line shows where
+  it would land, the list scrolls near its edges; sortables of one `group` take each other's items; the items
+  are the JSX children, or `items` drawn with `itemTemplate` (the rows keyed by item, kept as the order
+  changes); a `handle` takes the drag and the keys; `onDragStarting`, `onDragChanging` and `onDragEnding` may
+  refuse; `onReorder`, `onRemove` and `onAdd` tell the indexes and the data stays yours; `move()` from code.
+  Units in the five languages: the list, an item, the line, the copy.
+- `ScrollView`: content that scrolls in a box of its own; the bars shown on scroll, on hover, always or never;
+  pull to refresh with a finger or the pointer (`onPullDown`, a promise or `release()`); more loaded near the
+  end (`onReachBottom`, `reachBottomOffset`, `release(true)` when there is no more; content that does not fill
+  the box asks at once, and again as it grows); `scrollTo`, `scrollBy`, `scrollToElement`, `onScrolled`.
+- Kit texts `sortableMoved`, `scrollPullDown`, `scrollRelease` and `scrollRefreshing` in English and Turkish.
+
+### Language
+
+- A Language page in the docs: switching, the packs, a pack of your own, `connectI18n`, your own texts that follow,
+  a control's own `locale`, and what a pack is checked for.
+- `npm run locales` checks every pack against the built-in texts: every key, the same ICU arguments, `UiStrings` in
+  step with `en.json`; `npm run locales -- path/to/de.json` checks a pack of your own.
+- The Turkish pack is a chunk of the package, loaded when `uiLocale.use('tr')` first asks for it; it is no longer
+  in the main bundle.
+
+### Removed
+
+- `trStrings`. Switch with `await uiLocale.use('tr')`, or add the JSON from `@motifx-community/ui/locales/tr.json`
+  with `uiLocale.add('tr', pack)`.
+
 ## [0.1.0-beta.1] - 2026-11-04
 
 ### DropDown and Lookup: a value on no loaded page is asked for by key

package/README.md

@@ -1,5 +1,9 @@
 # @motifx-community/ui
 
+[![npm](https://img.shields.io/npm/v/@motifx-community/ui/beta?label=npm%20%40beta)](https://www.npmjs.com/package/@motifx-community/ui)
+[![CI](https://github.com/motifjs-community/motifjs-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/motifjs-community/motifjs-ui/actions/workflows/ci.yml)
+[![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
 UI components for **MotifJS** (`@motifx/core`) that work the way desktop UI does: a component is an
 object you create when you need it, show anywhere, and close like a window — or write in JSX and
 bind to state. Everything is drawn from the [MotifJS design system](https://github.com/motifjs-community/motifjs-design-system)
@@ -9,6 +13,8 @@ overrides. This package adds the components and their component tokens, nothing
 > **Preview** (`beta`): complete enough to build with; the API may still change before 1.0. Updates come as new
 > beta versions.
 
+The docs: [ui.motifjs.com](https://ui.motifjs.com). The same pages come with the package as Markdown, in `docs/`.
+
 ## Install
 
 ```sh
@@ -37,14 +43,14 @@ each (`npm run dev`).
 | --- | --- |
 | Buttons and commands | `Button` (menu, split, drop-down, toggle, busy), `ButtonGroup` (segmented choice), `Toolbar` (overflow menu), `MenuBar`, `ContextMenu` |
 | Display | `Badge`, `Avatar`, `AvatarGroup`, `Chip`, `ChipGroup`, `Card`, `Skeleton` |
-| Navigation | `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `TabDocumentManager` |
+| Navigation | `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `Stepper`, `Wizard`, `TabDocumentManager` |
 | More editors | `Rating`, `ColorBox`, `ColorPicker` |
 | Scheduling | `Scheduler` (day, week, month, timeline, agenda; recurrence, resources, iCalendar) |
-| Editors | `TextBox` (mask, validation), `TextArea` (auto-grow), `NumberBox` (locale formats, spin), `DateBox` (date, time, both), `Calendar`, `Slider` (range) |
+| Editors | `TextBox` (mask, validation), `TextArea` (auto-grow), `NumberBox` (locale formats, spin), `DateBox` (date, time, both), `DateRangeBox` (two months, presets, a span), `Calendar`, `Slider` (range), `FileUploader` (drop, limits, chunks, progress) |
 | Choice | `CheckBox` (three states), `Switch`, `RadioGroup`, `DropDown`, `ComboBox`, `Autocomplete`, `Lookup` (columns), `TagBox`, `ListBox` |
 | Data | `DataGrid` (virtual or paged, editing with three save modes, row actions, selection, filters, search panel, grouping with a group panel, toolbar, lookup columns, copy and paste, CSV and Excel export, kept layout), `TreeView` (lazy, check boxes, filter); lists and grids read `@motifx-community/data` sources |
-| Layout and windows | `Stack`, `Grid`, `DockPanel`, `Panel`, `GroupBox`, `SplitContainer`, `FormLayout`, `Tabs`, `Accordion`, `MxForm` (window and modal form), `messageBox`, `confirm` |
-| Feedback | `ProgressBar`, `Spinner` (cover a panel), `Tooltip`, `Toast` |
+| Layout and windows | `Stack`, `Grid`, `DockPanel`, `Panel`, `GroupBox`, `SplitContainer`, `ScrollView` (pull to refresh, load more), `Sortable` (drag or keys, lists of a group), `FormLayout`, `Tabs`, `Accordion`, `MxForm` (window and modal form), `messageBox`, `confirm` |
+| Feedback | `ProgressBar`, `Spinner` (cover a panel), `LoadPanel`, `Tooltip`, `Popover`, `Toast` |
 | Shared parts | `Field` (base of every editor), `InputMask`, `ValidationGroup`, `validateFields`, `checkRules`, `OptionList`, `DataItems`, `Popup`, `MenuList`, date helpers (`datePatternOf`) |
 | Base | `Control`, `FocusContainer`, `addShortcut`, `parseAccessKey`, `uiLocale` (English, Turkish) |
 
@@ -127,12 +133,12 @@ own components. A full page per component, `Control`, keyboard and focus, and a
 
 ## Contributing
 
-The design system is a dependency by path until it is published: clone
-`motifjs-design-system` next to this repository and build it (`npm ci && npm run build` there), then
-`npm install` here links it. `npm run check` must stay green (typecheck, `motif-lint`, stylelint
-with the design system's shared config, tests, build, docs build). `npm run e2e` runs the
-real-browser checks (needs a local Chrome and `playwright-core`, see the script header).
-Discussions live in the main [motifjs repo](https://github.com/motifjsdev/motifjs).
+The design system, the translations and the data layer are dependencies by path until they are published: clone
+`motifjs-design-system`, `motifjs-i18n` and `motifjs-data` next to this repository and build each once, then
+`npm ci` here links them. `npm run check` must stay green (typecheck, `motif-lint`, stylelint with the design
+system's shared config, tests, build, docs build). The setup, the checks and the rules a change follows are in
+[CONTRIBUTING.md](CONTRIBUTING.md). Questions and ideas go to the
+[MotifJS discussions](https://github.com/motifjsdev/motifjs/discussions).
 
 ## License
 

package/dist/components/calendar/Calendar.d.ts

@@ -37,6 +37,12 @@ export declare class Calendar extends Control<HTMLDivElement, CalendarProps> {
     set currentView(value: Bind<CalendarView>);
     /** The date with the Tab stop; its month (or year) is the one on screen. */
     get focusedDate(): Date;
+    get rangeStart(): Date | null;
+    set rangeStart(value: Bind<Date | null>);
+    get rangeEnd(): Date | null;
+    set rangeEnd(value: Bind<Date | null>);
+    /** The pointer came over a day in the month view, or left the days (`null`). */
+    get onDayPointed(): MotifEvent<Date | null>;
     get onValueChanged(): MotifEvent<ValueChangedEventArgs<Date | null>>;
     /** Shows the month of `date` and puts the Tab stop on it. */
     goTo(date: Date): void;
@@ -54,6 +60,12 @@ export declare class Calendar extends Control<HTMLDivElement, CalendarProps> {
     /** The first and last day of what is on screen. */
     private shownRange;
     private renderMonth;
+    /** The range's ends in order, as days. */
+    private rangeOf;
+    /** Where a day stands in the range drawn: its start, its end, one day of both, or between. */
+    private rangeMark;
+    private pointedOver;
+    private point;
     /** The year view (twelve months) and the decade view (twelve years, one on each side). */
     private renderBlock;
     /** A month or a year can be chosen when one of its days can. */

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

@@ -22,5 +22,10 @@ export interface CalendarProps extends ControlProps {
     currentView?: Bind<CalendarView>;
     /** The view a choice is made in: `'year'` picks a month, `'decade'` a year. Default `'month'`. */
     minView?: Bind<CalendarView>;
+    /** A range drawn over the days (its ends and the days between), for a date range box; the value is still one day. */
+    rangeStart?: Bind<Date | null>;
+    rangeEnd?: Bind<Date | null>;
     onValueChanged?: (e: ValueChangedEventArgs<Date | null>) => void;
+    /** The pointer came over a day (`null`: it left the days). */
+    onDayPointed?: (day: Date | null) => void;
 }

package/dist/components/daterangebox/DateRangeBox.d.ts

@@ -0,0 +1,121 @@
+import { Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import type { DateKind } from "../../parts/dates/date-kind";
+import type { DatePattern } from "../../parts/dates/date-pattern";
+import { Field } from "../../parts/field/Field";
+import { OptionList } from "../../parts/list/OptionList";
+import { InputMask } from "../../parts/mask/InputMask";
+import { Popup } from "../../parts/popup/Popup";
+import type { PopupCloseReason } from "../../parts/popup/popup-close-reason";
+import type { ValidationRule } from "../../parts/validation/validation-rule";
+import { Calendar } from "../calendar/Calendar";
+import type { DateRange } from "./date-range";
+import type { DateRangeBoxProps } from "./date-range-box-props";
+import type { DateRangePreset } from "./date-range-preset";
+interface Parts {
+    startInput: HTMLInputElement;
+    endInput: HTMLInputElement;
+    separator: HTMLSpanElement;
+    startMask: InputMask;
+    endMask: InputMask;
+    pattern: DatePattern;
+    unfinished: [boolean, boolean];
+    toggle: HTMLButtonElement | null;
+    popup: Popup | null;
+    calendars: Calendar[];
+    presetList: OptionList<DateRangePreset> | null;
+    stage: 0 | 1;
+    opened: Emitter<void>;
+    closed: Emitter<PopupCloseReason>;
+}
+/**
+ * A start and an end date in one field: typed in the locale's order through two masks, or picked on the popup from
+ * two months side by side (the first pick the start, the second the end), from ready-made ranges (`presets`), with
+ * `min`, `max`, `disabledDates`, and the least and the most days a range may span (`minDays`, `maxDays`). The
+ * value is a `[start, end]` pair; `x-model` binds it.
+ *
+ * @example
+ * <DateRangeBox label="Stay" x-model={() => this.booking.nights} minDays={1} maxDays={30} presets />
+ * <DateRangeBox label="Report" type="datetime" calendars={1} />
+ */
+export declare class DateRangeBox extends Field<DateRange, DateRangeBoxProps> {
+    constructor(props?: IBaseProp<DateRangeBoxProps>);
+    get type(): Exclude<DateKind, 'time'>;
+    set type(value: Bind<Exclude<DateKind, 'time'>>);
+    get min(): Date | null;
+    set min(value: Bind<Date | null>);
+    get max(): Date | null;
+    set max(value: Bind<Date | null>);
+    get disabledDates(): ((date: Date) => boolean) | null;
+    set disabledDates(value: Bind<((date: Date) => boolean) | null>);
+    get minDays(): number | null;
+    set minDays(value: Bind<number | null>);
+    get maxDays(): number | null;
+    set maxDays(value: Bind<number | null>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get displayFormat(): Intl.DateTimeFormatOptions | null;
+    set displayFormat(value: Bind<Intl.DateTimeFormatOptions | null>);
+    get startPlaceholder(): string;
+    set startPlaceholder(value: Bind<string>);
+    get endPlaceholder(): string;
+    set endPlaceholder(value: Bind<string>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get showSeconds(): boolean;
+    set showSeconds(value: Bind<boolean>);
+    get firstDayOfWeek(): number | null;
+    set firstDayOfWeek(value: Bind<number | null>);
+    get showWeekNumbers(): boolean;
+    set showWeekNumbers(value: Bind<boolean>);
+    get showPickerButton(): boolean;
+    set showPickerButton(value: Bind<boolean>);
+    get calendars(): 1 | 2;
+    set calendars(value: Bind<1 | 2>);
+    get presets(): readonly DateRangePreset[] | boolean;
+    set presets(value: Bind<readonly DateRangePreset[] | boolean>);
+    get closeOnComplete(): boolean;
+    set closeOnComplete(value: Bind<boolean>);
+    /** The start, and the end, as properties of their own. */
+    get startDate(): Date | null;
+    set startDate(value: Date | null);
+    get endDate(): Date | null;
+    set endDate(value: Date | null);
+    /** The start's input; the end's is `endInputElement`. */
+    get inputElement(): HTMLInputElement;
+    get endInputElement(): HTMLInputElement;
+    /** A side's text is not a whole, real date yet. */
+    get unfinished(): boolean;
+    /** Whether the popup is open. Reactive. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the calendars; `false` when disabled or read-only. */
+    open(): boolean;
+    close(): void;
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): DateRange;
+    protected normalizeValue(value: DateRange): DateRange;
+    protected sameValue(a: DateRange, b: DateRange): boolean;
+    protected isEmptyValue(value: DateRange): boolean;
+    protected renderValue(value: DateRange): void;
+    protected builtInRules(): ValidationRule<DateRange>[];
+    written(date: Date | null | undefined): string;
+    get rangeParts(): Parts;
+    renderPattern(): void;
+    renderNames(): void;
+    listen(): void;
+    typed(side: 0 | 1, e: Event): void;
+    showDisplayText(): void;
+    renderToggle(): void;
+    renderClear(): void;
+    createPopup(): Popup;
+    fillPopup(): void;
+    presetsNow(): DateRangePreset[];
+    followMonths(calendar: Calendar, index: number): void;
+    picked(day: Date, event?: Event): void;
+    pointed(day: Date | null): void;
+    syncPicker(): void;
+}
+export {};

package/dist/components/daterangebox/date-range-box-props.d.ts

@@ -0,0 +1,35 @@
+import type { Bind } from '@motifx/core';
+import type { DateKind } from '../../parts/dates/date-kind';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { DateRange } from './date-range';
+import type { DateRangePreset } from './date-range-preset';
+/** Props of `DateRangeBox`: the field props (the value a `[start, end]` pair) plus its own. Each one is also a settable property. */
+export interface DateRangeBoxProps extends FieldProps<DateRange> {
+    /** `'date'` (the default) or `'datetime'`: the time is typed after the date, the calendars keep it. */
+    type?: Bind<Exclude<DateKind, 'time'>>;
+    min?: Bind<Date | null>;
+    max?: Bind<Date | null>;
+    disabledDates?: Bind<((date: Date) => boolean) | null>;
+    /** The least and the most days a range may span (the end counted from the start). */
+    minDays?: Bind<number | null>;
+    maxDays?: Bind<number | null>;
+    /** Default: the kit's language. It decides the order of the parts and the names of months and days. */
+    locale?: Bind<string>;
+    /** How the dates are shown while the field is not being edited, e.g. `{ dateStyle: 'medium' }`. */
+    displayFormat?: Bind<Intl.DateTimeFormatOptions | null>;
+    /** Shown in an empty box: the start's, and the end's. */
+    startPlaceholder?: Bind<string>;
+    endPlaceholder?: Bind<string>;
+    clearButton?: Bind<boolean>;
+    showSeconds?: Bind<boolean>;
+    firstDayOfWeek?: Bind<number | null>;
+    showWeekNumbers?: Bind<boolean>;
+    /** The button that opens the calendars. Default `true`. */
+    showPickerButton?: Bind<boolean>;
+    /** How many months the popup shows side by side. Default `2`. */
+    calendars?: Bind<1 | 2>;
+    /** Ready-made ranges beside the calendars: `true` for the kit's (today, yesterday, the last 7 and 30 days, this and last month), your own, or none. Default `false`. */
+    presets?: Bind<readonly DateRangePreset[] | boolean>;
+    /** Closes the popup once both ends are chosen. Default `true`. */
+    closeOnComplete?: Bind<boolean>;
+}

package/dist/components/daterangebox/date-range-preset.d.ts

@@ -0,0 +1,6 @@
+import type { DateRange } from './date-range';
+/** A ready-made range offered on the popup, made when it is chosen (so "today" is today's). */
+export interface DateRangePreset {
+    text: string;
+    range: () => DateRange;
+}

package/dist/components/daterangebox/date-range.d.ts

@@ -0,0 +1,2 @@
+/** A range of dates: its start and its end, either one `null` while not chosen. */
+export type DateRange = [Date | null, Date | null];

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

@@ -0,0 +1,4 @@
+export { DateRangeBox } from './DateRangeBox';
+export type { DateRange } from './date-range';
+export type { DateRangePreset } from './date-range-preset';
+export type { DateRangeBoxProps } from './date-range-box-props';

package/dist/components/fileuploader/FileUploader.d.ts

@@ -0,0 +1,133 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Field } from "../../parts/field/Field";
+import type { ValidationRule } from "../../parts/validation/validation-rule";
+import { Button } from "../button/Button";
+import { ProgressBar } from "../progress/ProgressBar";
+import type { FileUploaderProps } from "./file-uploader-props";
+import type { FilesAddedEventArgs } from "./files-added-event-args";
+import type { UploadEventArgs } from "./upload-event-args";
+import type { UploadItem } from "./upload-item";
+import type { UploadMode } from "./upload-mode";
+import type { UploadStatus } from "./upload-status";
+interface Parts {
+    select: HTMLButtonElement;
+    selectText: HTMLSpanElement;
+    input: HTMLInputElement;
+    drop: HTMLSpanElement;
+    uploadButton: HTMLButtonElement;
+    list: Component<HTMLUListElement> | null;
+    rows: Map<UploadItem, Row>;
+    items: UploadItem[];
+    jobs: Map<UploadItem, AbortController>;
+    dragDepth: number;
+}
+interface Row {
+    li: Component<HTMLLIElement>;
+    name: Component<HTMLSpanElement>;
+    size: Component<HTMLSpanElement>;
+    state: Component<HTMLSpanElement>;
+    bar: ProgressBar;
+    abort: Button;
+    retry: Button;
+    remove: Button;
+}
+/**
+ * Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as
+ * they come (`uploadUrl`, in one piece or in chunks, or your own `upload`), on an Upload button, or from code;
+ * progress, cancel, retry and remove on each. `accept`, `maxFileSize`, `minFileSize` and `maxFiles` turn files
+ * away, each listed with the reason. The value is the files taken; `x-model` binds it.
+ *
+ * @example
+ * <FileUploader label="Attachments" accept=".pdf,image/*" maxFileSize={5_000_000} uploadUrl="/api/files" x-model={() => this.form.files} />
+ * <FileUploader label="Photo" multiple={false} upload={(file, report, signal) => this.api.send(file, report, signal)} />
+ */
+export declare class FileUploader extends Field<readonly File[], FileUploaderProps> {
+    filesAdded: Emitter<FilesAddedEventArgs>;
+    fileRemoved: Emitter<UploadEventArgs>;
+    uploadStarted: Emitter<UploadEventArgs>;
+    progressed: Emitter<UploadEventArgs>;
+    uploaded: Emitter<UploadEventArgs>;
+    uploadFailed: Emitter<UploadEventArgs>;
+    uploadAborted: Emitter<UploadEventArgs>;
+    uploadWith: ((file: File, report: (fraction: number) => void, signal: AbortSignal) => Promise<unknown>) | null;
+    constructor(props?: IBaseProp<FileUploaderProps>);
+    get multiple(): boolean;
+    set multiple(value: Bind<boolean>);
+    get accept(): string;
+    set accept(value: Bind<string>);
+    get maxFileSize(): number | null;
+    set maxFileSize(value: Bind<number | null>);
+    get minFileSize(): number | null;
+    set minFileSize(value: Bind<number | null>);
+    get maxFiles(): number | null;
+    set maxFiles(value: Bind<number | null>);
+    get allowDrop(): boolean;
+    set allowDrop(value: Bind<boolean>);
+    get uploadMode(): UploadMode;
+    set uploadMode(value: Bind<UploadMode>);
+    get uploadUrl(): string | null;
+    set uploadUrl(value: Bind<string | null>);
+    get uploadMethod(): string;
+    set uploadMethod(value: Bind<string>);
+    get uploadHeaders(): Record<string, string> | null;
+    set uploadHeaders(value: Bind<Record<string, string> | null>);
+    get uploadField(): string;
+    set uploadField(value: Bind<string>);
+    get chunkSize(): number | null;
+    set chunkSize(value: Bind<number | null>);
+    get selectText(): string;
+    set selectText(value: Bind<string>);
+    get dropText(): string;
+    set dropText(value: Bind<string>);
+    get uploadText(): string;
+    set uploadText(value: Bind<string>);
+    get showFileList(): boolean;
+    set showFileList(value: Bind<boolean>);
+    /** Every file in the list, the refused ones too, with what happened to each. */
+    get items(): readonly UploadItem[];
+    /** An upload is running. */
+    get isUploading(): boolean;
+    get onFilesAdded(): MotifEvent<FilesAddedEventArgs>;
+    get onFileRemoved(): MotifEvent<UploadEventArgs>;
+    get onUploadStarted(): MotifEvent<UploadEventArgs>;
+    get onProgress(): MotifEvent<UploadEventArgs>;
+    get onUploaded(): MotifEvent<UploadEventArgs>;
+    get onUploadError(): MotifEvent<UploadEventArgs>;
+    get onUploadAborted(): MotifEvent<UploadEventArgs>;
+    /** Opens the browser's file dialog, as the button does. */
+    openDialog(): void;
+    /** Takes files as if chosen: the limits apply, `onFilesAdded` is asked, uploads start as the mode says. */
+    addFiles(files: Iterable<File>, event?: Event): void;
+    /** Uploads the files waiting (or one of them); `manual` mode calls this. */
+    upload(item?: UploadItem): Promise<void>;
+    /** Stops the upload of a file (or of every one); the file stays, listed as cancelled. */
+    abort(item?: UploadItem): void;
+    /** Takes a file out of the list and the value; a running upload is stopped. */
+    remove(item: UploadItem, event?: Event): void;
+    /** Takes every file out. */
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): readonly File[];
+    protected normalizeValue(value: readonly File[]): readonly File[];
+    protected sameValue(a: readonly File[], b: readonly File[]): boolean;
+    protected isEmptyValue(value: readonly File[]): boolean;
+    protected renderValue(value: readonly File[]): void;
+    protected builtInRules(): ValidationRule<readonly File[]>[];
+    get uploadParts(): Parts;
+    listen(): void;
+    drawTexts(): void;
+    drawList(): void;
+    makeRow(item: UploadItem): Row;
+    drawRow(item: UploadItem, row: Row): void;
+    setStatus(item: UploadItem, status: UploadStatus, progress?: number, message?: string): void;
+    stop(item: UploadItem): void;
+    uploadItem(item: UploadItem): Promise<void>;
+    send(file: File, url: string, report: (fraction: number) => void, signal: AbortSignal): Promise<unknown>;
+    request(url: string, blob: Blob, file: File, piece: {
+        index: number;
+        count: number;
+        start: number;
+        end: number;
+    } | null, loaded: (bytes: number) => void, signal: AbortSignal): Promise<unknown>;
+}
+export {};

package/dist/components/fileuploader/file-uploader-props.d.ts

@@ -0,0 +1,46 @@
+import type { Bind } from '@motifx/core';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { FilesAddedEventArgs } from './files-added-event-args';
+import type { UploadEventArgs } from './upload-event-args';
+import type { UploadMode } from './upload-mode';
+/** Props of `FileUploader`: the field props (the value the files taken) plus its own. Each one is also a settable property. */
+export interface FileUploaderProps extends FieldProps<readonly File[]> {
+    /** Several files at once. Default `true`. */
+    multiple?: Bind<boolean>;
+    /** What may be chosen, as for an `<input type="file">`: `.png,.jpg`, `image/*`, `application/pdf`. */
+    accept?: Bind<string>;
+    /** Bytes. A file outside is listed as refused, with the reason. */
+    maxFileSize?: Bind<number | null>;
+    minFileSize?: Bind<number | null>;
+    /** How many files may be taken in all. */
+    maxFiles?: Bind<number | null>;
+    /** Files may be dropped on the box. Default `true`. */
+    allowDrop?: Bind<boolean>;
+    /** When files are uploaded: `instant` (as chosen), `button` (an Upload button), `manual` (`upload()` from code). Default `instant` with `uploadUrl` or `upload`, else `manual`. */
+    uploadMode?: Bind<UploadMode>;
+    /** Where files are sent, by the uploader itself (XMLHttpRequest, with progress). */
+    uploadUrl?: Bind<string | null>;
+    /** Default `'POST'`. */
+    uploadMethod?: Bind<string>;
+    uploadHeaders?: Bind<Record<string, string> | null>;
+    /** The form field the file is sent in. Default `'file'`. */
+    uploadField?: Bind<string>;
+    /** Bytes per request; the file goes in pieces, each with its `Content-Range`. Default: the whole file at once. */
+    chunkSize?: Bind<number | null>;
+    /** Your own upload instead of `uploadUrl`: report progress (0 to 1) and stop on the signal; what it resolves to is the response. */
+    upload?: (file: File, report: (fraction: number) => void, signal: AbortSignal) => Promise<unknown>;
+    /** The texts: the select button, the drop hint, the Upload button; the kit's when not given. */
+    selectText?: Bind<string>;
+    dropText?: Bind<string>;
+    uploadText?: Bind<string>;
+    /** The list of files under the box. Default `true`. */
+    showFileList?: Bind<boolean>;
+    /** Files were chosen or dropped; cancelable. */
+    onFilesAdded?: (e: FilesAddedEventArgs) => void;
+    onFileRemoved?: (e: UploadEventArgs) => void;
+    onUploadStarted?: (e: UploadEventArgs) => void;
+    onProgress?: (e: UploadEventArgs) => void;
+    onUploaded?: (e: UploadEventArgs) => void;
+    onUploadError?: (e: UploadEventArgs) => void;
+    onUploadAborted?: (e: UploadEventArgs) => void;
+}

package/dist/components/fileuploader/files-added-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { EventArgs } from '@motifx/core';
+import type { FileUploader } from './FileUploader';
+import type { UploadItem } from './upload-item';
+/** Files were chosen or dropped. `cancel = true` takes none of them; `refused` lists those the limits turned away. */
+export interface FilesAddedEventArgs extends EventArgs {
+    files: File[];
+    refused: UploadItem[];
+    source: FileUploader;
+}

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

@@ -0,0 +1,7 @@
+export { FileUploader } from './FileUploader';
+export type { FileUploaderProps } from './file-uploader-props';
+export type { UploadItem } from './upload-item';
+export type { UploadStatus } from './upload-status';
+export type { UploadMode } from './upload-mode';
+export type { UploadEventArgs } from './upload-event-args';
+export type { FilesAddedEventArgs } from './files-added-event-args';

package/dist/components/fileuploader/upload-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { FileUploader } from './FileUploader';
+import type { UploadItem } from './upload-item';
+/** Something happened to one file of the uploader. */
+export interface UploadEventArgs {
+    item: UploadItem;
+    file: File;
+    /** What went wrong, when it did. */
+    error?: unknown;
+    source: FileUploader;
+}

package/dist/components/fileuploader/upload-item.d.ts

@@ -0,0 +1,12 @@
+import type { UploadStatus } from './upload-status';
+/** A file in the uploader's list, with what happened to it. */
+export interface UploadItem {
+    file: File;
+    status: UploadStatus;
+    /** 0 to 1 while uploading. */
+    progress: number;
+    /** What the upload answered (the response, or what your `upload` returned). */
+    response: unknown;
+    /** Why it failed or was refused, in the kit's language or the server's words. */
+    message: string;
+}

package/dist/components/fileuploader/upload-mode.d.ts

@@ -0,0 +1,2 @@
+/** When files are uploaded: as soon as they are chosen, when the Upload button is pressed, or never by the uploader (`upload()` from code). */
+export type UploadMode = 'instant' | 'button' | 'manual';

package/dist/components/fileuploader/upload-status.d.ts

@@ -0,0 +1,2 @@
+/** Where a file stands: chosen and waiting, being uploaded, uploaded, failed, cancelled, or refused (its type, size or count). */
+export type UploadStatus = 'ready' | 'uploading' | 'done' | 'error' | 'aborted' | 'invalid';

package/dist/components/loadpanel/LoadPanel.d.ts

@@ -0,0 +1,70 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { Button } from "../button/Button";
+import { Spinner } from "../progress/Spinner";
+import type { LoadPanelProps } from "./load-panel-props";
+import type { LoadPanelTarget } from "./load-panel-target";
+/**
+ * A "loading" layer over a container or the whole page: a shade, a pane with a turning indicator and a message,
+ * a Cancel button when the work can be stopped. What is under it cannot be pressed or focused meanwhile; focus
+ * that was inside waits on the pane and comes back afterwards. It shows after `delay`, so quick work does not
+ * flash it. `value` (or `x-model`) shows and hides it; so do `show()` and `hide()`.
+ *
+ * @example
+ * <LoadPanel target={() => this.ordersPanel} message="Loading orders" x-model={() => this.state.loading} />
+ *
+ * const panel = new LoadPanel({ cancelable: true, onCancel: () => this.job.stop() });
+ * panel.show();
+ */
+export declare class LoadPanel extends Control<HTMLDivElement, LoadPanelProps> {
+    pane: Component<HTMLDivElement>;
+    spinner: Spinner;
+    messagePart: Component<HTMLDivElement>;
+    cancelButton: Button;
+    shownNow: boolean;
+    timer: ReturnType<typeof setTimeout> | null;
+    host: HTMLElement | null;
+    undo: (() => void) | null;
+    returnTo: HTMLElement | null;
+    telling: boolean;
+    shownEmitter: Emitter<void>;
+    hiddenEmitter: Emitter<void>;
+    cancelled: Emitter<void>;
+    constructor(props?: IBaseProp<LoadPanelProps>);
+    get target(): LoadPanelTarget;
+    set target(value: Bind<LoadPanelTarget>);
+    get message(): string;
+    set message(value: Bind<string>);
+    /** Shown or not. Reactive; setting it shows or hides. */
+    get value(): boolean;
+    set value(value: Bind<boolean>);
+    get delay(): number;
+    set delay(value: Bind<number>);
+    get shade(): boolean;
+    set shade(value: Bind<boolean>);
+    get showPane(): boolean;
+    set showPane(value: Bind<boolean>);
+    get showIndicator(): boolean;
+    set showIndicator(value: Bind<boolean>);
+    get cancelable(): boolean;
+    set cancelable(value: Bind<boolean>);
+    get cancelText(): string;
+    set cancelText(value: Bind<string>);
+    get closeOnOutside(): boolean;
+    set closeOnOutside(value: Bind<boolean>);
+    /** Whether it is on the screen now (after its delay). */
+    get isShown(): boolean;
+    get onShown(): MotifEvent<void>;
+    get onHidden(): MotifEvent<void>;
+    /** The Cancel button was pressed (or Escape); the panel hides after. */
+    get onCancel(): MotifEvent<void>;
+    /** Shows it over its target after `delay`; `false` when it is shown or waiting already. */
+    show(): boolean;
+    /** Hides it; what it covered can be used again, and focus goes back where it was. */
+    hide(): void;
+    /** What the Cancel button does: tells `onCancel`, then hides. */
+    cancel(): void;
+    mount(): void;
+    tell(value: boolean): void;
+    drawTexts(): void;
+}