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

package/CHANGELOG.md

@@ -6,6 +6,81 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 
 ## [Unreleased]
 
+## [0.1.0-beta.3] - 2026-11-06
+
+### New components
+
+- `Gallery`: panes side by side, one in view or several (`itemsPerPage`), moved by the buttons over the sides, the dots
+  under them, a swipe, a drag with the mouse or the arrow keys (Home and End too); `loop` goes around the ends without
+  running back across the panes between; a slideshow with `slideInterval`, which waits under the pointer, while focus
+  is inside, out of sight and under reduced motion, and a button that pauses it; a pane is an image with a caption
+  (`image`, `alt`, `text`, `description`) or any `content`; `stretchImages`, `height`; `value` and `x-model`;
+  `onSlideChanging` may refuse, `onSlideChanged`, `onItemClick`. A `region` with `aria-roledescription="carousel"`,
+  the panes out of view hidden from readers and keys. Units in the five languages: the frame, a pane, its caption
+  and texts, the side buttons and their arrows, the bar, the dots, the slideshow button and its glyph.
+- `MultiView` and `View`: pages side by side, one in sight, brought by a swipe or a drag, programmatically (`next()`,
+  `previous()`, `goTo()`, `add()`, `insert()`, `remove()`) or by a `Tabs`, a `Stepper` or buttons bound to the same
+  `value`; `loop`, `animated`, `lazy` and `keepAlive` as in `Tabs` (the same panel content part); hidden and disabled
+  views are skipped; `onSelecting` may refuse, `onSelectionChanged`.
+- The slide part under both: a finger or a pointer drags the panes, a drag far or fast enough lands on the next one,
+  and around the ends the far pane is set next to the one leaving for the move.
+- `Splitter` and `SplitPane`: panes side by side or one under the other, as many as needed, a handle between each
+  two that the pointer drags and the keys move (arrows by `step`, Home, End), resizing the two panes beside it; a
+  pane is a `Panel` with `size` (pixels, a share, or an equal share of what is left), `minSize`, `maxSize`,
+  `resizable`, and may be hidden from its handle (`collapsible`: a button on the handle, Enter, a double press);
+  `sizes` and `x-model` keep and restore a layout in pixels; panes added, inserted and removed programmatically, one may
+  hold another splitter; `onResizing`, `onResized`, `onCollapsing` may refuse, `onCollapsed`. The handle looks as
+  the `SplitContainer`’s does in every language.
+- `TileView`: tiles of `widthRatio` × `heightRatio` base cells (`baseItemWidth`, `baseItemHeight`) packed densely
+  down the columns (the view scrolls sideways) or along the rows; a tile is a text or any `content`; `selectionMode`
+  none, single or multiple with `value` and `x-model` (a press, Ctrl and a press, Space, Enter); the arrow keys walk
+  the grid by where the tiles lie; `allowReorder` drags a tile to its new place (a long press on a touch screen) or
+  moves it with Ctrl and an arrow, `onReordering` may refuse, `onReordered` tells the indexes; `onItemClick`.
+- Kit texts `splitterCollapse`, `splitterExpand`, `tiles` in English and Turkish.
+- `Resizable`: a box resized from its sides and corners with the pointer (the window's frame and box parts), or with
+  the arrow keys on the grip in its end corner; `handles` (all, edges, corners or a list), `minWidth`/`minHeight`,
+  `maxWidth`/`maxHeight`, `area` (its parent or an element), `keepAspectRatio`, `step`; a positioned box also moves
+  when a start or top side is dragged; `size` and `x-model` in pixels; `onResizeStarting` may refuse, `onResizing`,
+  `onResized`; the new size is read out.
+- `Draggable` and `DropTarget`: anything moved with the pointer, a finger (a long press) or the arrow keys, along an
+  `axis`, inside a `boundary`, by a `handle` only, or as a `clone` that follows the pointer while the draggable
+  stays; `position` and `x-model`; Escape brings it back; `onDragStarting` may refuse, `onDragging`, `onDragEnding`
+  may bring it back, `onDragEnded`. A target of the same `group` is marked while a drag is under way and while the
+  draggable is over it, may refuse in `onDragEntering`, and is told in `onDropped` with the draggable's `data`.
+- Kit texts `move`, `sizeNow`, `positionNow` in English and Turkish.
+- `SpeedDial`: a round button that opens its actions, each a round button with a glyph of the kit's set or an icon of
+  your own. `layout` lays them in a line, with a label beside each, or on a circle, a half or a quarter of one around
+  the button, as far out as `radius` says or as keeping them apart takes; they come out from under the button.
+  `position` is a corner, the middle of an edge, the centre or inline, in the viewport or in the parent
+  (`relativeTo`); `direction` is one of eight ways, by default into the page. `tooltip` gives the actions the kit's
+  `Tooltip`, on by itself while the labels are off, with options for all and a text, options or `false` per action.
+  `open` and `x-model`; `extended` shows the text; with one action shown the main button does it itself; a menu for
+  the keys (the arrows, Home, End, Enter, Escape, a press outside closes); `onOpened`, `onClosed`, `onActionClick`.
+  Units in the five languages: Material's FAB and small FABs, round buttons elsewhere.
+- `ValidationSummary`: the failed fields of a `ValidationGroup`, one line each with the field's label and its
+  message under a header, a live region; a press on a line focuses the field; it follows the group's members and
+  each field's validity, so a check, a pass or a reset draws it again; `header`, `showHeader`, `focusOnClick`,
+  `onItemClick`, `failed`, `count`.
+- Kit texts `actions`, `validationSummary` in English and Turkish.
+- `Timeline`: events in time order (`items`: `date`, `title`, `description`, `glyph` or `icon`, `tone`, any `content`),
+  down the page as cards beside a line with a dot each, on either side in turn (`alternate`) or folded until pressed
+  (`collapsible`); or along a line of dates (`orientation`), where a press on a date, the arrow keys, Home and End
+  show that event's card under the line, with buttons at the ends of the track; the dates written in the kit's
+  language with `dateFormat` (a style or the options of `Intl.DateTimeFormat`); `value` and `x-model`; `goTo()`,
+  `unfold()`, `isUnfolded()`, `formatDate()`, `refresh()`; `onItemClick`, `onSelectionChanged`. A list down the
+  page, tabs and a tab panel along the line. Units in the five languages: the line, a dot and its glyph by tone,
+  a card, a flag, the texts, the detail, the track buttons.
+- Kit texts `timeline`, `timelineEarlier`, `timelineLater` in English and Turkish.
+- Kit texts `gallery`, `gallerySlides`, `gallerySlideOf`, `galleryPrevious`, `galleryNext`, `galleryChoose`,
+  `galleryPlay`, `galleryPause`, `multiView`, `multiViewPageOf` in English and Turkish; the `play` and `pause` glyphs.
+
+### Fixed
+
+- `FileUploader`: the box is a drop zone, not a one-line field: as tall as the button and the hint with the same
+  room on every side (`zone-padding`, 8 px in Tactile and Fluent, 12 px in Lounge, Material and Lilac), where the
+  button used to touch the dashed frame. The label stays above the box in every language; Material's floating
+  label lay over the button. The dead `padding` tokens of the uploader's field place are gone.
+
 ## [0.1.0-beta.2] - 2026-11-05
 
 ### New components
@@ -24,13 +99,13 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
   `wizardFinish` in English and Turkish.
 - `Popover`: content next to the element it belongs to, with a title, a close button and an arrow where the
   design language draws one (Tactile, Fluent, Lilac); opened by a press on the target, by the pointer resting on it
-  (`showOn: 'hover'`, keyboard focus too) or from code; every placement of the kit's popups, a width of its own;
+  (`showOn: 'hover'`, keyboard focus too) or programmatically; every placement of the kit's popups, a width of its own;
   focus goes in and comes back; Escape, a press outside, focus leaving and the close button close it, and
   `onClosing` may keep it open; `value` and `x-model`.
 - `LoadPanel`: 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 (`onCancel`, Escape too); what is under it is inert and `aria-busy`, focus waits on the
   panel and comes back; `delay` keeps quick work from flashing it; `value` and `x-model`, `show()` and `hide()`.
-- `homeOf` in the core: where a surface made from code goes for its anchor (the tooltip's rule, now shared).
+- `homeOf` in the core: where a surface made programmatically goes for its anchor (the tooltip's rule, now shared).
 - `DateRangeBox`: a start and an end in one field, typed through two masks or picked on two months side by side
   (the first pick the start, the second the end, the pointer showing the range meanwhile), ready-made ranges
   (`presets`), `min`, `max`, `disabledDates`, the least and the most days a range may span (`minDays`, `maxDays`),
@@ -39,7 +114,7 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
   language) and tells the day under the pointer (`onDayPointed`).
 - `FileUploader`: files chosen with a button or dropped on the box, listed with their size and what happens to
   them; `accept`, `maxFileSize`, `minFileSize` and `maxFiles` turn files away with the reason; uploaded as they come,
-  on an Upload button or from code, by the uploader itself (`uploadUrl`, in one piece or in chunks with
+  on an Upload button or programmatically, by the uploader itself (`uploadUrl`, in one piece or in chunks with
   `Content-Range`, with progress) or by your own `upload`; cancel, retry and remove on each row; a field (label,
   `required`, rules); kit glyphs `upload` and `file`.
 - Kit texts for both, in English and Turkish.
@@ -48,7 +123,7 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
   it would land, the list scrolls near its edges; sortables of one `group` take each other's items; the items
   are the JSX children, or `items` drawn with `itemTemplate` (the rows keyed by item, kept as the order
   changes); a `handle` takes the drag and the keys; `onDragStarting`, `onDragChanging` and `onDragEnding` may
-  refuse; `onReorder`, `onRemove` and `onAdd` tell the indexes and the data stays yours; `move()` from code.
+  refuse; `onReorder`, `onRemove` and `onAdd` tell the indexes and the data stays yours; `move()` programmatically.
   Units in the five languages: the list, an item, the line, the copy.
 - `ScrollView`: content that scrolls in a box of its own; the bars shown on scroll, on hover, always or never;
   pull to refresh with a finger or the pointer (`onPullDown`, a promise or `release()`); more loaded near the
@@ -159,10 +234,10 @@ readers that are not a browser: a Markdown page per component in `docs/`, an ind
 
 - A property given as a function is followed by a binding of the component (`follow`, `PropBinding`): a reactive
   source updates it by itself, plain data shows on the developer's `reState()`. The value is handed on only when it
-  differs from the last one read, so a change the user made stays across a `reState()`; a property set from code
+  differs from the last one read, so a change the user made stays across a `reState()`; a property set programmatically
   stops following its function. `refreshProps()` is gone (one way, not two).
 - `x-model` shows the component's state on every path: the user, code (`value`, `pressed`, `position`, a tab or a
-  panel chosen from code), the component's own rules (a mask, `decimals`, `min`/`max`) and a cancelled close.
+  panel chosen programmatically), the component's own rules (a mask, `decimals`, `min`/`max`) and a cancelled close.
 - NumberBox rounds its value to `decimals` and shows that many digits; its spin buttons come back after `none`.
   Calendar shows the month of a value given from anywhere.
 - Every docs page's components converted; `onReState(component, run)` for parts drawn by hand.
@@ -183,7 +258,7 @@ readers that are not a browser: a Markdown page per component in `docs/`, an ind
   threw, and so did a scroll coming after it; a box waiting for its store shows it locked again; `selectCells` right
   after `showDate` finds the cells of the new days; a resource kind's field given as a function
   (`useColorAsDefault: () => …`) is followed again.
-- Docs: "From code" selects the next workday (the work week has no Saturday); the two copies of a TabDocs document
+- Docs: "Programmatically" selects the next workday (the work week has no Saturday); the two copies of a TabDocs document
   read a field again when the other one changes it. Tests: the back-button session waits for its history moves
   between tests (`backButtonSettled`), a new window's `onMounted` is waited for.
 
@@ -351,7 +426,7 @@ mentioned further down.
   access key or JSX children; `icon` (an address, an element or a component) at the start or end;
   `stretch`, `type`, `hint`; `toggle` / `pressed` with `x-model`; `busy` (spinner, presses ignored,
   size kept, `aria-busy`); `focusableWhenDisabled` (`aria-disabled`, stays in the Tab order). Every
-  prop is a value or a function and a settable, reactive property; set from code, a function is
+  prop is a value or a function and a settable, reactive property; set programmatically, a function is
   bound and followed too (`Control` setters as well: `ctrl.enabled = () => !state.busy`).
 - A menu: `menu` (items with icon, hint, enabled, visible, checked, beginGroup, each a value or a
   function the open menu follows; click, data) or any
@@ -510,7 +585,7 @@ mentioned further down.
   `gridSummarySeparator`, `gridTotalSummary` in en and tr.
 - Feedback: `ProgressBar`, `Spinner` (with `Spinner.cover`), `Tooltip` / `addTooltip`, `Toast` /
   `toast` / `Toaster`.
-- `Control` binds DOM events given from code (`new Button({ onclick })`); its private state getter is
+- `Control` binds DOM events given programmatically (`new Button({ onclick })`); its private state getter is
   `controlState`, so a subclass may have a `state` field.
 - Fixed: `Stack`, `Grid` and `DockPanel` overflowed the call stack when a child was added in their
   `ref`. `TreeView` reported a check again and again when `checkedKeys` was bound both ways with
@@ -771,7 +846,7 @@ mentioned further down.
 - Methods `expandRow(key)`, `collapseRow(key)`, `isRowExpanded(key)` (reactive), `expandAllRows()`,
   `collapseAllRows()`. The row events are the groups' ones, now with `kind: 'group' | 'detail'` (and
   `row` for details): `onRowExpanding` / `onRowCollapsing` (cancellable) and `onRowExpanded` /
-  `onRowCollapsed`, from the user and from code. `onRowPrepared` with `rowType: 'detail'`,
+  `onRowCollapsed`, from the user and programmatically. `onRowPrepared` with `rowType: 'detail'`,
   `getVisibleRows()` lists the details after their row. `GridRowExpandingEventArgs` and
   `GridRowExpandedEventArgs` are unions by `kind`: a handler that reads a group's `key` narrows first.
 - Keyboard and ARIA: Enter / Space and Right / Left on the expand cell, Tab into the row's details,
@@ -1363,7 +1438,7 @@ mentioned further down.
   no close button of its own (`data-bar-close`). `compactBarButtons` is now `'auto'` by default: an area
   keeps `['autoHide', 'close']`, a floating window `['closeWindow']`; a list is followed as it is in both,
   and an area's or a window's `barButtons` takes `'auto'` too. A floating window's close button now hides
-  the documents that cannot close instead of leaving the window open (`closeWindow` from code still
+  the documents that cannot close instead of leaving the window open (`closeWindow` programmatically still
   closes them all). Hidden documents: `hide(doc)` and `show(doc, { group, side, index, active, focus })`
   (also `TabDocument.hide()` / `show()`, and `open(doc)` shows a hidden one) put it back into the group
   it was hidden from, else its dock area (made again at its size, folded if it was), else a floating
@@ -1470,7 +1545,7 @@ mentioned further down.
   a range over 100,000 rows × 60 virtual columns: 60 fps inside the rows, 59 fps while scrolling
   past the bottom edge, no cell text written while only the range changed.
 - Docs: a new page “Selecting by dragging” (`/datagrid/drag-select`: rows in memory with grouping,
-  an editable sheet of orders, 100,000 rows × 60 virtual columns set from code), the API page's
+  an editable sheet of orders, 100,000 rows × 60 virtual columns set programmatically), the API page's
   rows and tokens; `e2e/checks/52-datagrid-drag-select.mjs`.
 - Touch on real phones (found on an Android phone, Chrome 155): a long press drag of a tab and the DataGrid's
   long press selection did nothing, because the browser decides when the finger lands whether the page may

package/README.md

@@ -35,21 +35,21 @@ this one after it.
 
 ## What is here
 
-Every component works from JSX (bound to state) and from code (`new X({...})`, added anywhere,
+Every component works from JSX (bound to state) and programmatically (`new X({...})`, added anywhere,
 changed later); every prop and property takes a value or a function. The docs site has a page for
 each (`npm run dev`).
 
 | Group | Components |
 | --- | --- |
-| Buttons and commands | `Button` (menu, split, drop-down, toggle, busy), `ButtonGroup` (segmented choice), `Toolbar` (overflow menu), `MenuBar`, `ContextMenu` |
-| Display | `Badge`, `Avatar`, `AvatarGroup`, `Chip`, `ChipGroup`, `Card`, `Skeleton` |
-| Navigation | `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `Stepper`, `Wizard`, `TabDocumentManager` |
+| Buttons and commands | `Button` (menu, split, drop-down, toggle, busy), `ButtonGroup` (segmented choice), `Toolbar` (overflow menu), `MenuBar`, `ContextMenu`, `SpeedDial` (actions in a line or around a button, on a circle, a half or a quarter of one) |
+| Display | `Badge`, `Avatar`, `AvatarGroup`, `Chip`, `ChipGroup`, `Card`, `Skeleton`, `Gallery` (slides, dots, slideshow), `TileView` (tiles on a grid, chosen, reordered), `Timeline` (events down the page or along a line of dates) |
+| Navigation | `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `Stepper`, `Wizard`, `MultiView` (pages by swipe), `TabDocumentManager` |
 | More editors | `Rating`, `ColorBox`, `ColorPicker` |
 | Scheduling | `Scheduler` (day, week, month, timeline, agenda; recurrence, resources, iCalendar) |
-| Editors | `TextBox` (mask, validation), `TextArea` (auto-grow), `NumberBox` (locale formats, spin), `DateBox` (date, time, both), `DateRangeBox` (two months, presets, a span), `Calendar`, `Slider` (range), `FileUploader` (drop, limits, chunks, progress) |
+| Editors | `TextBox` (mask, validation), `TextArea` (auto-grow), `NumberBox` (locale formats, spin), `DateBox` (date, time, both), `DateRangeBox` (two months, presets, a span), `Calendar`, `Slider` (range), `FileUploader` (drop, limits, chunks, progress), `ValidationSummary` (the failed fields of a group, each a press away) |
 | Choice | `CheckBox` (three states), `Switch`, `RadioGroup`, `DropDown`, `ComboBox`, `Autocomplete`, `Lookup` (columns), `TagBox`, `ListBox` |
 | Data | `DataGrid` (virtual or paged, editing with three save modes, row actions, selection, filters, search panel, grouping with a group panel, toolbar, lookup columns, copy and paste, CSV and Excel export, kept layout), `TreeView` (lazy, check boxes, filter); lists and grids read `@motifx-community/data` sources |
-| Layout and windows | `Stack`, `Grid`, `DockPanel`, `Panel`, `GroupBox`, `SplitContainer`, `ScrollView` (pull to refresh, load more), `Sortable` (drag or keys, lists of a group), `FormLayout`, `Tabs`, `Accordion`, `MxForm` (window and modal form), `messageBox`, `confirm` |
+| Layout and windows | `Stack`, `Grid`, `DockPanel`, `Panel`, `GroupBox`, `SplitContainer`, `Splitter` (any number of panes, hidden from the handle), `ScrollView` (pull to refresh, load more), `Sortable` (drag or keys, lists of a group), `Resizable` (sides, corners, the keys on a grip), `Draggable` and `DropTarget` (anything moved, along an axis or inside a boundary, copies into targets), `FormLayout`, `Tabs`, `Accordion`, `MxForm` (window and modal form), `messageBox`, `confirm` |
 | Feedback | `ProgressBar`, `Spinner` (cover a panel), `LoadPanel`, `Tooltip`, `Popover`, `Toast` |
 | Shared parts | `Field` (base of every editor), `InputMask`, `ValidationGroup`, `validateFields`, `checkRules`, `OptionList`, `DataItems`, `Popup`, `MenuList`, date helpers (`datePatternOf`) |
 | Base | `Control`, `FocusContainer`, `addShortcut`, `parseAccessKey`, `uiLocale` (English, Turkish) |

package/dist/components/accordion/Accordion.d.ts

@@ -9,7 +9,7 @@ import type { AccordionProps } from './accordion-props';
 import type { AccordionVariant } from './accordion-variant';
 /**
  * Sections that open and close under their headers, following the ARIA accordion pattern.
- * Items come as `<AccordionItem>` children or from code (`add`, `insert`, `remove`). One item is
+ * Items come as `<AccordionItem>` children or programmatically (`add`, `insert`, `remove`). One item is
  * open at a time unless `multiple`; `value` (two-way with `x-model`) lists the open items'
  * keys. Up and Down move between the headers, an item's `&` key opens or closes it, and a
  * section is built when it is first opened (`lazy`).
@@ -66,9 +66,9 @@ export declare class Accordion extends Control<HTMLDivElement, AccordionProps> {
     insert(index: number, item: AccordionItem): AccordionItem;
     /** Removes an item and disposes it. */
     remove(item: AccordionItem): boolean;
-    /** Opens every item (with `multiple`), from code. */
+    /** Opens every item (with `multiple`), programmatically. */
     expandAll(): void;
-    /** Closes every item, from code (with `collapsible` off, the first stays open). */
+    /** Closes every item, programmatically (with `collapsible` off, the first stays open). */
     collapseAll(): void;
     onDisposing(): void;
     protected applyProperty(name: string, value: unknown): void;

package/dist/components/accordion/AccordionItem.d.ts

@@ -20,7 +20,7 @@ export declare class AccordionItem extends Control<HTMLDivElement, AccordionItem
     /** The `key` prop (also when written as the JSX `key`), `''` without one. */
     get key(): string;
     set key(value: Bind<string>);
-    /** Whether the section is open. Setting it from code fires no cancelable event. Reactive. */
+    /** Whether the section is open. Setting it programmatically fires no cancelable event. Reactive. */
     get expanded(): boolean;
     set expanded(value: Bind<boolean>);
     get icon(): IconSource | null;

package/dist/components/card/Card.d.ts

@@ -73,7 +73,7 @@ export declare class Card extends Control<HTMLDivElement, CardProps> {
     set selected(value: Bind<boolean>);
     /** It was selected or not any more, by the user or by code (`e.byUser`). */
     get onSelectedChanged(): MotifEvent<CardSelectedChangedEventArgs>;
-    /** The part holding the content, for adding to it from code. */
+    /** The part holding the content, for adding to it programmatically. */
     get contentPart(): Component<HTMLDivElement>;
     /** The avatar before the titles, when it has one. */
     get avatarControl(): Avatar | null;

package/dist/components/contextmenu/ContextMenu.d.ts

@@ -50,7 +50,7 @@ export declare class ContextMenu extends Control<HTMLDivElement, ContextMenuProp
     get onItemClick(): MotifEvent<MenuItemClickEventArgs>;
     get onClosed(): MotifEvent<PopupCloseReason>;
     /**
-     * Opens the menu from code: at a point of the viewport, or at an element (its start corner,
+     * Opens the menu programmatically: at a point of the viewport, or at an element (its start corner,
      * below it). `target` is what `onOpening` and `targetElement` report; the target element by
      * default. Returns whether it opened.
      */

package/dist/components/datagrid/DataGrid.d.ts

@@ -493,7 +493,7 @@ export declare class DataGrid<T = any> extends Control<HTMLDivElement, DataGridP
      * `'cell'` mode it is saved). In the edit form, keeps every field's value. `false` when a value cannot be read.
      */
     closeEditCell(): boolean;
-    /** Starts changes made from code together: the rows are laid out once, at the last `endUpdate()`. */
+    /** Starts changes made programmatically together: the rows are laid out once, at the last `endUpdate()`. */
     beginUpdate(): void;
     endUpdate(): void;
     /**
@@ -575,14 +575,14 @@ export declare class DataGrid<T = any> extends Control<HTMLDivElement, DataGridP
     /** The actions the toolbar and the bottom bar show now, for those rows. Reactive. */
     get barActions(): GridBarAction<T>[];
     /**
-     * Runs an action from code, as a press does: on `rows`, or on the rows the bars act on now. Rows
+     * Runs an action programmatically, as a press does: on `rows`, or on the rows the bars act on now. Rows
      * share an action by its `id`; it runs only where it is visible and enabled for them. Resolves to
      * the outcome, or `null` when the action is not there or `onActionRunning` cancelled it.
      */
     runAction(id: string, rows?: readonly T[]): Promise<GridActionRanEventArgs<T> | null>;
     /** Stops the action working on several rows (the rows not started are left). */
     stopAction(): void;
-    /** Raised before an action runs (in a row, a bar, a row's menu or from code): `e.cancel` keeps it from running. */
+    /** Raised before an action runs (in a row, a bar, a row's menu or programmatically): `e.cancel` keeps it from running. */
     get onActionRunning(): MotifEvent<GridActionRunningEventArgs<T>>;
     /** Raised when an action ran: on how many rows it worked or failed, and whether it was stopped. */
     get onActionRan(): MotifEvent<GridActionRanEventArgs<T>>;
@@ -683,7 +683,7 @@ export declare class DataGrid<T = any> extends Control<HTMLDivElement, DataGridP
     set searchText(text: Bind<string>);
     /** Searches for a text at once, as the search panel does after a typing pause; `''` stops searching. */
     searchByText(text: string): void;
-    /** Raised when the search text changes: typed in the search box, or set from code. */
+    /** Raised when the search text changes: typed in the search box, or set programmatically. */
     get onSearchTextChanged(): MotifEvent<GridSearchTextChangedEventArgs>;
     /** Raised before the search text changes: `e.cancel` keeps the one before. */
     get onSearchTextChanging(): MotifEvent<GridSearchTextChangingEventArgs>;
@@ -703,7 +703,7 @@ export declare class DataGrid<T = any> extends Control<HTMLDivElement, DataGridP
     ungroup(field: string): void;
     /** Sets the order of a grouped column's groups. */
     setGroupOrder(field: string, dir: 'asc' | 'desc'): void;
-    /** Raised before the grouping changes, by the user or from code: `e.cancel` keeps it. */
+    /** Raised before the grouping changes, by the user or programmatically: `e.cancel` keeps it. */
     get onGroupingChanging(): MotifEvent<GridGroupingChangingEventArgs>;
     /** Raised after the grouping changed. */
     get onGroupingChanged(): MotifEvent<GridGroupingChangedEventArgs>;

package/dist/components/datagrid/data-grid-props.d.ts

@@ -181,7 +181,7 @@ export interface DataGridProps<T> extends ControlProps {
      * `'save'`, `'cancel'`).
      */
     actions?: readonly GridActionItem<T>[] | ((row: T, state: RowState) => readonly GridActionItem<T>[]);
-    /** An action is about to run (in a row, a bar, a row's menu or from code): `e.cancel` keeps it from running. */
+    /** An action is about to run (in a row, a bar, a row's menu or programmatically): `e.cancel` keeps it from running. */
     onActionRunning?: (e: GridActionRunningEventArgs<T>) => void;
     /** An action ran: on how many rows it worked or failed, and whether it was stopped. */
     onActionRan?: (e: GridActionRanEventArgs<T>) => void;
@@ -208,7 +208,7 @@ export interface DataGridProps<T> extends ControlProps {
     searchText?: Bind<string>;
     /** The search text is about to change; `e.cancel` keeps the one before. */
     onSearchTextChanging?: (e: GridSearchTextChangingEventArgs) => void;
-    /** The search text changed (typed, or set from code). */
+    /** The search text changed (typed, or set programmatically). */
     onSearchTextChanged?: (e: GridSearchTextChangedEventArgs) => void;
     /**
      * Values of the rows under the filter and the search: a row of totals under the rows

package/dist/components/datagrid/grid-adaptive-row-expanded-event-args.d.ts

@@ -1,4 +1,4 @@
-/** A row's adaptive detail opened or closed, by the user or from code. */
+/** A row's adaptive detail opened or closed, by the user or programmatically. */
 export interface GridAdaptiveRowExpandedEventArgs<T> {
     readonly row: T;
     /** The row's key; `undefined` for a new row. */

package/dist/components/datagrid/grid-adaptive-row-expanding-event-args.d.ts

@@ -1,5 +1,5 @@
 import type { EventArgs } from '@motifx/core';
-/** A row's adaptive detail is about to open or close, by the user or from code; `cancel` keeps it as it is. */
+/** A row's adaptive detail is about to open or close, by the user or programmatically; `cancel` keeps it as it is. */
 export interface GridAdaptiveRowExpandingEventArgs<T> extends EventArgs {
     readonly row: T;
     /** The row's key; `undefined` for a new row. */

package/dist/components/datagrid/grid-grouping-changed-event-args.d.ts

@@ -1,5 +1,5 @@
 import type { data } from '@motifx-community/data';
-/** The grouping changed (by the user or from code). */
+/** The grouping changed (by the user or programmatically). */
 export interface GridGroupingChangedEventArgs {
     readonly group: readonly data.GroupItem[];
     readonly previous: readonly data.GroupItem[];

package/dist/components/datagrid/grid-grouping-changing-event-args.d.ts

@@ -1,10 +1,10 @@
 import type { EventArgs } from '@motifx/core';
 import type { data } from '@motifx-community/data';
-/** The grouping is about to change (by the user or from code); `cancel` keeps it as it is. */
+/** The grouping is about to change (by the user or programmatically); `cancel` keeps it as it is. */
 export interface GridGroupingChangingEventArgs extends EventArgs {
     /** The grouped columns it changes to, in order. */
     readonly group: readonly data.GroupItem[];
     readonly previous: readonly data.GroupItem[];
-    /** The user changed it (the group panel, the column menu, a header, a chip); `false` from code. */
+    /** The user changed it (the group panel, the column menu, a header, a chip); `false` programmatically. */
     readonly byUser: boolean;
 }

package/dist/components/datagrid/grid-master-detail.d.ts

@@ -7,7 +7,7 @@ import type { DetailContext } from './detail-context';
  * through `grid.masterDetail`.
  */
 export interface GridMasterDetail<T> {
-    /** The expand column: the user opens and closes the details. Off, they open from code only (`expandRow`). Default `false`. */
+    /** The expand column: the user opens and closes the details. Off, they open programmatically only (`expandRow`). Default `false`. */
     enabled?: Bind<boolean>;
     /** Every row starts open. Changing it, `enabled` or `template` opens or closes them all again. Default `false`. */
     autoExpandAll?: Bind<boolean>;

package/dist/components/datagrid/grid-row-expanded-event-args.d.ts

@@ -1,4 +1,4 @@
-/** A group, or a row's details (`masterDetail`), opened or closed, by the user or from code. See `GridRowExpandingEventArgs`. */
+/** A group, or a row's details (`masterDetail`), opened or closed, by the user or programmatically. See `GridRowExpandingEventArgs`. */
 export type GridRowExpandedEventArgs = {
     readonly kind: 'group';
     readonly key: readonly unknown[];

package/dist/components/datagrid/grid-row-expanding-event-args.d.ts

@@ -1,6 +1,6 @@
 import type { EventArgs } from '@motifx/core';
 /**
- * A group, or a row's details (`masterDetail`), is about to open or close, by the user or from code;
+ * A group, or a row's details (`masterDetail`), is about to open or close, by the user or programmatically;
  * `cancel` keeps it as it is. `kind` tells which: a group's `key` is the values of the groups from the
  * top level down to it, a row's is the row's key.
  */

package/dist/components/datagrid/grid-search-text-changed-event-args.d.ts

@@ -1,4 +1,4 @@
-/** The search text changed: typed in the search box, or set from code. */
+/** The search text changed: typed in the search box, or set programmatically. */
 export interface GridSearchTextChangedEventArgs {
     text: string;
 }

package/dist/components/datagrid/grid-search-text-changing-event-args.d.ts

@@ -1,5 +1,5 @@
 import type { EventArgs } from '@motifx/core';
-/** The search text is about to change (typed, or set from code); `cancel` keeps the one before. */
+/** The search text is about to change (typed, or set programmatically); `cancel` keeps the one before. */
 export interface GridSearchTextChangingEventArgs extends EventArgs {
     readonly text: string;
     readonly previous: string;

package/dist/components/datagrid/grid-sort-changing-event-args.d.ts

@@ -4,6 +4,6 @@ import type { data } from '@motifx-community/data';
 export interface GridSortChangingEventArgs extends EventArgs {
     readonly sort: readonly data.SortItem[];
     readonly previous: readonly data.SortItem[];
-    /** The user changed it; `false` from code. */
+    /** The user changed it; `false` programmatically. */
     readonly byUser: boolean;
 }

package/dist/components/datagrid/model/GridSearch.d.ts

@@ -24,7 +24,7 @@ export declare class GridSearch<T> {
     private marks;
     private loaded;
     private disposed;
-    /** Called when the text changes (typed or set from code). */
+    /** Called when the text changes (typed or set programmatically). */
     onTextChanged: ((text: string) => void) | null;
     constructor(model: GridModel<T>);
     /** Changes the text; a typed one waits `searchDelay` before it searches. */

package/dist/components/draggable/Draggable.d.ts

@@ -0,0 +1,99 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import { DragGhost } from "../../parts/drag/DragGhost";
+import type { DraggableEventArgs } from "./draggable-event-args";
+import type { DragAxis, DraggableProps, DragPosition } from "./draggable-props";
+import { DropTarget } from "./DropTarget";
+interface Session {
+    pointerId: number;
+    touch: boolean;
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    from: DragPosition;
+    started: boolean;
+    target: DropTarget | null;
+    refused: boolean;
+    timer: ReturnType<typeof setTimeout> | null;
+    rect: DOMRect | null;
+    bound: DOMRect | null;
+}
+/**
+ * Anything the user moves with the pointer, a finger (a long press) or the arrow keys: the JSX children in a box
+ * that follows the drag. It moves along `axis`, stays inside `boundary`, is taken by a `handle` only, or sends a
+ * `clone` after the pointer and stays where it is. A `DropTarget` of the same `group` under the pointer is told
+ * when it comes over, leaves and drops, with its `data`; what a drop does to your data is yours.
+ *
+ * @example
+ * <Draggable boundary="parent" x-model={() => this.note.at}><Card>…</Card></Draggable>
+ * <Draggable clone group="cards" data={card} handle=".grip">…</Draggable>
+ */
+export declare class Draggable extends Control<HTMLDivElement, DraggableProps> {
+    starting: Emitter<DraggableEventArgs>;
+    dragging: Emitter<DraggableEventArgs>;
+    ending: Emitter<DraggableEventArgs>;
+    ended: Emitter<DraggableEventArgs>;
+    live: Component<HTMLSpanElement>;
+    ghost: DragGhost;
+    session: Session | null;
+    stops: (() => void)[];
+    pos: DragPosition;
+    handleEl: HTMLElement | null;
+    constructor(props?: IBaseProp<DraggableProps>);
+    get axis(): DragAxis;
+    set axis(value: Bind<DragAxis>);
+    get boundary(): 'parent' | HTMLElement | null;
+    set boundary(value: Bind<'parent' | HTMLElement | null>);
+    get handle(): string | null;
+    set handle(value: Bind<string | null>);
+    get clone(): boolean;
+    set clone(value: Bind<boolean>);
+    get group(): string | null;
+    set group(value: Bind<string | null>);
+    get data(): unknown;
+    set data(value: unknown);
+    get step(): number;
+    set step(value: Bind<number>);
+    get position(): DragPosition | null;
+    set position(value: Bind<DragPosition | null>);
+    /** `position`, for `x-model`. */
+    get value(): DragPosition | null;
+    set value(value: DragPosition | null);
+    /** A drag is about to begin; `cancel` keeps the draggable in place. */
+    get onDragStarting(): MotifEvent<DraggableEventArgs>;
+    /** It is being dragged (`x`, `y`, `target`). */
+    get onDragging(): MotifEvent<DraggableEventArgs>;
+    /** The pointer let go; `cancel` brings the draggable back where it started. */
+    get onDragEnding(): MotifEvent<DraggableEventArgs>;
+    /** The drag ended (`x`, `y`, `target`, `dropped`). */
+    get onDragEnded(): MotifEvent<DraggableEventArgs>;
+    /** Where it stands now, in pixels from where it was laid out. */
+    get currentPosition(): DragPosition;
+    /** Whether it is being dragged. */
+    get isDragging(): boolean;
+    /** The element that takes the press and the keys: the handle, else the draggable itself. */
+    get handleElement(): HTMLElement;
+    onBuilt(): void;
+    applyPosition(): void;
+    drawHandle(): void;
+    args(target: DropTarget | null, event?: Event): DraggableEventArgs;
+    dropArgs(target: DropTarget, event?: Event): {
+        draggable: Draggable;
+        data: unknown;
+        cancel: boolean;
+        source: DropTarget;
+        event?: Event;
+    };
+    boundRect(): DOMRect | null;
+    within(dx: number, dy: number, rect: DOMRect | null, bound: DOMRect | null): DragPosition;
+    pointerDown(e: PointerEvent): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+    start(e: PointerEvent): boolean;
+    track(e: PointerEvent): void;
+    end(e: Event | null, drop: boolean): void;
+    keyDown(e: KeyboardEvent): void;
+    announce(): void;
+}
+export {};

package/dist/components/draggable/DropTarget.d.ts

@@ -0,0 +1,38 @@
+import { Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { DropEventArgs } from "./drop-event-args";
+import type { DropTargetProps } from "./drop-target-props";
+/** Every drop target on the page, for the draggables to find the one under the pointer. */
+export declare const TARGETS: Set<DropTarget>;
+/**
+ * A place a `Draggable` of its group can be dropped on: marked while a drag of the group is under way and while
+ * the draggable is over it; `onDragEntering` may refuse it, `onDropped` tells what was dropped, with its `data`. The JSX
+ * children are its content; what a drop does to your data is yours.
+ *
+ * @example
+ * <DropTarget group="cards" onDropped={e => this.board.move(e.data as Card, 'done')}>…</DropTarget>
+ */
+export declare class DropTarget extends Control<HTMLDivElement, DropTargetProps> {
+    entered: Emitter<DropEventArgs>;
+    left: Emitter<DropEventArgs>;
+    dropped: Emitter<DropEventArgs>;
+    constructor(props?: IBaseProp<DropTargetProps>);
+    get group(): string | null;
+    set group(value: Bind<string | null>);
+    /** A draggable came over it (`draggable`, `data`); `cancel` refuses it. */
+    get onDragEntering(): MotifEvent<DropEventArgs>;
+    /** A draggable left it. */
+    get onDragLeaving(): MotifEvent<DropEventArgs>;
+    /** A draggable was dropped on it. */
+    get onDropped(): MotifEvent<DropEventArgs>;
+    /** Whether it takes the draggables of `group`. */
+    takes(group: string | null): boolean;
+    /** @internal A drag of its group began or ended. */
+    markActive(on: boolean): void;
+    /** @internal The draggable came over it; `false` when it is refused. */
+    enter(args: DropEventArgs): boolean;
+    /** @internal The draggable left it. */
+    leave(args: DropEventArgs): void;
+    /** @internal The draggable was dropped on it. */
+    drop(args: DropEventArgs): void;
+}

package/dist/components/draggable/draggable-event-args.d.ts

@@ -0,0 +1,17 @@
+import type { EventArgs } from '@motifx/core';
+import type { Draggable } from './Draggable';
+import type { DropTarget } from './DropTarget';
+/** A drag begins (`cancel = true` keeps it in place), goes on, is about to end (`cancel` brings it back), or ended. */
+export interface DraggableEventArgs extends EventArgs {
+    /** Where the draggable stands, in pixels from where it was laid out. */
+    x: number;
+    y: number;
+    /** The drop target under the pointer that takes it, `null` for none. */
+    target: DropTarget | null;
+    /** By the pointer or a key, else from the props. */
+    byUser: boolean;
+    /** At the end: a target took it. */
+    dropped?: boolean;
+    source: Draggable;
+    event?: Event;
+}