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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,126 @@
+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 { Tab } from './Tab';
+import type { TabCloseEventArgs } from './tab-close-event-args';
+import type { TabSelectingEventArgs } from './tab-selecting-event-args';
+import type { TabSelectionChangedEventArgs } from './tab-selection-changed-event-args';
+import type { TabsActivation } from './tabs-activation';
+import type { TabsPlacement } from './tabs-placement';
+import type { TabsProps } from './tabs-props';
+import type { TabsVariant } from './tabs-variant';
+/**
+ * Tabs: a strip of tabs and the panel of the selected one, following the ARIA tabs pattern.
+ * Tabs come as `<Tab>` children or from code (`add`, `insert`, `remove`); `value` (two-way with
+ * `x-model`) is the selected tab's `key`, else its index. Arrow keys move along the strip (and
+ * select, with `activation="auto"`), Home and End go to the ends, Delete closes a closable tab,
+ * a tab's `&` key selects it. Panels are built when first shown (`lazy`).
+ *
+ * @example
+ * <Tabs x-model={() => this.state.page}>
+ *   <Tab key="general" title="&General">…</Tab>
+ *   <Tab key="advanced" title="&Advanced" icon="/icons/gear.svg">…</Tab>
+ * </Tabs>
+ *
+ * const tabs = new Tabs({ closable: true });
+ * tabs.add(new Tab({ title: 'Log', content: () => new LogView() }));
+ */
+export declare class Tabs extends Control<HTMLDivElement, TabsProps> {
+    constructor(props?: IBaseProp<TabsProps>);
+    /** The tabs, in strip order. Reactive. */
+    get tabs(): readonly Tab[];
+    /** The selected tab, `null` when there is none. Reactive. */
+    get selectedTab(): Tab | null;
+    get selectedIndex(): number;
+    set selectedIndex(value: Bind<number>);
+    /** The selected tab's `key`, else its index; `null` when none is selected. */
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null | undefined>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get activation(): TabsActivation;
+    set activation(value: Bind<TabsActivation>);
+    get placement(): TabsPlacement;
+    set placement(value: Bind<TabsPlacement>);
+    get variant(): TabsVariant;
+    set variant(value: Bind<TabsVariant>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get stretch(): boolean;
+    set stretch(value: Bind<boolean>);
+    get scrollButtons(): boolean;
+    set scrollButtons(value: Bind<boolean>);
+    get closable(): boolean;
+    set closable(value: Bind<boolean>);
+    get lazy(): boolean;
+    set lazy(value: Bind<boolean>);
+    get keepAlive(): boolean;
+    set keepAlive(value: Bind<boolean>);
+    /** The user is about to select a tab; `e.cancel = true` keeps the current one. */
+    get onSelecting(): MotifEvent<TabSelectingEventArgs>;
+    /** The selected tab changed, by the user or by code (`e.byUser`). */
+    get onSelectionChanged(): MotifEvent<TabSelectionChangedEventArgs>;
+    /** A tab is about to close; `e.cancel = true` keeps it. */
+    get onClose(): MotifEvent<TabCloseEventArgs>;
+    /** Adds a tab at the end (a tab of another `Tabs` moves here). */
+    add(tab: Tab): Tab;
+    /** Adds a tab at `index`. */
+    insert(index: number, tab: Tab): Tab;
+    /** Removes a tab and disposes it; the selection moves to a neighbour. No `onClose`. */
+    remove(tab: Tab): boolean;
+    /** Selects a tab (or the tab at an index) from code; `false` when it is hidden or not here. */
+    select(tab: Tab | number): boolean;
+    /** Closes a tab as the user would: `onClose` can cancel it. */
+    close(tab: Tab, byUser?: boolean, event?: Event): boolean;
+    onDisposing(): void;
+    /** Focuses the selected tab (the one Tab reaches). */
+    protected get focusElement(): HTMLElement;
+    protected applyProperty(name: string, value: unknown): void;
+    /** @internal `closable` without tracking it. */
+    peekClosable(): boolean;
+    /** @internal The access key of a tab: select it as the user would, and focus it. */
+    activate(tab: Tab): boolean;
+    /** @internal A tab's visibility, `enabled`, `key` or `lazy` changed. */
+    tabChanged(tab: Tab): void;
+    /** @internal A tab's title, icon or badge changed. */
+    tabResized(): void;
+    /** @internal A tab was disposed without `remove`. */
+    tabGone(tab: Tab): void;
+    private place;
+    /** Takes a tab out of the strip without disposing it; the selection moves on. */
+    private forget;
+    /** The tab next to `tab` that can take its place: after it, else before it. */
+    private neighbour;
+    private tabsNow;
+    private selectedNow;
+    private valueAt;
+    private findByValue;
+    /** `value` or `selectedIndex` was set or bound: select that tab, or wait for it. */
+    private selectFrom;
+    /** After tabs came in: the selection asked for, else keep the current one, else the first usable tab. */
+    private settle;
+    private choose;
+    /** Keeps the `value` and `selectedIndex` storage in step, without dropping a bound getter. */
+    private syncSelection;
+    private lazyOf;
+    private keepAliveOf;
+    /** The tab Tab reaches: the selected one, else the first usable one. */
+    private stopTab;
+    private renderRoving;
+    private tabOf;
+    private get vertical();
+    private listen;
+    private onKeyDown;
+    private queueOverflow;
+    private checkOverflow;
+    /** Dims a scroll button that has nowhere to go. */
+    private renderEnds;
+    private scrollBy;
+    /** Scrolls the strip, not the page, so that a tab is in sight. */
+    private reveal;
+    private get parts();
+    private createParts;
+    private renderLook;
+    /** `closable` or `lazy` of the whole strip changed: every tab that follows it. */
+    private refreshTabs;
+}

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

@@ -0,0 +1,11 @@
+export { Tabs } from './Tabs';
+export { Tab } from './Tab';
+export type { TabsProps } from './tabs-props';
+export type { TabProps } from './tab-props';
+export type { TabsPlacement } from './tabs-placement';
+export type { TabsVariant } from './tabs-variant';
+export type { TabsActivation } from './tabs-activation';
+export type { TabSelectingEventArgs } from './tab-selecting-event-args';
+export type { TabSelectionChangedEventArgs } from './tab-selection-changed-event-args';
+export type { TabCloseEventArgs } from './tab-close-event-args';
+export type { ContentFactory } from './PanelContent';

package/dist/components/tabs/tab-close-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { Tab } from './Tab';
+import type { Tabs } from './Tabs';
+/** A tab is about to close; `cancel = true` keeps it (to ask about unsaved work first, say). */
+export interface TabCloseEventArgs extends EventArgs {
+    tab: Tab;
+    index: number;
+    byUser: boolean;
+    source: Tabs;
+    event?: Event;
+}

package/dist/components/tabs/tab-props.d.ts

@@ -0,0 +1,27 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { ContentFactory } from './PanelContent';
+/**
+ * Props of `Tab`: one tab of `Tabs`, its JSX children are the panel. Each one is also a
+ * settable, reactive property. `closable`, `lazy` and `keepAlive` left unset follow the `Tabs`.
+ */
+export interface TabProps extends ControlProps {
+    /** The caption; `&General` makes Alt+G select the tab. The same property as `text`. */
+    title?: Bind<string>;
+    /** Names the tab in `Tabs.value`; without it the tab's index does. */
+    key?: Bind<string>;
+    icon?: Bind<IconSource | null | undefined>;
+    /** A short text or number after the title (a count). Empty or `null` shows none. */
+    badge?: Bind<string | number | null | undefined>;
+    /** Shown as a tooltip. */
+    hint?: Bind<string>;
+    /** A close button on the tab; Delete closes it too. */
+    closable?: Bind<boolean | undefined>;
+    /** Builds the panel when it is first shown. */
+    lazy?: Bind<boolean | undefined>;
+    /** `false`: what `content` made is disposed while the tab is hidden and made again when it shows. */
+    keepAlive?: Bind<boolean | undefined>;
+    /** Makes the panel content, called when the panel is built (instead of, or after, the JSX children). */
+    content?: ContentFactory;
+}

package/dist/components/tabs/tab-selecting-event-args.d.ts

@@ -0,0 +1,12 @@
+import type { EventArgs } from '@motifx/core';
+import type { Tab } from './Tab';
+import type { Tabs } from './Tabs';
+/** The user is about to select a tab; `cancel = true` keeps the current one. */
+export interface TabSelectingEventArgs extends EventArgs {
+    tab: Tab;
+    index: number;
+    previousTab: Tab | null;
+    previousIndex: number;
+    source: Tabs;
+    event?: Event;
+}

package/dist/components/tabs/tab-selection-changed-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { Tab } from './Tab';
+import type { Tabs } from './Tabs';
+export interface TabSelectionChangedEventArgs {
+    /** `null` when the last tab went away. */
+    tab: Tab | null;
+    index: number;
+    previousTab: Tab | null;
+    previousIndex: number;
+    /** `true` when the user selected it, `false` when code did. */
+    byUser: boolean;
+    source: Tabs;
+    event?: Event;
+}

package/dist/components/tabs/tabs-activation.d.ts

@@ -0,0 +1,2 @@
+/** `auto`: an arrow key selects the tab it moves to; `manual`: it only moves focus, Enter or Space selects. */
+export type TabsActivation = 'auto' | 'manual';

package/dist/components/tabs/tabs-placement.d.ts

@@ -0,0 +1,2 @@
+/** Where the tabs sit around the panel. `start` and `end` stack them vertically. */
+export type TabsPlacement = 'top' | 'bottom' | 'start' | 'end';

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

@@ -0,0 +1,41 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { TabCloseEventArgs } from './tab-close-event-args';
+import type { TabSelectingEventArgs } from './tab-selecting-event-args';
+import type { TabSelectionChangedEventArgs } from './tab-selection-changed-event-args';
+import type { TabsActivation } from './tabs-activation';
+import type { TabsPlacement } from './tabs-placement';
+import type { TabsVariant } from './tabs-variant';
+/** Props of `Tabs`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface TabsProps extends ControlProps {
+    /** Names the tab list for screen readers. The same property as `text`. */
+    label?: Bind<string>;
+    /** The selected tab's `key`, else its index. `x-model` binds it two-way. */
+    value?: Bind<string | number | null | undefined>;
+    /** The selected tab's index in `tabs`; -1 when there is none. */
+    selectedIndex?: Bind<number>;
+    /** Default `'auto'`. */
+    activation?: Bind<TabsActivation>;
+    /** Default `'top'`. */
+    placement?: Bind<TabsPlacement>;
+    /** Default `'line'`. */
+    variant?: Bind<TabsVariant>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** The tabs share the whole width. */
+    stretch?: Bind<boolean>;
+    /** Arrow buttons at the ends of the strip when the tabs do not fit. Default `true`. */
+    scrollButtons?: Bind<boolean>;
+    /** Every tab gets a close button (a tab's own `closable` wins). Default `false`. */
+    closable?: Bind<boolean>;
+    /** A panel is built when first shown, then kept (a tab's own `lazy` wins). Default `true`. */
+    lazy?: Bind<boolean>;
+    /** `false`: content made by a tab's `content` is disposed while hidden (a tab's own `keepAlive` wins). Default `true`. */
+    keepAlive?: Bind<boolean>;
+    /** The user is about to select a tab; cancelable. */
+    onSelecting?: (e: TabSelectingEventArgs) => void;
+    onSelectionChanged?: (e: TabSelectionChangedEventArgs) => void;
+    /** A tab is about to close; cancelable. */
+    onClose?: (e: TabCloseEventArgs) => void;
+}

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

@@ -0,0 +1,2 @@
+/** `line`: a line under the selected tab; `pill`: the selected tab is filled. */
+export type TabsVariant = 'line' | 'pill';

package/dist/components/tagbox/TagBox.d.ts

@@ -0,0 +1,140 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import { DataItems } from '../../parts/data/DataItems';
+import { Field } from '../../parts/field/Field';
+import type { ItemField } from '../../parts/list/item-field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ItemTemplate } from '../listbox/item-template';
+import type { TagBoxProps } from './tag-box-props';
+/**
+ * Picks several items: the chosen ones are tags in the field, followed by a text input that
+ * searches the list (the APG combobox with a multi-select listbox). Items come from memory or from
+ * a `DataSource`; typed text can become a tag of its own with `acceptCustomValue`.
+ *
+ * @example
+ * <TagBox label="&Skills" items={skills} x-model={() => this.form.skills} />
+ * <TagBox label="Customers" dataSource={this.customers} textField="CompanyName" valueField="CustomerID" maxTags={3} />
+ */
+export declare class TagBox<T = unknown, V = unknown> extends Field<V[], TagBoxProps<T, V>> {
+    constructor(props?: IBaseProp<TagBoxProps<T, V>>);
+    get items(): readonly T[];
+    set items(value: Bind<readonly T[]>);
+    get dataSource(): data.DataSource<T, unknown> | null;
+    set dataSource(value: Bind<data.DataSource<T, unknown> | null>);
+    get textField(): ItemField<T> | undefined;
+    set textField(value: Bind<ItemField<T>>);
+    get valueField(): ItemField<T> | undefined;
+    set valueField(value: Bind<ItemField<T>>);
+    get iconField(): ItemField<T> | undefined;
+    set iconField(value: Bind<ItemField<T>>);
+    get groupField(): ItemField<T> | undefined;
+    set groupField(value: Bind<ItemField<T>>);
+    get enabledField(): ItemField<T> | undefined;
+    set enabledField(value: Bind<ItemField<T>>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get searchMode(): 'contains' | 'startswith';
+    set searchMode(value: Bind<'contains' | 'startswith'>);
+    get minSearchLength(): number;
+    set minSearchLength(value: Bind<number>);
+    get searchDelay(): number;
+    set searchDelay(value: Bind<number>);
+    get acceptCustomValue(): boolean;
+    set acceptCustomValue(value: Bind<boolean>);
+    get customValue(): ((text: string) => V | null) | null;
+    set customValue(value: Bind<((text: string) => V | null) | null>);
+    get autoHighlight(): boolean;
+    set autoHighlight(value: Bind<boolean>);
+    get closeOnSelect(): boolean;
+    set closeOnSelect(value: Bind<boolean>);
+    get maxTags(): number;
+    set maxTags(value: Bind<number>);
+    get maxSelected(): number;
+    set maxSelected(value: Bind<number>);
+    get selectAll(): boolean;
+    set selectAll(value: Bind<boolean>);
+    get hideSelected(): boolean;
+    set hideSelected(value: Bind<boolean>);
+    get openOnFieldClick(): boolean;
+    set openOnFieldClick(value: Bind<boolean>);
+    get showDropDownButton(): boolean;
+    set showDropDownButton(value: Bind<boolean>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get itemTemplate(): ItemTemplate<T> | null;
+    set itemTemplate(value: Bind<ItemTemplate<T> | null>);
+    get tagTemplate(): ItemTemplate<T> | null;
+    set tagTemplate(value: Bind<ItemTemplate<T> | null>);
+    get matchWidth(): boolean;
+    set matchWidth(value: Bind<boolean>);
+    get inputElement(): HTMLInputElement;
+    /** The items of the chosen values that are known. Reactive. */
+    get selectedItems(): T[];
+    /** The items the list shows: what matched the last search. */
+    get listItems(): DataItems<T>;
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the list; `false` when it cannot be used now. */
+    open(): boolean;
+    close(): void;
+    /**
+     * Reads the items again after they were changed in place: the tags, the open list, the chosen items. Your items
+     * may be plain or reactive; the box reads them as they are.
+     */
+    refresh(): void;
+    /** Removes every tag. */
+    clear(): void;
+    /** Chooses every item the list shows (with a data source, after they load), up to `maxSelected`. */
+    selectAllItems(): Promise<void>;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): V[];
+    protected normalizeValue(value: V[]): V[];
+    protected sameValue(a: V[], b: V[]): boolean;
+    protected renderValue(value: V[]): void;
+    protected itemText(item: T): string;
+    protected itemValue(item: T): unknown;
+    /** The text of a tag whose value has no item. */
+    protected textOfValue(value: V): string;
+    private get tagParts();
+    private values;
+    private canChoose;
+    private canChange;
+    private atLimit;
+    private allState;
+    private renderSource;
+    private renderTags;
+    private tagText;
+    private tagElement;
+    private tagAt;
+    private shownTags;
+    private removeAt;
+    private createPopup;
+    /** `all`: the rows' look may have changed too, not only which rows there are. */
+    private drawList;
+    private listChanged;
+    private itemsChanged;
+    private markSelectAllRow;
+    /** While typing, the first match is highlighted so Enter takes it. */
+    private highlight;
+    private pointAt;
+    private chosen;
+    private chooseRow;
+    /** Adds the item, or takes it out when it is chosen. */
+    private toggle;
+    /** After a choice: the text and the search start again; the list stays open unless `closeOnSelect`. */
+    private chosenDone;
+    private addCustom;
+    private chooseAll;
+    private listen;
+    private typed;
+    /** Opens with every item, as the arrow does. */
+    private openAll;
+    private inputKeyDown;
+    private enter;
+    private focusTag;
+    private tagKeyDown;
+    private renderArrow;
+    private renderClear;
+}

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

@@ -0,0 +1,2 @@
+export { TagBox } from './TagBox';
+export type { TagBoxProps } from './tag-box-props';

package/dist/components/tagbox/tag-box-props.d.ts

@@ -0,0 +1,56 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { ItemField } from '../../parts/list/item-field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ItemTemplate } from '../listbox/item-template';
+/** Props of `TagBox`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface TagBoxProps<T, V> extends FieldProps<V[]> {
+    /** Items in memory; searched here. */
+    items?: Bind<readonly T[]>;
+    /** Items from the data layer; the search goes to it (`searchFields`). Wins over `items`. */
+    dataSource?: Bind<data.DataSource<T, unknown> | null>;
+    textField?: Bind<ItemField<T>>;
+    valueField?: Bind<ItemField<T>>;
+    iconField?: Bind<ItemField<T>>;
+    /** Items in memory only. */
+    groupField?: Bind<ItemField<T>>;
+    enabledField?: Bind<ItemField<T>>;
+    /** Shown while nothing is chosen. */
+    placeholder?: Bind<string>;
+    /** Default `'contains'` (items in memory; a data source uses its own `searchOperator`). */
+    searchMode?: Bind<'contains' | 'startswith'>;
+    /** Characters to type before the list opens. Default `0`. */
+    minSearchLength?: Bind<number>;
+    /** Milliseconds between the last key and the search. Default `0` in memory, `250` with a data source. */
+    searchDelay?: Bind<number>;
+    /** Enter adds the typed text as a new tag when it matches no item. */
+    acceptCustomValue?: Bind<boolean>;
+    /** Makes the value of a typed text (`acceptCustomValue`); `null` turns it down. Default: the text itself. */
+    customValue?: Bind<((text: string) => V | null) | null>;
+    /** The first match is highlighted while typing, so Enter takes it. Default `true` (`false` with `acceptCustomValue`). */
+    autoHighlight?: Bind<boolean>;
+    /** Choosing an item closes the list. Default `false`. */
+    closeOnSelect?: Bind<boolean>;
+    /** Tags shown; the rest are counted in one more tag ("+3"). Default `0`: all. */
+    maxTags?: Bind<number>;
+    /** Items that can be chosen at most. Default `0`: any number. */
+    maxSelected?: Bind<number>;
+    /** A "Select all" row before the items. */
+    selectAll?: Bind<boolean>;
+    /** Chosen items leave the list (items in memory). */
+    hideSelected?: Bind<boolean>;
+    /** A press on the field opens the list. Default `true`. */
+    openOnFieldClick?: Bind<boolean>;
+    /** The arrow that opens the whole list. Default `true`. */
+    showDropDownButton?: Bind<boolean>;
+    /** A button that removes every tag; Escape does the same while the list is closed. */
+    clearButton?: Bind<boolean>;
+    itemTemplate?: Bind<ItemTemplate<T> | null>;
+    /** Draws a tag's content instead of the item's text. */
+    tagTemplate?: Bind<ItemTemplate<T> | null>;
+    /** Default `true`. */
+    matchWidth?: Bind<boolean>;
+    onOpened?: () => void;
+    onClosed?: (reason: PopupCloseReason) => void;
+}

package/dist/components/textarea/TextArea.d.ts

@@ -0,0 +1,76 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { EnterKeyEventArgs } from '../../parts/field/enter-key-event-args';
+import { Field } from '../../parts/field/Field';
+import type { ValidationRule } from '../../parts/validation/validation-rule';
+import type { TextAreaProps } from './text-area-props';
+import type { TextAreaResize } from './text-area-resize';
+/**
+ * A text field of several lines: a placeholder, a box that grows with the text or that the user
+ * can drag bigger, a character counter, a clear button and validation. `x-model` binds the value;
+ * Ctrl+Enter (Cmd+Enter) reports `onEnter`, Enter alone starts a new line.
+ *
+ * @example
+ * <TextArea label="&Comment" autoGrow maxRows={8} maxLength={500} showCounter x-model={() => this.form.comment} />
+ *
+ * const notes = new TextArea({ label: 'Notes', rows: 5 });
+ * this.panel.controls.add(notes);
+ * notes.value = 'First line\nSecond line';
+ */
+export declare class TextArea extends Field<string, TextAreaProps> {
+    constructor(props?: IBaseProp<TextAreaProps>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get rows(): number;
+    set rows(value: Bind<number>);
+    get autoGrow(): boolean;
+    set autoGrow(value: Bind<boolean>);
+    get minRows(): number;
+    set minRows(value: Bind<number>);
+    get maxRows(): number | null;
+    set maxRows(value: Bind<number | null>);
+    get resize(): TextAreaResize;
+    set resize(value: Bind<TextAreaResize>);
+    get maxLength(): number | null;
+    set maxLength(value: Bind<number | null>);
+    get minLength(): number | null;
+    set minLength(value: Bind<number | null>);
+    get showCounter(): boolean;
+    set showCounter(value: Bind<boolean>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get updateOn(): 'input' | 'change';
+    set updateOn(value: Bind<'input' | 'change'>);
+    get selectOnFocus(): boolean;
+    set selectOnFocus(value: Bind<boolean>);
+    get spellcheck(): boolean | null;
+    set spellcheck(value: Bind<boolean>);
+    get wrap(): 'soft' | 'hard' | 'off';
+    set wrap(value: Bind<'soft' | 'hard' | 'off'>);
+    get name(): string;
+    set name(value: Bind<string>);
+    get autocomplete(): string;
+    set autocomplete(value: Bind<string>);
+    get textAreaElement(): HTMLTextAreaElement;
+    get onEnter(): MotifEvent<EnterKeyEventArgs<string>>;
+    /** Selects the whole text. */
+    select(): void;
+    /** Empties the field as its clear button does. */
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): string;
+    protected normalizeValue(value: string): string;
+    protected renderValue(value: string): void;
+    protected builtInRules(): ValidationRule<string>[];
+    private get areaParts();
+    private listen;
+    private keyDown;
+    private gotFocus;
+    private setAttribute;
+    private renderPlaceholder;
+    private renderMaxLength;
+    private renderCounter;
+    private renderSizing;
+    /** With `autoGrow`, sizes the box to the text, between `minRows` and `maxRows` lines. */
+    private fit;
+    private renderClear;
+}

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

@@ -0,0 +1,3 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './text-area-props';
+export type { TextAreaResize } from './text-area-resize';

package/dist/components/textarea/text-area-props.d.ts

@@ -0,0 +1,36 @@
+import type { Bind } from '@motifx/core';
+import type { EnterKeyEventArgs } from '../../parts/field/enter-key-event-args';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { TextAreaResize } from './text-area-resize';
+/** Props of `TextArea`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface TextAreaProps extends FieldProps<string> {
+    placeholder?: Bind<string>;
+    /** Visible lines. Default `3`. */
+    rows?: Bind<number>;
+    /** The box grows and shrinks with the text, from `minRows` to `maxRows` lines, then scrolls. */
+    autoGrow?: Bind<boolean>;
+    /** With `autoGrow`. Default `rows`. */
+    minRows?: Bind<number>;
+    /** With `autoGrow`; without it the box grows without a limit. */
+    maxRows?: Bind<number | null>;
+    /** Default `'vertical'`; `'none'` while `autoGrow` is on. */
+    resize?: Bind<TextAreaResize>;
+    maxLength?: Bind<number>;
+    minLength?: Bind<number>;
+    /** Shows `12/500` (or `12` without `maxLength`) under the box. */
+    showCounter?: Bind<boolean>;
+    /** A button that empties the field; Escape does the same. */
+    clearButton?: Bind<boolean>;
+    /** `input` (default) changes the value on every key, `change` when the field is left or Ctrl+Enter is pressed. */
+    updateOn?: Bind<'input' | 'change'>;
+    /** Selects the whole text when the field gets focus. */
+    selectOnFocus?: Bind<boolean>;
+    spellcheck?: Bind<boolean>;
+    /** `soft` (default) wraps long lines on screen only, `hard` also in the sent value, `off` scrolls sideways. */
+    wrap?: Bind<'soft' | 'hard' | 'off'>;
+    /** The name it is sent with in a form. */
+    name?: Bind<string>;
+    autocomplete?: Bind<string>;
+    /** Ctrl+Enter (Cmd+Enter on Apple platforms) was pressed; Enter alone starts a new line. */
+    onEnter?: (e: EnterKeyEventArgs<string>) => void;
+}

package/dist/components/textarea/text-area-resize.d.ts

@@ -0,0 +1,2 @@
+/** Which way the user can drag the box bigger. */
+export type TextAreaResize = 'none' | 'vertical' | 'both';