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

package/docs/scheduler-editing.md

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

package/docs/scheduler-form.md

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

package/docs/scheduler-icalendar.md

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

package/docs/scheduler-mobile.md

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

package/docs/scheduler-recurrence.md

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

package/docs/scheduler-resources.md

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

package/docs/scheduler-timeline.md

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

package/docs/scheduler.md

@@ -1,6 +1,6 @@
 # Scheduler
 
-> Scheduler · @motifx-community/ui 0.1.0-beta.2
+> Scheduler · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -229,15 +229,15 @@ export default function Templates() {
 }
 ```
 
-## From code
+## Programmatic use
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Scheduler, Stack } from '@motifx-community/ui';
 import { sampleAppointments, type Meeting } from './sample-appointments';
 
-/** A scheduler made with `new`, added from code and driven by its methods. */
-export default function FromCode() {
+/** A scheduler made with `new`, added programmatically and driven by its methods. */
+export default function Programmatic() {
   const state = reactive({ said: '' });
   let host: Stack | null = null;
   let scheduler: Scheduler<Meeting> | null = null;

package/docs/scrollview.md

@@ -1,8 +1,8 @@
 # ScrollView
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
-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.
+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 programmatically to a position or to an element.
 
 ## Import
 
@@ -12,7 +12,7 @@ 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.
+The JSX children are the content. `showScrollbar` says when the bars show; `scrollTo` and `scrollToElement` move the content programmatically, `onScrolled` tells where it stands.
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -21,7 +21,7 @@ import { Button, ScrollView, Stack, type ScrollViewBars } from '@motifx-communit
 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. */
+/** A box that scrolls, its bars shown as told; moved programmatically to a line and back to the top. */
 export default function Bars() {
     const s = reactive({ bars: 'onScroll' as ScrollViewBars, top: 0 });
     let view!: ScrollView;
@@ -121,7 +121,7 @@ export default function More() {
 
 | 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. |
+| `Scrolling` | The box scrolls with the wheel, the keys when focused, a finger, and programmatically. `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. |

package/docs/showcase.md

@@ -1,5 +1,5 @@
 # Showcase: an order screen
 
-> Get started · @motifx-community/ui 0.1.0-beta.2
+> Get started · @motifx-community/ui 0.1.0-beta.3
 
 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.2
+> Display · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -128,4 +128,4 @@ export default function Animations() {
 | Property | Access | Description |
 | --- | --- | --- |
 | `every prop above` | read/write | A value or a function, like the prop. |
-| `content` | read-only | The part holding what shows once loaded, for adding to it from code. |
+| `content` | read-only | The part holding what shows once loaded, for adding to it programmatically. |

package/docs/slider.md

@@ -1,6 +1,6 @@
 # Slider
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 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.
 
@@ -10,21 +10,21 @@ A value picked on a track by dragging a thumb or with the keys: one number, or a
 import { Slider, type SliderValue } 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, Slider, Stack } from '@motifx-community/ui';
 
-/** A slider bound to state with x-model, and sliders created with `new` and added from code. */
-export default function FromCode() {
+/** A slider bound to state with x-model, and sliders created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ volume: 40, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const slider = new Slider({ label: `Slider ${++added}`, showValue: 'drag' });
     slider.value = 50;
     slider.onValueChanged((e) => (s.result = `${slider.label}: ${String(e.value)}`));
@@ -36,7 +36,7 @@ export default function FromCode() {
     <>
       <Slider label="&Volume" x-model={() => s.volume} helpText={() => `Volume: ${s.volume}`} />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a slider from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a slider programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="sl-result">{() => s.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/sortable.md

@@ -1,6 +1,6 @@
 # Sortable
 
-> Navigation · @motifx-community/ui 0.1.0-beta.2
+> Navigation · @motifx-community/ui 0.1.0-beta.3
 
 Items the user puts in order by dragging them, with the pointer or a finger, or with the keys; lists of one group take each other’s items. A drop moves the element and tells you the indexes: your data stays yours.
 
@@ -207,7 +207,7 @@ export default function Handle() {
 | `onDragEnding` | event | About to drop; `cancel = true` leaves everything as it was. |
 | `onReorder` | event | An item moved within this sortable (`fromIndex`, `toIndex`, `item`), by a drop or the keys. Reorder your data here. |
 | `onRemove, onAdd` | event | An item went to another sortable of the group, and came into one: `from`, `to`, the indexes and the item. Move the data between your arrays here. |
-| `move(fromIndex, toIndex)` | `boolean` | Moves an item from code as a drop would, telling `onReorder`. |
+| `move(fromIndex, toIndex)` | `boolean` | Moves an item programmatically as a drop would, telling `onReorder`. |
 | `elements` | read-only | The items’ elements, in order. |
 | `isDragging` | read-only | An item is being dragged. |
 | `refresh()` | `void` | Reads the items again after they were changed in place. |

package/docs/speeddial.md

@@ -0,0 +1,290 @@
+# SpeedDial
+
+> Buttons · @motifx-community/ui 0.1.0-beta.3
+
+A round button in a corner of the page, on an edge or in the flow, that opens its actions when pressed: round buttons in a line with a label beside each, or on a circle, a half or a quarter of one around it with a tooltip each. With one action, the main button does it itself.
+
+## Import
+
+```tsx
+import { SpeedDial } from '@motifx-community/ui';
+```
+
+## In a line
+
+`actions` are the buttons that go out in `direction`; each has a `glyph` of the kit’s set or an `icon` of your own, a `text` shown as its label, and a `click`. `open` and `x-model` say whether the fan is out. Here in the flow of the page (`position='inline'`).
+
+```tsx
+import { reactive } from '@motifx/core';
+import { SpeedDial, Stack } from '@motifx-community/ui';
+
+/** Two speed dials in the flow of the page: one fans up, one fans to the end; a press on an action tells. */
+export default function Inline() {
+    const s = reactive({ told: '', open: false });
+    const actions = [
+        { key: 'note', text: 'New note', glyph: 'pencil', click: () => (s.told = 'a new note') },
+        { key: 'event', text: 'New event', glyph: 'calendar', click: () => (s.told = 'a new event') },
+        { key: 'file', text: 'Upload a file', glyph: 'upload', click: () => (s.told = 'a file to upload') },
+        { key: 'locked', text: 'Not yet', glyph: 'lock', enabled: false }
+    ];
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <div class="sd-row" style="display: flex; align-items: flex-end; gap: 48px; min-block-size: 260px; padding-inline-start: 140px">
+                <SpeedDial class="sd-up" position="inline" direction="up" text="New" actions={actions} x-model={() => s.open} />
+                <SpeedDial class="sd-end" position="inline" direction="end" text="Share" glyph="person" actions={[{ text: 'Mail', glyph: 'file', click: () => (s.told = 'shared by mail') }, { text: 'Link', glyph: 'pin', click: () => (s.told = 'a link to share') }]} />
+            </div>
+            <output class="sd-told">{() => `${s.told || 'nothing yet'}${s.open ? ' (open)' : ''}`}</output>
+        </Stack>
+    );
+}
+```
+
+## On a circle
+
+`layout='circle'` lays the actions evenly around the main button, the first in `direction`. They come out from under the button and go back there. `radius` sets how far out; by itself it is just enough to keep the actions `gap` apart and clear of the button. Around the button the labels are off and the actions have tooltips, because labels would run into each other; `showLabels` and `tooltip` say otherwise. Here it is in the centre of its box: `relativeTo='parent'` measures `position` in the nearest positioned parent.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, SpeedDial, Stack } from '@motifx-community/ui';
+
+/** The actions on a whole circle around the button, in the centre of a box; by default just far enough out to keep them apart. */
+export default function Circle() {
+    const s = reactive({ radius: null as number | null, told: '' });
+    const actions = [
+        { text: 'Edit', glyph: 'pencil', click: () => (s.told = 'edit') },
+        { text: 'Refresh', glyph: 'repeat', click: () => (s.told = 'refresh') },
+        { text: 'Delete', glyph: 'trash', click: () => (s.told = 'delete') },
+        { text: 'Upload', glyph: 'upload', click: () => (s.told = 'upload') },
+        { text: 'Download', glyph: 'download', click: () => (s.told = 'download') }
+    ];
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button text="Radius by itself" variant="outline" onclick={() => (s.radius = null)} />
+                <Button text="Radius 120" variant="outline" onclick={() => (s.radius = 120)} />
+                <output class="sd-circle-told">{() => s.told}</output>
+            </Stack>
+            <div style="position: relative; inline-size: 100%; block-size: 22rem">
+                <SpeedDial class="sd-circle" layout="circle" position="center" relativeTo="parent" radius={() => s.radius} text="Tools" actions={actions} />
+            </div>
+        </Stack>
+    );
+}
+```
+
+## On a half circle
+
+`layout='semi-circle'` lays them on half a circle with `direction` in its middle, which suits the middle of an edge: `position` takes `top`, `bottom`, `start` and `end`, and `direction` follows from it, into the page.
+
+```tsx
+import { SpeedDial } from '@motifx-community/ui';
+
+const ACTIONS = [
+    { text: 'Edit', glyph: 'pencil' },
+    { text: 'Refresh', glyph: 'repeat' },
+    { text: 'Delete', glyph: 'trash' },
+    { text: 'Upload', glyph: 'upload' },
+    { text: 'Download', glyph: 'download' }
+];
+
+/** A half circle on the middle of each edge of a box: `direction` follows from `position`, into the box. */
+export default function SemiCircle() {
+    return (
+        <div class="sd-semi" style="position: relative; inline-size: 100%; block-size: 26rem">
+            <SpeedDial class="sd-semi-top" layout="semi-circle" position="top" relativeTo="parent" text="Tools at the top" actions={ACTIONS} />
+            <SpeedDial class="sd-semi-start" layout="semi-circle" position="start" relativeTo="parent" text="Tools at the start" actions={ACTIONS} />
+            <SpeedDial class="sd-semi-end" layout="semi-circle" position="end" relativeTo="parent" text="Tools at the end" actions={ACTIONS} />
+            <SpeedDial class="sd-semi-bottom" layout="semi-circle" position="bottom" relativeTo="parent" text="Tools at the bottom" actions={ACTIONS} />
+        </div>
+    );
+}
+```
+
+## On a quarter circle
+
+`layout='quarter-circle'` lays them on a quarter of a circle, which suits a corner: `direction` follows from `position` again, and is a diagonal such as `up-start` when you set it.
+
+```tsx
+import { SpeedDial } from '@motifx-community/ui';
+
+const ACTIONS = [
+    { text: 'Edit', glyph: 'pencil' },
+    { text: 'Refresh', glyph: 'repeat' },
+    { text: 'Delete', glyph: 'trash' },
+    { text: 'Upload', glyph: 'upload' },
+    { text: 'Download', glyph: 'download' }
+];
+
+/** A quarter circle in each corner of a box: `direction` follows from `position`, into the box. */
+export default function QuarterCircle() {
+    return (
+        <div class="sd-quarter" style="position: relative; inline-size: 100%; block-size: 26rem">
+            <SpeedDial class="sd-quarter-top-start" layout="quarter-circle" position="top-start" relativeTo="parent" text="Tools, top start" actions={ACTIONS} />
+            <SpeedDial class="sd-quarter-top-end" layout="quarter-circle" position="top-end" relativeTo="parent" text="Tools, top end" actions={ACTIONS} />
+            <SpeedDial class="sd-quarter-bottom-start" layout="quarter-circle" position="bottom-start" relativeTo="parent" text="Tools, bottom start" actions={ACTIONS} />
+            <SpeedDial class="sd-quarter-bottom-end" layout="quarter-circle" position="bottom-end" relativeTo="parent" text="Tools, bottom end" actions={ACTIONS} />
+        </div>
+    );
+}
+```
+
+## Tooltips
+
+`tooltip` on the speed dial turns tooltips on or off for all its actions and passes options to each; `tooltip` on an action wins, with a text of its own, options, or `false`. Each is the kit’s `Tooltip`, on the outer side of the action unless `placement` says another. With one action, the main button carries its tooltip.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, SpeedDial, Stack } from '@motifx-community/ui';
+
+/** Tooltips on the actions: the speed dial's options for all, a text or options of an action's own, none on one. */
+export default function Tooltips() {
+    const s = reactive({ on: true });
+    return (
+        <Stack gap="md" style="inline-size: 100%">
+            <Button class="sd-tips-toggle" text="Tooltips" variant="outline" toggle x-model={() => s.on} />
+            <div style="min-block-size: 5rem; padding-block-start: 2rem">
+                <SpeedDial
+                    class="sd-tips"
+                    position="inline"
+                    direction="end"
+                    text="Edit"
+                    closeOnAction={false}
+                    showLabels={false}
+                    tooltip={() => (s.on ? { placement: 'top', delay: 100 } : false)}
+                    actions={[
+                        { text: 'Edit', glyph: 'pencil' },
+                        { text: 'Upload', glyph: 'upload', tooltip: 'Upload a new version, up to 20 MB' },
+                        { text: 'Delete', glyph: 'trash', tooltip: { text: 'Kept in the bin for 30 days', placement: 'bottom' } },
+                        { text: 'Save', glyph: 'save', tooltip: false }
+                    ]}
+                />
+            </div>
+        </Stack>
+    );
+}
+```
+
+## In a corner of the viewport
+
+By default it is fixed to the bottom end corner of the viewport, `inset` away from the edges; `position` names another place. Switch it on here to see it over the page.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { Button, SpeedDial, Stack } from '@motifx-community/ui';
+
+/** A speed dial fixed to a corner of the viewport, shown while the switch is on; the corner and the fan's way can change. */
+export default function Corner() {
+    const s = reactive({ on: false, position: 'bottom-end' as 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start', told: '' });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Stack orientation="horizontal" wrap align="center">
+                <Button class="sd-corner-toggle" text="In the corner" variant="outline" toggle x-model={() => s.on} />
+                <Button text="Bottom end" variant="outline" onclick={() => (s.position = 'bottom-end')} />
+                <Button text="Bottom start" variant="outline" onclick={() => (s.position = 'bottom-start')} />
+                <Button text="Top end" variant="outline" onclick={() => (s.position = 'top-end')} />
+                <output class="sd-corner-told">{() => s.told}</output>
+            </Stack>
+            <SpeedDial
+                class="sd-corner"
+                visible={() => s.on}
+                position={() => s.position}
+                text="Create"
+                actions={[
+                    { text: 'Document', glyph: 'file', click: () => (s.told = 'a document') },
+                    { text: 'Folder', glyph: 'columns', click: () => (s.told = 'a folder') },
+                    { text: 'Upload', glyph: 'upload', click: () => (s.told = 'an upload') }
+                ]}
+            />
+        </Stack>
+    );
+}
+```
+
+## One action
+
+With exactly one action shown, there is nothing to fan out: the main button takes the action’s glyph and name and does it itself. `extended` shows the name beside the glyph.
+
+```tsx
+import { reactive } from '@motifx/core';
+import { SpeedDial, Stack } from '@motifx-community/ui';
+
+/** With one action shown, the main button does it itself and takes its glyph and name; `extended` shows the name beside the glyph. */
+export default function Single() {
+    const s = reactive({ saved: 0 });
+    return (
+        <Stack gap="sm" style="inline-size: 100%">
+            <Stack orientation="horizontal" gap="lg" align="center">
+                <SpeedDial class="sd-single" position="inline" actions={[{ text: 'Save', glyph: 'save', click: () => s.saved++ }]} />
+                <SpeedDial class="sd-extended" position="inline" extended actions={[{ text: 'Save a copy', glyph: 'save', click: () => s.saved++ }]} />
+            </Stack>
+            <output class="sd-single-told">{() => `saved ${s.saved} times`}</output>
+        </Stack>
+    );
+}
+```
+
+## Keyboard
+
+| Key | What it does |
+| --- | --- |
+| `Tab` | The main button is the one stop; the actions are reached with the arrow keys. |
+| `Arrow keys` | On the main button, the key along the actions opens them on the first (the other way, on the last); on the actions they move, around the ends. Up and Down for a line that stands, Left and Right for one that lies; around the button either pair, Down and Right forward along the circle. |
+| `Home, End` | The first and the last action. |
+| `Enter, Space` | Press the main button or the focused action. |
+| `Escape` | Closes the actions and puts the focus back on the main button; so does a press outside, and Tab. While a tooltip is shown, the first Escape hides the tooltip. |
+
+## Accessibility
+
+| Topic | How |
+| --- | --- |
+| `The main button` | A button named by `text` (“Actions” in the kit language) with `aria-haspopup="menu"` and `aria-expanded`; with one action shown it is that action, named by it. |
+| `The actions` | A `menu` of `menuitem`s named by their labels; out of sight they are hidden from readers and keys (`inert`). |
+| `Labels and glyphs` | The labels are shown beside the actions while open; the name is on the action either way. The glyphs are decorative. |
+| `Tooltips` | The kit’s `Tooltip`: on keyboard focus too, dismissed with Escape, described with `aria-describedby`. A touch does not show one, so where the glyph alone does not say it on a touch screen, keep the labels on. |
+
+## Styling
+
+| Hook | What it is |
+| --- | --- |
+| `.mx-speed-dial` | The speed dial. `data-layout`, `data-position`, `data-relative`, `data-direction`, `data-open`, `data-labels`, `data-extended`, `data-single`. |
+| `.mx-speed-dial__main, .mx-speed-dial__main-glyph, .mx-speed-dial__main-text` | The main button, its glyph and its text. |
+| `.mx-speed-dial__fan, .mx-speed-dial__action, .mx-speed-dial__action-icon, .mx-speed-dial__label` | The fan, an action (`aria-disabled`, `data-side`: where its label and tooltip go), its glyph or icon, its label. |
+
+### Component tokens
+
+| Token | What it sets |
+| --- | --- |
+| `speed-dial.main, .main-glyph, .main-text, .action, .action-icon, .label, .fan` | Units: the main button (`hover`, `pressed`, `focus`, `open`, `extended`, `disabled`), its glyph (`open`) and text, an action (`hover`, `pressed`, `focus`, `disabled`), its glyph, the label, the fan. |
+| `speed-dial.inset, .gap, .label-gap` | From the edges, between the buttons (around the button too: the radius keeps this gap), between an action and its label. |
+
+## API reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `actions` | `Bind<readonly SpeedDialAction[]>` | `[]` | The actions in order: `text`, `glyph` (of the kit’s set) or `icon` (yours), `tooltip`, `enabled`, `visible`, `click`, `key`, `data`. With one shown, the main button does it itself. |
+| `glyph, openGlyph` | `Bind<string>` | `'plus'`, `'dismiss'` | The main button’s glyph, and its glyph while the actions are open. |
+| `text` | `Bind<string>` | the kit’s “Actions” | What screen readers call the main button, and its text when `extended`. |
+| `extended` | `Bind<boolean>` | `false` | The main button shows its `text` beside the glyph. |
+| `layout` | `Bind<SpeedDialLayout>` | `'linear'` | `linear`, `circle`, `semi-circle` or `quarter-circle`: in a line from the main button, or around it. |
+| `radius` | `Bind<number \| null>` | by itself | Around the button: pixels from its centre to the actions’ centres. By itself it is just enough to keep them apart. An `extended` main button is wider than this reckons with, so give it one. |
+| `direction` | `Bind<SpeedDialDirection>` | into the page | `up`, `down`, `start`, `end` or a diagonal such as `up-start`: where the actions go, the middle of the arc around the button. A line takes the first word of a diagonal. By itself it is away from the edges `position` names, and `up` in the centre and inline. |
+| `position` | `Bind<SpeedDialPosition>` | `'bottom-end'` | A corner (`bottom-end`, `bottom-start`, `top-end`, `top-start`), the middle of an edge (`top`, `bottom`, `start`, `end`), `center`, or `inline` in the flow. |
+| `relativeTo` | `Bind<SpeedDialRelativeTo>` | `'viewport'` | What `position` is measured in: `viewport`, or `parent`, the nearest positioned parent. |
+| `open` | `Bind<boolean>` | `false` | The actions are open. `x-model` binds it two-way. |
+| `closeOnAction` | `Bind<boolean>` | `true` | A press on an action closes the fan. |
+| `showLabels` | `Bind<boolean>` | in a line yes, around no | The actions’ labels are shown beside them while open. |
+| `tooltip` | `Bind<boolean \| SpeedDialTooltip>` | while the labels are off | Tooltips on the actions, with their `text`. Options go to each `Tooltip` (`placement`, `delay`, `hideDelay`, `showOn`, `content`…). By default they open on the outer side after 200 ms. An action’s own `tooltip` wins: a text, options, or `false` for none. |
+
+### Events, properties and methods
+
+| Member | Kind | Description |
+| --- | --- | --- |
+| `onOpened, onClosed` | event | The actions opened or closed (`byUser`). |
+| `onActionClick` | event | An action was pressed (`index`, `action`); its own `click` runs first. |
+| `isOpen` | read-only | The actions are open. |
+| `single` | read-only | The one action shown, when there is exactly one; `null` otherwise. |
+| `mainElement` | read-only | The main button. |
+| `show(), close(), toggle()` | `void` | Opens or closes the actions. |
+| `refresh()` | `void` | Reads the actions again after they were changed in place. |