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

package/docs/pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-> Navigation · @motifx-community/ui 0.1.0-beta.1
+> 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

@@ -0,0 +1,221 @@
+# Popover
+
+> 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.
+
+## Import
+
+```tsx
+import { Popover } from '@motifx-community/ui';
+```
+
+## Declarative and programmatic
+
+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 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: 'Programmatically', content: new Button({ text: 'OK', variant: 'outline', onclick: () => coded.close() }) });
+
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <Button ref={(b: Button) => (button = b)} text="Rename" variant="outline" />
+            <Popover target={() => button} title="New name" showClose x-model={() => s.open}>
+                <Stack orientation="horizontal" wrap align="center">
+                    <TextBox label="Name" x-model={() => s.name} />
+                    <Button text="Save" tone="accent" onclick={() => ((s.saved = s.name), (s.open = false))} />
+                </Stack>
+            </Popover>
+            <output class="po-saved">{() => (s.saved ? `Saved: ${s.saved}` : s.open ? 'Open' : 'Closed')}</output>
+            <a
+                href="#from-code"
+                class="po-link"
+                ref={(c: { element: HTMLElement }) => (link = c.element)}
+                onclick={(e: Event) => {
+                    e.preventDefault();
+                    coded.target = link;
+                    coded.toggle();
+                }}
+            >
+                A popover programmatically
+            </a>
+        </Stack>
+    );
+}
+```
+
+## While the pointer rests
+
+`showOn: 'hover'` opens it after `delay` while the pointer rests on the target, and when the target has keyboard focus; the pointer may move onto the popover. It closes `hideDelay` after the pointer leaves both.
+
+```tsx
+import { Avatar, Popover, Stack } from '@motifx-community/ui';
+
+/** A card that opens while the pointer rests on a name, or when the name has keyboard focus. */
+export default function Hover() {
+    let name!: HTMLElement;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <span>
+                Reviewed by{' '}
+                <a href="#ada" class="po-person" ref={(c: { element: HTMLElement }) => (name = c.element)} onclick={(e: Event) => e.preventDefault()}>
+                    Ada Lovelace
+                </a>
+            </span>
+            <Popover target={() => name} showOn="hover" placement="top" label="Ada Lovelace">
+                <Stack orientation="horizontal" align="center">
+                    <Avatar name="Ada Lovelace" size="lg" />
+                    <Stack>
+                        <strong>Ada Lovelace</strong>
+                        <span>Analytical Engine, Programs</span>
+                    </Stack>
+                </Stack>
+            </Popover>
+        </Stack>
+    );
+}
+```
+
+## Placements, the arrow and a width
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, CheckBox, Popover, Stack, type PopupPlacement } from '@motifx-community/ui';
+
+const PLACEMENTS: PopupPlacement[] = ['top-start', 'top', 'top-end', 'start', 'end', 'bottom-start', 'bottom', 'bottom-end'];
+
+/** Every placement; the arrow where the language draws one, and a width of its own. */
+export default function Placements() {
+    const s = reactive({ arrow: true, placement: 'bottom' as PopupPlacement });
+    let button!: Button;
+    return (
+        <Stack gap="md">
+            <Stack orientation="horizontal" wrap align="center">
+                {PLACEMENTS.map(placement => (
+                    <Button key={placement} text={placement} variant={() => (s.placement === placement ? 'solid' : 'outline')} size="sm" onclick={() => (s.placement = placement)} />
+                ))}
+                <CheckBox label="Arrow" x-model={() => s.arrow} />
+            </Stack>
+            <div style="display: flex; justify-content: center; padding: 3rem 0">
+                <Button ref={(b: Button) => (button = b)} text="Open" />
+            </div>
+            <Popover target={() => button} placement={() => s.placement} arrow={() => s.arrow} width="16rem" label="Placement">
+                <p>{() => `Placed at ${s.placement}; it moves to the other side when there is no room.`}</p>
+            </Popover>
+        </Stack>
+    );
+}
+```
+
+## Keeping it open
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Popover, Stack, TextArea } from '@motifx-community/ui';
+
+/** A press outside does not close it, and onClosing keeps it open while there is unsaved text; Escape and the button close it. */
+export default function Events() {
+    const s = reactive({ note: '', told: '' });
+    let button!: Button;
+    let pop!: Popover;
+    return (
+        <Stack orientation="horizontal" wrap align="center">
+            <Button ref={(b: Button) => (button = b)} text="Add a note" variant="outline" />
+            <Popover
+                ref={(p: Popover) => (pop = p)}
+                target={() => button}
+                title="Note"
+                closeOnOutside={false}
+                onClosing={e => {
+                    if (e.reason === 'escape' && s.note.trim() !== '') {
+                        e.cancel = true;
+                        s.told = 'Save or clear the note first.';
+                    }
+                }}
+                onClosed={reason => (s.told = `Closed: ${String(reason)}`)}
+            >
+                <Stack gap="sm">
+                    <TextArea label="Text" x-model={() => s.note} rows={3} />
+                    <Button text="Save" tone="accent" onclick={() => ((s.note = ''), pop.close())} />
+                </Stack>
+            </Popover>
+            <output class="po-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `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 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
+
+| Topic | How |
+| --- | --- |
+| `Role` | `dialog`, named by its title, else by `label`: give it one. |
+| `Target` | `aria-controls` and `aria-expanded`; `aria-haspopup="dialog"` when a press opens it. |
+| `Keyboard` | Tab moves through the content and out (which closes it); Escape closes and returns focus. A `hover` popover opens on keyboard focus too. |
+| `Arrow` | Decorative. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-popover` | The popover. `data-side` (`top`, `bottom`, `start`, `end`), `data-arrow`. |
+| `.mx-popover__arrow` | The arrow. |
+| `.mx-popover__header, .mx-popover__title, .mx-popover__close` | The header, its title and the close button. |
+| `.mx-popover__body` | The content. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `popover.surface, .arrow, .header, .title, .body` | Units: the surface (`focus`), the arrow (`display`, `size`, its fill and frame), the header, the title and the body. |
+| `popover.close` | Place: the close button’s look (`variant`). |
+| `popover.offset, .enter-offset, .header-gap` | The gap to the target, how far it comes in as it appears, the space between title and close button. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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 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. |
+| `showClose` | `Bind<boolean>` | `false` | A close button in the header. |
+| `width` | `Bind<string \| number \| null>` | `null` | A width of its own (a CSS length, or pixels). |
+| `closeOnOutside` | `Bind<boolean>` | `true` | A press outside it and its target closes it. |
+| `delay, hideDelay` | `Bind<number>` | `300`, `200` | Milliseconds the pointer rests on the target before it opens, and it stays after the pointer leaves both (`showOn: 'hover'`). |
+| `value` | `Bind<boolean>` | `false` | Open or not; `x-model` binds it two-way. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `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` | 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.1
+> 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)} />
     </>
@@ -307,7 +307,7 @@ A bar or a spinner without a label is named `uiLocale.strings.loading`. The perc
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, ProgressBar, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, ProgressBar, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the name of unlabelled bars and spinners, and the language the percent is written in. */
@@ -315,7 +315,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/radiogroup.md

@@ -1,6 +1,6 @@
 # RadioGroup
 
-> Choice · @motifx-community/ui 0.1.0-beta.1
+> 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.1
+> 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.1
+> 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.1
+> 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.
 

package/docs/scheduler-editing.md

@@ -1,6 +1,6 @@
 # Scheduler: Editing
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Appointments are added, moved, resized, copied and deleted with the pointer, the keys and code; every change asks its event first, can wait for a server, and goes back when saving fails.
 
@@ -216,15 +216,15 @@ export default function Rules() {
 }
 ```
 
-## From code
+## Programmatic use
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Scheduler } from '@motifx-community/ui';
 import { sampleAppointments, type Meeting } from './sample-appointments';
 
-/** The same changes from code: add, move, delete, open the form for a new one. */
-export default function EditFromCode() {
+/** The same changes programmatically: add, move, delete, open the form for a new one. */
+export default function EditProgrammatically() {
   const state = reactive({ appointments: sampleAppointments(), said: '' });
   let scheduler: Scheduler<Meeting> | null = null;
   const tomorrow = (hour: number) => {
@@ -303,7 +303,7 @@ export default function EditFromCode() {
 | --- | --- |
 | `addAppointment(values)` | Adds where the appointments come from (pushed into the array, or inserted through the data source); resolves to it. |
 | `updateAppointment(appointment, changes)` | Changes its fields; resolves `false` when an event said no or saving failed. |
-| `deleteAppointment(appointment)` | Deletes it (no question from code). |
+| `deleteAppointment(appointment)` | Deletes it (no question programmatically). |
 | `showAppointmentForm(appointment?, cell?)` | The form for an appointment, or for a new one at `cell` (the selection by default). |
 | `showTooltip(appointment, anchor?) / hideTooltip()` | Its tooltip. |
 

package/docs/scheduler-form.md

@@ -1,6 +1,6 @@
 # Scheduler: The appointment form
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 The appointment form set up without events: which fields, in which order, in groups and tabs; editors of your own; checks per field; fields shown or locked for one appointment only. Or a form of your own.
 

package/docs/scheduler-icalendar.md

@@ -1,6 +1,6 @@
 # Scheduler: iCalendar and print
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Appointments out to an iCalendar file and back in (RFC 5545), for Outlook, Google Calendar and Apple Calendar; and the scheduler on paper.
 

package/docs/scheduler-mobile.md

@@ -1,6 +1,6 @@
 # Scheduler: Tablet and phone
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 On a tablet and a phone the scheduler keeps its appointments, views and date and shows them another way: a phone gets the agenda, a compact bar and sheets from the bottom; a finger lifts, resizes, swipes and pinches.
 

package/docs/scheduler-recurrence.md

@@ -1,6 +1,6 @@
 # Scheduler: Recurrence and time zones
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Appointments that repeat by an RFC 5545 rule, with times left out and occurrences changed apart; a question on what a change reaches; an editor of the rule; and the days on the clock of any time zone, summer time included.
 
@@ -198,7 +198,7 @@ export default function TimeZones() {
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `timeZone` | `Bind<string \| null>` | `null`: the browser's | The clock the days and hours are on, an IANA name (`Europe/Istanbul`). Converted with `Intl` only. |
-| `seriesEdit` | `Bind<'ask' \\| 'occurrence' \\| 'following' \\| 'series'>` | `'ask'` | What changing or deleting an occurrence reaches. `ask` asks the user; from code it is the occurrence unless the call says. |
+| `seriesEdit` | `Bind<'ask' \\| 'occurrence' \\| 'following' \\| 'series'>` | `'ask'` | What changing or deleting an occurrence reaches. `ask` asks the user; programmatically it is the occurrence unless the call says. |
 | `recurrenceMarks` | `Bind<boolean>` | `true` | The marks of an occurrence and of one changed apart, where the design language draws them. |
 | `editing.allowRecurrence` | `boolean` | `true` | The form holds the recurrence editor. |
 | `editing.allowTimeZones` | `boolean` | `false` | The form holds a time zone picker, and a box "Separate end time zone" (`separateEndZone` in the form’s data and `items`) that shows a picker for the end; unchecked, the end follows the start’s zone. Not on all-day appointments. |

package/docs/scheduler-resources.md

@@ -1,6 +1,6 @@
 # Scheduler: Resources and groups
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 Rooms, people and any other kind of resource: they colour the appointments, split the columns into groups (nested, or under each date), say when each one works and when nothing may be put in.
 

package/docs/scheduler-timeline.md

@@ -1,6 +1,6 @@
 # Scheduler: Timeline
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.1
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 A row per resource with the time running along it: a day, a week, a work week or a month. Appointments at the same time stack in their row, and the row grows to fit them.