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

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

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { AvatarShape } from './avatar-shape';
+import type { AvatarSize } from './avatar-size';
+import type { AvatarStatus } from './avatar-status';
+import type { AvatarTone } from './avatar-tone';
+/** Props of `Avatar`. Each one is also a settable property; a function is followed. */
+export interface AvatarProps extends ControlProps {
+    /** The picture. Until it loads, or when it cannot, the initials (else the person icon) show. */
+    src?: Bind<string | null>;
+    /** Whose avatar it is: the initials are made from it, and screen readers say it. */
+    name?: Bind<string>;
+    /** Initials of your own instead of the ones made from `name`. */
+    initials?: Bind<string>;
+    /** What screen readers say instead of the name. */
+    label?: Bind<string>;
+    /** Default `'md'`; in a group, the group's. */
+    size?: Bind<AvatarSize>;
+    /** Default: the design language's (`circle`). */
+    shape?: Bind<AvatarShape>;
+    /** The colour without a picture; `auto` takes one from the name, the same for the same name. Default: the design language's. */
+    tone?: Bind<AvatarTone>;
+    /** A presence dot on the lower end corner; `null`: none. Default `null`. */
+    status?: Bind<AvatarStatus | null>;
+}

package/dist/components/avatar/avatar-shape.d.ts

@@ -0,0 +1,2 @@
+/** The outline of an avatar: a circle, or a square with the language's corners. */
+export type AvatarShape = 'circle' | 'square';

package/dist/components/avatar/avatar-size.d.ts

@@ -0,0 +1,2 @@
+/** How big an avatar is, from the design language's sizes. */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/avatar/avatar-status.d.ts

@@ -0,0 +1,2 @@
+/** Whether someone can be reached now, shown as a dot on the avatar. */
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';

package/dist/components/avatar/avatar-tone.d.ts

@@ -0,0 +1,2 @@
+/** The colour of an avatar without a picture; `auto` takes one from the name, the same for the same name. */
+export type AvatarTone = 'standard' | 'accent' | 'info' | 'success' | 'caution' | 'danger' | 'auto';

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

@@ -0,0 +1,11 @@
+export { Avatar } from './Avatar';
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupLayout } from './avatar-group-layout';
+export type { AvatarGroupProps } from './avatar-group-props';
+export type { AvatarProps } from './avatar-props';
+export type { AvatarShape } from './avatar-shape';
+export type { AvatarSize } from './avatar-size';
+export type { AvatarStatus } from './avatar-status';
+export type { AvatarTone } from './avatar-tone';
+export { initialsOf } from './initials-of';
+export { toneOfName } from './tone-of-name';

package/dist/components/avatar/initials-of.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The initials of a name: the first letters of its first and last words, in capitals of `locale`
+ * ("ada lovelace" → "AL", "ılgın" in Turkish → "I"). What is in brackets and what is not a letter or a
+ * digit are left out; `''` when nothing is left.
+ */
+export declare function initialsOf(name: string, locale: string): string;

package/dist/components/avatar/tone-of-name.d.ts

@@ -0,0 +1,3 @@
+import type { AvatarTone } from './avatar-tone';
+/** The tone of a name for `tone: 'auto'`: the same name, the same tone, on every page and every visit. */
+export declare function toneOfName(name: string): AvatarTone;

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,53 @@
+import type { Bind, ComponentBase, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { BadgePosition } from './badge-position';
+import type { BadgeProps } from './badge-props';
+import type { BadgeTone } from './badge-tone';
+import type { BadgeVariant } from './badge-variant';
+/**
+ * A short text, a count or a dot: in the flow of the text, or on a corner of what it is in
+ * (`position`). A count over `max` shows `max+`, a count of 0 hides unless `showZero`; numbers are
+ * written in the kit's language. Its tone and look default to the design language's.
+ *
+ * @example
+ * <Badge text="New" tone="success" />
+ * <Button text="Inbox"><Badge count={() => this.inbox.unread} position="top-end" label={() => `${this.inbox.unread} unread`} /></Button>
+ *
+ * const badge = Badge.attach(this.bell, { count: 3 });
+ * badge.count = 0; // hides
+ */
+export declare class Badge extends Control<HTMLSpanElement, BadgeProps> {
+    /** Puts a badge on a corner of `target` (`top-end` unless `props` says otherwise): one of its children, it goes with it. */
+    static attach(target: ComponentBase, props?: BadgeProps): Badge;
+    /** A tone, look or size not given is the design language's. */
+    private readonly look;
+    constructor(props?: IBaseProp<BadgeProps>);
+    get count(): number | null;
+    set count(value: Bind<number | null>);
+    get max(): number;
+    set max(value: Bind<number>);
+    get showZero(): boolean;
+    set showZero(value: Bind<boolean>);
+    get dot(): boolean;
+    set dot(value: Bind<boolean>);
+    get tone(): BadgeTone;
+    set tone(value: Bind<BadgeTone>);
+    get variant(): BadgeVariant;
+    set variant(value: Bind<BadgeVariant>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get position(): BadgePosition | null;
+    set position(value: Bind<BadgePosition | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** What it shows now: the count as written (`99+`), else the text; `''` for a dot. */
+    get shownText(): string;
+    onMounted(): void;
+    private peekCount;
+    private peekMax;
+    private renderShown;
+    private renderLook;
+    /** The anchor's frame: the badge sits on its outer corner, not inside its border. */
+    private measureAnchor;
+}

package/dist/components/badge/badge-position.d.ts

@@ -0,0 +1,2 @@
+/** The corner of what it is in that a badge sits on (`start` and `end` follow the writing direction). */
+export type BadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';

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

@@ -0,0 +1,27 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { BadgePosition } from './badge-position';
+import type { BadgeTone } from './badge-tone';
+import type { BadgeVariant } from './badge-variant';
+/** Props of `Badge`. Each one is also a settable property; a function is followed. */
+export interface BadgeProps extends ControlProps {
+    /** A count, written in the kit's language; over `max` it shows `max+`. `null`: the text shows instead. */
+    count?: Bind<number | null>;
+    /** The highest count written as it is. Default `99`. */
+    max?: Bind<number>;
+    /** A count of 0 shows; without it the badge hides at 0. Default `false`. */
+    showZero?: Bind<boolean>;
+    /** A dot only: there is something, without saying what. Default `false`. */
+    dot?: Bind<boolean>;
+    /** Default: the design language's (`accent`, or `danger` where the language marks counts that way). */
+    tone?: Bind<BadgeTone>;
+    /** Default: the design language's (`solid`). */
+    variant?: Bind<BadgeVariant>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** On a corner of what it is in (which becomes its anchor); `null`: in the flow of the text. Default `null`. */
+    position?: Bind<BadgePosition | null>;
+    /** What screen readers say ("3 unread messages"); without it, they read the text. */
+    label?: Bind<string>;
+}

package/dist/components/badge/badge-tone.d.ts

@@ -0,0 +1,2 @@
+/** The colour a badge says something with. */
+export type BadgeTone = 'standard' | 'accent' | 'info' | 'success' | 'caution' | 'danger';

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

@@ -0,0 +1,2 @@
+/** How a badge is drawn: filled with its tone, a light fill, or a frame. */
+export type BadgeVariant = 'solid' | 'subtle' | 'outline';

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

@@ -0,0 +1,5 @@
+export { Badge } from './Badge';
+export type { BadgePosition } from './badge-position';
+export type { BadgeProps } from './badge-props';
+export type { BadgeTone } from './badge-tone';
+export type { BadgeVariant } from './badge-variant';

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,56 @@
+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 { BreadcrumbItem } from './breadcrumb-item';
+import type { BreadcrumbItemClickEventArgs } from './breadcrumb-item-click-event-args';
+import type { BreadcrumbProps } from './breadcrumb-props';
+/**
+ * The way to the current page: each step a link (`href`, `rel="router"` for the MotifJS router) or a button
+ * (`onItemClick`), the current page last. Steps that do not fit, or beyond `maxItems`, go into a menu after the first
+ * step; the first and the last ones always show.
+ *
+ * @example
+ * <Breadcrumb rel="router" items={[{ text: 'Home', href: '/' }, { text: 'Orders', href: '/orders' }, { text: () => this.order.number }]} />
+ */
+export declare class Breadcrumb extends Control<HTMLElement, BreadcrumbProps> {
+    private readonly clicked;
+    private readonly list;
+    private readonly moreItem;
+    private readonly more;
+    private steps;
+    private looks;
+    private stopItems;
+    /** The steps now in the menu. */
+    private hidden;
+    private readonly watch;
+    constructor(props?: IBaseProp<BreadcrumbProps>);
+    get items(): readonly (BreadcrumbItem | string)[];
+    set items(value: Bind<readonly (BreadcrumbItem | string)[]>);
+    get rel(): string;
+    set rel(value: Bind<string>);
+    get maxItems(): number | null;
+    set maxItems(value: Bind<number | null>);
+    get lastIsCurrent(): boolean;
+    set lastIsCurrent(value: Bind<boolean>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** A step was pressed, on the breadcrumb or in its menu; `cancel` keeps a link from being followed. */
+    get onItemClick(): MotifEvent<BreadcrumbItemClickEventArgs>;
+    /** The indexes of the steps now in the menu. */
+    get collapsed(): readonly number[];
+    onMounted(): void;
+    private renderName;
+    private renderItems;
+    private lookOf;
+    /** The steps are made again: their kind (link, button, current) depends on what they say. */
+    private drawSteps;
+    /** A divider after a step: a glyph whose shape is the design language's (`divider.icon`). */
+    private divider;
+    /** A step pressed: told first; a link is followed unless cancelled, a disabled one never. */
+    private pressed;
+    /** As many steps as fit (and no more than `maxItems`): the ones between the first and the last go into the menu. */
+    private fit;
+    private showSteps;
+}

package/dist/components/breadcrumb/breadcrumb-item-click-event-args.d.ts

@@ -0,0 +1,10 @@
+import type { Breadcrumb } from './Breadcrumb';
+/** A step was pressed, on the breadcrumb or in its menu. */
+export interface BreadcrumbItemClickEventArgs {
+    /** The item as given. */
+    item: unknown;
+    index: number;
+    /** `cancel = true` keeps a link from being followed. */
+    cancel: boolean;
+    source: Breadcrumb;
+}

package/dist/components/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,13 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** One step of a `Breadcrumb`. Its fields may be functions of reactive state: the breadcrumb follows them. */
+export interface BreadcrumbItem {
+    text: Bind<string>;
+    /** Makes it a link there; without it, a button (`onItemClick`). */
+    href?: Bind<string | null>;
+    icon?: Bind<IconSource | null>;
+    /** `false` greys it out. Default `true`. */
+    enabled?: Bind<boolean>;
+    /** The app's own value for the step. */
+    data?: unknown;
+}

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

@@ -0,0 +1,21 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { BreadcrumbItem } from './breadcrumb-item';
+import type { BreadcrumbItemClickEventArgs } from './breadcrumb-item-click-event-args';
+/** Props of `Breadcrumb`. Each one is also a settable property; a function is followed. */
+export interface BreadcrumbProps extends ControlProps {
+    /** The steps, the current page last: `BreadcrumbItem`s or plain texts. */
+    items?: Bind<readonly (BreadcrumbItem | string)[]>;
+    /** The links' `rel`; `'router'` lets the MotifJS router take them. */
+    rel?: Bind<string>;
+    /** The most steps shown; the first and the last ones stay, those between go into a menu. Default: as many as fit. */
+    maxItems?: Bind<number | null>;
+    /** The last step is the current page (not pressable, `aria-current`). Default `true`. */
+    lastIsCurrent?: Bind<boolean>;
+    /** Default `'md'`. */
+    size?: Bind<ControlSize>;
+    /** What screen readers call it. Default: the kit's "Breadcrumb". */
+    label?: Bind<string>;
+    onItemClick?: (e: BreadcrumbItemClickEventArgs) => void;
+}

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

@@ -0,0 +1,4 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbItem } from './breadcrumb-item';
+export type { BreadcrumbItemClickEventArgs } from './breadcrumb-item-click-event-args';
+export type { BreadcrumbProps } from './breadcrumb-props';

package/dist/components/button/Button.d.ts

@@ -0,0 +1,117 @@
+import type { Bind, ComponentBase, IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { ButtonProps } from './button-props';
+import type { ButtonSize } from './button-size';
+import type { ButtonTone } from './button-tone';
+import type { ButtonVariant } from './button-variant';
+/**
+ * A `<button>` drawn from the design tokens. Its caption is `text` (`&Save` makes Alt+S press it)
+ * or its JSX children, with an optional icon. It can be a toggle (`pressed`, two-way with
+ * `x-model`), show that work is running (`busy`), and open a menu or any content: the whole
+ * button opens it, or with `split` an arrow next to it does while the button keeps its own action.
+ *
+ * @example
+ * <Button text="&Save" tone="accent" onclick={() => this.model.save()} />
+ * <Button text="Save" split menu={[{ text: 'Save as…', click: () => this.saveAs() }]} onclick={() => this.save()} />
+ *
+ * const retry = new Button({ text: 'Retry', icon: '/icons/retry.svg' });
+ * this.toolbar.controls.add(retry);
+ * retry.busy = true;
+ */
+export declare class Button extends Control<HTMLElement, ButtonProps> {
+    /** A variant, tone or size not given is the design language's, or the one of the place the button sits in. */
+    private readonly look;
+    constructor(props?: IBaseProp<ButtonProps>);
+    get variant(): ButtonVariant;
+    set variant(value: Bind<ButtonVariant>);
+    get tone(): ButtonTone;
+    set tone(value: Bind<ButtonTone>);
+    get size(): ButtonSize;
+    set size(value: Bind<ButtonSize>);
+    get icon(): IconSource | null;
+    set icon(value: Bind<IconSource | null>);
+    get iconPosition(): 'start' | 'end';
+    set iconPosition(value: Bind<'start' | 'end'>);
+    get stretch(): boolean;
+    set stretch(value: Bind<boolean>);
+    get type(): 'button' | 'submit' | 'reset';
+    set type(value: Bind<'button' | 'submit' | 'reset'>);
+    get hint(): string;
+    set hint(value: Bind<string>);
+    get toggle(): boolean;
+    set toggle(value: Bind<boolean>);
+    get pressed(): boolean;
+    set pressed(value: Bind<boolean>);
+    get busy(): boolean;
+    set busy(value: Bind<boolean>);
+    get focusableWhenDisabled(): boolean;
+    set focusableWhenDisabled(value: Bind<boolean>);
+    get split(): boolean;
+    set split(value: Bind<boolean>);
+    get menu(): readonly MenuItem[];
+    set menu(value: Bind<readonly MenuItem[]>);
+    get dropDown(): ComponentBase | null;
+    set dropDown(value: Bind<ComponentBase | null>);
+    /** `pressed`, for `x-model` on a toggle button. */
+    get value(): boolean;
+    set value(value: boolean);
+    /** Whether the button was created with a menu (`split`, `menu` or `dropDown`). */
+    get hasMenu(): boolean;
+    /** Whether its menu or drop-down is open. Reactive. Setting it opens or closes it. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    /** Opens the menu or drop-down with focus on its first item; `false` when there is nothing to open or the button cannot be used. */
+    open(): boolean;
+    close(): void;
+    /**
+     * Reads the menu again after its items were changed in place: the open menu shows them at once. Your items may
+     * be plain or reactive; the button reads them as they are.
+     */
+    refresh(): void;
+    protected get focusElement(): HTMLElement;
+    get canFocus(): boolean;
+    /** The access key presses the button, as HTML `accesskey` does; with a menu and no `split` it opens the menu. */
+    onAccessKey(): boolean;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    private requireMenu;
+    /** JSX children go after the text: in the button, or in its main part. */
+    private placeChildren;
+    private listen;
+    private faceClicked;
+    private faceKeyDown;
+    private arrowKeyDown;
+    private renderText;
+    /** An icon and no text: the language may draw it square or round. */
+    private renderIconOnly;
+    /** The caption has its own element, so the language can trim its line box to the letters (`text-box`). */
+    private placeCaption;
+    private renderIcon;
+    private renderBusy;
+    /** Reads again what the design language decides for the button (variant, tone, size). The button does it once
+     *  it is in the page; one placed in the page outside the component tree is told when it is placed. */
+    readLook(): void;
+    onMounted(): void;
+    private renderLook;
+    private renderHint;
+    private renderPressed;
+    /** Disabled, the parts take `aria-disabled` and keep their place in the Tab order. */
+    private renderFocusable;
+    /** The whole button opens the menu (a menu without `split`). */
+    private opensMenuItself;
+    /** `split` or not: the arrow part, the chevron, which part says it opens a popup, the native type. */
+    private renderMode;
+    /** The part that opens the popup says what it opens and whether it is open. */
+    private markToggle;
+    private toggleMenu;
+    private openMenu;
+    /** Puts the drop-down content or the menu into the popup; `false` when there is nothing to show. */
+    private fill;
+    /** The menu or the content changed: shown at once when it is open. */
+    private refill;
+    private createPopup;
+    private itemChosen;
+}

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

@@ -0,0 +1,45 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { IconSource } from '../../core/icon-source';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { ButtonSize } from './button-size';
+import type { ButtonTone } from './button-tone';
+import type { ButtonVariant } from './button-variant';
+/**
+ * Props of `Button`: the shared `ControlProps` plus its own. Each one is also a settable, reactive
+ * property. `split`, `menu` and `dropDown` give the button a menu; one of them must be there when
+ * the button is created, because a button with a menu is built of two parts.
+ */
+export interface ButtonProps extends ControlProps {
+    /** Default `'solid'`. */
+    variant?: Bind<ButtonVariant>;
+    /** Default `'standard'`. */
+    tone?: Bind<ButtonTone>;
+    /** Default `'md'`. */
+    size?: Bind<ButtonSize>;
+    icon?: Bind<IconSource | null | undefined>;
+    /** Default `'start'`; `'end'` puts the icon after the text. */
+    iconPosition?: Bind<'start' | 'end'>;
+    /** Fills the width of what it sits in. */
+    stretch?: Bind<boolean>;
+    /** The native type. Default `'button'`, so a button in a form never submits by accident. */
+    type?: Bind<'button' | 'submit' | 'reset'>;
+    /** Shown as a tooltip. */
+    hint?: Bind<string>;
+    /** A toggle button: a click turns `pressed` on and off; `x-model` binds it two-way. */
+    toggle?: Bind<boolean>;
+    pressed?: Bind<boolean>;
+    /** Work is running: a spinner shows, presses are ignored, the size stays. */
+    busy?: Bind<boolean>;
+    /** Disabled, it can still take focus, so a screen reader finds it and reads it as dimmed. */
+    focusableWhenDisabled?: Bind<boolean>;
+    /** Two parts: the button does its own action, the arrow next to it opens the menu. Without it the whole button opens the menu. */
+    split?: Bind<boolean>;
+    /** The menu's commands. */
+    menu?: Bind<readonly MenuItem[]>;
+    /** Any content to open instead of a menu (a picker, a small form). */
+    dropDown?: Bind<ComponentBase | null | undefined>;
+    /** A menu item was chosen, after the item's own `click`. */
+    onItemClick?: (e: MenuItemClickEventArgs) => void;
+}

package/dist/components/button/button-size.d.ts

@@ -0,0 +1,3 @@
+import type { ControlSize } from '../../core/control-size';
+/** The height of a button, from the density tokens: `sm`, `md` or `lg`. */
+export type ButtonSize = ControlSize;

package/dist/components/button/button-tone.d.ts

@@ -0,0 +1,2 @@
+/** The color of a button: `standard`, `accent` (the main action) or `danger` (a destructive one). */
+export type ButtonTone = 'standard' | 'accent' | 'danger';

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

@@ -0,0 +1,2 @@
+/** How a button is drawn: `solid` (filled and pressable), `outline` (a frame) or `ghost` (only on hover). */
+export type ButtonVariant = 'solid' | 'outline' | 'ghost';

package/dist/components/buttongroup/ButtonGroup.d.ts

@@ -0,0 +1,79 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ItemField } from '../../parts/list/item-field';
+import { Button } from '../button/Button';
+import type { ButtonSize } from '../button/button-size';
+import type { ButtonVariant } from '../button/button-variant';
+import type { ButtonGroupItem } from './button-group-item';
+import type { ButtonGroupItemClickEventArgs } from './button-group-item-click-event-args';
+import type { ButtonGroupProps } from './button-group-props';
+import type { ButtonGroupSelection } from './button-group-selection';
+import type { ButtonGroupValueChangedEventArgs } from './button-group-value-changed-event-args';
+/**
+ * A row of buttons that belong together: with `selection`, a segmented choice (`single`: one of them,
+ * `multiple`: each on and off), else a set of actions (`onItemClick`). The buttons are the kit's own;
+ * their look in a group is the design language's, attached by default. One Tab stop: the arrow keys,
+ * Home and End move between the buttons, Space and Enter press them.
+ *
+ * @example
+ * <ButtonGroup label="Alignment" items={['Left', 'Center', 'Right']} x-model={() => this.doc.align} />
+ * <ButtonGroup selection="multiple" items={[{ value: 'b', icon: boldIcon, hint: 'Bold' }, { value: 'i', icon: italicIcon, hint: 'Italic' }]} x-model={() => this.doc.marks} />
+ */
+export declare class ButtonGroup<T = unknown> extends Control<HTMLDivElement, ButtonGroupProps<T>> {
+    /** Attached or not, when not told, is the design language's. */
+    private readonly look;
+    private readonly valueChanged;
+    private readonly itemClicked;
+    private readonly buttonList;
+    private looks;
+    private stopItems;
+    /** The button focused last: Tab comes back to it. */
+    private current;
+    private byUser;
+    private ready;
+    constructor(props?: IBaseProp<ButtonGroupProps<T>>);
+    get items(): readonly (ButtonGroupItem<T> | T)[];
+    set items(value: Bind<readonly (ButtonGroupItem<T> | T)[]>);
+    get itemText(): ItemField<ButtonGroupItem<T> | T> | undefined;
+    set itemText(value: ItemField<ButtonGroupItem<T> | T> | undefined);
+    get itemValue(): ItemField<ButtonGroupItem<T> | T> | undefined;
+    set itemValue(value: ItemField<ButtonGroupItem<T> | T> | undefined);
+    get selection(): ButtonGroupSelection;
+    set selection(value: Bind<ButtonGroupSelection>);
+    get value(): T | readonly T[] | null;
+    set value(value: Bind<T | readonly T[] | null>);
+    get allowEmpty(): boolean;
+    set allowEmpty(value: Bind<boolean>);
+    get attached(): boolean;
+    set attached(value: Bind<boolean>);
+    get variant(): ButtonVariant | undefined;
+    set variant(value: Bind<ButtonVariant | undefined>);
+    get size(): ButtonSize;
+    set size(value: Bind<ButtonSize>);
+    get stretch(): boolean;
+    set stretch(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** The value changed, by the user or by code (`e.byUser`). */
+    get onValueChanged(): MotifEvent<ButtonGroupValueChangedEventArgs<T>>;
+    /** A button was pressed (with any selection). */
+    get onItemClick(): MotifEvent<ButtonGroupItemClickEventArgs<T>>;
+    /** The buttons, in the order of the items (hidden ones too). */
+    get buttons(): readonly Button[];
+    /** Whether the button of `value` is chosen or on. */
+    isSelected(value: unknown): boolean;
+    /** Reads the items again after they were changed in place. */
+    refresh(): void;
+    onMounted(): void;
+    private buttonAt;
+    private renderItems;
+    private lookOf;
+    private drawItems;
+    /** A button was pressed: its action, then the choice it makes. */
+    private pressed;
+    private keyDown;
+    private renderValue;
+    /** One Tab stop: the button focused last, else the first chosen, else the first that can be pressed. */
+    private renderStops;
+    private renderLook;
+}

package/dist/components/buttongroup/button-group-item-click-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonGroup } from './ButtonGroup';
+/** A button of the group was pressed (with any selection). */
+export interface ButtonGroupItemClickEventArgs<T = unknown> {
+    /** The item as given. */
+    item: unknown;
+    value: T;
+    source: ButtonGroup<T>;
+}

package/dist/components/buttongroup/button-group-item.d.ts

@@ -0,0 +1,15 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** One button of a `ButtonGroup`. Its fields may be functions of reactive state: the group follows them. */
+export interface ButtonGroupItem<T = unknown> {
+    value: T;
+    /** Default: the value as text. */
+    text?: Bind<string>;
+    icon?: Bind<IconSource | null>;
+    /** A tooltip; with an icon and no text it also names the button. */
+    hint?: Bind<string>;
+    /** `false` greys it out and skips it. Default `true`. */
+    enabled?: Bind<boolean>;
+    /** `false` leaves it out. Default `true`. */
+    visible?: Bind<boolean>;
+}

package/dist/components/buttongroup/button-group-props.d.ts

@@ -0,0 +1,36 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ItemField } from '../../parts/list/item-field';
+import type { ButtonSize } from '../button/button-size';
+import type { ButtonVariant } from '../button/button-variant';
+import type { ButtonGroupItem } from './button-group-item';
+import type { ButtonGroupItemClickEventArgs } from './button-group-item-click-event-args';
+import type { ButtonGroupSelection } from './button-group-selection';
+import type { ButtonGroupValueChangedEventArgs } from './button-group-value-changed-event-args';
+/** Props of `ButtonGroup`. Each one is also a settable property; a function is followed. */
+export interface ButtonGroupProps<T = unknown> extends ControlProps {
+    /** The buttons: `ButtonGroupItem`s, plain values (each its own text), or objects of your own shape with `itemText` / `itemValue`. */
+    items?: Bind<readonly (ButtonGroupItem<T> | T)[]>;
+    /** Where an item keeps its text: a property name or a function. Default `'text'`. Not a binding: a function here is the reader. */
+    itemText?: ItemField<ButtonGroupItem<T> | T>;
+    /** Where an item keeps its value: a property name or a function. Default `'value'`. Not a binding: a function here is the reader. */
+    itemValue?: ItemField<ButtonGroupItem<T> | T>;
+    /** Default `'single'`. */
+    selection?: Bind<ButtonGroupSelection>;
+    /** The chosen value (`single`) or an array of the values turned on (`multiple`). Two-way with `x-model`. */
+    value?: Bind<T | readonly T[] | null>;
+    /** `single`: pressing the chosen button again leaves none chosen. Default `false`. */
+    allowEmpty?: Bind<boolean>;
+    /** The buttons touch, sharing their edges. Default: the design language's (`true`). */
+    attached?: Bind<boolean>;
+    /** Default: the design language's (`outline`). */
+    variant?: Bind<ButtonVariant>;
+    /** Default `'md'`. */
+    size?: Bind<ButtonSize>;
+    /** Fills the width, the buttons sharing it. Default `false`. */
+    stretch?: Bind<boolean>;
+    /** What screen readers call the group ("Text alignment"). */
+    label?: Bind<string>;
+    onValueChanged?: (e: ButtonGroupValueChangedEventArgs<T>) => void;
+    onItemClick?: (e: ButtonGroupItemClickEventArgs<T>) => void;
+}

package/dist/components/buttongroup/button-group-selection.d.ts

@@ -0,0 +1,2 @@
+/** What pressing a button of a group does: only its action, choose that one, or turn it on and off. */
+export type ButtonGroupSelection = 'none' | 'single' | 'multiple';

package/dist/components/buttongroup/button-group-value-changed-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonGroup } from './ButtonGroup';
+export interface ButtonGroupValueChangedEventArgs<T = unknown> {
+    /** The chosen value (`single`, `null` for none) or an array of the values turned on (`multiple`). */
+    value: T | T[] | null;
+    /** `true` when the user pressed a button, `false` when code set the value. */
+    byUser: boolean;
+    source: ButtonGroup<T>;
+}

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

@@ -0,0 +1,6 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupItem } from './button-group-item';
+export type { ButtonGroupItemClickEventArgs } from './button-group-item-click-event-args';
+export type { ButtonGroupProps } from './button-group-props';
+export type { ButtonGroupSelection } from './button-group-selection';
+export type { ButtonGroupValueChangedEventArgs } from './button-group-value-changed-event-args';