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

package/CHANGELOG.md

@@ -6,6 +6,145 @@ 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
+
+- `Stepper`: the steps of a longer task and where the user stands, an indicator and a text per step, a line between
+  them; completed, current, pending and error statuses, optional and disabled steps, an icon in place of the number;
+  linear order (a press reaches a completed step or the next one) or free; `onStepChanging` may refuse or wait on a
+  promise; `next()`, `previous()`, `goTo()`; horizontal with the texts under or after the indicators, or vertical;
+  one Tab stop with the arrow keys; `x-model`. Units in the five languages: the step, its indicator, the mark, the
+  texts and the line (which turns a quarter standing).
+- `Wizard` and `WizardStep`: a stepper above or beside a page per step and the Back and Next buttons. Next validates
+  the kit's fields on the page, then the step's own `validate`; a page that fails keeps the wizard, marks its step
+  and focuses the first invalid field. On the last step Next finishes (`onFinishing` may wait, `onFinished`). Steps
+  from JSX or from `steps` with content factories, `add`, `insert`, `remove`; `lazy` and `keepAlive` as in `Tabs`.
+- Kit texts `steps`, `stepOf`, `stepOptional`, `stepDone`, `stepError`, `wizardNext`, `wizardPrevious`,
+  `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 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 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`),
+  `datetime` too; the value a `[start, end]` pair, `x-model`. The `Calendar` draws a range over its days
+  (`rangeStart`, `rangeEnd`: the cell states `range-start`, `range-end`, `range-single`, `range-in` in every
+  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 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.
+- `Sortable`: items the user puts in order by dragging them, with the pointer or a finger (a long press), or
+  with the keys (Ctrl + an arrow, Home, End; each move read out); a copy follows the pointer, a line shows where
+  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()` 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
+  end (`onReachBottom`, `reachBottomOffset`, `release(true)` when there is no more; content that does not fill
+  the box asks at once, and again as it grows); `scrollTo`, `scrollBy`, `scrollToElement`, `onScrolled`.
+- Kit texts `sortableMoved`, `scrollPullDown`, `scrollRelease` and `scrollRefreshing` in English and Turkish.
+
+### Language
+
+- A Language page in the docs: switching, the packs, a pack of your own, `connectI18n`, your own texts that follow,
+  a control's own `locale`, and what a pack is checked for.
+- `npm run locales` checks every pack against the built-in texts: every key, the same ICU arguments, `UiStrings` in
+  step with `en.json`; `npm run locales -- path/to/de.json` checks a pack of your own.
+- The Turkish pack is a chunk of the package, loaded when `uiLocale.use('tr')` first asks for it; it is no longer
+  in the main bundle.
+
+### Removed
+
+- `trStrings`. Switch with `await uiLocale.use('tr')`, or add the JSON from `@motifx-community/ui/locales/tr.json`
+  with `uiLocale.add('tr', pack)`.
+
 ## [0.1.0-beta.1] - 2026-11-04
 
 ### DropDown and Lookup: a value on no loaded page is asked for by key
@@ -95,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.
@@ -119,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.
 
@@ -287,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
@@ -446,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
@@ -707,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,
@@ -1299,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
@@ -1406,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

@@ -1,5 +1,9 @@
 # @motifx-community/ui
 
+[![npm](https://img.shields.io/npm/v/@motifx-community/ui/beta?label=npm%20%40beta)](https://www.npmjs.com/package/@motifx-community/ui)
+[![CI](https://github.com/motifjs-community/motifjs-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/motifjs-community/motifjs-ui/actions/workflows/ci.yml)
+[![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
 UI components for **MotifJS** (`@motifx/core`) that work the way desktop UI does: a component is an
 object you create when you need it, show anywhere, and close like a window — or write in JSX and
 bind to state. Everything is drawn from the [MotifJS design system](https://github.com/motifjs-community/motifjs-design-system)
@@ -9,6 +13,8 @@ overrides. This package adds the components and their component tokens, nothing
 > **Preview** (`beta`): complete enough to build with; the API may still change before 1.0. Updates come as new
 > beta versions.
 
+The docs: [ui.motifjs.com](https://ui.motifjs.com). The same pages come with the package as Markdown, in `docs/`.
+
 ## Install
 
 ```sh
@@ -29,22 +35,22 @@ 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`, `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), `Calendar`, `Slider` (range) |
+| 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`, `FormLayout`, `Tabs`, `Accordion`, `MxForm` (window and modal form), `messageBox`, `confirm` |
-| Feedback | `ProgressBar`, `Spinner` (cover a panel), `Tooltip`, `Toast` |
+| 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) |
 
@@ -127,12 +133,12 @@ own components. A full page per component, `Control`, keyboard and focus, and a
 
 ## Contributing
 
-The design system is a dependency by path until it is published: clone
-`motifjs-design-system` next to this repository and build it (`npm ci && npm run build` there), then
-`npm install` here links it. `npm run check` must stay green (typecheck, `motif-lint`, stylelint
-with the design system's shared config, tests, build, docs build). `npm run e2e` runs the
-real-browser checks (needs a local Chrome and `playwright-core`, see the script header).
-Discussions live in the main [motifjs repo](https://github.com/motifjsdev/motifjs).
+The design system, the translations and the data layer are dependencies by path until they are published: clone
+`motifjs-design-system`, `motifjs-i18n` and `motifjs-data` next to this repository and build each once, then
+`npm ci` here links them. `npm run check` must stay green (typecheck, `motif-lint`, stylelint with the design
+system's shared config, tests, build, docs build). The setup, the checks and the rules a change follows are in
+[CONTRIBUTING.md](CONTRIBUTING.md). Questions and ideas go to the
+[MotifJS discussions](https://github.com/motifjsdev/motifjs/discussions).
 
 ## License
 

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/calendar/Calendar.d.ts

@@ -37,6 +37,12 @@ export declare class Calendar extends Control<HTMLDivElement, CalendarProps> {
     set currentView(value: Bind<CalendarView>);
     /** The date with the Tab stop; its month (or year) is the one on screen. */
     get focusedDate(): Date;
+    get rangeStart(): Date | null;
+    set rangeStart(value: Bind<Date | null>);
+    get rangeEnd(): Date | null;
+    set rangeEnd(value: Bind<Date | null>);
+    /** The pointer came over a day in the month view, or left the days (`null`). */
+    get onDayPointed(): MotifEvent<Date | null>;
     get onValueChanged(): MotifEvent<ValueChangedEventArgs<Date | null>>;
     /** Shows the month of `date` and puts the Tab stop on it. */
     goTo(date: Date): void;
@@ -54,6 +60,12 @@ export declare class Calendar extends Control<HTMLDivElement, CalendarProps> {
     /** The first and last day of what is on screen. */
     private shownRange;
     private renderMonth;
+    /** The range's ends in order, as days. */
+    private rangeOf;
+    /** Where a day stands in the range drawn: its start, its end, one day of both, or between. */
+    private rangeMark;
+    private pointedOver;
+    private point;
     /** The year view (twelve months) and the decade view (twelve years, one on each side). */
     private renderBlock;
     /** A month or a year can be chosen when one of its days can. */

package/dist/components/calendar/calendar-props.d.ts

@@ -22,5 +22,10 @@ export interface CalendarProps extends ControlProps {
     currentView?: Bind<CalendarView>;
     /** The view a choice is made in: `'year'` picks a month, `'decade'` a year. Default `'month'`. */
     minView?: Bind<CalendarView>;
+    /** A range drawn over the days (its ends and the days between), for a date range box; the value is still one day. */
+    rangeStart?: Bind<Date | null>;
+    rangeEnd?: Bind<Date | null>;
     onValueChanged?: (e: ValueChangedEventArgs<Date | null>) => void;
+    /** The pointer came over a day (`null`: it left the days). */
+    onDayPointed?: (day: Date | null) => void;
 }

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. */