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

package/docs/daterangebox.md

@@ -0,0 +1,192 @@
+# DateRangeBox
+
+> Editors · @motifx-community/ui 0.1.0-beta.2
+
+A start and an end date in one field: typed through two masks, or picked on two months side by side, from ready-made ranges, within the dates and the span allowed. The value is a `[start, end]` pair.
+
+## Import
+
+```tsx
+import { DateRangeBox, type DateRange } from '@motifx-community/ui';
+```
+
+## From JSX and from code
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+const say = (d: Date | null) => (d ? d.toLocaleDateString('en-GB') : '—');
+
+/** A range bound with x-model, and one made from code and read through its properties. */
+export default function FromCode() {
+    const s = reactive({ stay: [new Date(2026, 2, 10), new Date(2026, 2, 14)] as DateRange, told: '' });
+    const coded = new DateRangeBox({ label: 'Report period', clearButton: true, onValueChanged: e => (s.told = `${say(e.value[0])} to ${say(e.value[1])}`) });
+
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                <DateRangeBox label="Stay" x-model={() => s.stay} clearButton />
+                <output class="dr-stay">{() => `${say(s.stay[0])} to ${say(s.stay[1])}`}</output>
+            </Stack>
+            <Stack orientation="horizontal" wrap align="center">
+                <span onConfig={c => c.controls.add(coded)} />
+                <Button text="This week" variant="outline" onclick={() => (coded.value = [new Date(2026, 2, 16), new Date(2026, 2, 22)])} />
+                <output class="dr-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Presets
+
+`presets` puts ready-made ranges beside the calendars: `true` for the kit’s, or your own, each made when it is chosen. `calendars={1}` shows one month.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { DateRangeBox, Stack, type DateRange, type DateRangePreset } from '@motifx-community/ui';
+
+const day = (offset: number) => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + offset);
+    return d;
+};
+
+// Ranges of our own, made when chosen so they are about today.
+const QUARTERS: DateRangePreset[] = [
+    { text: 'Next 3 days', range: () => [day(0), day(2)] },
+    { text: 'Next week', range: () => [day(1), day(7)] },
+    { text: 'Next 90 days', range: () => [day(0), day(89)] }
+];
+
+/** The kit's presets beside the calendars, and presets of your own. */
+export default function Presets() {
+    const s = reactive({ sales: [null, null] as DateRange, plan: [null, null] as DateRange });
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox label="Sales period" presets x-model={() => s.sales} />
+            <DateRangeBox label="Planning" presets={QUARTERS} calendars={1} x-model={() => s.plan} />
+        </Stack>
+    );
+}
+```
+
+## Limits
+
+`min`, `max` and `disabledDates` bound both ends, typed or picked; `minDays` and `maxDays` bound the span, and the calendars offer only the days within while the end is being picked. A failed rule says which.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+const today = new Date();
+const inMonths = (n: number) => new Date(today.getFullYear(), today.getMonth() + n, today.getDate());
+
+/** A stay of one to fourteen nights, within the next six months, never starting on a Sunday; the message says which rule failed. */
+export default function Limits() {
+    const s = reactive({ stay: [null, null] as DateRange, told: '' });
+    let box!: DateRangeBox;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox
+                ref={(b: DateRangeBox) => (box = b)}
+                label="Stay"
+                min={today}
+                max={inMonths(6)}
+                minDays={1}
+                maxDays={14}
+                disabledDates={d => d.getDay() === 0}
+                required
+                x-model={() => s.stay}
+            />
+            <Button text="Check" variant="outline" onclick={() => void box.validate().then(ok => (s.told = ok ? 'Fine.' : box.validationMessage))} />
+            <output class="dr-check">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## With a time, and in another locale
+
+```tsx
+import { reactive } from '@motifx/core';
+import { DateRangeBox, Stack, type DateRange } from '@motifx-community/ui';
+
+/** Date and time on both ends: the time is typed after the date, the calendars keep it; one box in Turkish. */
+export default function DateTime() {
+    const s = reactive({ shift: [new Date(2026, 2, 10, 8, 30), new Date(2026, 2, 10, 17, 0)] as DateRange, trip: [null, null] as DateRange });
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <DateRangeBox label="Shift" type="datetime" x-model={() => s.shift} displayFormat={{ dateStyle: 'short', timeStyle: 'short' }} />
+            <DateRangeBox label="Seyahat" locale="tr-TR" showWeekNumbers x-model={() => s.trip} startPlaceholder="gidiş" endPlaceholder="dönüş" />
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Typing` | Each side is a masked input in the locale’s order (`22.11.2006`); a whole, real date is taken as it is finished, an emptied side becomes `null`. Tab moves from the start to the end. |
+| `Picking` | On the popup the first pick is the start, the second the end: an earlier second pick becomes the start. With both chosen, the next pick starts a new range. While the end is being picked, the pointer shows the range it would make. |
+| `Two months` | The calendars show the start’s month and the next; paging one pages the other with it. |
+| `Presets` | A list beside the calendars; a press takes the range and closes. |
+| `Keyboard` | Alt+Down opens the popup; in it the calendars take the arrow keys, Enter picks; Escape closes, and clears the field when `clearButton` is on and the popup is closed. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Inputs` | Two text boxes named “<label>, Start date” and “<label>, End date” in the kit language; the field’s label marks the start. |
+| `Popup` | A dialog named “Choose date”; the calendars are the kit’s grids, the presets a list box. |
+| `Messages` | The rules speak in the kit language; a rule of your own in yours. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-date-range-box` | The field. `data-type`. |
+| `.mx-date-range-box__start, .mx-date-range-box__end, .mx-date-range-box__separator` | The inputs and the glyph between them. |
+| `.mx-date-range-box__toggle, .mx-date-range-box__clear` | The buttons in the box. |
+| `.mx-date-range-box__popup, .mx-date-range-box__calendar, .mx-date-range-box__presets` | The popup, each calendar, the presets. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `date-range-box.separator, .presets` | Units: the glyph between the inputs (`icon`, `bg`), the list of presets (`focus`, `beside`). |
+| `date-range-box.calendar` | Place: a calendar on the popup. |
+| `date-range-box.popup-gap` | Between the calendars and the presets. |
+| `calendar.cell range-start, range-end, range-single, range-in` | The calendar’s cells in a range: its ends and the days between, drawn by each language. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Bind<DateRange>` | `[null, null]` | The `[start, end]` pair; either `null` while not chosen. `x-model` binds it two-way. |
+| `type` | `Bind<'date' \| 'datetime'>` | `'date'` | With `datetime` the time is typed after the date; the calendars keep it. |
+| `min, max, disabledDates` | `Bind<Date \| null>`, `Bind<(d: Date) => boolean>` | — | The dates allowed, on both ends, typed or picked. |
+| `minDays, maxDays` | `Bind<number \| null>` | `null` | The least and the most days a range may span, the end counted from the start; while the end is picked the calendars offer only days within. |
+| `presets` | `Bind<readonly DateRangePreset[] \| boolean>` | `false` | `true`: the kit’s ready-made ranges beside the calendars (today, yesterday, the last 7 and 30 days, this and last month); your own as `{ text, range: () => DateRange }`. |
+| `calendars` | `Bind<1 \| 2>` | `2` | Months side by side on the popup; two stay a month apart as one is paged. |
+| `closeOnComplete` | `Bind<boolean>` | `true` | The popup closes once both ends are picked. |
+| `locale, displayFormat, firstDayOfWeek, showWeekNumbers, showSeconds` |  |  | As on the `DateBox`. |
+| `startPlaceholder, endPlaceholder` | `Bind<string>` | `''` | Shown in an empty box. |
+| `clearButton, showPickerButton` | `Bind<boolean>` | `false`, `true` | The clear button; the button that opens the calendars. |
+| `label, helpText, required, rules, readOnly, size, variant…` |  |  | The field props, as on every editor. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `startDate, endDate` | `Date \| null` | The ends as properties of their own. |
+| `inputElement, endInputElement` | read-only | The start’s and the end’s inputs. |
+| `open(), close(), opened` | `boolean` / `void` | The popup with the calendars; `onOpened`, `onClosed`. |
+| `clear()` | `void` | Empties both ends. |
+| `validate(), validationMessage, isValid` |  | As on every field: an unfinished date, a date outside `min`, `max` or `disabledDates`, a start after the end, a span under `minDays` or over `maxDays`. |
+| `onValueChanged` | event | The pair changed (`value`, `previousValue`, `byUser`). |

package/docs/drawer.md

@@ -1,6 +1,6 @@
 # Drawer
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 A panel that slides in from an edge of the page or of a container, over the content or pushing it aside. A finger swipes it in from the edge and back again; Escape, the scrim and the browser's back close it.
 

package/docs/dropdown.md

@@ -1,6 +1,6 @@
 # DropDown
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 Picks one item from a list. The field shows the chosen item; the list opens below it with the keyboard or a press, can be searched, grouped and drawn your way, and stays fast with thousands of items.
 
@@ -148,21 +148,22 @@ export const cities = ['Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Kon
 | `Groups` | Each group is `role="group"` named by its header. |
 | `Long lists` | Only the rows in view are drawn; each option says where it is with `aria-posinset` and `aria-setsize`. |
 | `Search` | The search box controls the list and names the highlighted option the same way. |
+| `Waiting` | While the value's item is asked for, the combobox is `aria-busy` and its text says "Loading…" to screen readers; a key the source does not have carries the reason as its title. |
 
 ## Localization
 
-The search box, the clear button and the empty list text come from `uiLocale.strings`.
+The search box, the clear button, the empty list text, the wait (`loading`) and the reason a key is marked (`notInList`, `loadFailed`) come from `uiLocale.strings`.
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, DropDown, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, DropDown, uiLocale } from '@motifx-community/ui';
 
 /** Switches the texts of every drop-down on the page: the search box, the clear button, the empty list. */
 export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>
@@ -177,8 +178,9 @@ export default function Localization() {
 
 | Hook | What it is |
 | --- | --- |
-| `.mx-drop-down` | Added to the field. `data-open` while the list is open; the field attributes of TextBox. |
-| `.mx-drop-down__display, .mx-drop-down__text, .mx-drop-down__chevron` | The combobox, the chosen text (`data-placeholder` when empty), the arrow. |
+| `.mx-drop-down` | Added to the field. `data-open` while the list is open, `data-loading` while the value's item is asked for; the field attributes of TextBox. |
+| `.mx-drop-down__display, .mx-drop-down__text, .mx-drop-down__chevron` | The combobox, the chosen text (`data-placeholder` when empty, `data-missing` for a key the source does not have), the arrow. |
+| `.mx-drop-down__spinner` | The spinner in the arrow's place while the value's item is asked for. |
 | `.mx-drop-down__popup, .mx-drop-down__search` | The popup and its search box. |
 | `.mx-list, .mx-list__item, .mx-list__header` | The list (shared), its options (`data-active`, `data-selected`) and group headers. |
 
@@ -187,6 +189,7 @@ export default function Localization() {
 | Token | What it sets |
 | --- | --- |
 | `field.*` | The field, as for TextBox. |
+| `drop-down.value, drop-down.chevron, drop-down.spinner, drop-down.spinner-shape` | Units: the chosen text (`placeholder`, `missing`, `disabled`), the arrow (`open`, `disabled`), the ring that turns while the value's item is asked for and the shape a language may draw instead (with the spinner's shapes and timing). |
 | `list.item-height, list.item` | The options: their row height, and the item unit in each state (`hover`, `pressed`, `active`, `selected`, `selected-hover`, `selected-pressed`, `disabled`, `next`, `select-all`). |
 | `list.indicator, list.check, list.mark, list.icon, list.text` | Units: the bar on the chosen option (`multiple`), the check of a list of several choices and its mark, an icon, the text. |
 | `list.container, list.group, list.header, list.select-all-divider, list.empty` | Units: the list (its space and most height), a group, group headers, the line under "Select all", the empty text. |
@@ -199,6 +202,9 @@ export default function Localization() {
 | --- | --- | --- | --- |
 | `value` | `Bind<V \| null>` | `null` | The value of the chosen item. `x-model` binds it two-way. |
 | `items` | `Bind<readonly T[]>` | `[]` | Plain values, `DropDownItem`s (`{ value, text, icon?, group?, enabled? }`) or objects of your own. A function is followed; items changed in place show after `refresh()`. |
+| `dataSource` | `Bind<DataSource<T> \| null>` | `null` | Items from the data layer, loaded where the list is scrolled to and searched on its `searchFields`. Wins over `items`. A value on no loaded page is asked for by key; meanwhile the field waits (see Lookup). |
+| `valueText` | `Bind<string>` | `''` | The value's text while its item is asked for from `dataSource`, shown at once instead of waiting (a record that carries the name: `valueText={() => order.customerName}`). |
+| `searchDelay` | `Bind<number>` | `250` with a data source, else `0` | Milliseconds between the last key in the search box and the search. |
 | `textField / valueField` | `Bind<ItemField<T>>` | `'text'` / `'value'` | A property name or a function `(item) => …`. Without `valueField` an object with a `value` gives that, anything else is its own value. |
 | `iconField, groupField, enabledField` | `Bind<ItemField<T>>` | — | An icon per option; options with the same group follow each other under its name; options that cannot be chosen. |
 | `placeholder` | `Bind<string>` | `''` | Shown while nothing is chosen. |
@@ -224,7 +230,7 @@ A prop whose value is a function of its own (`textField`, a template) takes the
 
 | Method | Returns | Description |
 | --- | --- | --- |
-| `open(search?)` | `boolean` | Opens the list; `search` starts the search box with that text. `false` when disabled or read-only. |
+| `open(search?)` | `boolean` | Opens the list; `search` starts the search box with that text. `false` when disabled, read-only, or while the value's item is asked for. |
 | `close()` | `void` | Closes it; focus goes back to the field. |
 | `clear()` | `void` | Empties the value. |
 | `refresh()` | `void` | Your items may be plain or reactive; the drop-down reads them as they are. After changing them in place, call `refresh()`. The field's text and the open list follow. |

package/docs/fileuploader.md

@@ -0,0 +1,201 @@
+# FileUploader
+
+> Editors · @motifx-community/ui 0.1.0-beta.2
+
+Files chosen with a button or dropped on the box, listed with their size and what happens to them: uploaded as they come, on a button or from code, with progress, cancel, retry and remove on each. Files outside the limits are listed with the reason.
+
+## Import
+
+```tsx
+import { FileUploader } from '@motifx-community/ui';
+```
+
+## Choosing, dropping, uploading
+
+`upload` is your own way to send a file: report progress, stop on the signal, resolve to the response. With `uploadUrl` instead, the uploader sends the file itself, in one piece or in chunks (`chunkSize`).
+
+```tsx
+import { reactive } from '@motifx/core';
+import { FileUploader, Stack } from '@motifx-community/ui';
+
+// Stands in for a server: takes two seconds per megabyte, reports as it goes, stops on the signal.
+const send = (file: File, report: (fraction: number) => void, signal: AbortSignal) =>
+    new Promise<string>((resolve, reject) => {
+        const steps = 20;
+        const wait = Math.max(600, Math.min(4000, (file.size / 1_000_000) * 2000)) / steps;
+        let step = 0;
+        const timer = setInterval(() => {
+            step++;
+            report(step / steps);
+            if (step === steps) {
+                clearInterval(timer);
+                resolve(`id-${file.name}`);
+            }
+        }, wait);
+        signal.addEventListener('abort', () => {
+            clearInterval(timer);
+            reject(new Error('stopped'));
+        });
+    });
+
+/** Files chosen or dropped go up as they come, through your own upload; each row shows progress, cancel, retry, remove. */
+export default function Basic() {
+    const s = reactive({ files: [] as readonly File[], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader
+                label="Attachments"
+                helpText="Any files; a stand-in server takes them."
+                upload={send}
+                x-model={() => s.files}
+                onUploaded={e => (s.told = `${e.file.name} is up as ${String(e.item.response)}.`)}
+                onUploadAborted={e => (s.told = `${e.file.name} was stopped.`)}
+            />
+            <output class="fu-told">{() => s.told || `${s.files.length} file(s) taken`}</output>
+        </Stack>
+    );
+}
+```
+
+## Limits
+
+```tsx
+import { reactive } from '@motifx/core';
+import { FileUploader, Stack } from '@motifx-community/ui';
+
+/** Only pictures and PDFs, up to 2 MB each and three in all; a file outside is listed with the reason. */
+export default function Limits() {
+    const s = reactive({ files: [] as readonly File[], refused: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader
+                label="Documents"
+                accept=".pdf,image/*"
+                maxFileSize={2_000_000}
+                maxFiles={3}
+                required
+                x-model={() => s.files}
+                onFilesAdded={e => (s.refused = e.refused.length ? e.refused.map(r => r.message).join(' ') : '')}
+            />
+            <output class="fu-refused">{() => s.refused}</output>
+        </Stack>
+    );
+}
+```
+
+## When files go up
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, FileUploader, Stack } from '@motifx-community/ui';
+
+const quick = (file: File, report: (fraction: number) => void) =>
+    new Promise<void>(resolve => {
+        let step = 0;
+        const timer = setInterval(() => {
+            report(++step / 10);
+            if (step === 10) {
+                clearInterval(timer);
+                resolve();
+            }
+        }, 120);
+    });
+
+/** An Upload button sends what was chosen; or nothing goes until code says so. One file only, no dropping. */
+export default function Modes() {
+    const s = reactive({ one: [] as readonly File[] });
+    let manual!: FileUploader;
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <FileUploader label="Photo" multiple={false} allowDrop={false} accept="image/*" upload={quick} uploadMode="button" x-model={() => s.one} />
+            <Stack orientation="horizontal" wrap align="center">
+                <FileUploader ref={(u: FileUploader) => (manual = u)} label="Logs" accept=".log,.txt" upload={quick} uploadMode="manual" />
+                <Button text="Send the logs" variant="outline" onclick={() => void manual.upload()} />
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Sending to a server
+
+The uploader posts a form with the file in `uploadField` (`file` by default) to `uploadUrl`, with `uploadHeaders`; a 2xx answer is the item’s `response`, JSON parsed when it is JSON. With `chunkSize` each piece carries `Content-Range` and the fields `chunkIndex` and `chunkCount`.
+
+```tsx
+<FileUploader
+  label="Attachments"
+  uploadUrl="/api/files"
+  uploadHeaders={{ Authorization: 'Bearer ' + token }}
+  chunkSize={1_000_000}
+  onUploaded={(e) => this.attachments.push(e.item.response as Attachment)}
+/>
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Choosing` | The button opens the file dialog; files may be dropped on the box too, which lights up while they are over it. |
+| `Refusing` | A file outside `accept`, the sizes or `maxFiles` is listed as refused with the reason, and is not in the value. |
+| `Uploading` | As chosen, on the Upload button, or from code. A row shows the progress and a Cancel button meanwhile; afterwards “Uploaded”, or the failure with Retry. The server’s answer is the item’s `response` (JSON parsed). |
+| `Chunks` | With `chunkSize` the file goes in pieces, each a request with `Content-Range: bytes start-end/total`; progress runs over the whole. |
+| `Removing` | Each row has a remove button; a running upload is stopped first. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Button` | The select button is the field’s control: the label marks it, Space and Enter open the dialog. |
+| `List` | A list of rows: the name, the size and the state as text; the progress bar named after the file; the buttons named “Cancel the upload of …”, “Retry”, “Remove …”. |
+| `Messages` | The reasons a file was refused and the failures speak in the kit language, or in the server’s words. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-file-uploader` | The field. `data-dragover` while files are over it. |
+| `.mx-file-uploader__select, .mx-file-uploader__drop, .mx-file-uploader__upload` | The select button, the hint, the Upload button. |
+| `.mx-file-uploader__list, .mx-file-uploader__item` | The list and each row. `data-status` on the row. |
+| `.mx-file-uploader__icon, __name, __size, __state, __progress, __actions, __action` | The parts of a row. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `file-uploader.over, .select, .upload, .hint, .list, .item, .icon, .name, .size, .state` | Units: the box with files over it, the two buttons (`hover`, `pressed`, `focus`, `disabled`), the hint, the list, a row per status, the file glyph, the texts. |
+| `file-uploader.field, .action` | Places: the field’s box as a drop zone (a dashed frame, its corners, its padding); the row’s buttons. |
+| `file-uploader.box-gap, .button-gap, .item-gap` | The spaces in the box, in a button and in a row. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Bind<readonly File[]>` | `[]` | The files taken (the refused ones are not in it). `x-model` binds it two-way. |
+| `multiple` | `Bind<boolean>` | `true` | Several files at once; `false` keeps one, the newest. |
+| `accept` | `Bind<string>` | `''` | What may be chosen, as for `<input type="file">`: `.png,.jpg`, `image/*`, `application/pdf`. |
+| `maxFileSize, minFileSize` | `Bind<number \| null>` | `null` | Bytes. A file outside is listed as refused, with the reason. |
+| `maxFiles` | `Bind<number \| null>` | `null` | How many files may be taken in all. |
+| `allowDrop` | `Bind<boolean>` | `true` | Files may be dropped on the box. |
+| `uploadMode` | `Bind<UploadMode>` | `instant` / `manual` | `instant`: as chosen; `button`: an Upload button; `manual`: `upload()` from code. Default `instant` with `uploadUrl` or `upload`, else `manual`. |
+| `uploadUrl, uploadMethod, uploadHeaders, uploadField` | `Bind<string \| null>`, … | `null`, `POST`, `null`, `file` | Where and how the uploader itself sends a file (XMLHttpRequest, with progress), as a form with the file in `uploadField`. |
+| `chunkSize` | `Bind<number \| null>` | `null` | Bytes per request: the file goes in pieces, each with its `Content-Range` and `chunkIndex` / `chunkCount` fields; the last answer is the response. |
+| `upload` | `(file, report, signal) => Promise<unknown>` | — | Your own upload instead of `uploadUrl`: call `report(0…1)` as it goes, stop on `signal`; what it resolves to is the response. |
+| `selectText, dropText, uploadText` | `Bind<string>` | the kit’s | The button, the hint beside it, the Upload button. |
+| `showFileList` | `Bind<boolean>` | `true` | The list of files under the box. |
+| `label, helpText, required, rules, readOnly, size, variant…` |  |  | The field props, as on every editor. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `items` | read-only | Every file in the list with what happened to it: `file`, `status` (`ready`, `uploading`, `done`, `error`, `aborted`, `invalid`), `progress`, `response`, `message`. |
+| `isUploading` | read-only | An upload is running. |
+| `openDialog()` | `void` | Opens the browser’s file dialog, as the button does. |
+| `addFiles(files)` | `void` | Takes files as if chosen: the limits apply, `onFilesAdded` is asked, uploads start as the mode says. |
+| `upload(item?)` | `Promise<void>` | Uploads the files waiting, or one of them; what `manual` mode calls. |
+| `abort(item?), remove(item), clear()` | `void` | Stops an upload (the file stays, cancelled); takes a file out; takes every file out. |
+| `onFilesAdded` | event | Files were chosen or dropped (`files`, `refused`); `cancel = true` takes none. |
+| `onFileRemoved, onUploadStarted, onProgress, onUploaded, onUploadError, onUploadAborted` | event | One file’s way through: each with `item` and `file`, a failure with `error`. |
+| `onValueChanged` | event | The files taken changed. |

package/docs/filterbuilder.md

@@ -1,6 +1,6 @@
 # FilterBuilder
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 A filter builder lets people put a filter together by hand: groups joined by And, Or, Not And or Not Or, and conditions of a field, an operation and a value. Its value is the data layer's filter expression, so it goes to rows in memory and to every adapter as it is. The DataGrid opens it from its filter panel; on its own it serves a report screen or a saved search.
 
@@ -574,7 +574,7 @@ export default function CustomOperations() {
 ```tsx
 import { reactive } from '@motifx/core';
 import { data } from '@motifx-community/data';
-import { Button, FilterBuilder, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, FilterBuilder, uiLocale } from '@motifx-community/ui';
 import { saleFields } from './sales';
 
 /** The builder's texts come from `uiLocale`; `texts` changes some for one builder only. */
@@ -582,7 +582,7 @@ export default function Localization() {
   const s = reactive({ lang: 'en' });
   const toggle = () => {
     s.lang = s.lang === 'en' ? 'tr' : 'en';
-    uiLocale.strings = s.lang === 'en' ? enStrings : trStrings;
+    void uiLocale.use(s.lang);
   };
   return (
     <>

package/docs/formlayout.md

@@ -1,6 +1,6 @@
 # FormLayout
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Lays out the fields of a data object on a grid. Each field gets an editor — by name, or by the type of its value — bound to the object both ways; groups, spans and buttons arrange them; sending the form checks every field first.
 

package/docs/home.md

@@ -1,6 +1,6 @@
 # @motifx-community/ui
 
-> Get started · @motifx-community/ui 0.1.0-beta.0
+> Get started · @motifx-community/ui 0.1.0-beta.2
 
 Components for MotifJS that work the way desktop UI does — created when needed, shown anywhere, closed and disposed like windows — drawn from the MotifJS design system's tokens.
 

package/docs/keyboard.md

@@ -1,6 +1,6 @@
 # Keyboard and focus
 
-> Foundations · @motifx-community/ui 0.1.0-beta.0
+> Foundations · @motifx-community/ui 0.1.0-beta.2
 
 The rules every control follows: Tab order, the active control of a container, focus that never falls to `<body>`, `&File` access keys and app-wide shortcuts.