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

package/docs/multiview.md

@@ -0,0 +1,202 @@
+# MultiView
+
+> Navigation · @motifx-community/ui 0.1.0-beta.3
+
+Pages side by side, one in sight: a swipe or a drag brings the next one, and so do `next()`, `previous()` and `goTo()`, or a [Tabs](tabs.md), a [Stepper](stepper.md) or buttons bound to the same value. The panels of a tab strip without the strip.
+
+## Import
+
+```tsx
+import { MultiView, View } from '@motifx-community/ui';
+```
+
+## Pages driven by a stepper
+
+The `View` children are the pages; the one in sight is `value` (a view’s `key`, else its index), `x-model` binds it two-way. Here a `Stepper` shares the value: a press on a step and a swipe on a page move both. A page is built when first in sight (`lazy`).
+
+```tsx
+import { reactive } from '@motifx/core';
+import { CheckBox, MultiView, Stack, Stepper, TextBox, View } from '@motifx-community/ui';
+
+/** A stepper and a multi-view bound to the same value: a press on a step or a swipe on a page moves both. */
+export default function Pages() {
+    const s = reactive({ page: 0 as string | number | null });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stepper class="mv-steps" label="Order" linear={false} items={['Address', 'Delivery', 'Payment']} x-model={() => s.page} />
+            <MultiView class="mv-order" label="Order" x-model={() => s.page}>
+                <View title="Address">
+                    <Stack gap="sm">
+                        <TextBox label="Street" />
+                        <TextBox label="Town" />
+                    </Stack>
+                </View>
+                <View title="Delivery">
+                    <Stack gap="sm">
+                        <CheckBox text="Leave it at the door" />
+                        <CheckBox text="Send a message before" />
+                    </Stack>
+                </View>
+                <View title="Payment">
+                    <Stack gap="sm">
+                        <TextBox label="Card number" />
+                        <TextBox label="Name on the card" />
+                    </Stack>
+                </View>
+            </MultiView>
+            <output class="mv-order-page">{() => `page: ${s.page}`}</output>
+        </Stack>
+    );
+}
+```
+
+## Built when first in sight, kept or not
+
+`lazy` (the default) builds a view when it first comes into sight and keeps it; `keepAlive={false}` disposes what a view’s `content` made while it is out of sight, and makes it again the next time. The JSX children stay either way, as in `Tabs`.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, MultiView, Stack, View } from '@motifx-community/ui';
+
+/** Each page is made when first in sight; with `keepAlive` off, what `content` made is dropped out of sight and made again. */
+export default function Lazy() {
+    const s = reactive({ made: 0, keep: true });
+    let views!: MultiView;
+    const report = (name: string) => () => {
+        s.made++;
+        return <p class="mv-lazy-page">{`${name}, made as number ${s.made}`}</p>;
+    };
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Previous" variant="outline" onclick={() => void views.previous()} />
+                <Button text="Next" variant="outline" onclick={() => void views.next()} />
+                <Button text="Keep alive" variant="outline" toggle x-model={() => s.keep} />
+                <output class="mv-lazy-made">{() => `made ${s.made} times`}</output>
+            </Stack>
+            <MultiView ref={(m: MultiView) => (views = m)} class="mv-lazy" label="Reports" keepAlive={() => s.keep}>
+                <View title="Sales" content={report('Sales')} />
+                <View title="Stock" content={report('Stock')} />
+                <View title="Staff" content={report('Staff')} />
+            </MultiView>
+        </Stack>
+    );
+}
+```
+
+## Programmatic use
+
+Made with `new`, views added with `add()` and `insert()`, removed with `remove()`; `loop` goes around the ends, `animated={false}` shows the next view at once.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, MultiView, Stack, View } from '@motifx-community/ui';
+
+/** A multi-view made programmatically around the ends: views added, inserted and removed, the sight moved with its methods. */
+export default function Programmatic() {
+    const s = reactive({ told: '', count: 0 });
+    let number = 0;
+    const page = () => {
+        number++;
+        const n = number;
+        return new View({ title: `Note ${n}`, content: () => <p class="mv-coded-note">{`Note ${n}`}</p> });
+    };
+    const coded = new MultiView({
+        label: 'Notes',
+        loop: true,
+        onSelectionChanged: e => (s.told = `in sight: ${e.view?.title ?? 'none'}${e.byUser ? ', by a swipe' : ''}`)
+    });
+    const count = () => (s.count = coded.count);
+    coded.add(page());
+    coded.add(page());
+    count();
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Previous" variant="outline" onclick={() => void coded.previous()} />
+                <Button text="Next" variant="outline" onclick={() => void coded.next()} />
+                <Button
+                    text="Add a note"
+                    variant="outline"
+                    onclick={() => {
+                        void coded.goTo(coded.add(page()));
+                        count();
+                    }}
+                />
+                <Button
+                    text="Remove this note"
+                    variant="outline"
+                    enabled={() => s.count > 1}
+                    onclick={() => {
+                        if (coded.selectedView) coded.remove(coded.selectedView);
+                        count();
+                    }}
+                />
+                <output class="mv-coded-told">{() => `${s.count} notes${s.told ? `, ${s.told}` : ''}`}</output>
+            </Stack>
+            <span class="mv-coded" onConfig={c => c.controls.add(coded)} />
+        </Stack>
+    );
+}
+```
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Group` | A `group` named “Pages” in the kit language; several on one page: give each its own `label`. |
+| `A view` | A `group` named by its `title`, else “Page 2 of 3”; the views out of sight are hidden from readers and from the keys (`inert`), so Tab moves only inside the view in sight. |
+| `Moving` | A swipe needs a finger or a mouse: give the keys a way too, a `Tabs`, a `Stepper` or buttons bound to the same `value`, as the examples do. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-multi-view` | The multi-view. `data-swipe` when a drag moves it, `data-dragging` while one does, `data-still` with `animated` off. |
+| `.mx-multi-view__viewport, .mx-multi-view__track` | The frame that clips the views and the track that slides in it (`data-dragging`, `data-no-motion`). |
+| `.mx-multi-view__view` | A view (`aria-hidden`, `inert` out of sight). |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `multi-view.frame, .view` | Units: the frame (`swipeable`, `dragging`) and a view. |
+| `multi-view.gap` | Between the views, seen while a finger drags them. |
+
+## API reference
+
+### MultiView props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `Bind<string \| number \| null>` | `0` | The view in sight: its `key`, else its index. `x-model` binds it two-way. |
+| `loop` | `Bind<boolean>` | `false` | After the last view comes the first; the move goes around the ends, not back across the views between. |
+| `swipeEnabled` | `Bind<boolean>` | `true` | A finger or a pointer drags the views; a drag far or fast enough lands on the next one. |
+| `animated` | `Bind<boolean>` | `true` | The views slide into sight. `false` shows the next one at once. |
+| `lazy` | `Bind<boolean>` | `true` | A view is built when first in sight, then kept (a view’s own `lazy` wins). |
+| `keepAlive` | `Bind<boolean>` | `true` | `false` disposes what a view’s `content` made while the view is out of sight (a view’s own `keepAlive` wins). |
+| `label` | `Bind<string>` | the kit’s “Pages” | What screen readers call it. |
+
+### View props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `Bind<string>` | “Page 2 of 3” | What screen readers call the view. |
+| `key` | `Bind<string>` | `''` | Names the view in `value`; the JSX `key` is read too. |
+| `content` | `() => ComponentBase \| ComponentBase[]` | — | Content made when the view is first in sight, besides the JSX children. |
+| `lazy, keepAlive` | `Bind<boolean \| undefined>` | `undefined` | The view’s own settings; `undefined` follows the multi-view. |
+| `visible, enabled` | `Bind<boolean>` | `true` | A hidden view takes no room and is skipped; a disabled one is skipped by `next()` and `previous()` and refused by `goTo()`. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onSelecting` | event | The view in sight is about to change (`from`, `to`, `fromView`, `toView`, `byUser`); `cancel = true` keeps the one there. |
+| `onSelectionChanged` | event | The view in sight changed (`index`, `view`, `previous`, `byUser`: by a swipe, else programmatically). |
+| `views` | read-only | The views in order, hidden ones too. |
+| `selectedView, selectedIndex` | read-only | The view in sight and its index; `null` and -1 when there is none. |
+| `count` | read-only | How many views there are. |
+| `next(), previous()` | `Promise<boolean>` | Goes to the next or the previous view that is shown and enabled; `false` at an end without `loop`, or when refused. |
+| `goTo(view)` | `Promise<boolean>` | Goes to a view, by index, key or the `View` itself; `onSelecting` is asked first. A view’s own `select()` does the same. |
+| `add(view), insert(index, view)` | `View` | Adds a view at the end or at an index; one from another multi-view moves here. |
+| `remove(view)` | `boolean` | Removes a view and disposes it; the sight moves to a neighbour. |

package/docs/numberbox.md

@@ -1,6 +1,6 @@
 # NumberBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 A number field: arrow keys, PageUp / PageDown and spin buttons that repeat while held, bounds, a step without float noise, a format for display (currency, percent) and typing in the locale’s own way.
 
@@ -10,9 +10,9 @@ A number field: arrow keys, PageUp / PageDown and spin buttons that repeat while
 import { NumberBox, type NumberBoxProps } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-`x-model` binds a number (`null` when empty). Created with `new`, the same properties are set from code.
+`x-model` binds a number (`null` when empty). Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -20,13 +20,13 @@ import { Button, NumberBox, Stack } from '@motifx-community/ui';
 
 const show = (value: number | null) => (value === null ? 'null' : String(value));
 
-/** A field bound to a number with x-model, and fields created with `new` and stepped from code. */
-export default function FromCode() {
+/** A field bound to a number with x-model, and fields created with `new` and stepped programmatically. */
+export default function Programmatic() {
   const s = reactive({ quantity: 3 as number | null, log: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const box = new NumberBox({ label: `Count ${++added}`, min: 0, max: 10, value: 5, locale: 'en' });
     box.onValueChanged((e) => (s.log = `${box.label}: ${show(e.value)}`));
     host?.controls.add(box);
@@ -41,7 +41,7 @@ export default function FromCode() {
         <output class="nb-quantity">{() => `value: ${show(s.quantity)}`}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a field from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a field programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="nb-log">{() => s.log}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
 Moving through pages of items: the sizes to choose from, where the page stands, the steps and a button per page around the current one. It turns compact when it does not fit. It looks and works as the grid’s pager.
 
@@ -10,7 +10,7 @@ Moving through pages of items: the sizes to choose from, where the page stands,
 import { Pagination } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
 `x-model` binds the page; `onPageChanged` tells the page size too, so the data can be loaded for both.
 
@@ -18,8 +18,8 @@ import { Pagination } from '@motifx-community/ui';
 import { reactive } from '@motifx/core';
 import { Pagination, Stack } from '@motifx-community/ui';
 
-/** The page bound with `x-model`, the sizes to choose from; one made with `new` from code. */
-export default function FromCode() {
+/** The page bound with `x-model`, the sizes to choose from; one made with `new` programmatically. */
+export default function Programmatic() {
   const s = reactive({ page: 3, size: 25 });
   const coded = new Pagination({ label: 'Pages made in code', total: 40, pageSize: 10, mode: 'full', showInfo: false });
 

package/docs/popover.md

@@ -1,6 +1,6 @@
 # Popover
 
-> Feedback · @motifx-community/ui 0.1.0-beta.2
+> Feedback · @motifx-community/ui 0.1.0-beta.3
 
 Content next to the element it belongs to: a title, a close button, a form, a card. It opens on a press or while the pointer rests on its target, follows it, and points at it with an arrow where the design language has one.
 
@@ -10,20 +10,20 @@ Content next to the element it belongs to: a title, a close button, a form, a ca
 import { Popover } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-The JSX children are the content; `target` names the element or component it opens next to. From code, `content` gives the content and `open()`, `close()` and `toggle()` move it; `value` and `x-model` say whether it is open.
+The JSX children are the content; `target` names the element or component it opens next to. Programmatically, `content` gives the content and `open()`, `close()` and `toggle()` move it; `value` and `x-model` say whether it is open.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Popover, Stack, TextBox } from '@motifx-community/ui';
 
-/** A popover with a title, a close button and a small form; one made from code for a plain element. */
+/** A popover with a title, a close button and a small form; one made programmatically for a plain element. */
 export default function Basic() {
     const s = reactive({ open: false, name: 'Ada', saved: '' });
     let button!: Button;
     let link!: HTMLElement;
-    const coded = new Popover({ title: 'From code', content: new Button({ text: 'OK', variant: 'outline', onclick: () => coded.close() }) });
+    const coded = new Popover({ title: 'Programmatically', content: new Button({ text: 'OK', variant: 'outline', onclick: () => coded.close() }) });
 
     return (
         <Stack orientation="horizontal" wrap align="center">
@@ -45,7 +45,7 @@ export default function Basic() {
                     coded.toggle();
                 }}
             >
-                A popover from code
+                A popover programmatically
             </a>
         </Stack>
     );
@@ -157,11 +157,11 @@ export default function Events() {
 
 | Topic | How |
 | --- | --- |
-| `Opening` | By a press on the target, by the pointer resting on it (`hover`), or from code. It appears in the browser’s top layer, next to the target, and follows it while the page scrolls. |
-| `Focus` | Opened by a press or from code, focus moves to the first focusable part inside, else to the popover; it goes back to the target when the popover closes. Opened by hover, focus stays where it is. |
+| `Opening` | By a press on the target, by the pointer resting on it (`hover`), or programmatically. It appears in the browser’s top layer, next to the target, and follows it while the page scrolls. |
+| `Focus` | Opened by a press or programmatically, focus moves to the first focusable part inside, else to the popover; it goes back to the target when the popover closes. Opened by hover, focus stays where it is. |
 | `Closing` | Escape, a press outside it and its target, focus leaving both (Tab out), the close button, the target pressed again, or the pointer leaving both (`hover`). `onClosing` may keep it open. |
 | `Placement` | `placement` names the side and the alignment, as for the kit’s popups; without room on that side it opens on the other. |
-| `Where it lives` | Made from code, it goes into the nearest container of its target that can hold it, so it stays in the target’s window and landmark. |
+| `Where it lives` | Made programmatically, it goes into the nearest container of its target that can hold it, so it stays in the target’s window and landmark. |
 
 ## Accessibility
 
@@ -198,7 +198,7 @@ export default function Events() {
 | `target` | `Bind<Element \| ComponentBase \| null>` | `null` | The element or component it opens next to. |
 | `title` | `Bind<string>` | `''` | A title in the header. The same property as `text`. |
 | `label` | `Bind<string>` | `''` | What screen readers call it when it has no title. |
-| `content` | `Bind<ComponentBase \| null>` | `null` | Content from code, after the JSX children. |
+| `content` | `Bind<ComponentBase \| null>` | `null` | Content programmatically, after the JSX children. |
 | `showOn` | `Bind<PopoverShowOn>` | `'click'` | `click`: a press on the target toggles it; `hover`: the pointer resting on the target, or keyboard focus on it; `manual`: only code. |
 | `placement` | `Bind<PopupPlacement>` | `'bottom'` | The side and the alignment; it opens on the other side when there is no room. |
 | `arrow` | `Bind<boolean>` | `true` | An arrow towards the target, where the design language draws one. |
@@ -215,7 +215,7 @@ export default function Events() {
 | `onOpened` | event | It opened. |
 | `onClosing` | event | About to close (`reason`); `cancel = true` keeps it open. |
 | `onClosed` | event | It closed, with the reason: `escape`, `outside`, `focus`, `toggle`, `hover`, `close-button`, `code`. |
-| `open(), close(reason?), toggle()` | `boolean` / `void` | From code; `open()` is `false` without a target on the page or when disabled. |
+| `open(), close(reason?), toggle()` | `boolean` / `void` | Programmatically; `open()` is `false` without a target on the page or when disabled. |
 | `place()` | `void` | Lines it up with its target again, after its content changed size. |
 | `isOpen` | read-only | Whether it is open now. |
 | `closeButton, body` | read-only | The close button (the kit’s) and the part that holds the content. |

package/docs/progress.md

@@ -1,6 +1,6 @@
 # ProgressBar and Spinner
 
-> Feedback · @motifx-community/ui 0.1.0-beta.2
+> Feedback · @motifx-community/ui 0.1.0-beta.3
 
 ProgressBar shows how far some work is, as a line or a circle, or that it runs when that is not known. Spinner says "busy, wait": a turning ring, alone or over a panel while it loads, shown only after a delay so quick work does not flash it.
 
@@ -10,16 +10,16 @@ ProgressBar shows how far some work is, as a line or a circle, or that it runs w
 import { ProgressBar, Spinner, type ProgressTone } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function; a function of a reactive object keeps the bar in step with the work. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function; a function of a reactive object keeps the bar in step with the work. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, ProgressBar, Stack } from '@motifx-community/ui';
 
-/** A bar that follows an upload, and bars created with `new` and added from code. */
-export default function FromCode() {
+/** A bar that follows an upload, and bars created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ upload: 0, uploading: false });
   let added = 0;
   let host: Stack | null = null;
@@ -36,7 +36,7 @@ export default function FromCode() {
     }, 120);
   };
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const bar = new ProgressBar({ label: `Task ${++added}`, showValue: true, tone: 'success' });
     bar.value = 25 * added;
     host?.controls.add(bar);
@@ -47,7 +47,7 @@ export default function FromCode() {
       <ProgressBar label="Uploading" value={() => s.upload} showValue stretch />
       <Stack orientation="horizontal" wrap align="center">
         <Button text="Upload" tone="accent" enabled={() => !s.uploading} onclick={upload} />
-        <Button text="Add a bar from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a bar programmatically" variant="outline" onclick={addProgrammatic} />
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />
     </>

package/docs/radiogroup.md

@@ -1,6 +1,6 @@
 # RadioGroup
 
-> Choice · @motifx-community/ui 0.1.0-beta.2
+> Choice · @motifx-community/ui 0.1.0-beta.3
 
 A set of options of which one is chosen: from plain values, from your own objects or from a live list; one under the other, side by side or in columns; options that are disabled, hidden or carry a help line; one Tab stop and the arrow keys.
 
@@ -10,20 +10,20 @@ A set of options of which one is chosen: from plain values, from your own object
 import { RadioGroup, type RadioItem } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-A plain value is its own text. `x-model` binds the chosen value two-way. Created with `new`, the same properties are set from code.
+A plain value is its own text. `x-model` binds the chosen value two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, RadioGroup, Stack } from '@motifx-community/ui';
 
-/** A group of plain values bound with x-model, and a group created with `new` and added from code. */
-export default function FromCode() {
+/** A group of plain values bound with x-model, and a group created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ size: 'M' as string | null, result: '' });
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const wrap = new RadioGroup<string>({ label: 'Gift wrap', orientation: 'horizontal', items: ['None', 'Paper', 'Box'], value: 'None' });
     wrap.onValueChanged((e) => (s.result = `Gift wrap: ${e.value}`));
     host?.controls.add(wrap);
@@ -34,7 +34,7 @@ export default function FromCode() {
     <>
       <RadioGroup label="&Size" items={['S', 'M', 'L', 'XL']} x-model={() => s.size} helpText={() => `Chosen: ${s.size ?? 'nothing'}`} />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a group from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a group programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="rg-result">{() => s.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/rating.md

@@ -1,6 +1,6 @@
 # Rating
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 A row of stars to give a score or to show one, whole or by halves. It is a field: label, help text, rules and `x-model` work as in every field.
 
@@ -10,7 +10,7 @@ A row of stars to give a score or to show one, whole or by halves. It is a field
 import { Rating } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
 Every prop takes a value or a function; `x-model` binds the score two-way. Under the pointer the stars show what a press would give.
 
@@ -18,8 +18,8 @@ Every prop takes a value or a function; `x-model` binds the score two-way. Under
 import { reactive } from '@motifx/core';
 import { Rating, Stack } from '@motifx-community/ui';
 
-/** A rating bound with `x-model`, with a label and a help line like any field; one made with `new` from code. */
-export default function FromCode() {
+/** A rating bound with `x-model`, with a label and a help line like any field; one made with `new` programmatically. */
+export default function Programmatic() {
   const s = reactive({ stars: 3 as number | null });
   const coded = new Rating({ label: 'Made in code', max: 10, value: 7 });
 

package/docs/resizable.md

@@ -0,0 +1,139 @@
+# Resizable
+
+> Navigation · @motifx-community/ui 0.1.0-beta.3
+
+A box the user resizes from its sides and corners with the pointer, or with the arrow keys on the grip in its end corner. It keeps to its least and most sizes, stays inside an area when told, and can keep its shape.
+
+## Import
+
+```tsx
+import { Resizable } from '@motifx-community/ui';
+```
+
+## Sides, corners and the grip
+
+The JSX children are the content. `handles` says which sides and corners take the pointer (`all` by default); the grip in the end corner is the Tab stop, and the arrow keys change the size by `step`. `minWidth`, `minHeight`, `maxWidth` and `maxHeight` hold it. A box laid out by its position (`absolute`, `fixed`) also moves when a start or top side is dragged, so the far side stays; one in the flow only changes size.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, Resizable, Stack } from '@motifx-community/ui';
+
+/** A box resized from any side or corner, never under 160 × 80 or over 480 × 240; the grip in the corner takes the keys. */
+export default function Basic() {
+    const s = reactive({ told: '' });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Resizable class="rs-box" width={280} height={140} minWidth={160} minHeight={80} maxWidth={480} maxHeight={240} onResized={e => (s.told = `${e.width} × ${e.height}, from the ${e.edge}`)}>
+                <Panel padding="md" variant="outline" text="A note" style="block-size: 100%">
+                    <p class="rs-note">Drag a side or a corner, or focus the grip and use the arrow keys.</p>
+                </Panel>
+            </Resizable>
+            <output class="rs-box-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Inside an area, keeping its shape
+
+`area` keeps the box inside its parent, or inside an element given; `keepAspectRatio` changes the other side along. Here only the end side, the bottom and the corner between them resize the picture.
+
+```tsx
+import { Resizable } from '@motifx-community/ui';
+import { scene } from '../../gallery/examples/scenes';
+
+/** A picture that keeps its shape and stays inside the dashed area; only the end side, the bottom and the corner resize it. */
+export default function Area() {
+    return (
+        <div class="rs-area" style="position: relative; inline-size: 100%; block-size: 260px; outline: 2px dashed var(--mx-color-stroke-control-strong); outline-offset: -2px">
+            <Resizable class="rs-picture" width={240} height={135} minWidth={120} minHeight={68} area="parent" keepAspectRatio handles={['end', 'bottom', 'bottom-end']} style="position: absolute; left: 16px; top: 16px">
+                <img src={scene(200)} alt="A harbour at dawn" style="display: block; inline-size: 100%; block-size: 100%; object-fit: cover" />
+            </Resizable>
+        </div>
+    );
+}
+```
+
+## Programmatic use
+
+`size` gives the size in pixels and `x-model` takes it back after every resize (`onResized` tells too): a layout kept and restored, or set by a button.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Panel, Resizable, Stack } from '@motifx-community/ui';
+
+/** The size goes out to x-model after every resize and comes back: set, kept and restored programmatically. */
+export default function Programmatic() {
+    const s = reactive({ size: { width: 240, height: 120 } as { width: number; height: number } | null, kept: null as { width: number; height: number } | null });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Resizable class="rs-coded" minWidth={120} minHeight={60} x-model={() => s.size}>
+                <Panel padding="md" variant="outline" style="block-size: 100%">
+                    <p class="rs-note">Sized by the model.</p>
+                </Panel>
+            </Resizable>
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Wider" variant="outline" onclick={() => (s.size = { width: (s.size?.width ?? 240) + 40, height: s.size?.height ?? 120 })} />
+                <Button text="Keep this size" variant="outline" onclick={() => (s.kept = s.size ? { ...s.size } : null)} />
+                <Button text="Restore it" variant="outline" enabled={() => !!s.kept} onclick={() => (s.size = s.kept ? { ...s.kept } : null)} />
+                <output class="rs-coded-told">{() => `size: ${JSON.stringify(s.size)}`}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | The grip in the end corner is the one stop. |
+| `Arrow keys` | On the grip: Left and Right change the width by `step` (the other way round in a right-to-left page), Up and Down the height; within the limits, the area and the ratio. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `The grip` | A button named “Resize” in the kit language; the new size is read out after every change (“Width 320, height 200”). |
+| `The handles` | Strips along the sides and corners for the pointer only, hidden from readers; the grip gives the keys the same. |
+| `Content` | The JSX children are the content, untouched: a panel, a picture, a form. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-resizable` | The box. `data-resizing` and `data-edge` while a handle is dragged; `data-disabled`. |
+| `.mx-resizable__frame, .mx-resizable__handle` | The frame over the box and its eight handles (`data-edge`, `data-active` while dragged, `hidden` when not asked for). |
+| `.mx-resizable__grip, .mx-resizable__grip-glyph` | The grip in the end corner and its glyph. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `resizable.box, .handle, .grip, .grip-glyph` | Units: the box (`resizing`), a handle (`hover`, `active`, `corner`), the grip (`hover`, `pressed`, `focus`) and its glyph (`icon`). |
+| `resizable.edge` | How wide a strip along a side takes the pointer; a corner takes twice that each way. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `handles` | `Bind<ResizeHandles>` | `'all'` | `all`, `edges`, `corners`, or a list of `top`, `bottom`, `start`, `end`, `top-start`, `top-end`, `bottom-start`, `bottom-end`. |
+| `minWidth, minHeight` | `Bind<number>` | `30` | The least width and height, in pixels. |
+| `maxWidth, maxHeight` | `Bind<number \| null>` | `null` | The most width and height, in pixels; `null` for no limit. |
+| `area` | `Bind<'parent' \| HTMLElement \| null>` | `null` | The box stays inside this: its parent, or an element it lies in. |
+| `keepAspectRatio` | `Bind<boolean>` | `false` | The width and the height keep their ratio. |
+| `step` | `Bind<number>` | `10` | Pixels an arrow key changes a side by. |
+| `width, height` | `Bind<number \| string \| null>` | `null` | The size to start with, a CSS length or pixels; without one the content decides. |
+| `size` | `Bind<ResizeSize \| null>` | `null` | The size in pixels: given, it is applied; after every resize the new one is written to `x-model`. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onResizeStarting` | event | A resize is about to begin from a handle (`edge`, `width`, `height`); `cancel = true` keeps the size. |
+| `onResizing` | event | The box is being resized (`edge`, `width`, `height` so far). |
+| `onResized` | event | A resize ended: the pointer let go, or a key moved a side. |
+| `currentSize` | read-only | The size in pixels now. |
+| `gripElement` | read-only | The grip in the end corner, the Tab stop that takes the keys. |

package/docs/scheduler-agenda.md

@@ -1,6 +1,6 @@
 # Scheduler: Agenda
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.2
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 The coming days as a list: each day with its appointments in time order, a day with none left out.
 

package/docs/scheduler-big-data.md

@@ -1,6 +1,6 @@
 # Scheduler: Big data
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.2
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Thousands of resources and appointments: the scheduler builds only what is in view, and lays out only what changed.