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

package/docs/gallery.md

@@ -0,0 +1,244 @@
+# Gallery
+
+> Display · @motifx-community/ui 0.1.0-beta.3
+
+Panes side by side, one in view or several, moved by the buttons at the sides, the dots under them, a swipe or the arrow keys; a slideshow when told. A pane is an image with a caption, or any content.
+
+## Import
+
+```tsx
+import { Gallery } from '@motifx-community/ui';
+```
+
+## Pictures with captions
+
+`items` are the panes: an address, or an item with `image`, `alt`, `text` and `description`. The pane in view is `value` (a pane’s `key`, else its index), `x-model` binds it two-way. Drag a pane with a finger or the mouse, press an arrow or a dot, or use the keys on the panes.
+
+```tsx
+import { Gallery } from '@motifx-community/ui';
+import { scene } from './scenes';
+
+/** Five pictures with captions: the buttons at the sides, the dots under them, a swipe or the arrow keys move them. */
+export default function Basic() {
+    return (
+        <Gallery
+            class="ga-trip"
+            label="A trip"
+            height={300}
+            items={[
+                { image: scene(205), alt: 'Boats in a harbour', text: 'Harbour', description: 'Early morning' },
+                { image: scene(30), alt: 'Market stalls', text: 'Market' },
+                { image: scene(120), alt: 'Hills under cloud', text: 'Hills', description: 'After the rain' },
+                { image: scene(280), alt: 'The town at night', text: 'Night' },
+                { image: scene(345), alt: 'The way home', text: 'Home', description: 'Last day' }
+            ]}
+        />
+    );
+}
+```
+
+## Loop and slideshow
+
+`loop` goes around the ends: the pane on the other side is brought next to the one leaving, so the move never runs back across the panes between. `slideInterval` makes a slideshow; it waits while the pointer rests on the gallery, while focus is inside, while the page is out of sight and under reduced motion, and the button in the bar pauses it. `stretchImages` fills the panes.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Gallery, Stack } from '@motifx-community/ui';
+import { scene } from './scenes';
+
+/** A slideshow around the ends: it moves on every 2.5 s, waits while the pointer or focus is on it, and its button pauses it. */
+export default function Slideshow() {
+    const s = reactive({ shown: 0 as string | number | null, told: '' });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Gallery
+                class="ga-show"
+                label="Slideshow"
+                height={240}
+                loop
+                stretchImages
+                slideInterval={2500}
+                x-model={() => s.shown}
+                onSlideChanged={e => (s.told = e.byUser ? 'moved by you' : 'moved by the slideshow')}
+                items={[
+                    { image: scene(190), alt: 'Dawn over the sea', text: 'Dawn' },
+                    { image: scene(50), alt: 'Noon in the square', text: 'Noon' },
+                    { image: scene(260), alt: 'Dusk on the hill', text: 'Dusk' }
+                ]}
+            />
+            <output class="ga-show-told">{() => `in view: ${s.shown}${s.told ? `, ${s.told}` : ''}`}</output>
+        </Stack>
+    );
+}
+```
+
+## Several panes side by side
+
+`itemsPerPage` puts that many panes in the width, the `gap` token between them. The buttons and the keys move one pane at a time and stop when the last pane is in view; the pane in view is the first of them.
+
+```tsx
+import { Gallery } from '@motifx-community/ui';
+import { scene } from './scenes';
+
+/** Three panes share the width; next and previous move one pane at a time and stop when the last is in view. */
+export default function PerPage() {
+    const places = ['Pier', 'Lane', 'Roof', 'Park', 'Bridge', 'Shore', 'Tower'];
+    return (
+        <Gallery
+            class="ga-wide"
+            label="Places"
+            height={150}
+            itemsPerPage={3}
+            stretchImages
+            items={places.map((place, i) => ({ image: scene(i * 48), alt: `The ${i + 1}. picture of the walk`, text: place }))}
+        />
+    );
+}
+```
+
+## Any content
+
+An item’s `content` makes the pane’s content when the pane is made; what is in it works as anywhere else. `onItemClick` tells a press on the pane that was not a drag.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Gallery, Stack } from '@motifx-community/ui';
+
+const PLANS = [
+    { name: 'Starter', price: '€9', line: 'One project, two people' },
+    { name: 'Team', price: '€29', line: 'Ten projects, your whole team' },
+    { name: 'Company', price: '€79', line: 'No limits, a person to call' }
+];
+
+/** Any content in a pane: a plan each, with its own button; a press on the pane itself is told too. */
+export default function Content() {
+    const s = reactive({ told: '' });
+    const plan = (p: (typeof PLANS)[number]) => (
+        <Stack class="ga-plan" gap="xs" align="center" justify="center" style="block-size: 100%">
+            <strong>{p.name}</strong>
+            <span class="ga-plan-price">{p.price} a month</span>
+            <span>{p.line}</span>
+            <Button text="Choose" variant="outline" onclick={() => (s.told = `${p.name} chosen`)} />
+        </Stack>
+    );
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Gallery class="ga-plans" label="Plans" height={200} swipeEnabled={false} items={PLANS.map(p => ({ key: p.name, content: () => plan(p) }))} onItemClick={e => (s.told = `pane ${e.index + 1} pressed`)} />
+            <output class="ga-plans-told">{() => s.told}</output>
+        </Stack>
+    );
+}
+```
+
+## Programmatic use
+
+Made with `new`, moved with `next()`, `previous()` and `goTo()`; `showNavButtons` and `showIndicator` off leave the moving to your own buttons, `onSlideChanged` tells where it stands.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Gallery, Stack } from '@motifx-community/ui';
+import { scene } from './scenes';
+
+/** A gallery made programmatically without its own buttons or dots: yours move it, and `onSlideChanged` tells where it is. */
+export default function Programmatic() {
+    const s = reactive({ at: 0, told: '' });
+    const coded = new Gallery({
+        label: 'Rooms',
+        height: 200,
+        showNavButtons: false,
+        showIndicator: false,
+        swipeEnabled: false,
+        items: [
+            { key: 'hall', image: scene(20), alt: 'The hall', text: 'Hall' },
+            { key: 'study', image: scene(200), alt: 'The study', text: 'Study' },
+            { key: 'garden', image: scene(110), alt: 'The garden', text: 'Garden' }
+        ],
+        onSlideChanged: e => {
+            s.at = e.index;
+            s.told = `slide ${e.index + 1} of ${coded.count}`;
+        }
+    });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <span class="ga-rooms" onConfig={c => c.controls.add(coded)} />
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Previous" variant="outline" enabled={() => s.at > 0} onclick={() => void coded.previous()} />
+                <Button text="Next" variant="outline" enabled={() => s.at < 2} onclick={() => void coded.next()} />
+                <Button text="Garden" variant="outline" onclick={() => void coded.goTo('garden')} />
+                <output class="ga-rooms-told">{() => s.told}</output>
+            </Stack>
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | The slideshow button, the dots (one stop: the dot of the pane in view), the previous button, the panes, the next button; what is in the pane in view after it. |
+| `Arrow keys` | On the panes or the dots: Left and Right (the other way round in a right-to-left page) move to the previous and the next pane, Home and End to the first and the last. |
+| `Enter, Space` | On a button or a dot: press it. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Landmark` | A `region` with `aria-roledescription="carousel"`, named “Gallery” in the kit language; several on one page: give each its own `label`. |
+| `A pane` | A `group` with `aria-roledescription="slide"` named “Slide 2 of 5”; the panes out of view are hidden from readers and from the keys (`inert`). |
+| `Images` | Give each an `alt`; an empty one is a decorative image. The caption is read as the pane’s content. |
+| `Slideshow` | The panes are a live region while it is stopped (`polite`), silent while it runs (`off`), as the carousel pattern asks; the button to stop it comes first in the Tab order. |
+| `Dots and arrows` | Buttons named “Slide 2 of 5”, “Previous slide” and “Next slide”; the dot of the pane in view is `aria-current`; an arrow at an end is `aria-disabled`. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-gallery` | The gallery. `data-swipe` when a drag moves it, `data-dragging` while one does, `data-playing` while the slideshow is on, `data-stretch`. |
+| `.mx-gallery__viewport, .mx-gallery__track` | The frame that clips the panes and the track that slides in it (`data-dragging`, `data-no-motion`). |
+| `.mx-gallery__item, .mx-gallery__figure, .mx-gallery__image` | A pane (`data-current`, `aria-hidden`), what it shows, the image. |
+| `.mx-gallery__caption, .mx-gallery__title, .mx-gallery__description` | The band over the bottom of a pane and its two lines. |
+| `.mx-gallery__nav, .mx-gallery__arrow` | The previous and next buttons (`data-direction`, `aria-disabled`) and the glyph in them. |
+| `.mx-gallery__bar, .mx-gallery__indicator, .mx-gallery__dot, .mx-gallery__play, .mx-gallery__play-glyph` | The bar over the bottom, the dots (`aria-current`), the slideshow button and its glyph. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `gallery.frame, .item, .caption, .title, .description` | Units: the frame (`focus`, `swipeable`, `dragging`), a pane (`current`), the caption and its texts. |
+| `gallery.nav, .arrow, .dot, .play, .play-glyph, .bar` | Units: the side buttons (`hover`, `pressed`, `focus`, `disabled`), their glyph (`icon` per direction), the dots (`current`, `hover`, `pressed`, `focus`), the slideshow button and its glyph (`icon` while `playing`), the bar. |
+| `gallery.gap, .nav-inset, .bar-inset, .indicator-gap, .caption-padding` | Between panes side by side, from the sides and the bottom to what lies over them, between the dots, inside a caption. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `Bind<readonly (GalleryItem \| string)[]>` | `[]` | The panes in order: `GalleryItem`s (`image`, `alt`, `text`, `description`, `key`, `content`, `data`) or image addresses. |
+| `value` | `Bind<string \| number \| null>` | `0` | The pane in view: its `key`, else its index. `x-model` binds it two-way. |
+| `loop` | `Bind<boolean>` | `false` | After the last pane comes the first; the move goes around the ends, not back across the panes between. |
+| `showNavButtons` | `Bind<boolean>` | `true` | The previous and next buttons over the sides. |
+| `showIndicator` | `Bind<boolean>` | `true` | The dots under the panes, one per pane. |
+| `slideInterval` | `Bind<number>` | `0` | Milliseconds a pane stays in a slideshow; `0` for none. It pauses under the pointer, while focus is inside, out of sight and under reduced motion. |
+| `pauseOnHover` | `Bind<boolean>` | `true` | The slideshow waits while the pointer rests on the gallery. |
+| `swipeEnabled` | `Bind<boolean>` | `true` | A finger or a pointer drags the panes; a drag far or fast enough lands on the next one. |
+| `itemsPerPage` | `Bind<number>` | `1` | Panes side by side in the width, with the `gap` token between them. |
+| `stretchImages` | `Bind<boolean>` | `false` | An image fills its pane, cut at the edges, instead of fitting inside it whole. |
+| `height` | `Bind<string \| number \| null>` | `null` | A CSS length or pixels. Without one the gallery is as tall as its tallest pane. |
+| `label` | `Bind<string>` | the kit’s “Gallery” | What screen readers call it. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onSlideChanging` | event | The pane in view is about to change (`from`, `to`, `fromItem`, `toItem`, `byUser`); `cancel = true` keeps the one there. |
+| `onSlideChanged` | event | The pane in view changed (`index`, `item`, `previous`, `byUser`: by a press, a swipe or a key, else programmatically or the slideshow). |
+| `onItemClick` | event | A press on a pane that was not a drag (`index`, `item`, `event`). |
+| `selectedIndex` | read-only | The index of the pane in view; -1 when there is none. |
+| `count` | read-only | How many panes there are. |
+| `isPlaying` | read-only | The slideshow runs now: not paused, and nothing holds it. |
+| `next(), previous()` | `Promise<boolean>` | Goes to the next or the previous pane; `false` at an end without `loop`, or when the change was refused. |
+| `goTo(pane)` | `Promise<boolean>` | Goes to a pane by index or key; `onSlideChanging` is asked first. |
+| `play(), pause()` | `void` | Starts the slideshow again, or stops it until `play()`; the button in the bar does the same. |
+| `refresh()` | `void` | Reads the items again after they were changed in place. |

package/docs/home.md

@@ -1,6 +1,6 @@
 # @motifx-community/ui
 
-> Get started · @motifx-community/ui 0.1.0-beta.2
+> Get started · @motifx-community/ui 0.1.0-beta.3
 
 Components for MotifJS that work the way desktop UI does — created when needed, shown anywhere, closed and disposed like windows — drawn from the MotifJS design system's tokens.
 
@@ -22,14 +22,18 @@ import { Button, Control, FocusContainer, addShortcut } from '@motifx-community/
 
 ## What ships today
 
-The components are being written one at a time; Button is the first. Under them is the base they all build on: focus and the keyboard, and the shared parts a menu or a drop-down opens on.
+More than fifty components, every one an object with the same base: focus and the keyboard, the right roles and names for a screen reader, texts in English and Turkish that switch while the app runs, right to left, and a look in each of the design system's five languages (Tactile, Lounge, Material, Fluent, Lilac) painted from component tokens. Each has a page with live examples and its API.
 
-| Part | What it is |
+| Group | Components |
 | --- | --- |
-| [`Button`](button.md) | Solid, outline and ghost in three tones and sizes, pressable; icon, `&` access key, toggle, busy; a menu or any content, from the whole button or with `split` from an arrow next to it. |
-| `Popup`, `MenuList` | The shared parts: a surface above the page that follows its anchor and closes on Escape or a press outside, and a keyboard-driven list of commands. |
-| [`Control`](control.md) | The base of every control: `text`, `enabled`, `visible`, `tabStop` and focus, the same from JSX and from code. |
-| [`FocusContainer`, `addShortcut`](keyboard.md) | Tab order, the active control of a container, `&` access keys, shortcuts, and focus that never falls to the page when a control goes away. |
+| Buttons and commands | [`Button`](button.md) (menu, split, toggle, busy), [`ButtonGroup`](buttongroup.md), [`Toolbar`](toolbar.md), [`MenuBar` and `ContextMenu`](menus.md) |
+| Editors | [`TextBox`](textbox.md) (mask, validation), [`TextArea`](textarea.md), [`NumberBox`](numberbox.md), [`DateBox`](datebox.md), [`DateRangeBox`](daterangebox.md), [`Calendar`](calendar.md), [`ColorBox` and `ColorPicker`](colorbox.md), [`Slider`](slider.md), [`Rating`](rating.md), [`FileUploader`](fileuploader.md) |
+| Choice | [`CheckBox`](checkbox.md), [`Switch`](switch.md), [`RadioGroup`](radiogroup.md), [`DropDown`](dropdown.md), [`ComboBox` and `Autocomplete`](combobox.md), [`Lookup`](lookup.md), [`TagBox`](tagbox.md), [`ListBox`](listbox.md) |
+| Display and feedback | [`Badge`](badge.md), [`Avatar` and `AvatarGroup`](avatar.md), [`Chip` and `ChipGroup`](chip.md), [`Card`](card.md), [`Skeleton`](skeleton.md), [`ProgressBar` and `Spinner`](progress.md), [`LoadPanel`](loadpanel.md), [`Tooltip`](tooltip.md), [`Popover`](popover.md), [`Toast`](toast.md) |
+| Navigation and layers | [`Tabs`](tabs.md), [`Accordion`](accordion.md), [`Breadcrumb`](breadcrumb.md), [`Pagination`](pagination.md), [`Stepper`](stepper.md), [`Wizard`](wizard.md), [`Window` and dialog](window.md), [`BottomSheet`](bottomsheet.md), [`Drawer`](drawer.md), [`ActionSheet`](actionsheet.md) |
+| Layout | [`Stack`, `Grid`, `DockPanel`, `Panel`, `GroupBox`, `SplitContainer`](layout.md), [`FormLayout`](formlayout.md), [`ScrollView`](scrollview.md) (pull to refresh, load more), [`Sortable`](sortable.md) |
+| Data | [`DataGrid`](datagrid.md) (virtual or paged, editing, filters, grouping, master-detail, export), [`TreeView`](treeview.md), [`FilterBuilder`](filterbuilder.md), [`Scheduler`](scheduler.md) (day to timeline, recurrence, resources, iCalendar), [`TabDocumentManager`](tabdocs.md) (tabs, split, dock, new windows); lists and grids read `@motifx-community/data` sources |
+| Base | [`Control`](control.md), [`FocusContainer` and `addShortcut`](keyboard.md), [`uiLocale`](language.md), [the component tokens](tokens.md); `Popup` and `MenuList`, the shared parts a menu or a drop-down opens on |
 
 ## Design system
 

package/docs/keyboard.md

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

package/docs/language.md

@@ -1,6 +1,6 @@
 # Language
 
-> Foundations · @motifx-community/ui 0.1.0-beta.2
+> Foundations · @motifx-community/ui 0.1.0-beta.3
 
 The texts the controls write, the locale their dates and numbers follow, and the direction: one `uiLocale` for the kit, with a pack per language loaded as it is asked for.
 

package/docs/layout.md

@@ -1,6 +1,6 @@
 # Layout
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
 Containers that place controls: `Stack` (a row or a column), `Grid` (rows and columns), `Panel` (a plain box that can scroll), `GroupBox` (a titled frame), `DockPanel` (children stuck to its edges) and `SplitContainer` (two panes and a splitter). All of them are controls: they disable and hide what is inside, and lay out children added at any time.
 
@@ -10,7 +10,7 @@ Containers that place controls: `Stack` (a row or a column), `Grid` (rows and co
 import { Stack, Grid, Panel, GroupBox, DockPanel, SplitContainer, type LayoutSpace } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
 Children come as JSX or are added later with `controls.add`; either way the container picks them up. A child says where it goes in its own props (`grow`, `row`, `dock`…), whatever kind of component it is.
 
@@ -19,13 +19,13 @@ import type { Component } from '@motifx/core';
 import { Button, Grid, Stack, TextBox } from '@motifx-community/ui';
 
 /** Buttons added to a Stack with `controls.add`, and a Grid built with `new`. */
-export default function FromCode() {
+export default function Programmatic() {
   let added = 0;
   let bar: Stack | null = null;
 
   const addButton = () => bar?.controls.add(new Button({ text: `Button ${++added}`, variant: 'outline', grow: added % 3 === 0 }));
 
-  const buildFromCode = (host: Component<HTMLDivElement>) => {
+  const buildProgrammatic = (host: Component<HTMLDivElement>) => {
     const grid = new Grid({ columns: '* *', gap: 'xs' });
     grid.element.classList.add('layout-coded');
     grid.controls.add(
@@ -41,7 +41,7 @@ export default function FromCode() {
       <Stack ref={(c: Stack) => (bar = c)} orientation="horizontal" gap="sm" wrap align="center" style="inline-size: 100%">
         <Button text="Add a button" tone="accent" onclick={addButton} />
       </Stack>
-      <div style="inline-size: 100%" ref={(c: Component<HTMLDivElement>) => buildFromCode(c)} />
+      <div style="inline-size: 100%" ref={(c: Component<HTMLDivElement>) => buildProgrammatic(c)} />
     </>
   );
 }
@@ -287,7 +287,7 @@ const FRAME = 'border: var(--mx-border-width-1) solid var(--mx-color-stroke-card
 const BAR = 'background: var(--mx-color-bg-bar);';
 const LAYER = 'background: var(--mx-color-bg-layer);';
 
-/** A mail app laid out with DockPanel: a header, a sidebar that changes sides, a status bar, a float button and a panel added from code. */
+/** A mail app laid out with DockPanel: a header, a sidebar that changes sides, a status bar, a float button and a panel added programmatically. */
 export default function AppShell() {
   const s = reactive({ side: 'start' as Dock, messages: 3 });
   let shell: DockPanel | null = null;
@@ -302,7 +302,7 @@ export default function AppShell() {
     notes = new Panel({ dock: 'end', padding: 'sm' });
     notes.element.setAttribute('style', `inline-size: 9rem; ${LAYER}`);
     notes.element.classList.add('layout-notes');
-    notes.controls.add(<span>Notes, added from code.</span>);
+    notes.controls.add(<span>Notes, added programmatically.</span>);
     shell?.controls.add(notes);
   };
 
@@ -310,7 +310,7 @@ export default function AppShell() {
     <>
       <Stack orientation="horizontal" wrap align="center">
         <Button text={() => `Sidebar: ${s.side}`} size="sm" variant="outline" onclick={() => (s.side = s.side === 'start' ? 'end' : 'start')} />
-        <Button text="Notes panel from code" size="sm" variant="outline" onclick={toggleNotes} />
+        <Button text="Notes panel programmatically" size="sm" variant="outline" onclick={toggleNotes} />
       </Stack>
       <DockPanel class="layout-shell" ref={(c: DockPanel) => (shell = c)} style={`block-size: 22rem; inline-size: 100%; overflow: hidden; ${FRAME}`}>
         <Stack dock="top" orientation="horizontal" align="center" gap="sm" padding="xs sm" style={BAR}>
@@ -332,7 +332,7 @@ export default function AppShell() {
         <Panel class="layout-content" text="Message" scrollable padding="md">
           <h3 style="margin-block-start: 0">Welcome</h3>
           <p>The header, the folders and the status bar are docked; this panel fills the rest and scrolls on its own.</p>
-          <p>Switch the sidebar to the other side, or add a panel from code: the layout follows at once.</p>
+          <p>Switch the sidebar to the other side, or add a panel programmatically: the layout follows at once.</p>
         </Panel>
         <Button class="layout-help" dock="float" right={16} bottom={48} text="Help" variant="outline" />
       </DockPanel>
@@ -353,7 +353,7 @@ const FOLDERS = ['Inbox', 'Drafts', 'Sent', 'Archive', 'Spam', 'Trash'];
 const FRAME = 'border: var(--mx-border-width-1) solid var(--mx-color-stroke-card); border-radius: var(--mx-radius-lg);';
 const LAYER = 'background: var(--mx-color-bg-layer);';
 
-/** A split container inside another: a position bound with x-model, minimum sizes, a fixed pane, and hiding a pane from code. */
+/** A split container inside another: a position bound with x-model, minimum sizes, a fixed pane, and hiding a pane programmatically. */
 export default function NestedSplit() {
   const s = reactive({ tree: 180 as SplitPosition, fixed: 'first' as SplitPanel, log: '' });
   let outer: SplitContainer | null = null;
@@ -567,9 +567,9 @@ Every container also has the shared properties of `Control`: `enabled` / `disabl
 
 | Method | Returns | Description |
 | --- | --- | --- |
-| `Stack.setGrow(child, grow), growOf(child)` | `void`, value | A child's `grow` from code (a value or a function). |
-| `Grid.setCell(child, cell), cellOf(child)` | `void`, `GridCell` | A child's `row`, `column`, `rowSpan`, `columnSpan` from code. |
-| `DockPanel.setDock(child, dock), dockOf(child)` | `void`, `Dock` | A child's `dock` from code. |
+| `Stack.setGrow(child, grow), growOf(child)` | `void`, value | A child's `grow` programmatically (a value or a function). |
+| `Grid.setCell(child, cell), cellOf(child)` | `void`, `GridCell` | A child's `row`, `column`, `rowSpan`, `columnSpan` programmatically. |
+| `DockPanel.setDock(child, dock), dockOf(child)` | `void`, `Dock` | A child's `dock` programmatically. |
 | `DockPanel.setAnchors(child, anchors)` | `void` | The `left` / `top` / `right` / `bottom` of a `float` child. |
 | `SplitContainer.collapse(pane?), restore()` | `void` | Hides a pane (the first by default) / shows both again. |
 | `GroupBox.focus()` | `boolean` | Focuses the first control inside, opening a collapsed box. |

package/docs/listbox.md

@@ -1,6 +1,6 @@
 # ListBox
 
-> Data · @motifx-community/ui 0.1.0-beta.2
+> Data · @motifx-community/ui 0.1.0-beta.3
 
 A list that stays on the page. One item or several are chosen with the keys or the pointer; items come from memory or from a data source, can be searched and grouped, and long lists draw only the rows in view.
 
@@ -11,9 +11,9 @@ import { ListBox } from '@motifx-community/ui';
 import { data } from '@motifx-community/data';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-`items` can be plain values; `x-model` binds the value. Created with `new`, the same properties are set from code.
+`items` can be plain values; `x-model` binds the value. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 /** The cities the lists of the examples show. */
@@ -255,20 +255,20 @@ A prop whose value is a function of its own (`textField`, a template) takes the
 
 ## Example files
 
-`FromCode.tsx`
+`Programmatic.tsx`
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, ListBox, Stack } from '@motifx-community/ui';
 import { cities } from './cities';
 
-/** A list bound with x-model, and lists created with `new` and added from code. */
-export default function FromCode() {
+/** A list bound with x-model, and lists created with `new` and added programmatically. */
+export default function Programmatic() {
   const form = reactive({ city: 'İzmir' as string | null, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const list = new ListBox<string, string>({ label: `Size ${++added}`, items: ['S', 'M', 'L', 'XL'], height: 4 });
     list.onValueChanged((e) => (form.result = `${list.label}: ${e.value}`));
     host?.controls.add(list);
@@ -280,7 +280,7 @@ export default function FromCode() {
       <ListBox label="&City" items={cities} x-model={() => form.city} />
       <Stack orientation="horizontal" wrap align="center">
         <output class="lb-city">{() => `city: ${form.city ?? '—'}`}</output>
-        <Button text="Add a list from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a list programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="lb-made">{() => form.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/loadpanel.md

@@ -1,6 +1,6 @@
 # LoadPanel
 
-> Feedback · @motifx-community/ui 0.1.0-beta.2
+> Feedback · @motifx-community/ui 0.1.0-beta.3
 
 A “loading” layer over a container or the whole page: a shade, a pane with the kit’s spinner and a message, a Cancel button when the work can be stopped. Nothing under it can be used meanwhile, and focus comes back afterwards.
 
@@ -12,7 +12,7 @@ import { LoadPanel } from '@motifx-community/ui';
 
 ## Over a container
 
-`target` names the component or element it covers; `value` (or `x-model`) shows and hides it, `show()` and `hide()` from code. `delay` keeps quick work from flashing it.
+`target` names the component or element it covers; `value` (or `x-model`) shows and hides it, `show()` and `hide()` programmatically. `delay` keeps quick work from flashing it.
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -129,7 +129,7 @@ export default function Options() {
 | `Over the page` | Without a `target`, it covers the viewport and the rest of the page is inert. |
 | `Focus` | Focus that was under it waits on the panel (on the Cancel button when there is one) and goes back where it was when the panel hides. |
 | `Delay` | Quick work shows nothing: it comes after `delay`, and a hide before that cancels it. |
-| `Spinner.cover` | The kit’s spinner covers a container from code in one call (`Spinner.cover`); the load panel is the component with the pane, the message, the delay and the button. |
+| `Spinner.cover` | The kit’s spinner covers a container programmatically in one call (`Spinner.cover`); the load panel is the component with the pane, the message, the delay and the button. |
 
 ## Accessibility
 
@@ -179,6 +179,6 @@ export default function Options() {
 | --- | --- | --- |
 | `onShown, onHidden` | event | It came on the screen (after its delay); it went. |
 | `onCancel` | event | The Cancel button was pressed, or Escape; the panel hides after. |
-| `show(), hide(), cancel()` | `boolean` / `void` | From code; `show()` is `false` while it is shown or waiting for its delay. |
+| `show(), hide(), cancel()` | `boolean` / `void` | Programmatically; `show()` is `false` while it is shown or waiting for its delay. |
 | `isShown` | read-only | Whether it is on the screen now. |
 | `spinner, cancelButton` | read-only | The kit’s spinner and button in the pane. |

package/docs/lookup.md

@@ -1,6 +1,6 @@
 # Lookup
 
-> Choice · @motifx-community/ui 0.1.0-beta.2
+> Choice · @motifx-community/ui 0.1.0-beta.3
 
 Picks one row of a table-like list, typically from a data source searched on the server: a customer by its company, contact and city. The field shows the chosen row's text; everything else works as in DropDown.
 

package/docs/menus.md

@@ -1,6 +1,6 @@
 # MenuBar and ContextMenu
 
-> Buttons · @motifx-community/ui 0.1.0-beta.2
+> Buttons · @motifx-community/ui 0.1.0-beta.3
 
 A menu bar of an app (File, Edit, View) and the menu that opens on a right-click. Both show the same menu items: submenus, check and radio items, shortcuts, access keys.
 
@@ -298,7 +298,7 @@ Menus write no text of their own: every label, shortcut and name comes from your
 | --- | --- | --- |
 | `MenuBar.open(item \| index)` | `boolean` | Opens a top item’s menu with focus on its first item. |
 | `MenuBar.close()` | `void` | Closes the open menu. |
-| `ContextMenu.open(at, target?)` | `boolean` | Opens it from code, at `{ x, y }` or at an element. |
+| `ContextMenu.open(at, target?)` | `boolean` | Opens it programmatically, at `{ x, y }` or at an element. |
 | `ContextMenu.close()` | `void` | Closes it. |
 | `MenuBar.refresh(), ContextMenu.refresh()` | `void` | Your items may be plain or reactive; the menu reads them as they are. After changing them in place, call `refresh()`. The bar, the open menu and its submenus follow. |
 | `attachContextMenu(target, items)` | `() => void` | Gives an element or component a menu; `items` can be a function of the opening (`e.target`). Returns the remover. |