@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ekrem Erşahin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,139 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @motifx-community/ui
+
+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)
+(`@motifx-community/design-system`): its tokens, themes, density, fonts and user-preference
+overrides. This package adds the components and their component tokens, nothing else.
+
+> **Preview** (`beta`): complete enough to build with; the API may still change before 1.0. Updates come as new
+> beta versions.
+
+## Install
+
+```sh
+npm i @motifx/core@next @motifx-community/ui@beta @motifx-community/design-system@beta @motifx-community/data@beta @motifx-community/i18n@beta
+npm i -D @motifx/compiler@next
+```
+
+Set up Vite with the MotifJS compiler and import the styles: see [docs/getting-started.md](docs/getting-started.md).
+
+```tsx
+import '@motifx-community/ui/styles.css'; // imports the design system first, then this kit's layer
+import { Button, Control, FocusContainer, addShortcut } from '@motifx-community/ui';
+```
+
+`styles.css` begins with `@import '@motifx-community/design-system/styles.css'`, which a bundler
+(Vite, the MotifJS default) resolves. Without a bundler, link the design system's stylesheet first and
+this one after it.
+
+## What is here
+
+Every component works from JSX (bound to state) and from code (`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` |
+| 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) |
+| 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` |
+| 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) |
+
+Focus never falls to `<body>` because a control was disabled, hidden, removed or disposed; it moves to
+the next usable element. Focus rings show only for keyboard use.
+
+```tsx
+<Button text="&Save" tone="accent" busy={() => this.model.saving} onclick={() => this.model.save()} />
+<Button text="Save" split onclick={() => this.save()} menu={[{ text: 'Save &as…', click: () => this.saveAs() }]} />
+
+class SearchBox extends FocusContainer<HTMLDivElement> {
+  override onConfigured() {
+    this.addShortcut('Escape', () => this.clear(), { inEditable: true }); // while focus is inside
+  }
+}
+
+addShortcut('Mod+K', () => palette.open()); // app-wide
+```
+
+## Design system and component tokens
+
+- The primitive, semantic and density layers, the three themes (`data-theme="light|dark|high-contrast"`,
+  OS preference by default), density (`data-density="compact"`), the fonts, reduced motion, reduced
+  transparency and forced colors all come from `@motifx-community/design-system`. Its
+  `--mx-*` custom properties are the contract; this package never redefines them.
+- Each component brings its **component tokens**: a schema in `tokens/schema/` (names and types) and a
+  value for every token in every language, `tokens/languages/<language>/`, each a knob of one
+  component that references a design-system token. They are built with Style Dictionary
+  against the design system's source, so a reference to a token that does not exist fails the build,
+  and written inside `@layer mx.components`, after the design system's `mx.base`: one group per component
+  (`button.*`, `field.*`, `list.*`, `calendar.*` …).
+- **Design languages.** The design system ships Tactile (the default), Lounge, Material, Fluent and
+  Lilac (`data-identity`). Every kit stylesheet paints only with its own component tokens, one per role
+  (fill, text, frame per side, edge, effect, focus, marks), and every language gives each of them its
+  own value in `tokens/languages/<language>/` (Material's 56 px filled text field with square bottom
+  corners, Fluent's 20 px check box); no language takes anything from another, and a new one is
+  files only. What a language decides for every component at once
+  (focus, raised faces, elevation per kind of surface, selection) comes from the design system's
+  role tokens the component tokens point at.
+- Un-layered app CSS wins over both packages. Override a design-system token to restyle everything:
+
+```css
+/* after styles.css */
+:root {
+  --mx-color-accent-solid: #8764b8;
+  --mx-color-accent-solid-hover: #9373c0;
+  --mx-color-accent-solid-pressed: #7e5aaf;
+  --mx-color-accent-fg: #5c2e91;
+}
+```
+
+- `@motifx-community/ui/tokens` exports `cssVar` / `cssProperty` and a `TokenName` that is the design
+  system's names plus the component token names, for styles written in TS.
+- `@motifx-community/ui/excel` exports `exportDataGrid`, which writes a `DataGrid` to an ExcelJS
+  worksheet. ExcelJS is an optional peer dependency the app installs; apps that do not import this
+  entry never load it.
+- RTL through logical properties; what must turn the other way (an arrow, a resize cursor) uses `:dir(rtl)`.
+
+## Browsers
+
+Chrome and Edge 120, Firefox 128, Safari 18 and later. The styles use `:has()`, `@property`, `:dir()` and relative
+colour syntax (`color(from …)`, `oklch(from …)`, which keep text readable on any colour a user picks).
+
+Build your CSS for these browsers (in Vite, `build.cssTarget: ['chrome120', 'edge120', 'firefox128', 'safari18']`):
+for an older target a minifier rewrites `:dir(rtl)` as a list of `:lang()` values, which only matches a page whose
+`lang` is a right-to-left language.
+
+## Docs
+
+The package carries its documentation for readers that are not a browser, such as an AI assistant working in your
+project: [`llms.txt`](llms.txt) is the index (the [llms.txt](https://llmstxt.org) convention), `docs/` a Markdown
+page per component (props, properties, methods, events, keyboard, accessibility, tokens and the examples' code),
+[`llms-full.txt`](llms-full.txt) every page in one file. Point your assistant at
+`node_modules/@motifx-community/ui/llms.txt`.
+
+`apps/docs` is the reference site, itself a MotifJS app: one `Application` with the router (a
+layout and a lazily loaded page per address), the reader's settings in a DI service, and the kit's
+own components. A full page per component, `Control`, keyboard and focus, and a token reference.
+`npm run dev` serves it on port 4500.
+
+## 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).
+
+## License
+
+[MIT](LICENSE)

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

@@ -0,0 +1,100 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { AccordionChevron } from './accordion-chevron';
+import type { AccordionExpandedEventArgs } from './accordion-expanded-event-args';
+import type { AccordionExpandingEventArgs } from './accordion-expanding-event-args';
+import { AccordionItem } from './AccordionItem';
+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
+ * 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`).
+ *
+ * @example
+ * <Accordion multiple x-model={() => this.state.open}>
+ *   <AccordionItem key="shipping" title="&Shipping">…</AccordionItem>
+ *   <AccordionItem key="payment" title="&Payment">…</AccordionItem>
+ * </Accordion>
+ *
+ * const faq = new Accordion({ variant: 'separated' });
+ * faq.add(new AccordionItem({ title: 'Can I pay later?', content: () => new Answer() }));
+ */
+export declare class Accordion extends Control<HTMLDivElement, AccordionProps> {
+    constructor(props?: IBaseProp<AccordionProps>);
+    /** The items, in order. Reactive. */
+    get items(): readonly AccordionItem[];
+    /** The open items' keys (an item without a key: its index). Reactive. */
+    get value(): (string | number)[];
+    set value(value: Bind<readonly (string | number)[] | null | undefined>);
+    /** The open items. Reactive. */
+    get expandedItems(): AccordionItem[];
+    get multiple(): boolean;
+    set multiple(value: Bind<boolean>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get headingLevel(): number;
+    set headingLevel(value: Bind<number>);
+    get arrowKeys(): boolean;
+    set arrowKeys(value: Bind<boolean>);
+    get regions(): boolean | 'auto';
+    set regions(value: Bind<boolean | 'auto'>);
+    get variant(): AccordionVariant;
+    set variant(value: Bind<AccordionVariant>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get chevron(): AccordionChevron;
+    set chevron(value: Bind<AccordionChevron>);
+    get lazy(): boolean;
+    set lazy(value: Bind<boolean>);
+    get keepAlive(): boolean;
+    set keepAlive(value: Bind<boolean>);
+    /** The user is about to open an item; `e.cancel = true` keeps it closed. */
+    get onExpanding(): MotifEvent<AccordionExpandingEventArgs>;
+    /** The user is about to close an item; `e.cancel = true` keeps it open. */
+    get onCollapsing(): MotifEvent<AccordionExpandingEventArgs>;
+    /** An item opened, by the user or by code (`e.byUser`). */
+    get onExpanded(): MotifEvent<AccordionExpandedEventArgs>;
+    /** An item closed, by the user or by code (`e.byUser`). */
+    get onCollapsed(): MotifEvent<AccordionExpandedEventArgs>;
+    /** Adds an item at the end (an item of another `Accordion` moves here). */
+    add(item: AccordionItem): AccordionItem;
+    /** Adds an item at `index`. */
+    insert(index: number, item: AccordionItem): AccordionItem;
+    /** Removes an item and disposes it. */
+    remove(item: AccordionItem): boolean;
+    /** Opens every item (with `multiple`), from code. */
+    expandAll(): void;
+    /** Closes every item, from code (with `collapsible` off, the first stays open). */
+    collapseAll(): void;
+    onDisposing(): void;
+    protected applyProperty(name: string, value: unknown): void;
+    /** @internal The user pressed an item's header. */
+    itemClicked(item: AccordionItem, event?: Event): void;
+    /** @internal An item opened or closed. */
+    itemToggled(item: AccordionItem): void;
+    /** @internal An item's visibility, `enabled` or `key` changed. */
+    itemChanged(item: AccordionItem): void;
+    /** @internal An item was disposed without `remove`. */
+    itemGone(item: AccordionItem): void;
+    private place;
+    private forget;
+    private neighbour;
+    private itemsNow;
+    private keyOf;
+    /** An open item that may not close: `collapsible` is off and it is the only one open. */
+    private locked;
+    /** One open item without `multiple`; one open item at least without `collapsible`. */
+    private settle;
+    private applyValue;
+    /** Keeps the `value` storage in step, without dropping a bound getter. */
+    private syncValue;
+    private onKeyDown;
+    private get parts();
+    private renderLook;
+    /** Heading levels, region roles and the header of an item that may not close. */
+    private renderItems;
+}

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

@@ -0,0 +1,66 @@
+import { type Bind, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { Accordion } from './Accordion';
+import type { AccordionItemProps } from './accordion-item-props';
+/**
+ * One section of an {@link Accordion}: a header button and the region it opens. The JSX
+ * children are the region's content, built when it is first opened (see `lazy`).
+ *
+ * @example
+ * <Accordion>
+ *   <AccordionItem title="&Shipping"><TextBox label="Address" /></AccordionItem>
+ *   <AccordionItem title="Payment" expanded>…</AccordionItem>
+ * </Accordion>
+ */
+export declare class AccordionItem extends Control<HTMLDivElement, AccordionItemProps> {
+    constructor(props?: IBaseProp<AccordionItemProps>);
+    get title(): string;
+    set title(value: Bind<string>);
+    /** 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. */
+    get expanded(): boolean;
+    set expanded(value: Bind<boolean>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null>);
+    get hint(): string;
+    set hint(value: Bind<string>);
+    /** This item's own setting; `undefined` follows the `Accordion`. */
+    get lazy(): boolean | undefined;
+    set lazy(value: Bind<boolean | undefined>);
+    get keepAlive(): boolean | undefined;
+    set keepAlive(value: Bind<boolean | undefined>);
+    /** The `Accordion` it belongs to. */
+    get owner(): Accordion | null;
+    /** Whether its section content has been built (see `lazy`). */
+    get contentBuilt(): boolean;
+    /** The header button. */
+    get headerElement(): HTMLButtonElement;
+    /** The region the header opens. */
+    get regionElement(): HTMLDivElement;
+    /** Opens the section as a click would: `onExpanding` can cancel it. */
+    expand(): boolean;
+    /** Closes the section as a click would: `onCollapsing` can cancel it. */
+    collapse(): boolean;
+    protected get focusElement(): HTMLElement;
+    /** The access key focuses the header and presses it. */
+    onAccessKey(): boolean;
+    protected applyProperty(name: string, value: unknown): void;
+    /** @internal Joins or leaves an `Accordion`. */
+    attachTo(owner: Accordion | null): void;
+    /** @internal Opens or closes it, keeping a bound `expanded` getter. */
+    setExpanded(on: boolean): void;
+    /** @internal The heading level and whether the section is a region; the Accordion decides. */
+    renderOuter(level: number, region: boolean, locked: boolean): void;
+    /** @internal Builds the section now when it is not lazy. */
+    prepare(): void;
+    private toggleAsUser;
+    private lazyNow;
+    private keepAliveNow;
+    private renderExpanded;
+    private renderIcon;
+    private get parts();
+    private createParts;
+}

package/dist/components/accordion/accordion-chevron.d.ts

@@ -0,0 +1,2 @@
+/** Where the arrow that shows the open state sits in a header, or `none`. */
+export type AccordionChevron = 'start' | 'end' | 'none';

package/dist/components/accordion/accordion-expanded-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { Accordion } from './Accordion';
+import type { AccordionItem } from './AccordionItem';
+export interface AccordionExpandedEventArgs {
+    item: AccordionItem;
+    index: number;
+    /** `true` when the user opened or closed it, `false` when code did. */
+    byUser: boolean;
+    source: Accordion;
+}

package/dist/components/accordion/accordion-expanding-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { EventArgs } from '@motifx/core';
+import type { Accordion } from './Accordion';
+import type { AccordionItem } from './AccordionItem';
+/** The user is about to open (or close) an item; `cancel = true` leaves it as it is. */
+export interface AccordionExpandingEventArgs extends EventArgs {
+    item: AccordionItem;
+    index: number;
+    source: Accordion;
+    event?: Event;
+}

package/dist/components/accordion/accordion-item-props.d.ts

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { ContentFactory } from '../tabs/PanelContent';
+/**
+ * Props of `AccordionItem`: a header and the section it opens; the JSX children are the
+ * section. Each one is also a settable, reactive property. `lazy` and `keepAlive` left unset
+ * follow the `Accordion`.
+ */
+export interface AccordionItemProps extends ControlProps {
+    /** The header text; `&Shipping` makes Alt+S open or close it. The same property as `text`. */
+    title?: Bind<string>;
+    /** Names the item in `Accordion.value`; without it the item's index does. */
+    key?: Bind<string>;
+    expanded?: Bind<boolean>;
+    icon?: Bind<IconSource | null | undefined>;
+    /** Shown as a tooltip on the header. */
+    hint?: Bind<string>;
+    /** Builds the section when it is first opened. */
+    lazy?: Bind<boolean | undefined>;
+    /** `false`: what `content` made is disposed when the item closes and made again when it opens. */
+    keepAlive?: Bind<boolean | undefined>;
+    /** Makes the section content, called when the section is built (instead of, or after, the JSX children). */
+    content?: ContentFactory;
+}

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

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { AccordionChevron } from './accordion-chevron';
+import type { AccordionExpandedEventArgs } from './accordion-expanded-event-args';
+import type { AccordionExpandingEventArgs } from './accordion-expanding-event-args';
+import type { AccordionVariant } from './accordion-variant';
+/** Props of `Accordion`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface AccordionProps extends ControlProps {
+    /** The open items' keys (an item without a key: its index). `x-model` binds it two-way. */
+    value?: Bind<readonly (string | number)[] | null | undefined>;
+    /** Several items can be open at once. Default `false`: opening one closes the other. */
+    multiple?: Bind<boolean>;
+    /** The open item can be closed. Default `true`; `false` keeps one item open. */
+    collapsible?: Bind<boolean>;
+    /** The `aria-level` of the headers, 1 to 6. Default 3. */
+    headingLevel?: Bind<number>;
+    /** Up, Down, Home and End move between the headers. Default `true`. */
+    arrowKeys?: Bind<boolean>;
+    /** Sections are `role="region"` landmarks: `'auto'` (default) while there are six items or fewer. */
+    regions?: Bind<boolean | 'auto'>;
+    /** Default `'list'`. */
+    variant?: Bind<AccordionVariant>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** Default `'end'`. */
+    chevron?: Bind<AccordionChevron>;
+    /** A section is built when first opened, then kept (an item's own `lazy` wins). Default `true`. */
+    lazy?: Bind<boolean>;
+    /** `false`: content made by an item's `content` is disposed when it closes (an item's own `keepAlive` wins). Default `true`. */
+    keepAlive?: Bind<boolean>;
+    /** The user is about to open an item; cancelable. */
+    onExpanding?: (e: AccordionExpandingEventArgs) => void;
+    /** The user is about to close an item; cancelable. */
+    onCollapsing?: (e: AccordionExpandingEventArgs) => void;
+    onExpanded?: (e: AccordionExpandedEventArgs) => void;
+    onCollapsed?: (e: AccordionExpandedEventArgs) => void;
+}

package/dist/components/accordion/accordion-variant.d.ts

@@ -0,0 +1,2 @@
+/** `list`: one bordered box; `separated`: each item a card of its own; `flush`: only lines between the items. */
+export type AccordionVariant = 'list' | 'separated' | 'flush';

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

@@ -0,0 +1,8 @@
+export { Accordion } from './Accordion';
+export { AccordionItem } from './AccordionItem';
+export type { AccordionProps } from './accordion-props';
+export type { AccordionItemProps } from './accordion-item-props';
+export type { AccordionVariant } from './accordion-variant';
+export type { AccordionChevron } from './accordion-chevron';
+export type { AccordionExpandingEventArgs } from './accordion-expanding-event-args';
+export type { AccordionExpandedEventArgs } from './accordion-expanded-event-args';

package/dist/components/actionsheet/ActionSheet.d.ts

@@ -0,0 +1,61 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { MenuList } from '../../parts/menu/MenuList';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { FormHost } from '../form/form-host';
+import type { BottomSheetDetent } from '../sheet/bottom-sheet-detent';
+import { BottomSheet } from '../sheet/BottomSheet';
+import type { ActionSheetProps } from './action-sheet-props';
+/**
+ * A list of commands that comes up from the bottom: the kit's menu items, large enough for a
+ * finger, with a title, a message and a cancel button apart. A submenu opens in its place, with a
+ * way back. Choosing an item closes the sheet and runs it; `choose()` resolves with the item, or
+ * `null` when the sheet was closed without one. It is a `BottomSheet` (as tall as its items by
+ * default): it is dragged down, closed by Escape, the scrim and the browser's back. A
+ * `ContextMenu` with `presentation: 'sheet'` (or `'auto'` on a touch screen) opens its items here.
+ *
+ * @example
+ * const item = await new ActionSheet({ title: 'report.pdf', items: [{ text: 'Share' }, { text: 'Delete', tone: 'danger' }] }).choose();
+ */
+export declare class ActionSheet extends BottomSheet {
+    constructor(props?: IBaseProp<ActionSheetProps>);
+    get items(): readonly MenuItem[];
+    set items(value: Bind<readonly MenuItem[]>);
+    get message(): string;
+    set message(value: Bind<string>);
+    get showCancel(): boolean;
+    set showCancel(value: Bind<boolean>);
+    get cancelText(): string;
+    set cancelText(value: Bind<string>);
+    /** As tall as its items unless set. */
+    get detents(): readonly BottomSheetDetent[];
+    set detents(value: Bind<readonly BottomSheetDetent[]>);
+    /** Focus moves in as it opens: to the list, or to its first item when a key opened it. */
+    get focusOnOpen(): boolean;
+    set focusOnOpen(_value: Bind<boolean>);
+    /** The item chosen the last time it was open, `null` when none was. */
+    get chosenItem(): MenuItem | null;
+    /** The list of items, for code that reads or focuses it. */
+    get menu(): MenuList;
+    /** An item was chosen, after the sheet closed and the item's own `click` ran. */
+    get onItemClick(): MotifEvent<MenuItemClickEventArgs>;
+    /**
+     * Reads the items again (the level shown too) after they were changed in place. Your items may be plain or
+     * reactive; the sheet reads them as they are.
+     */
+    refresh(): void;
+    /** Opens it; `byKeyboard` puts focus on the first item (else on the list, as a menu opened by the pointer does). */
+    open(byKeyboard?: boolean): boolean;
+    /**
+     * Opens it with `items` (else its own) and resolves with the item chosen, or `null` when it is
+     * closed without one. `host` gives it a place when it has none (else the end of the page).
+     */
+    choose(items?: readonly MenuItem[], host?: FormHost): Promise<MenuItem | null>;
+    protected openBy(): boolean;
+    protected panelClosed(): void;
+    private get actions();
+    private createActions;
+    /** Shows the innermost of `levels`; inside a submenu the first item goes back. */
+    private showLevel;
+    private chosen;
+}

package/dist/components/actionsheet/action-sheet-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { BottomSheetProps } from '../sheet/bottom-sheet-props';
+/** Props of `ActionSheet`: those of `BottomSheet` plus its own. Each one is also a settable, reactive property. */
+export interface ActionSheetProps extends BottomSheetProps {
+    /** The commands: the kit's menu items (icons, check and radio marks, tones, submenus, shortcuts are not shown). */
+    items?: Bind<readonly MenuItem[]>;
+    /** A line under the title that says what the choice is about. */
+    message?: Bind<string>;
+    /** A cancel button apart, at the bottom. Default `true`. */
+    showCancel?: Bind<boolean>;
+    /** Its text; empty for `uiLocale`'s. Default `''`. */
+    cancelText?: Bind<string>;
+    /** An item was chosen, after the sheet closed and the item's own `click` ran. */
+    onItemClick?: (e: MenuItemClickEventArgs) => void;
+}

package/dist/components/actionsheet/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet';
+export type { ActionSheetProps } from './action-sheet-props';

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,54 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { AvatarProps } from './avatar-props';
+import type { AvatarShape } from './avatar-shape';
+import type { AvatarSize } from './avatar-size';
+import type { AvatarStatus } from './avatar-status';
+import type { AvatarTone } from './avatar-tone';
+/**
+ * Someone's picture; until it loads, or when there is none, their initials (made from `name` in the
+ * kit's language), else a person icon. A presence dot sits on its lower end corner. Its shape and tone
+ * default to the design language's.
+ *
+ * @example
+ * <Avatar name="Ada Lovelace" src={() => this.user.photo} status="online" />
+ * <Avatar name={() => this.user.name} size="lg" shape="square" tone="accent" />
+ */
+export declare class Avatar extends Control<HTMLSpanElement, AvatarProps> {
+    /** A shape or tone not given is the design language's. */
+    private readonly look;
+    private readonly initialsPart;
+    private readonly iconPart;
+    private readonly image;
+    private readonly statusPart;
+    /** The picture that loaded, and the one that could not. */
+    private loaded;
+    private failed;
+    constructor(props?: IBaseProp<AvatarProps>);
+    get src(): string | null;
+    set src(value: Bind<string | null>);
+    get name(): string;
+    set name(value: Bind<string>);
+    get initials(): string;
+    set initials(value: Bind<string>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get size(): AvatarSize;
+    set size(value: Bind<AvatarSize>);
+    get shape(): AvatarShape;
+    set shape(value: Bind<AvatarShape>);
+    get tone(): AvatarTone;
+    set tone(value: Bind<AvatarTone>);
+    get status(): AvatarStatus | null;
+    set status(value: Bind<AvatarStatus | null>);
+    /** The initials it shows: the ones given, else the ones made from the name. */
+    get shownInitials(): string;
+    /** Whether the picture is what shows now (it loaded). */
+    get showsPicture(): boolean;
+    onMounted(): void;
+    private pictureDone;
+    private renderShown;
+    /** What screen readers say: the label or the name, and the presence. */
+    private renderName;
+    private renderLook;
+}

package/dist/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,41 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { AvatarGroupLayout } from './avatar-group-layout';
+import type { AvatarGroupProps } from './avatar-group-props';
+import type { AvatarSize } from './avatar-size';
+/**
+ * Avatars side by side, or stacked each over the one before it (the design language's layout), all
+ * of one size. Past `max`, and up to `total`, the rest are counted in a `+N` avatar after them.
+ *
+ * @example
+ * <AvatarGroup max={3} label="Members">
+ *   <Avatar name="Ada Lovelace" />
+ *   <Avatar name="Alan Turing" />
+ *   <Avatar name="Grace Hopper" />
+ *   <Avatar name="Edsger Dijkstra" />
+ * </AvatarGroup>
+ */
+export declare class AvatarGroup extends Control<HTMLDivElement, AvatarGroupProps> {
+    /** A layout not given is the design language's. */
+    private readonly look;
+    /** The `+N` for those not shown. */
+    private readonly more;
+    constructor(props?: IBaseProp<AvatarGroupProps>);
+    get size(): AvatarSize;
+    set size(value: Bind<AvatarSize>);
+    get layout(): AvatarGroupLayout;
+    set layout(value: Bind<AvatarGroupLayout>);
+    get max(): number | null;
+    set max(value: Bind<number | null>);
+    get total(): number | null;
+    set total(value: Bind<number | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The elements of the avatars given, in order, from JSX lists too (the `+N` is not one of them). */
+    get avatars(): HTMLElement[];
+    /** How many are counted in the `+N`; 0 when it does not show. */
+    get hiddenCount(): number;
+    onMounted(): void;
+    private renderShown;
+    private renderLook;
+}

package/dist/components/avatar/avatar-group-layout.d.ts

@@ -0,0 +1,2 @@
+/** How a group lays its avatars: each over the one before it, or side by side. */
+export type AvatarGroupLayout = 'stack' | 'spread';

package/dist/components/avatar/avatar-group-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { AvatarGroupLayout } from './avatar-group-layout';
+import type { AvatarSize } from './avatar-size';
+/** Props of `AvatarGroup`. Each one is also a settable property; a function is followed. */
+export interface AvatarGroupProps extends ControlProps {
+    /** The size of every avatar in it. Default `'md'`. */
+    size?: Bind<AvatarSize>;
+    /** Default: the design language's (`stack`). */
+    layout?: Bind<AvatarGroupLayout>;
+    /** The most avatars shown; the others are counted in a `+N` after them. Default: all. */
+    max?: Bind<number | null>;
+    /** How many there are in all, when only some are given; the rest are counted in the `+N`. */
+    total?: Bind<number | null>;
+    /** What screen readers call the group ("Members"). */
+    label?: Bind<string>;
+}