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

package/docs/popover.md

@@ -0,0 +1,221 @@
+# Popover
+
+> Feedback · @motifx-community/ui 0.1.0-beta.2
+
+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';
+```
+
+## From JSX and from code
+
+The JSX children are the content; `target` names the element or component it opens next to. From code, `content` gives the content and `open()`, `close()` and `toggle()` move it; `value` and `x-model` say whether it is open.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, Popover, Stack, TextBox } from '@motifx-community/ui';
+
+/** A popover with a title, a close button and a small form; one made from code for a plain element. */
+export default function Basic() {
+    const s = reactive({ open: false, name: 'Ada', saved: '' });
+    let button!: Button;
+    let link!: HTMLElement;
+    const coded = new Popover({ title: 'From code', content: new Button({ text: 'OK', variant: 'outline', onclick: () => coded.close() }) });
+
+    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 from code
+            </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 from code. It appears in the browser’s top layer, next to the target, and follows it while the page scrolls. |
+| `Focus` | Opened by a press or from code, focus moves to the first focusable part inside, else to the popover; it goes back to the target when the popover closes. Opened by hover, focus stays where it is. |
+| `Closing` | Escape, a press outside it and its target, focus leaving both (Tab out), the close button, the target pressed again, or the pointer leaving both (`hover`). `onClosing` may keep it open. |
+| `Placement` | `placement` names the side and the alignment, as for the kit’s popups; without room on that side it opens on the other. |
+| `Where it lives` | Made from code, it goes into the nearest container of its target that can hold it, so it stays in the target’s window and landmark. |
+
+## 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 from code, 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` | From code; `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.0
+> Feedback · @motifx-community/ui 0.1.0-beta.2
 
 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.
 
@@ -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.0
+> Choice · @motifx-community/ui 0.1.0-beta.2
 
 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.
 

package/docs/rating.md

@@ -1,6 +1,6 @@
 # Rating
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 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.
 

package/docs/scheduler-agenda.md

@@ -1,6 +1,6 @@
 # Scheduler: Agenda
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.
 

package/docs/scheduler-form.md

@@ -1,6 +1,6 @@
 # Scheduler: The appointment form
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.
 

package/docs/scheduler-resources.md

@@ -1,6 +1,6 @@
 # Scheduler: Resources and groups
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 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.
 

package/docs/scheduler.md

@@ -1,6 +1,6 @@
 # Scheduler
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.0
+> Scheduler · @motifx-community/ui 0.1.0-beta.2
 
 Appointments over days and hours: day, week, work week and month views, all-day and multi-day bars, appointments at the same time side by side, and "+N more" where a day is full. From an array or a data source, with every setting live.
 

package/docs/scrollview.md

@@ -0,0 +1,185 @@
+# ScrollView
+
+> Navigation · @motifx-community/ui 0.1.0-beta.2
+
+Content that scrolls in a box of its own: the bars shown as told, a pull from the top that asks for what is new, a reach near the end that asks for more. Moved from code to a position or to an element.
+
+## Import
+
+```tsx
+import { ScrollView } from '@motifx-community/ui';
+```
+
+## A box that scrolls
+
+The JSX children are the content. `showScrollbar` says when the bars show; `scrollTo` and `scrollToElement` move the content from code, `onScrolled` tells where it stands.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, ScrollView, Stack, type ScrollViewBars } from '@motifx-community/ui';
+
+const LINES = Array.from({ length: 40 }, (_, i) => `Line ${i + 1} of a long text that needs a box of its own to scroll in.`);
+const MODES: ScrollViewBars[] = ['onScroll', 'onHover', 'always', 'never'];
+
+/** A box that scrolls, its bars shown as told; moved from code to a line and back to the top. */
+export default function Bars() {
+    const s = reactive({ bars: 'onScroll' as ScrollViewBars, top: 0 });
+    let view!: ScrollView;
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                {MODES.map(mode => (
+                    <Button key={mode} text={mode} size="sm" variant={() => (s.bars === mode ? 'solid' : 'outline')} onclick={() => (s.bars = mode)} />
+                ))}
+                <Button text="Line 20" variant="outline" size="sm" onclick={() => view.scrollToElement(view.content.element.querySelectorAll('p')[19], true)} />
+                <Button text="Top" variant="outline" size="sm" onclick={() => view.scrollTo(0, true)} />
+                <output class="sv-top">{() => `scrollTop: ${Math.round(s.top)}`}</output>
+            </Stack>
+            <ScrollView ref={(v: ScrollView) => (view = v)} label="Long text" class="sv-text" showScrollbar={() => s.bars} style="block-size: 12rem" onScrolled={e => (s.top = e.top)}>
+                {LINES.map(line => (
+                    <p key={line}>{line}</p>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Pull to refresh
+
+With `pullToRefresh`, the content pulled down from its top asks `onPullDown`. Set `promise` (or call `release()`) and the panel goes when the work is done.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+/** Pulled down from the top, the list asks for what is new and shows the panel until the promise settles. */
+export default function Pull() {
+    const s = reactive({ notes: ['Welcome aboard', 'Your plan was renewed', 'A new comment on "Roadmap"'], count: 0 });
+    const reload = () =>
+        new Promise<void>(resolve =>
+            setTimeout(() => {
+                s.count++;
+                s.notes = [`Fresh note ${s.count}`, ...s.notes];
+                resolve();
+            }, 1200)
+        );
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <span>Drag the list down from its top (a finger, or the mouse) and let go.</span>
+            <ScrollView label="Notes" class="sv-notes" pullToRefresh onPullDown={e => (e.promise = reload())} style="block-size: 12rem">
+                {s.notes.map(note => (
+                    <Panel key={note} variant="outline" padding="sm">
+                        {note}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Load more near the end
+
+With `loadOnReachBottom`, a scroll within `reachBottomOffset` of the end asks `onReachBottom` once; `release()` lets the next reach ask again, `release(true)` says there is no more. Content that does not fill the box asks at once.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Panel, ScrollView, Stack } from '@motifx-community/ui';
+
+const TOTAL = 60;
+const PAGE = 15;
+
+// A page of rows, as a server would send them.
+const fetchRows = (from: number) =>
+    new Promise<string[]>(resolve => setTimeout(() => resolve(Array.from({ length: Math.min(PAGE, TOTAL - from) }, (_, i) => `Order #${1000 + from + i}`)), 800));
+
+/** Near the end the view asks for more; the indicator stays until the rows are in, and `release(true)` ends it for good when there is no more. */
+export default function More() {
+    const s = reactive({ rows: [] as string[] });
+    const more = () =>
+        fetchRows(s.rows.length).then(rows => {
+            s.rows = [...s.rows, ...rows];
+            return s.rows.length >= TOTAL;
+        });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <output class="sv-more-told">{() => (s.rows.length >= TOTAL ? `All ${TOTAL} orders are in.` : `${s.rows.length} of ${TOTAL} orders`)}</output>
+            <ScrollView label="Orders" class="sv-orders" loadOnReachBottom reachBottomOffset={80} onReachBottom={e => more().then(done => e.release(done))} style="block-size: 14rem">
+                {s.rows.map(row => (
+                    <Panel key={row} variant="outline" padding="sm">
+                        {row}
+                    </Panel>
+                ))}
+            </ScrollView>
+        </Stack>
+    );
+}
+```
+
+## Behaviour
+
+| Topic | How |
+| --- | --- |
+| `Scrolling` | The box scrolls with the wheel, the keys when focused, a finger, and from code. `direction` locks the other axis; the page behind does not scroll on when the content ends. |
+| `Scrollbars` | The design system’s bars. With `onScroll` the thumb shows while the content moves and goes a moment after; with `onHover` while the pointer is over the view or focus is in it; `always` leaves them; `never` hides them, the content still scrolls. |
+| `Pull to refresh` | From the top, with a finger or the pointer: the content comes down (harder the farther it goes) and the panel above it says to pull, then to release. Let go far enough it refreshes: the spinner turns until `release()` or the promise. A short pull goes back. |
+| `Load more` | Within `reachBottomOffset` of the end, `onReachBottom` is asked once; the panel under the content shows meanwhile. Released, the next reach asks again, until `release(true)`. Content that does not fill the box asks at once, and again as it grows. |
+| `Texts` | The kit’s, in the kit language, unless the text props say otherwise. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `Region` | A focusable box named by `label`; the arrow keys, Page Up/Down, Home and End scroll it as the browser does. |
+| `Panels` | Live regions: “Refreshing…” and “Loading…” are read when they appear. |
+| `Spinners` | Decorative; the texts say what is going on. |
+| `Motion` | A finger that pulls does not scroll the page; a finger that scrolls does not pull. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-scroll-view` | The box. `data-direction`, `data-bars`, `data-scrolling` while the content moves, `data-pull` when pulling is on, `data-pulling` during a pull, `data-pull-state` (`pull`, `release`, `refreshing`), `data-loading`. |
+| `.mx-scroll-view__content` | What holds the children; it moves down during a pull. |
+| `.mx-scroll-view__pull, .mx-scroll-view__pull-text, .mx-scroll-view__pull-spinner` | The panel above the content, its text and the kit’s spinner. |
+| `.mx-scroll-view__bottom, .mx-scroll-view__bottom-text, .mx-scroll-view__bottom-spinner` | The panel under the content while more loads. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `scroll-view.box` | Unit: the box (`focus`). |
+| `scroll-view.pull, .pull-text, .bottom, .bottom-text` | Units: the two panels (the pull one `release` and `refreshing`) and their texts. |
+| `scroll-view.panel-height, .panel-gap` | The panels’ height; the space between a panel’s spinner and its text. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `Bind<ScrollViewDirection>` | `'vertical'` | `vertical`, `horizontal` or `both`: which way the content scrolls. |
+| `showScrollbar` | `Bind<ScrollViewBars>` | `'onScroll'` | When the bars show: `onScroll` while scrolling, `onHover` while the pointer is over the view, `always`, `never`. |
+| `pullToRefresh` | `Bind<boolean>` | `false` | Pulling the content down from its top asks `onPullDown` for what is new. |
+| `loadOnReachBottom` | `Bind<boolean>` | `false` | Scrolling near the end asks `onReachBottom` for more; so does content that does not reach the end. |
+| `reachBottomOffset` | `Bind<number>` | `100` | Pixels before the end at which `onReachBottom` is asked. |
+| `pullDownText, releaseText, refreshingText` | `Bind<string>` | the kit’s texts | The pull panel’s texts: while pulling, once far enough, while refreshing. |
+| `reachBottomText` | `Bind<string>` | the kit’s “Loading…” | The text under the content while more loads. |
+| `label` | `Bind<string>` | `''` | What screen readers call the scrolling region. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onPullDown` | event | The content was pulled down and let go. Load what is new, then `release()`, or set `promise` and the panel goes when it settles. |
+| `onReachBottom` | event | The content was scrolled near its end. Load more, then `release()`; `release(true)` says there is no more and the view stops asking. A `promise` releases too. |
+| `onScrolled` | event | The position changed: `top`, `left`. |
+| `scrollTo(where, smooth?)` | `void` | To a top, or `{ top, left }`; `smooth` animates. |
+| `scrollBy({ top, left }, smooth?)` | `void` | By a distance. |
+| `scrollToElement(target, smooth?)` | `void` | Brings an element (or a component) of the content into view. |
+| `refresh(), release()` | `void` | Starts a refresh as a pull would; ends it. |
+| `loadMore(), update()` | `boolean` / `void` | Asks for more now; looks at the position again after the content changed. |
+| `scrollTop, scrollLeft` | read-only | Where the content stands. |
+| `isRefreshing, isLoading` | read-only | A refresh or a loading is going on. |
+| `content` | read-only | The element that holds the children, between the two panels. |

package/docs/showcase.md

@@ -1,5 +1,5 @@
 # Showcase: an order screen
 
-> Get started · @motifx-community/ui 0.1.0-beta.0
+> Get started · @motifx-community/ui 0.1.0-beta.2
 
 An order screen built with the kit, the way a MotifJS app is built: the state and the operations live in a model (`OrderModel`), the page binds to it. The customer list is a data source of 5,000 rows that answers like a server.

package/docs/skeleton.md

@@ -1,6 +1,6 @@
 # Skeleton
 
-> Display · @motifx-community/ui 0.1.0-beta.0
+> Display · @motifx-community/ui 0.1.0-beta.2
 
 The shape of what is loading, so the page keeps its layout while data arrives. Given content, it shows the content in the same place once loading ends.
 

package/docs/slider.md

@@ -1,6 +1,6 @@
 # Slider
 
-> Editors · @motifx-community/ui 0.1.0-beta.0
+> Editors · @motifx-community/ui 0.1.0-beta.2
 
 A value picked on a track by dragging a thumb or with the keys: one number, or a range with two thumbs. Steps, marks with labels, a value bubble, a vertical form and number formatting, with the label, help line and validation every field has.
 
@@ -247,7 +247,7 @@ The names of the two thumbs of a range come from `uiLocale.strings` (`minimum`,
 
 ```tsx
 import { reactive } from '@motifx/core';
-import { Button, enStrings, Slider, trStrings, uiLocale } from '@motifx-community/ui';
+import { Button, Slider, uiLocale } from '@motifx-community/ui';
 import { kitTexts } from '../../../shared/kit-texts';
 
 /** Switches the names of the thumbs; the price slider writes its numbers in the chosen language. */
@@ -255,7 +255,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 (
     <>