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

package/docs/splitter.md

@@ -0,0 +1,204 @@
+# Splitter
+
+> Navigation · @motifx-community/ui 0.1.0-beta.3
+
+Panes side by side or one under the other, as many as needed, with a handle between each two that the pointer drags and the keys move. A handle resizes the two panes beside it; a pane may be hidden from its handle, and may hold another splitter. For two panes with one fixed, see [SplitContainer](layout.md).
+
+## Import
+
+```tsx
+import { Splitter, SplitPane } from '@motifx-community/ui';
+```
+
+## Pixels, shares and the rest
+
+Each `SplitPane` says its `size`: pixels stay pixels when the splitter changes size, a share (`'30%'`) divides the room the shares get, and a pane without a size takes an equal part of what is left. `minSize` and `maxSize` hold the handles. Drag a handle, or focus it and use the arrow keys, Home and End.
+
+```tsx
+import { SplitPane, Splitter } from '@motifx-community/ui';
+
+/** Three panes: a fixed one in pixels with a least size, one that takes what is left, and a share. */
+export default function Basic() {
+    return (
+        <Splitter class="sp-basic" style="block-size: 240px">
+            <SplitPane size={220} minSize={140} padding="md" text="Folders">
+                <p class="sp-note">Folders, 220 px to start, never under 140.</p>
+            </SplitPane>
+            <SplitPane minSize={120} padding="md" text="Messages">
+                <p class="sp-note">Messages take what the others leave.</p>
+            </SplitPane>
+            <SplitPane size="30%" minSize={100} padding="md" text="Preview">
+                <p class="sp-note">Preview, three tenths of the room the shares divide.</p>
+            </SplitPane>
+        </Splitter>
+    );
+}
+```
+
+## Hiding a pane
+
+A `collapsible` pane gets a button on the handle next to it; Enter on the handle and a double press do the same. The neighbours take its room, and it comes back where it was. `onCollapsing` may refuse, `onCollapsed` tells.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { SplitPane, Splitter, Stack } from '@motifx-community/ui';
+
+/** The side panes can be hidden: a button on the handle, Enter on it, or a double press; the middle one cannot. */
+export default function Collapsible() {
+    const s = reactive({ told: '' });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Splitter class="sp-fold" style="block-size: 200px" onCollapsed={e => (s.told = `${e.pane.text} ${e.collapsed ? 'hidden' : 'shown'}`)}>
+                <SplitPane size={180} minSize={120} collapsible padding="md" text="Tree">
+                    <p class="sp-note">Tree</p>
+                </SplitPane>
+                <SplitPane minSize={160} padding="md" text="Page">
+                    <p class="sp-note">Page</p>
+                </SplitPane>
+                <SplitPane size={200} minSize={120} collapsible padding="md" text="Properties">
+                    <p class="sp-note">Properties</p>
+                </SplitPane>
+            </Splitter>
+            <output class="sp-fold-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## One inside another
+
+A pane is a `Panel`: put a `Splitter` of the other `orientation` in it for an editor over an output, next to a tree.
+
+```tsx
+import { SplitPane, Splitter } from '@motifx-community/ui';
+
+/** A pane may hold another splitter: here the right pane is split the other way. */
+export default function Nested() {
+    return (
+        <Splitter class="sp-nested" style="block-size: 260px">
+            <SplitPane size={200} minSize={120} padding="md" text="Navigation">
+                <p class="sp-note">Navigation</p>
+            </SplitPane>
+            <SplitPane minSize={200}>
+                <Splitter class="sp-inner" orientation="vertical">
+                    <SplitPane minSize={80} padding="md" text="Editor">
+                        <p class="sp-note">Editor</p>
+                    </SplitPane>
+                    <SplitPane size={90} minSize={60} collapsible padding="md" text="Output">
+                        <p class="sp-note">Output</p>
+                    </SplitPane>
+                </Splitter>
+            </SplitPane>
+        </Splitter>
+    );
+}
+```
+
+## Keeping the layout
+
+After every move the panes’ pixels are written to `x-model` (and `onResized` tells). Give them back as `sizes` to restore a layout; `null` starts from the panes’ own sizes again.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, SplitPane, Splitter, Stack } from '@motifx-community/ui';
+
+/** The sizes go out to x-model as pixels after every move, and come back: a layout kept and restored. */
+export default function Sizes() {
+    const s = reactive({ sizes: null as readonly (number | string | null)[] | null, kept: null as readonly number[] | null, moved: 0 });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Splitter class="sp-sizes" style="block-size: 180px" x-model={() => s.sizes} onResized={() => s.moved++}>
+                <SplitPane size={160} minSize={80} padding="md" text="Left">
+                    <p class="sp-note">Left</p>
+                </SplitPane>
+                <SplitPane minSize={80} padding="md" text="Middle">
+                    <p class="sp-note">Middle</p>
+                </SplitPane>
+                <SplitPane size={160} minSize={80} padding="md" text="Right">
+                    <p class="sp-note">Right</p>
+                </SplitPane>
+            </Splitter>
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Keep this layout" variant="outline" onclick={() => (s.kept = (s.sizes as number[] | null)?.slice() ?? null)} />
+                <Button text="Restore it" variant="outline" enabled={() => !!s.kept} onclick={() => (s.sizes = s.kept)} />
+                <Button text="Start again" variant="outline" onclick={() => (s.sizes = null)} />
+                <output class="sp-sizes-told">{() => `sizes: ${JSON.stringify(s.sizes)}, moved ${s.moved} times`}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | Each handle that can move or hide a pane is a stop, between the panes it lies between. |
+| `Arrow keys` | Left and Right (Up and Down one under the other) move the handle by `step` pixels, within the panes’ least and most sizes; the other way round in a right-to-left page. |
+| `Home, End` | Give the pane before the handle its least, or its most. |
+| `Enter` | Hides the pane before the handle, or shows it again; when that pane cannot be hidden, the one after. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `A handle` | A `separator` named “Resize” in the kit language, with `aria-controls` on the pane before it, `aria-orientation`, and `aria-valuenow` as that pane’s share of the two beside the handle. |
+| `Fold buttons` | Buttons named “Hide the pane” and “Show the pane”, out of the Tab order: Enter on the handle does the same. |
+| `A hidden pane` | Out of sight and `inert`; focus inside it moves to the handle. |
+| `Panes` | A pane with a `text` is a `region` of that name. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-splitter` | The splitter. `data-orientation`, `data-dragging` while a handle is dragged. |
+| `.mx-splitter__pane` | A pane (a `Panel`). `data-collapsed` while hidden. |
+| `.mx-splitter__handle` | A handle. `data-resizable`, `data-dragging`. |
+| `.mx-splitter__grip, .mx-splitter__fold, .mx-splitter__fold-glyph` | The grip in the middle of a handle, the fold buttons at either end of it (`data-side`), their arrows. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `splitter.handle, .line, .grip, .fold, .fold-glyph, .pane` | Units: the handle (`focus`), the line along it (`active`, `disabled`), the grip (`active`, `disabled`), the fold buttons (`hover`, `pressed`, `focus`) and their arrows, a pane (`collapsed`). |
+| `splitter.size, .line-width, .active-width, .grip-length, .grip-thickness` | The handle’s thickness, the line’s, the line’s under the pointer, the grip’s size. |
+
+## API reference
+
+### Splitter props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientation` | `Bind<LayoutOrientation>` | `'horizontal'` | `horizontal`: the panes side by side; `vertical`: one under the other. |
+| `resizable` | `Bind<boolean>` | `true` | The handles can be dragged and moved with the keys (a pane’s own `resizable` wins). |
+| `collapsible` | `Bind<boolean>` | `false` | Every pane can be hidden from the handle next to it (a pane’s own `collapsible` wins). |
+| `step` | `Bind<number>` | `10` | Pixels an arrow key moves a handle. |
+| `sizes` | `Bind<readonly (number \| string \| null)[] \| null>` | `null` | The panes’ sizes in pane order (pixels, a share or `null`); given, they take the place of the panes’ own `size`. After a drag or a key the pixels are written to `x-model`. |
+
+### SplitPane props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `Bind<number \| string \| null>` | `null` | Pixels, a share (`'30%'`) of the room the shares divide, or `null` for an equal share of what is left. |
+| `minSize, maxSize` | `Bind<number>`, `Bind<number \| null>` | `0`, `null` | The least and the most it gets, in pixels. |
+| `collapsible` | `Bind<boolean \| undefined>` | `undefined` | The handles next to it can hide it; `undefined` follows the splitter. |
+| `collapsed` | `Bind<boolean>` | `false` | Hidden, the neighbours taking its room. |
+| `resizable` | `Bind<boolean>` | `true` | The handles next to it can change its size. |
+| `key` | `Bind<string>` | `''` | Names the pane; the JSX `key` is read too. |
+| `content` | `() => ComponentBase \| ComponentBase[]` | — | Content made with the pane, besides the JSX children. |
+| `padding, scrollable, variant, text` | as `Panel` |  | A pane is a `Panel`: its padding, its own scrolling, a frame, a name (a region). |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onResizing` | event | A handle is being dragged (`handle`, `sizes` in pixels). |
+| `onResized` | event | A drag ended or a key moved a handle (`handle`, `sizes`). |
+| `onCollapsing` | event | A pane is about to be hidden or shown again (`pane`, `index`, `collapsed`, `byUser`); `cancel = true` leaves it. |
+| `onCollapsed` | event | A pane was hidden or shown again. |
+| `panes` | read-only | The panes in order, hidden ones too. |
+| `currentSizes` | read-only | The panes’ pixels along the split now; 0 for a hidden pane. |
+| `count` | read-only | How many panes there are. |
+| `add(pane), insert(index, pane)` | `SplitPane` | Adds a pane at the end or at an index. |
+| `remove(pane)` | `boolean` | Removes a pane and disposes it. |
+| `collapse(pane), expand(pane)` | `boolean` | Hides a pane (by index or the pane itself), or shows it again; `onCollapsing` is asked first. A pane’s own `collapse()` and `expand()` do the same. |

package/docs/stepper.md

@@ -1,6 +1,6 @@
 # Stepper
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -10,16 +10,16 @@ The steps of a longer task and where the user stands in them: an indicator and a
 import { Stepper } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-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.
+The current step is `value`: a step’s `key`, else its index; `x-model` binds it two-way. Programmatically, `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() {
+/** A stepper bound with x-model, and one made programmatically and moved with its own methods. */
+export default function Programmatic() {
     const s = reactive({ step: 0 as string | number | null, at: 0, told: '' });
     const coded = new Stepper({
         label: 'Order',

package/docs/switch.md

@@ -1,6 +1,6 @@
 # Switch
 
-> Choice · @motifx-community/ui 0.1.0-beta.2
+> Choice · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -10,21 +10,21 @@ An on / off switch with its caption: a track with a thumb that slides, an option
 import { Switch } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Stack, Switch } from '@motifx-community/ui';
 
-/** A switch bound to state with x-model, and switches created with `new` and added from code. */
-export default function FromCode() {
+/** A switch bound to state with x-model, and switches created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ wifi: true, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const sw = new Switch({ label: `Feature ${++added}`, onText: 'On', offText: 'Off' });
     sw.onValueChanged((e) => (s.result = `${sw.label}: ${e.value ? 'on' : 'off'}`));
     host?.controls.add(sw);
@@ -35,7 +35,7 @@ export default function FromCode() {
     <>
       <Switch label="&Wi-Fi" x-model={() => s.wifi} helpText={() => (s.wifi ? 'Connected to Home.' : 'Not connected.')} />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a switch from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a switch programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="sw-result">{() => s.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/tabdocs-dock.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Dock and floating windows
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -568,14 +568,14 @@ export function fileDocument(path: string, extra: TabDocumentOptions = {}): TabD
 }
 ```
 
-`FloatFromCode.tsx`
+`FloatProgrammatically.tsx`
 
 ```tsx
 import { Button, Stack, TabDocumentManager } from '@motifx-community/ui';
 import { FILES, fileDocument } from './files';
 
 /** Floating windows by code: float a document, move, resize and maximize its window, dock it back or to a side, close it. */
-export default function FloatFromCode() {
+export default function FloatProgrammatically() {
   const docs = new TabDocumentManager({ label: 'Files to float' });
   docs.element.style.cssText = 'block-size: 28rem; inline-size: 100%';
   for (const file of FILES.slice(0, 5)) docs.open(fileDocument(file.path), { index: 99 });

package/docs/tabdocs-drag.md

@@ -1,6 +1,6 @@
 # TabDocumentManager: Drag and drop
 
-> TabDocumentManager · @motifx-community/ui 0.1.0-beta.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> TabDocumentManager · @motifx-community/ui 0.1.0-beta.3
 
 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).
 
@@ -131,7 +131,7 @@ export function customerCard(customer: Customer): ComponentBase {
 }
 ```
 
-## From code, and the events
+## Programmatic use, and the events
 
 Each thing the user does is also a method (`open`, `close`, `activate`, `split`, `move`, `closeGroup`, `focusGroup`, `maximizeGroup`, `restoreGroups`, `evenSizes`, `resizeGroup`), asks first through a cancelable `on…ing` event and reports through `on…ed`, with `byUser` telling the two apart.
 
@@ -731,7 +731,7 @@ export default function Options() {
 }
 ```
 
-`FromCode.tsx`
+`Programmatic.tsx`
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -739,14 +739,14 @@ import { Button, Stack, TabDocumentManager, type SplitDirection } from '@motifx-
 import { notes } from './contents';
 
 /** Everything the user does is a method too; the events report each change, by the user or by code. */
-export default function FromCode() {
+export default function Programmatic() {
   const log = reactive({ lines: [] as { id: number; text: string }[], next: 0, opened: 0 });
   const write = (text: string) => {
     log.lines.unshift({ id: log.next++, text });
     if (log.lines.length > 6) log.lines.pop();
   };
 
-  const docs = new TabDocumentManager({ label: 'Driven from code' });
+  const docs = new TabDocumentManager({ label: 'Driven programmatically' });
   docs.element.style.cssText = 'block-size: 28rem; inline-size: 100%';
   docs.onOpened((e) => write(`opened ${e.document.title} in group ${e.group.index + 1}`));
   docs.onClosed((e) => write(`closed ${e.document.title}${e.byUser ? ' (user)' : ''}`));

package/docs/tabs.md

@@ -1,8 +1,8 @@
 # Tabs
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
-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.
+Tabs show one panel at a time under a strip of tabs: from JSX or programmatically, closable, with icons and badges, scroll buttons when the tabs do not fit, four placements and panels built when they are first shown.
 
 ## Import
 
@@ -10,22 +10,22 @@ Tabs show one panel at a time under a strip of tabs: from JSX or from code, clos
 import { Tabs, Tab } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-A `<Tab>`'s children are its panel. `value` is the selected tab's `key` (else its index) and `x-model` binds it two-way. Created with `new`, tabs are added, inserted and removed from code.
+A `<Tab>`'s children are its panel. `value` is the selected tab's `key` (else its index) and `x-model` binds it two-way. Created with `new`, tabs are added, inserted and removed programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Stack, Tab, Tabs, TextBox } from '@motifx-community/ui';
 
-/** Tabs from JSX bound with x-model, and tabs created with `new` and added from code. */
-export default function FromCode() {
+/** Tabs from JSX bound with x-model, and tabs created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ page: 'general' as string | number, name: '', log: '' });
   let added = 0;
 
   const reports = new Tabs({ label: 'Reports', closable: true });
   reports.add(new Tab({ title: 'Summary', content: () => <p>The summary, built when it was first shown.</p> }));
-  reports.onSelectionChanged((e) => (s.log = e.tab ? `Selected “${e.tab.title}”${e.byUser ? ' by the user' : ' from code'}.` : 'No tab left.'));
+  reports.onSelectionChanged((e) => (s.log = e.tab ? `Selected “${e.tab.title}”${e.byUser ? ' by the user' : ' programmatically'}.` : 'No tab left.'));
 
   const addReport = () => {
     const n = ++added;
@@ -48,7 +48,7 @@ export default function FromCode() {
       </Tabs>
       <output class="tabs-page">{() => `value: "${s.page}"`}</output>
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a report from code" variant="outline" onclick={addReport} />
+        <Button text="Add a report programmatically" variant="outline" onclick={addReport} />
         <output class="tabs-log">{() => s.log}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" class="tabs-coded" style="inline-size: 100%" onBuilt={(c) => c.controls.add(reports)} />
@@ -442,7 +442,7 @@ export default function Localization() {
 | `add(tab)` | `Tab` | Adds a tab at the end. A tab of another `Tabs` moves here. |
 | `insert(index, tab)` | `Tab` | Adds a tab at an index. |
 | `remove(tab)` | `boolean` | Removes the tab and disposes it; no `onClose`. The selection and focus move to a neighbour. |
-| `select(tab \| index)` | `boolean` | Selects a tab from code; `false` when it is hidden or not there. |
+| `select(tab \| index)` | `boolean` | Selects a tab programmatically; `false` when it is hidden or not there. |
 | `close(tab)` | `boolean` | Closes a tab as its close button does: `onClose` can cancel it. |
 | `focus()` | `boolean` | Focuses the selected tab. |
 | `Tab.select(), Tab.close(), Tab.focus()` | `boolean` | The same, from the tab. |

package/docs/tagbox.md

@@ -1,6 +1,6 @@
 # TagBox
 
-> Data · @motifx-community/ui 0.1.0-beta.2
+> Data · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -11,9 +11,9 @@ import { TagBox } from '@motifx-community/ui';
 import { data } from '@motifx-community/data';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-`x-model` binds an array; every change writes a new one. Created with `new`, the same properties are set from code.
+`x-model` binds an array; every change writes a new one. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 /** The skills the tag boxes of the examples pick from. */
@@ -265,20 +265,20 @@ export const skills = ['CSS', 'Go', 'HTML', 'Java', 'JavaScript', 'Kotlin', 'Pyt
 
 ## Example files
 
-`FromCode.tsx`
+`Programmatic.tsx`
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Stack, TagBox } from '@motifx-community/ui';
 import { skills } from './skills';
 
-/** A tag box bound to an array with x-model, and tag boxes created with `new` and added from code. */
-export default function FromCode() {
+/** A tag box bound to an array with x-model, and tag boxes created with `new` and added programmatically. */
+export default function Programmatic() {
   const form = reactive({ skills: ['TypeScript', 'CSS'] as string[], result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const tags = new TagBox<string, string>({ label: `Skills ${++added}`, items: skills, placeholder: 'Pick some' });
     tags.onValueChanged((e) => (form.result = `${tags.label}: ${e.value.join(', ')}`));
     host?.controls.add(tags);
@@ -290,7 +290,7 @@ export default function FromCode() {
       <TagBox label="&Skills" items={skills} x-model={() => form.skills} stretch />
       <Stack orientation="horizontal" wrap align="center">
         <output class="tg-skills">{() => `skills: ${JSON.stringify(form.skills)}`}</output>
-        <Button text="Add a tag box from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a tag box programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="tg-made">{() => form.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/textarea.md

@@ -1,6 +1,6 @@
 # TextArea
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -10,21 +10,21 @@ A text field of several lines: a box that grows with the text or that the user d
 import { TextArea, type TextAreaProps } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function; `x-model` binds the text two-way. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function; `x-model` binds the text two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Stack, TextArea } from '@motifx-community/ui';
 
-/** A textarea bound with x-model, and notes created with `new` and added from code. */
-export default function FromCode() {
+/** A textarea bound with x-model, and notes created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ comment: 'MotifJS keeps the DOM it builds.', log: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const note = new TextArea({ label: `Note ${++added}`, rows: 2, autoGrow: true, maxRows: 5, clearButton: true });
     note.onValueChanged((e) => (s.log = `${note.label}: ${e.value.split('\n').length} line(s)`));
     host?.controls.add(note);
@@ -35,7 +35,7 @@ export default function FromCode() {
     <>
       <TextArea label="&Comment" x-model={() => s.comment} helpText={() => `${s.comment.length} characters`} stretch />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a note from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a note programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="ta-log">{() => s.log}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/textbox.md

@@ -1,6 +1,6 @@
 # TextBox
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -10,21 +10,21 @@ A one-line text field with its label, help text and error: placeholder, prefix a
 import { TextBox, ValidationGroup, validateFields, type ValidationRule } 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 field in step with it. `x-model` binds the value two-way. 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 field in step with it. `x-model` binds the value two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Stack, TextBox } from '@motifx-community/ui';
 
-/** A field bound to state with x-model, and fields created with `new` and added from code. */
-export default function FromCode() {
+/** A field bound to state with x-model, and fields created with `new` and added programmatically. */
+export default function Programmatic() {
   const form = reactive({ name: 'Ada', result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const box = new TextBox({ label: `Field ${++added}`, clearButton: true, placeholder: 'Created with new' });
     box.onValueChanged((e) => (form.result = `${box.label}: ${e.value}`));
     host?.controls.add(box);
@@ -35,7 +35,7 @@ export default function FromCode() {
     <>
       <TextBox label="&Name" x-model={() => form.name} clearButton helpText={() => `Hello, ${form.name || 'stranger'}.`} />
       <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="tb-result">{() => form.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />
@@ -428,7 +428,7 @@ export default function Localization() {
 
 | Event | When |
 | --- | --- |
-| `onValueChanged(e)` | The value changed. `e`: `{ value, previousValue, byUser, source, event? }`; `byUser` tells the user from code. |
+| `onValueChanged(e)` | The value changed. `e`: `{ value, previousValue, byUser, source, event? }`; `byUser` tells the user programmatically. |
 | `onValidated(e)` | A check ended. `e`: `{ valid, message, source }`. |
 | `onEnter(e)` | Enter was pressed. `e`: `{ value, source, event }`. |
 | `oninput, onchange, onkeydown, onfocusin, onfocusout` | The DOM events of the input reach the field. |