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

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

@@ -0,0 +1,68 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { Control, ControlProps } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { FormClosedEventArgs } from './form-closed-event-args';
+import type { FormClosingEventArgs } from './form-closing-event-args';
+import type { FormEventArgs } from './form-event-args';
+import type { FormStartPosition } from './form-start-position';
+import type { FormWindowState } from './form-window-state';
+/** Props of `MxForm`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface FormProps extends ControlProps {
+    /** The title in the title bar; it names the form. The same property as `text`. */
+    title?: Bind<string>;
+    /** Whether the form is open. `x-model` binds it two-way: the user closing it writes `false`. */
+    value?: Bind<boolean>;
+    /** Opened through `value`, it is modal: nothing else on the page can be used until it closes. Default `false`. */
+    modal?: Bind<boolean>;
+    /** What fills the content area (besides JSX children and a subclass's `view()`). */
+    content?: Bind<ComponentBase | null>;
+    /** A row under the content that does not scroll with it, for the form's buttons. */
+    footer?: Bind<ComponentBase | null>;
+    /** An icon at the start of the title bar. */
+    icon?: Bind<IconSource | null>;
+    /** The close button in the title bar. Default `true`. */
+    showClose?: Bind<boolean>;
+    /** The minimize button (modeless forms only). Default `false`. */
+    showMinimize?: Bind<boolean>;
+    /** The maximize button; a double click on the title bar does the same. Default `false`. */
+    showMaximize?: Bind<boolean>;
+    /** Resized from its edges and corners. Default `true`. */
+    resizable?: Bind<boolean>;
+    /** Moved by dragging the title bar. Default `true`. */
+    movable?: Bind<boolean>;
+    /** Escape closes it with `'cancel'` (when there is no `cancelButton`). Default: on for a modal form, off for a modeless one. */
+    closeOnEscape?: Bind<boolean>;
+    /** The button Enter clicks from a one-line field. */
+    acceptButton?: Bind<Control | null>;
+    /** The button Escape clicks. */
+    cancelButton?: Bind<Control | null>;
+    /** Where a minimized form goes, as a chip that brings it back. Without it the form folds to its title bar. */
+    minimizeTarget?: Bind<HTMLElement | ComponentBase | null>;
+    /** Default `'normal'`. */
+    windowState?: Bind<FormWindowState>;
+    /** Default `'center'`. */
+    startPosition?: Bind<FormStartPosition>;
+    /** With `startPosition="manual"`: the distance from the start edge of the viewport (the right edge in RTL); a number is pixels. */
+    left?: Bind<number | string>;
+    /** With `startPosition="manual"`: the distance from the top of the viewport; a number is pixels. */
+    top?: Bind<number | string>;
+    /** A CSS length (`'32rem'`); a number is pixels. Default: as wide as the content needs. */
+    width?: Bind<number | string>;
+    /** A CSS length; a number is pixels. Default: as tall as the content needs. */
+    height?: Bind<number | string>;
+    /** `role="alertdialog"`: the form tells something urgent. Default `false`. */
+    alert?: Bind<boolean>;
+    /** Disposed when it closes. Default: when `show` or `showDialog` added it to its host; a form written in JSX is hidden. */
+    disposeOnClose?: Bind<boolean>;
+    /** Before it is shown the first time. */
+    onLoaded?: (e: FormEventArgs) => void;
+    /** It was shown. */
+    onShown?: (e: FormEventArgs) => void;
+    /** It became the active window. */
+    onActivate?: (e: FormEventArgs) => void;
+    /** Another window became active. */
+    onDeactivate?: (e: FormEventArgs) => void;
+    /** It is about to close; cancelable. */
+    onClosing?: (e: FormClosingEventArgs) => void;
+    onClosed?: (e: FormClosedEventArgs) => void;
+}

package/dist/components/form/form-result.d.ts

@@ -0,0 +1,2 @@
+/** How a form was closed: `'ok'`, `'cancel'` or any word of your own, like `dialog.returnValue`. */
+export type FormResult = 'ok' | 'cancel' | (string & {});

package/dist/components/form/form-start-position.d.ts

@@ -0,0 +1,2 @@
+/** Where a form opens: in the middle of the viewport, or at its `left` and `top`. */
+export type FormStartPosition = 'center' | 'manual';

package/dist/components/form/form-window-state.d.ts

@@ -0,0 +1 @@
+export type FormWindowState = 'normal' | 'minimized' | 'maximized';

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

@@ -0,0 +1,15 @@
+export { MxForm } from './MxForm';
+export { messageBox } from './message-box';
+export { confirm } from './confirm';
+export type { FormProps } from './form-props';
+export type { FormResult } from './form-result';
+export type { FormCloseReason } from './form-close-reason';
+export type { FormWindowState } from './form-window-state';
+export type { FormStartPosition } from './form-start-position';
+export type { FormHost } from './form-host';
+export type { FormEventArgs } from './form-event-args';
+export type { FormClosingEventArgs } from './form-closing-event-args';
+export type { FormClosedEventArgs } from './form-closed-event-args';
+export type { MessageBoxOptions } from './message-box-options';
+export type { MessageBoxButton } from './message-box-button';
+export type { MessageBoxTone } from './message-box-tone';

package/dist/components/form/message-box-button.d.ts

@@ -0,0 +1,10 @@
+import type { Bind } from '@motifx/core';
+import type { ButtonTone } from '../button/button-tone';
+import type { FormResult } from './form-result';
+/** A button of your own in a message box: its text and the result it closes the box with. */
+export interface MessageBoxButton {
+    text: Bind<string>;
+    result: FormResult;
+    /** Default: `accent` for the default button (`danger` in a danger box), `standard` for the rest. */
+    tone?: ButtonTone;
+}

package/dist/components/form/message-box-options.d.ts

@@ -0,0 +1,18 @@
+import type { Bind } from '@motifx/core';
+import type { FormHost } from './form-host';
+import type { FormResult } from './form-result';
+import type { MessageBoxButton } from './message-box-button';
+import type { MessageBoxTone } from './message-box-tone';
+/** What `messageBox` shows. */
+export interface MessageBoxOptions {
+    title?: Bind<string>;
+    text: Bind<string>;
+    /** `'ok'`, `'cancel'`, `'yes'`, `'no'` (named from `uiLocale`) or buttons of your own. Default `['ok']`. */
+    buttons?: readonly ('ok' | 'cancel' | 'yes' | 'no' | MessageBoxButton)[];
+    /** Default `'none'`. */
+    tone?: MessageBoxTone;
+    /** The result of the button Enter presses and that has focus first. Default: `ok` or `yes`, else the first button; in a danger box focus starts on the safe one. */
+    defaultButton?: FormResult;
+    /** What it is shown in. Default: the application, else a holder of its own on the page. */
+    host?: FormHost;
+}

package/dist/components/form/message-box-tone.d.ts

@@ -0,0 +1,2 @@
+/** The glyph of a message box; `caution` and `danger` also make it an alert dialog. */
+export type MessageBoxTone = 'none' | 'info' | 'success' | 'caution' | 'danger';

package/dist/components/form/message-box.d.ts

@@ -0,0 +1,10 @@
+import type { FormResult } from './form-result';
+import type { MessageBoxOptions } from './message-box-options';
+/**
+ * Shows a modal message with its buttons and resolves with the result of the one pressed
+ * (`'cancel'` for Escape when no button cancels). Built on `MxForm`.
+ *
+ * @example
+ * const answer = await messageBox({ title: 'Unsaved changes', text: 'Save them first?', buttons: ['yes', 'no', 'cancel'], tone: 'caution' });
+ */
+export declare function messageBox(options: MessageBoxOptions): Promise<FormResult>;

package/dist/components/formlayout/FormLayout.d.ts

@@ -0,0 +1,78 @@
+import { type Bind, type ComponentBase, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { FieldLabelMode } from '../../parts/field/field-label-mode';
+import { ValidationGroup } from '../../parts/validation/ValidationGroup';
+import type { ValidationResult } from '../../parts/validation/validation-result';
+import type { FormEditorFactory } from './form-editor-factory';
+import type { FormItem } from './form-item';
+import type { FormLayoutProps } from './form-layout-props';
+/**
+ * Lays out the fields of a data object: each item a field with its editor (chosen by name, by the
+ * type of the value, or made by a function), a group under a caption, tabs, a button or a
+ * component of your own. The editors are bound to the object both ways and checked together (the
+ * ones on hidden tabs too); sending the form checks them first.
+ *
+ * @example
+ * <FormLayout data={this.order} columns={2} onValidSubmit={() => this.save()} items={[
+ *   { field: 'customer', label: '&Customer', editor: 'lookup', editorProps: { dataSource: this.customers }, required: true },
+ *   { field: 'date', label: 'Date' },
+ *   { field: 'note', label: 'Note', editor: 'textarea', colSpan: 'all' },
+ *   { button: { text: 'Save', tone: 'accent', submit: true } },
+ * ]} />
+ */
+export declare class FormLayout<T extends object = Record<string, unknown>> extends Control<HTMLFormElement, FormLayoutProps<T>> {
+    /** The editors forms know by name; add yours: `FormLayout.editors.set('color', (p) => new ColorBox(p))`. */
+    static readonly editors: Map<string, FormEditorFactory>;
+    constructor(props?: IBaseProp<FormLayoutProps<T>>);
+    get data(): T | null;
+    set data(value: Bind<T | null>);
+    get items(): readonly FormItem[];
+    set items(value: Bind<readonly FormItem[]>);
+    get columns(): number;
+    set columns(value: Bind<number>);
+    get minColumnWidth(): string;
+    set minColumnWidth(value: Bind<string>);
+    get labelMode(): FieldLabelMode;
+    set labelMode(value: Bind<FieldLabelMode>);
+    get readOnly(): boolean;
+    set readOnly(value: Bind<boolean>);
+    /** The group every field of the form is checked in. */
+    get validationGroup(): ValidationGroup;
+    get isValid(): boolean;
+    /** The editor of a field. */
+    editorOf(field: string): ComponentBase | undefined;
+    /** Checks every field; the first one that failed gets focus (its tab shown first) unless `focus` is `false`. */
+    validate(options?: {
+        focus?: boolean;
+    }): Promise<ValidationResult>;
+    resetValidation(): void;
+    /**
+     * Reads your data object and the items again after they were changed in place: every editor's value, the items'
+     * texts and states, and the layout when items were added or removed. Your data and items may be plain or
+     * reactive; the form reads them as they are.
+     */
+    refresh(): void;
+    /** Reads one field of your data object again, after it was changed in place. */
+    refreshField(field: string): void;
+    /** Checks every field, then reports the form as sent (`onValidSubmit`) or not (`onInvalidSubmit`). */
+    submit(event?: Event): Promise<boolean>;
+    /**
+     * A field of an item that is not shown (`visible: false`) is not checked: it leaves the group with its message
+     * cleared, and comes back once its item is shown. A field on a tab not chosen is still checked.
+     */
+    private restHidden;
+    private get formParts();
+    /** The items and every item inside them (groups, tabs), in order. */
+    private flatten;
+    private clear;
+    /** Selects the tab an element is on (each tab up from it, for tabs in tabs). */
+    private reveal;
+    private render;
+    private place;
+    /** Tabs of items: every panel is built at once, so every field is checked whichever tab shows. */
+    private placeTabs;
+    private button;
+    private editor;
+    /** An editor that fits the value: text, number, check box or date. */
+    private editorFor;
+}

package/dist/components/formlayout/form-editor-factory.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentBase } from '@motifx/core';
+/** Makes an editor from the props a form gives it (`label`, `value`, `onValueChanged`, …). */
+export type FormEditorFactory = (props: Record<string, unknown>) => ComponentBase;

package/dist/components/formlayout/form-editor-type.d.ts

@@ -0,0 +1,2 @@
+/** The editors a form knows by name; register more with `FormLayout.editors`. */
+export type FormEditorType = 'text' | 'password' | 'email' | 'textarea' | 'number' | 'date' | 'datetime' | 'time' | 'checkbox' | 'switch' | 'dropdown' | 'combobox' | 'lookup' | 'radio' | 'slider' | (string & {});

package/dist/components/formlayout/form-item.d.ts

@@ -0,0 +1,44 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ButtonProps } from '../button/button-props';
+import type { ValidationRule } from '../../parts/validation/validation-rule';
+import type { FormEditorFactory } from './form-editor-factory';
+import type { FormEditorType } from './form-editor-type';
+import type { FormTab } from './form-tab';
+import type { FormTemplateContext } from './form-template-context';
+/**
+ * One place of a form: a field of the data object with its editor, a group of items under a
+ * caption, tabs of items, a button, or any component of your own.
+ */
+export interface FormItem {
+    /** The property of the data object the editor shows and changes. */
+    field?: string;
+    label?: Bind<string>;
+    /**
+     * By name, or by the type of the value when left out. A function makes the editor from the props
+     * a named one gets (`label`, `value`, `onValueChanged`, `validationGroup`, `rules` …): any
+     * component that takes them is an editor.
+     */
+    editor?: FormEditorType | FormEditorFactory;
+    /** Props of the editor: `items`, `min`, `mask`… */
+    editorProps?: Record<string, unknown>;
+    required?: Bind<boolean>;
+    rules?: Bind<readonly ValidationRule[]>;
+    helpText?: Bind<string>;
+    /** Columns it spans; `'all'` the whole row. */
+    colSpan?: number | 'all';
+    visible?: Bind<boolean>;
+    enabled?: Bind<boolean>;
+    readOnly?: Bind<boolean>;
+    /** A caption over `items`, laid out on `columns` of its own. */
+    group?: Bind<string>;
+    items?: readonly FormItem[];
+    columns?: number;
+    /** Tabs, each with items of its own (they all count when the form is checked). */
+    tabs?: readonly FormTab[];
+    /** A button; `submit` sends the form after it passes its checks. */
+    button?: ButtonProps & {
+        submit?: boolean;
+    };
+    /** Any component, made for this place (with the form's data, the item's field and its check group). */
+    template?: (context: FormTemplateContext) => ComponentBase;
+}

package/dist/components/formlayout/form-layout-props.d.ts

@@ -0,0 +1,31 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { FieldLabelMode } from '../../parts/field/field-label-mode';
+import type { ValidationResult } from '../../parts/validation/validation-result';
+import type { FormItem } from './form-item';
+/** Props of `FormLayout`. Each one is also a settable, reactive property. */
+export interface FormLayoutProps<T extends object> extends ControlProps {
+    /** The object the editors show and change, usually a reactive one. */
+    data?: Bind<T | null>;
+    items?: Bind<readonly FormItem[]>;
+    /** Default `1`. */
+    columns?: Bind<number>;
+    /** With it, as many columns as fit, each at least this wide (a CSS length); `columns` is the most. */
+    minColumnWidth?: Bind<string>;
+    /** Passed to every editor. Default `'top'`. */
+    labelMode?: Bind<FieldLabelMode>;
+    readOnly?: Bind<boolean>;
+    /** The form was sent and every field passed. */
+    onValidSubmit?: (e: {
+        data: T | null;
+        event: Event;
+    }) => void;
+    /** After the user changed a field and its value was written into the data object: the place to show what follows from it (`refresh()`). */
+    onFieldChanged?: (e: {
+        field: string;
+        value: unknown;
+        data: T;
+    }) => void;
+    /** The form was sent and a field failed. */
+    onInvalidSubmit?: (e: ValidationResult) => void;
+}

package/dist/components/formlayout/form-tab.d.ts

@@ -0,0 +1,9 @@
+import type { Bind } from '@motifx/core';
+import type { FormItem } from './form-item';
+/** A tab of a form item's `tabs`: its caption and its own items, laid out on `columns` of its own. */
+export interface FormTab {
+    title: Bind<string>;
+    items: readonly FormItem[];
+    columns?: number;
+    visible?: Bind<boolean>;
+}

package/dist/components/formlayout/form-template-context.d.ts

@@ -0,0 +1,9 @@
+import type { ValidationGroup } from '../../parts/validation/ValidationGroup';
+/** What a form item's `template` gets: the form's data object, the item's field, and the group the form's fields are checked in. */
+export interface FormTemplateContext<T extends object = Record<string, unknown>> {
+    data: T | null;
+    /** The item's `field`; empty when it has none. */
+    field: string;
+    /** Add a component of your own to it (its `validationGroup`), and the form checks it with the others. */
+    validationGroup: ValidationGroup;
+}

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

@@ -0,0 +1,7 @@
+export { FormLayout } from './FormLayout';
+export type { FormLayoutProps } from './form-layout-props';
+export type { FormItem } from './form-item';
+export type { FormEditorType } from './form-editor-type';
+export type { FormEditorFactory } from './form-editor-factory';
+export type { FormTab } from './form-tab';
+export type { FormTemplateContext } from './form-template-context';

package/dist/components/layout/ChildSettings.d.ts

@@ -0,0 +1,41 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+/** What a container does with its children's settings. */
+interface ChildSettingsHandler {
+    /** A child arrived or one of its settings changed. */
+    changed(child: ComponentBase, element: HTMLElement): void;
+    /** A child left (moved elsewhere or disposed): undo what `changed` wrote on it. */
+    left(child: ComponentBase, element: HTMLElement): void;
+}
+/**
+ * The settings a layout container reads from its children (`dock`, `row`, `grow`…). A child
+ * says them in its own props, a value or a function that is followed, whatever kind of
+ * component it is; code can set them later with `set`. Children added at any time are picked
+ * up through the container's own `controladded` event, so nothing watches the DOM and nothing
+ * runs on resize.
+ */
+export declare class ChildSettings {
+    private readonly owner;
+    private readonly names;
+    private readonly handler;
+    private readonly values;
+    private readonly stops;
+    private readonly tracked;
+    private readonly running;
+    private reading;
+    constructor(owner: ComponentBase, names: readonly string[], handler: ChildSettingsHandler);
+    /**
+     * Picks up the children already there. Called once the container has stored this object: the
+     * handler reads the settings back through the container.
+     */
+    addPresent(): this;
+    /** The children that take part, in order. */
+    get children(): ComponentBase[];
+    get(child: ComponentBase, name: string): unknown;
+    /** Sets a child's setting from code: a value, or a function that is followed. */
+    set(child: ComponentBase, name: string, value: Bind<unknown>): void;
+    private add;
+    private leave;
+    private bind;
+    private stop;
+}
+export {};

package/dist/components/layout/DockPanel.d.ts

@@ -0,0 +1,42 @@
+import type { Bind, ComponentBase, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { Dock } from './dock';
+import type { DockChildProps } from './dock-child-props';
+import type { DockPanelProps } from './dock-panel-props';
+import type { LayoutSpace } from './layout-space';
+/**
+ * Children stuck to its edges in the order they come — `top`, `bottom`, `start`, `end` — with
+ * a `fill` child taking what is left, and `float` children placed over the rest by their own
+ * anchors. Each child says where in its own `dock` prop, whatever kind of component it is. Laid
+ * out with CSS grid: nothing runs when the size changes.
+ *
+ * @example
+ * <DockPanel style="block-size: 100vh">
+ *   <Toolbar dock="top" />
+ *   <Panel dock="start" scrollable>…</Panel>
+ *   <Panel dock="bottom">Ready</Panel>
+ *   <Panel scrollable>…</Panel>
+ * </DockPanel>
+ *
+ * const shell = new DockPanel();
+ * shell.controls.add(new Panel({ dock: 'top', text: 'Header' }));
+ * shell.setDock(sidebar, 'end');
+ */
+export declare class DockPanel extends Control<HTMLDivElement, DockPanelProps> {
+    constructor(props?: IBaseProp<DockPanelProps>);
+    get gap(): LayoutSpace | undefined;
+    set gap(value: Bind<LayoutSpace | undefined>);
+    get padding(): LayoutSpace | undefined;
+    set padding(value: Bind<LayoutSpace | undefined>);
+    /** Where a child is docked, as its props say or as set with {@link setDock}. */
+    dockOf(child: ComponentBase): Dock;
+    /** Docks a child from code: a value, or a function that is followed. */
+    setDock(child: ComponentBase, dock: Bind<Dock>): void;
+    /** Sets the anchors of a `float` child from code; each is a value or a function. Fields left out stay. */
+    setAnchors(child: ComponentBase, anchors: Omit<DockChildProps, 'dock'>): void;
+    private get settings();
+    /** Gives every child its grid area: each docked one takes an edge of what the ones before it left. */
+    private arrange;
+    private clear;
+    private write;
+}

package/dist/components/layout/Grid.d.ts

@@ -0,0 +1,57 @@
+import type { Bind, ComponentBase, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { GridCell } from './grid-cell';
+import type { GridFlow } from './grid-flow';
+import type { GridJustify } from './grid-justify';
+import type { GridProps } from './grid-props';
+import type { GridTracks } from './grid-tracks';
+import type { LayoutAlign } from './layout-align';
+import type { LayoutSpace } from './layout-space';
+/**
+ * Rows and columns defined up front, CSS-like (`columns="auto 1fr 2fr 120"`). Children fill
+ * the cells in order, or say where they go in their own props: `row`, `column`, `rowSpan`,
+ * `columnSpan`, counted from 1.
+ *
+ * @example
+ * <Grid columns="auto 1fr" gap="sm">
+ *   <TextBox label="Name" column={2} />
+ *   <TextBox label="Notes" column={1} columnSpan={2} />
+ * </Grid>
+ *
+ * const grid = new Grid({ columns: 3 });
+ * grid.controls.add(new Button({ text: 'Wide', columnSpan: 2 }));
+ */
+export declare class Grid extends Control<HTMLDivElement, GridProps> {
+    constructor(props?: IBaseProp<GridProps>);
+    get rows(): GridTracks | undefined;
+    set rows(value: Bind<GridTracks | undefined>);
+    get columns(): GridTracks | undefined;
+    set columns(value: Bind<GridTracks | undefined>);
+    get gap(): LayoutSpace | undefined;
+    set gap(value: Bind<LayoutSpace | undefined>);
+    get rowGap(): LayoutSpace | undefined;
+    set rowGap(value: Bind<LayoutSpace | undefined>);
+    get columnGap(): LayoutSpace | undefined;
+    set columnGap(value: Bind<LayoutSpace | undefined>);
+    get padding(): LayoutSpace | undefined;
+    set padding(value: Bind<LayoutSpace | undefined>);
+    get autoRows(): number | string | undefined;
+    set autoRows(value: Bind<number | string | undefined>);
+    get autoColumns(): number | string | undefined;
+    set autoColumns(value: Bind<number | string | undefined>);
+    get flow(): GridFlow;
+    set flow(value: Bind<GridFlow>);
+    get align(): LayoutAlign;
+    set align(value: Bind<LayoutAlign>);
+    get justify(): GridJustify;
+    set justify(value: Bind<GridJustify>);
+    get inline(): boolean;
+    set inline(value: Bind<boolean>);
+    /** A child's cell, as its props say or as set with {@link setCell}. */
+    cellOf(child: ComponentBase): GridCell;
+    /** Places a child from code; each field is a value or a function that is followed. Fields left out stay. */
+    setCell(child: ComponentBase, cell: GridCell): void;
+    private get settings();
+    private place;
+    private writeStyle;
+}

package/dist/components/layout/GroupBox.d.ts

@@ -0,0 +1,54 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { GroupBoxProps } from './group-box-props';
+import type { GroupBoxToggledEventArgs } from './group-box-toggled-event-args';
+import type { GroupBoxVariant } from './group-box-variant';
+import type { LayoutSpace } from './layout-space';
+/**
+ * A titled frame around related controls: a `<fieldset>` whose `<legend>` names the group for
+ * screen readers. `enabled = false` disables everything inside; the title's `&` key focuses the
+ * first control inside; with `collapsible` the title shows and hides the content.
+ *
+ * @example
+ * <GroupBox title="&Address" collapsible>
+ *   <TextBox label="Street" />
+ *   <TextBox label="City" />
+ * </GroupBox>
+ *
+ * const box = new GroupBox({ title: 'Delivery' });
+ * box.controls.add(new TextBox({ label: 'Note' }));
+ * box.enabled = false;
+ */
+export declare class GroupBox extends Control<HTMLFieldSetElement, GroupBoxProps> {
+    constructor(props?: IBaseProp<GroupBoxProps>);
+    /** The title; the same property as `text`. */
+    get title(): string;
+    set title(value: Bind<string>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get collapsed(): boolean;
+    set collapsed(value: Bind<boolean>);
+    get padding(): LayoutSpace | undefined;
+    set padding(value: Bind<LayoutSpace | undefined>);
+    get gap(): LayoutSpace | undefined;
+    set gap(value: Bind<LayoutSpace | undefined>);
+    get variant(): GroupBoxVariant;
+    set variant(value: Bind<GroupBoxVariant>);
+    /** The content was shown or hidden, by the user or by code (`e.byUser`). */
+    get onToggled(): MotifEvent<GroupBoxToggledEventArgs>;
+    /** The `<legend>` holding the title. */
+    get legendElement(): HTMLLegendElement;
+    get canFocus(): boolean;
+    /** Focuses the first control inside (showing the content first when it is collapsed). */
+    focus(): boolean;
+    onAccessKey(): boolean;
+    private get isCollapsed();
+    private get parts();
+    private createParts;
+    /** The first control inside the content, else the toggle. */
+    private focusTarget;
+    private change;
+    private renderTitle;
+    private renderToggle;
+    private renderCollapsed;
+}

package/dist/components/layout/Panel.d.ts

@@ -0,0 +1,28 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { LayoutSpace } from './layout-space';
+import type { PanelProps } from './panel-props';
+import type { PanelScroll } from './panel-scroll';
+import type { PanelVariant } from './panel-variant';
+/**
+ * A plain container: padding, an optional frame, and its own scrolling. A scrolling panel is a
+ * Tab stop, so it can be scrolled with the keys; `text` names it (a region landmark).
+ *
+ * @example
+ * <Panel scrollable="vertical" padding="md" variant="outline" text="Messages">…</Panel>
+ *
+ * const panel = new Panel({ padding: 'sm' });
+ * panel.controls.add(new Button({ text: 'Later' }));
+ */
+export declare class Panel extends Control<HTMLDivElement, PanelProps> {
+    constructor(props?: IBaseProp<PanelProps>);
+    get scrollable(): PanelScroll;
+    set scrollable(value: Bind<PanelScroll>);
+    get padding(): LayoutSpace | undefined;
+    set padding(value: Bind<LayoutSpace | undefined>);
+    get variant(): PanelVariant;
+    set variant(value: Bind<PanelVariant>);
+    protected applyProperty(name: string, value: unknown): void;
+    private renderName;
+    private renderScroll;
+}