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

package/docs/sortable.md

@@ -0,0 +1,213 @@
+# Sortable
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+Items the user puts in order by dragging them, with the pointer or a finger, or with the keys; lists of one group take each other’s items. A drop moves the element and tells you the indexes: your data stays yours.
+
+## Import
+
+```tsx
+import { Sortable } from '@motifx-community/ui';
+```
+
+## Children as items
+
+The JSX children are the items. Drag one, or focus it and press Ctrl + Down; `onReorder` says from where to where, and the app reorders its own data.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+/** Rows put in order by dragging, or with Ctrl + an arrow on the focused row; the app reorders its data when told. */
+export default function Basic() {
+    const s = reactive({ steps: ['Collect the order', 'Pack it', 'Print the label', 'Hand it over'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Steps"
+                class="so-steps"
+                onReorder={e => {
+                    const next = s.steps.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.steps = next;
+                    s.told = `"${next[e.toIndex]}" is step ${e.toIndex + 1} now`;
+                }}
+            >
+                <Panel variant="outline" padding="sm">
+                    Collect the order
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Pack it
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Print the label
+                </Panel>
+                <Panel variant="outline" padding="sm">
+                    Hand it over
+                </Panel>
+            </Sortable>
+            <output class="so-told">{() => s.told || `Order: ${s.steps.join(' → ')}`}</output>
+        </Stack>
+    );
+}
+```
+
+## Items from data, across lists
+
+`items` with an `itemTemplate` draws the rows from your data and keeps each row as the order changes. Two sortables of one `group` take each other’s items: `onRemove` and `onAdd` tell both sides, and each list draws its array again.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Sortable, Stack } from '@motifx-community/ui';
+
+interface Task {
+    id: number;
+    title: string;
+}
+
+// A task as a row.
+const row = (task: Task) => {
+    const panel = new Panel({ variant: 'outline', padding: 'sm' });
+    panel.element.textContent = task.title;
+    return panel;
+};
+
+/** Two lists of one group take each other's items; each list draws its own data and the app moves the task between arrays when told. */
+export default function Groups() {
+    const s = reactive({
+        todo: [{ id: 1, title: 'Write the brief' }, { id: 2, title: 'Book the room' }, { id: 3, title: 'Send the invites' }] as Task[],
+        done: [{ id: 4, title: 'Pick the date' }] as Task[]
+    });
+    const reorder = (key: 'todo' | 'done') => (e: { fromIndex: number; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+        s[key] = next;
+    };
+    // The item leaves one array when removed and joins the other when added: the lists draw themselves again.
+    const remove = (key: 'todo' | 'done') => (e: { fromIndex: number }) => (s[key] = s[key].filter((_, i) => i !== e.fromIndex));
+    const add = (key: 'todo' | 'done') => (e: { item: Task; toIndex: number }) => {
+        const next = s[key].slice();
+        next.splice(e.toIndex, 0, e.item);
+        s[key] = next;
+    };
+    return (
+        <Stack orientation="horizontal" gap="lg" style="inline-size: 100%">
+            <Stack gap="sm" grow>
+                <strong>To do</strong>
+                <Sortable<Task> label="To do" class="so-todo" group="tasks" items={() => s.todo} itemTemplate={row} onReorder={reorder('todo')} onRemove={remove('todo')} onAdd={add('todo')} style="min-block-size: 8rem" />
+            </Stack>
+            <Stack gap="sm" grow>
+                <strong>Done</strong>
+                <Sortable<Task> label="Done" class="so-done" group="tasks" items={() => s.done} itemTemplate={row} onReorder={reorder('done')} onRemove={remove('done')} onAdd={add('done')} style="min-block-size: 8rem" />
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## A handle, side by side, a refused drag
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Chip, Sortable, Stack } from '@motifx-community/ui';
+
+/** Chips side by side, moved by their handle only (the dots), with Ctrl + Left / Right on the handle; a drag may be refused. */
+export default function Handle() {
+    const s = reactive({ tags: ['Design', 'Build', 'Test', 'Ship', 'Locked'], told: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Sortable
+                label="Tags"
+                class="so-tags"
+                orientation="horizontal"
+                handle=".so-grip"
+                items={() => s.tags}
+                itemTemplate={tag => {
+                    const chip = new Chip({ text: tag });
+                    const grip = document.createElement('span');
+                    grip.className = 'mx-glyph so-grip';
+                    grip.dataset.icon = 'drag-dots';
+                    grip.setAttribute('aria-label', `Move ${tag}`);
+                    chip.element.prepend(grip);
+                    return chip;
+                }}
+                onDragStarting={e => {
+                    if (e.item === 'Locked') {
+                        e.cancel = true;
+                        s.told = 'Locked stays where it is.';
+                    }
+                }}
+                onReorder={e => {
+                    const next = s.tags.slice();
+                    next.splice(e.toIndex, 0, ...next.splice(e.fromIndex, 1));
+                    s.tags = next;
+                    s.told = next.join(', ');
+                }}
+            />
+            <output class="so-tags-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Dragging` | With the pointer after a few pixels; with a finger after a long press (a finger that moves before that scrolls). A copy follows the pointer, the item stays faint in its place, a line shows where it would land; the list scrolls near its edges. |
+| `Dropping` | The item’s element moves there at once and `onReorder` says from where to where: your data is yours to reorder. Across sortables of a group, `onRemove` and `onAdd` say the same on both sides. |
+| `Items from data` | With `items`, each item keeps its component as the order changes (the rows are keyed by item): reordering your array moves the rows, no row is made again. |
+| `Keys` | The focused item (its handle when there is one) takes Ctrl + Up / Down (Left / Right side by side), Ctrl + Home / End; each move is told to `onReorder` and read out. |
+| `Escape` | Cancels a drag; nothing moves. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `List` | A `group` named by `label`; the items are whatever you put in it. |
+| `Items` | One Tab stop that moves between the items with the keys; an item with a focusable part of its own keeps that. A handle is a button named by you. |
+| `Moves` | Each move by the keys is read out: “Moved to 2 of 5”. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-sortable` | The list. `data-orientation`, `data-sortable`, `data-drop-target` while a dragged item may land here. |
+| `.mx-sortable__item` | Each item. `data-dragging` on the one being dragged. |
+| `.mx-sortable__line` | The line where a drop would land. |
+| `.mx-sortable__ghost` | The copy after the pointer. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `sortable.container, .item, .line, .ghost` | Units: the list (`target`), an item (`sortable`, `dragging`, `focus`), the line (its thickness and colour; standing in a horizontal list), the copy. |
+| `sortable.gap` | Between the items. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly T[]>` | — | The items, each drawn with `itemTemplate`; without them the JSX children are the items. |
+| `itemTemplate` | `(item, index) => ComponentBase` | the item’s text | Makes an item’s component. A function, so it is not bound like the other props. |
+| `handle` | `Bind<string \| null>` | `null` | A selector inside an item that takes the drag and the keys; without one the whole item does. |
+| `group` | `Bind<string \| null>` | `null` | Sortables of one group take each other’s items. |
+| `allowReordering` | `Bind<boolean>` | `true` | The items can be moved; `false` leaves them as they are. |
+| `orientation` | `Bind<SortableOrientation>` | `'vertical'` | `vertical` or `horizontal`: the drop line and the move keys follow. |
+| `label` | `Bind<string>` | `''` | What screen readers call the list. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onDragStarting` | event | A drag (or a move by the keys) is about to start (`item`, `fromIndex`); `cancel = true` refuses. |
+| `onDragChanging` | event | The place it would land changed (`to`, `toIndex`); `cancel = true` refuses that place. |
+| `onDragEnding` | event | About to drop; `cancel = true` leaves everything as it was. |
+| `onReorder` | event | An item moved within this sortable (`fromIndex`, `toIndex`, `item`), by a drop or the keys. Reorder your data here. |
+| `onRemove, onAdd` | event | An item went to another sortable of the group, and came into one: `from`, `to`, the indexes and the item. Move the data between your arrays here. |
+| `move(fromIndex, toIndex)` | `boolean` | Moves an item from code as a drop would, telling `onReorder`. |
+| `elements` | read-only | The items’ elements, in order. |
+| `isDragging` | read-only | An item is being dragged. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |

package/docs/stepper.md

@@ -0,0 +1,238 @@
+# Stepper
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+The steps of a longer task and where the user stands in them: an indicator and a text per step, a line between them, the steps before the current one completed. The [Wizard](wizard.md) adds a page and the buttons to each step.
+
+## Import
+
+```tsx
+import { Stepper } from '@motifx-community/ui';
+```
+
+## From JSX and from code
+
+The current step is `value`: a step’s `key`, else its index; `x-model` binds it two-way. From code, `next()`, `previous()` and `goTo()` move it and `onStepChanged` tells.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Stack, Stepper } from '@motifx-community/ui';
+
+/** A stepper bound with x-model, and one made from code and moved with its own methods. */
+export default function FromCode() {
+    const s = reactive({ step: 0 as string | number | null, at: 0, told: '' });
+    const coded = new Stepper({
+        label: 'Order',
+        items: ['Cart', 'Address', 'Payment', 'Done'],
+        linear: false,
+        onStepChanged: e => {
+            s.at = e.index;
+            s.told = `Step ${e.index + 1}${e.byUser ? ', pressed' : ''}`;
+        }
+    });
+
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Sign up" items={['Account', 'Profile', 'Review']} x-model={() => s.step} />
+            <output class="st-value">{() => `value: ${JSON.stringify(s.step)}`}</output>
+            <span onConfig={c => c.controls.add(coded)} />
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Back" variant="outline" enabled={() => s.at > 0} onclick={() => void coded.previous()} />
+                <Button text="Next" variant="outline" enabled={() => s.at < 3} onclick={() => void coded.next()} />
+                <output class="st-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Statuses
+
+The steps before the current one are completed by themselves. An item may say `status: 'done'` or `'error'` whatever the current step is, be `optional`, be disabled, or carry an `icon` in place of its number; its fields may be functions of your state.
+
+| Status | How |
+| --- | --- |
+| `pending` | A step to come: its number in the indicator. |
+| `current` | The step in hand: `aria-current="step"`. |
+| `done` | The steps before the current one, and any step whose item says `status: 'done'`: a check in the indicator, the line before it filled. |
+| `error` | A step whose item says `status: 'error'`: a mark in the indicator, the text in the danger colour; read out as “Needs attention”. |
+| `optional` | Says “Optional” under the text; in linear order it may be skipped. |
+| `disabled` | An item with `enabled: false`, or a step linear order does not reach yet: `aria-disabled`, out of the Tab order. |
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Stack, Stepper } from '@motifx-community/ui';
+
+const pencil = () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.innerHTML = '<path d="M11.5 2.5l2 2L5 13H3v-2z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>';
+    return svg;
+};
+
+/** Completed and failed steps told by the items, an optional step, a disabled one, an icon in place of the number. */
+export default function Statuses() {
+    const s = reactive({ paid: false });
+    const items = [
+        { text: 'Cart', status: 'done' as const },
+        { text: 'Address', description: 'Checked', status: 'done' as const },
+        { text: 'Payment', description: () => (s.paid ? 'Paid' : 'Card declined'), status: () => (s.paid ? 'done' : 'error') },
+        { text: 'Gift note', optional: true, icon: pencil() },
+        { text: 'Pick-up', enabled: false },
+        { text: 'Done' }
+    ];
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stepper label="Statuses" items={items} value={5} linear={false} />
+            <Button text={() => (s.paid ? 'Decline the card' : 'Take the payment')} variant="outline" onclick={() => (s.paid = !s.paid)} />
+        </Stack>
+    );
+}
+```
+
+## In order, or free
+
+`linear` (the default) lets a press reach only the completed steps and the next one; `linear={false}` lets it reach any. Either way `onStepChanging` is asked first: `cancel` keeps the step, a `promise` waits for a check or a server.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { CheckBox, Stack, Stepper } from '@motifx-community/ui';
+
+/** In linear order a step is reached only after the ones before it; `onStepChanging` refuses a step while the box is unchecked. */
+export default function Linear() {
+    const s = reactive({ step: 0 as string | number | null, agreed: false, note: '' });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stepper
+                label="In order"
+                items={['Terms', 'Details', 'Confirm']}
+                x-model={() => s.step}
+                onStepChanging={e => {
+                    if (e.to > 0 && !s.agreed) {
+                        e.cancel = true;
+                        s.note = 'Accept the terms first.';
+                    } else {
+                        s.note = '';
+                    }
+                }}
+            />
+            <CheckBox label="I accept the terms" x-model={() => s.agreed} />
+            <output class="st-note">{() => s.note}</output>
+        </Stack>
+    );
+}
+```
+
+## Orientations
+
+```tsx
+import { Stack, Stepper } from '@motifx-community/ui';
+
+const STEPS = [
+    { text: 'Details', description: 'Name and e-mail' },
+    { text: 'Address', description: 'Where to send it' },
+    { text: 'Payment', description: 'Card or transfer' },
+    { text: 'Review' }
+];
+
+/** Horizontal with the texts under or after the indicators, and vertical. */
+export default function Orientations() {
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Texts under" items={STEPS} value={1} linear={false} />
+            <Stepper label="Texts after" items={STEPS.slice(0, 3)} value={1} labelPosition="end" linear={false} />
+            <div style="inline-size: 18rem">
+                <Stepper label="Standing" items={STEPS} value={1} orientation="vertical" linear={false} />
+            </div>
+        </Stack>
+    );
+}
+```
+
+## Sizes
+
+```tsx
+import { Stack, Stepper } from '@motifx-community/ui';
+
+const STEPS = ['Plan', 'Build', 'Ship'];
+
+/** Three sizes, and a stepper without numbers. */
+export default function Sizes() {
+    return (
+        <Stack gap="lg" style="inline-size: 100%">
+            <Stepper label="Small" items={STEPS} value={1} size="sm" linear={false} />
+            <Stepper label="Medium" items={STEPS} value={1} linear={false} />
+            <Stepper label="Large" items={STEPS} value={1} size="lg" linear={false} />
+            <Stepper label="Dots" items={STEPS} value={1} showNumbers={false} size="sm" labelPosition="end" linear={false} />
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | One stop: the step focused last, else the current one, else the first that can be reached. |
+| `Arrow keys` | Left and Right (Up and Down standing) move between the steps that can be reached, around the ends; Home and End go to the first and the last. |
+| `Enter, Space` | Choose the focused step; `onStepChanging` may refuse. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Landmark` | A `nav` named “Steps” in the kit language, holding an ordered list; several on one page: give each its own `label`. |
+| `A step` | A button whose name reads “Step 2 of 4, Address, Where to send it, Completed”: the position, the texts and the status are all in it. |
+| `Not clickable` | Plain elements: nothing to press, the current one still `aria-current`. |
+| `Lines and marks` | Decorative, hidden from readers. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-stepper` | The stepper. `data-orientation`, `data-labels`, `data-size`. |
+| `.mx-stepper__list, .mx-stepper__item` | The list and each step with its line. `data-status` on the item. |
+| `.mx-stepper__step` | The step: a button or a div. `data-status`, `aria-current`, `aria-disabled`. |
+| `.mx-stepper__indicator, .mx-stepper__number, .mx-stepper__mark, .mx-stepper__icon` | The circle, the number in it, the check or error mark, an icon of your own. |
+| `.mx-stepper__label, .mx-stepper__description, .mx-stepper__note` | The texts. |
+| `.mx-stepper__line` | The line to the next step. `data-status="done"` up to the current one. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `stepper.step, .indicator, .mark, .label, .description, .note, .line` | Units: the step (`hover`, `pressed`, `focus`, `disabled`, `current`, `done`, `error`), its indicator, the mark (`icon` per state), the texts, the line (`done`); the line turns a quarter in a vertical stepper. |
+| `stepper.size.*, .font-size.*, .padding.*` | The indicator, the text and the space around a step, per size. |
+| `stepper.description-font-size, .gap, .line-gap, .line-min-length` | The second line, the space between indicator and texts, and the line’s margins and least length. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly (StepperItem \| string)[]>` | `[]` | The steps in order: `StepperItem`s (`text`, `description`, `key`, `icon`, `status`, `optional`, `enabled`, `data`) or plain texts. |
+| `value` | `Bind<string \| number \| null>` | `0` | The current step: its `key`, else its index; `null` for none. `x-model` binds it two-way. |
+| `linear` | `Bind<boolean>` | `true` | A press reaches a completed step, or the one right after the last completed; optional steps may be skipped. |
+| `orientation` | `Bind<StepperOrientation>` | `'horizontal'` | `horizontal` or `vertical`. |
+| `labelPosition` | `Bind<StepperLabelPosition>` | `'bottom'` | Horizontal only: the texts under the indicator (`bottom`) or after it (`end`). |
+| `size` | `Bind<ControlSize>` | `'md'` | `sm`, `md`, `lg`. |
+| `clickable` | `Bind<boolean>` | `true` | `false` shows the way only: no buttons, no Tab stop. |
+| `showNumbers` | `Bind<boolean>` | `true` | The indicator of a step to come shows its number. |
+| `label` | `Bind<string>` | the kit’s “Steps” | What screen readers call it. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onStepChanging` | event | The current step is about to change (`from`, `to`, `fromItem`, `toItem`, `byUser`). `cancel = true` keeps it; `promise` set to a `Promise<boolean>` waits, and the step changes when it resolves to `true`. |
+| `onStepChanged` | event | The current step changed (`index`, `item`, `previous`, `byUser`). |
+| `selectedIndex` | read-only | The index of the current step; -1 when there is none. |
+| `count` | read-only | How many steps there are. |
+| `canGoNext, canGoPrevious` | read-only | There is an enabled step after, or before, the current one. |
+| `next(), previous()` | `Promise<boolean>` | Goes to the next or the previous enabled step; `false` when there is none or the change was refused. |
+| `goTo(step)` | `Promise<boolean>` | Goes to a step by index or key, whatever the order; `onStepChanging` is asked first. |
+| `statusOf(index)` | `StepperStatus` | `pending`, `current`, `done` or `error`, as drawn. |
+| `canReach(index)` | `boolean` | Whether a press may reach the step. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |

package/docs/switch.md

@@ -1,6 +1,6 @@
 # Switch
 
-> Choice · @motifx-community/ui 0.1.0-beta.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 An on / off switch with its caption: a track with a thumb that slides, an optional on / off text inside or next to it, read-only and required. A native checkbox with the switch role underneath.
 

package/docs/tabdocs-dock.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Dock and floating windows
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 Documents and whole groups float in windows of their own in the page and dock again into the documents' groups or into dock areas around them, which fold to the manager's edge. The mouse, the keys and the code do the same, through the same events.
 

package/docs/tabdocs-drag.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Drag and drop
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 Tabs and whole groups dragged as in a code editor: along a strip, to another group, beside a group or along an edge of the layout, between two managers, and the same moves from the keyboard. Every drop goes through the methods and events of what it does.
 

package/docs/tabdocs-menus.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Menus and keys
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 The commands around the tabs: context menus on tabs and on the empty strip, a searchable list of a group's documents, the app's own toolbar buttons, the recently used list, back and forward, reopening what was closed, locked groups, and the keys for all of them.
 

package/docs/tabdocs-mobile.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Tablet and phone
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 On a tablet and a phone a layout of groups, splits and dock areas does not fit as it is. The manager keeps the layout and shows it another way: the same documents, groups and areas, the same saved JSON, the content moved and never made again. It goes by its own width, not by the device; on a touch screen its tabs and buttons get larger.
 

package/docs/tabdocs-tabs.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Tabs
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 What a tab does in a code editor: preview tabs that the next preview replaces, pinned tabs that stay at the start, tabs that shrink, wrap or scroll, counts and colours, and the same document open in two groups.
 

package/docs/tabdocs-windows.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: New windows
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A document, a group or a floating window moves into a browser window of its own, and back. Its content moves with it, nothing is made again, and the new window is a part of the same manager: its tabs, menus, keys and drag work as they do here.
 

package/docs/tabdocs-workspace.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: A whole workspace
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A whole screen made of the kit's parts: a menu bar, the manager, a DataGrid with everything turned on, forms and a tool docked at the bottom. Each part is the same component it is on its own page; the manager only holds them.
 

package/docs/tabdocs.md

@@ -1,6 +1,6 @@
 # TabDocumentManager
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.0
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
 
 A document manager in the way code editors arrange files: documents in tabs, tabs in groups, groups split side by side and one under the other. A document's content is any component, a form, a grid or plain text, and it is moved, never made again, when its tab goes to another group. Everything the user does is a method too, asks first and reports after; the whole layout saves to JSON and comes back. Preview and pinned tabs, sizes and copies are on [Tabs](tabdocs-tabs.md); context menus, lists and keys on [Menus and keys](tabdocs-menus.md).
 

package/docs/tabs.md

@@ -1,6 +1,6 @@
 # Tabs
 
-> Navigation · @motifx-community/ui 0.1.0-beta.0
+> Navigation · @motifx-community/ui 0.1.0-beta.2
 
 Tabs show one panel at a time under a strip of tabs: from JSX or from code, closable, with icons and badges, scroll buttons when the tabs do not fit, four placements and panels built when they are first shown.
 
@@ -346,7 +346,7 @@ Tabs write one text: the close button's tooltip, `uiLocale.strings.close`. Every
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every component on the page, the tabs' close button included. */
@@ -354,7 +354,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/tagbox.md

@@ -1,6 +1,6 @@
 # TagBox
 
-> Data · @motifx-community/ui 0.1.0-beta.0
+> Data · @motifx-community/ui 0.1.0-beta.2
 
 Picks several items. The chosen ones are tags in the field, followed by a text input that searches the list; items come from memory or from a data source, and typed text can become a tag of its own.
 
@@ -341,7 +341,7 @@ export default function Validation() {
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, TagBox, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, TagBox, uiLocale } from '@motifx-community/ui';
 import { skills } from './skills';
 
 /** Switches the texts of every tag box on the page: remove buttons, “+3”, “Select all”. */
@@ -349,7 +349,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/textarea.md

@@ -1,6 +1,6 @@
 # TextArea
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A text field of several lines: a box that grows with the text or that the user drags bigger, a character counter, a clear button, Ctrl+Enter to send, and the label, help text and validation every field has.
 
@@ -217,7 +217,7 @@ The name of the clear button and the validation messages come from `uiLocale.str
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every field on the page, the clear button's name included. */
@@ -225,7 +225,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/textbox.md

@@ -1,6 +1,6 @@
 # TextBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A one-line text field with its label, help text and error: placeholder, prefix and suffix, buttons in the box, a clear button, a password that can be shown, a character counter, an input mask and validation — alone, in a group, or every field in a panel.
 
@@ -316,7 +316,7 @@ The names of the clear and password buttons and every validation message come fr
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the texts of every field on the page; errors already shown follow too. */
@@ -324,7 +324,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 (
     <>