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

package/dist/components/tileview/tile-click-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { TileView } from './TileView';
+/** A press on a tile that was not a drag. */
+export interface TileClickEventArgs {
+    index: number;
+    /** The item as given. */
+    item: unknown;
+    source: TileView;
+    event: Event;
+}

package/dist/components/tileview/tile-reorder-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { EventArgs } from '@motifx/core';
+import type { TileView } from './TileView';
+/** A tile is about to be moved (`onReordering`, `cancel = true` keeps it) or was moved (`onReordered`): from one index to another. */
+export interface TileReorderEventArgs extends EventArgs {
+    /** The item as given. */
+    item: unknown;
+    fromIndex: number;
+    toIndex: number;
+    source: TileView;
+    event?: Event;
+}

package/dist/components/tileview/tile-selection-changed-event-args.d.ts

@@ -0,0 +1,11 @@
+import type { TileView } from './TileView';
+/** The chosen tiles changed. */
+export interface TileSelectionChangedEventArgs {
+    /** The chosen tiles' indexes, in tile order. */
+    indexes: number[];
+    /** Their items as given. */
+    items: unknown[];
+    /** By a press or a key, else programmatically. */
+    byUser: boolean;
+    source: TileView;
+}

package/dist/components/tileview/tile-view-item.d.ts

@@ -0,0 +1,18 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+/** A tile of the `TileView`: a text, or any content, on a tile of so many base cells. Each field may be a function of your state. */
+export interface TileViewItem {
+    /** Names the tile in `value`; without one its index does. */
+    key?: string;
+    /** The tile's text. */
+    text?: Bind<string>;
+    /** How many base cells wide the tile is. Default `1`. */
+    widthRatio?: Bind<number>;
+    /** How many base cells tall the tile is. Default `1`. */
+    heightRatio?: Bind<number>;
+    /** Any content in place of the text, made when the tile is. */
+    content?: () => ComponentBase;
+    /** A tile that cannot be chosen or moved. Default `true`. */
+    enabled?: Bind<boolean>;
+    /** Anything of your own; the item comes back as given in the events. */
+    data?: unknown;
+}

package/dist/components/tileview/tile-view-props.d.ts

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { TileClickEventArgs } from './tile-click-event-args';
+import type { TileReorderEventArgs } from './tile-reorder-event-args';
+import type { TileSelectionChangedEventArgs } from './tile-selection-changed-event-args';
+import type { TileViewItem } from './tile-view-item';
+/** Tiles flow down the columns (`horizontal`, the view scrolls sideways) or along the rows (`vertical`). */
+export type TileViewDirection = 'horizontal' | 'vertical';
+/** `none`: nothing is chosen; `single`: one tile; `multiple`: any number. */
+export type TileViewSelectionMode = 'none' | 'single' | 'multiple';
+/** Props of `TileView`. Each one is also a settable property; a function is followed. */
+export interface TileViewProps extends ControlProps {
+    /** The tiles in order: `TileViewItem`s or plain texts. */
+    items?: Bind<readonly (TileViewItem | string)[]>;
+    /** A base cell's width in pixels; a tile is `widthRatio` of them. Default `100`. */
+    baseItemWidth?: Bind<number>;
+    /** A base cell's height in pixels; a tile is `heightRatio` of them. Default `100`. */
+    baseItemHeight?: Bind<number>;
+    /** Default `'horizontal'`: the tiles fill the height in columns, the view scrolls sideways; give it a `height`. */
+    direction?: Bind<TileViewDirection>;
+    /** Default `'none'`. */
+    selectionMode?: Bind<TileViewSelectionMode>;
+    /** The chosen tile (`single`): its `key`, else its index; the chosen tiles (`multiple`) as a list. `x-model` binds it two-way. */
+    value?: Bind<string | number | null | readonly (string | number)[]>;
+    /** The tiles can be put in another order by dragging, or with Ctrl and an arrow key. Default `false`. */
+    allowReorder?: Bind<boolean>;
+    /** The view's height, a CSS length or pixels. */
+    height?: Bind<string | number | null>;
+    /** What screen readers call it. Default: the kit's "Tiles". */
+    label?: Bind<string>;
+    /** A press on a tile that was not a drag. */
+    onItemClick?: (e: TileClickEventArgs) => void;
+    onSelectionChanged?: (e: TileSelectionChangedEventArgs) => void;
+    /** A tile is about to be dragged; cancelable. */
+    onReordering?: (e: TileReorderEventArgs) => void;
+    /** A tile was dropped or moved with the keys to a new place: your data is yours to reorder. */
+    onReordered?: (e: TileReorderEventArgs) => void;
+}

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,113 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { IconSource } from "../../core/icon-source";
+import type { TimelineItem, TimelineTone } from "./timeline-item";
+import type { TimelineItemClickEventArgs } from "./timeline-item-click-event-args";
+import type { TimelineDateFormat, TimelineOrientation, TimelineProps } from "./timeline-props";
+import type { TimelineSelectionChangedEventArgs } from "./timeline-selection-changed-event-args";
+interface Look {
+    item: unknown;
+    key: string | null;
+    date: Date | null;
+    title: string;
+    description: string;
+    glyph: string;
+    icon: IconSource | null;
+    tone: TimelineTone;
+    content: (() => ComponentBase) | null;
+}
+interface Entry {
+    item: unknown;
+    li: Component<HTMLLIElement>;
+    dot: Component<HTMLSpanElement>;
+    dotGlyph: Component<HTMLSpanElement>;
+    dotIcon: ComponentBase | null;
+    face: Component<HTMLElement>;
+    date: Component<HTMLTimeElement>;
+    title: Component<HTMLSpanElement>;
+    description: Component<HTMLDivElement> | null;
+    content: ComponentBase | null;
+}
+/**
+ * Events in time order: down the page, each a card beside a line with a dot (the cards taking turns on either side
+ * when `alternate`, folded until pressed when `collapsible`); or along a line of dates (`horizontal`), where a
+ * press on a date, or the arrow keys, shows that event's card under the line. The dates are written in the kit's
+ * language.
+ *
+ * @example
+ * <Timeline items={[{ date: '2026-03-01', title: 'Kick-off', description: 'The plan agreed' }, { date: '2026-05-14', title: 'Beta', tone: 'accent' }]} />
+ * <Timeline orientation="horizontal" items={() => this.milestones} x-model={() => this.shown} />
+ */
+export declare class Timeline extends Control<HTMLDivElement, TimelineProps> {
+    itemClick: Emitter<TimelineItemClickEventArgs>;
+    selectionChanged: Emitter<TimelineSelectionChangedEventArgs>;
+    track: Component<HTMLDivElement>;
+    list: Component<HTMLOListElement>;
+    previousButton: Component<HTMLButtonElement>;
+    nextButton: Component<HTMLButtonElement>;
+    detail: Component<HTMLDivElement>;
+    detailDate: Component<HTMLTimeElement>;
+    detailTitle: Component<HTMLSpanElement>;
+    detailDescription: Component<HTMLDivElement>;
+    detailContent: Component<HTMLDivElement>;
+    entries: Entry[];
+    looks: Look[];
+    expanded: Set<unknown>;
+    stopItems: (() => void) | null;
+    drawnAs: TimelineOrientation | null;
+    previousIndex: number;
+    byUser: boolean;
+    ready: boolean;
+    constructor(props?: IBaseProp<TimelineProps>);
+    get items(): readonly TimelineItem[];
+    set items(value: Bind<readonly TimelineItem[]>);
+    get orientation(): TimelineOrientation;
+    set orientation(value: Bind<TimelineOrientation>);
+    get alternate(): boolean;
+    set alternate(value: Bind<boolean>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get dateFormat(): TimelineDateFormat;
+    set dateFormat(value: Bind<TimelineDateFormat>);
+    get value(): string | number | null;
+    set value(value: Bind<string | number | null>);
+    get label(): string;
+    set label(value: Bind<string>);
+    /** A press on an event's card or flag (`index`, `item`). */
+    get onItemClick(): MotifEvent<TimelineItemClickEventArgs>;
+    /** Horizontal: the shown event changed (`index`, `item`, `previous`, `byUser`). */
+    get onSelectionChanged(): MotifEvent<TimelineSelectionChangedEventArgs>;
+    /** Horizontal: the index of the shown event; -1 when there is none. */
+    get selectedIndex(): number;
+    /** How many events there are. */
+    get count(): number;
+    get horizontal(): boolean;
+    /** Horizontal: shows an event, by index or key. Vertical: unfolds its card. */
+    goTo(event: number | string): boolean;
+    /** Vertical, `collapsible`: unfolds or folds an event's card. */
+    unfold(event: number | string, on?: boolean): void;
+    /** Whether an event's card is unfolded. */
+    isUnfolded(event: number | string): boolean;
+    /** Reads the items again after they were changed in place. */
+    refresh(): void;
+    /** The index a value names: a key, else an index in range; -1 for none. */
+    indexOf(value: string | number | null | undefined): number;
+    valueAt(index: number): string | number;
+    /** A date as the kit's language writes it with `dateFormat`. */
+    formatDate(date: Date | null): string;
+    renderName(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawEntries(): void;
+    pressable(): boolean;
+    makeEntry(look: Look, as: TimelineOrientation): Entry;
+    drawTexts(): void;
+    drawStates(): void;
+    drawDetail(index: number): void;
+    drawNav(): void;
+    makeNav(direction: 'previous' | 'next'): Component<HTMLButtonElement>;
+    select(index: number, byUser: boolean, event?: Event): boolean;
+    click(e: MouseEvent): void;
+    keyDown(e: KeyboardEvent): void;
+}
+export {};

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

@@ -0,0 +1,5 @@
+export { Timeline } from './Timeline';
+export type { TimelineItem, TimelineTone } from './timeline-item';
+export type { TimelineProps, TimelineOrientation, TimelineDateFormat } from './timeline-props';
+export type { TimelineItemClickEventArgs } from './timeline-item-click-event-args';
+export type { TimelineSelectionChangedEventArgs } from './timeline-selection-changed-event-args';

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

@@ -0,0 +1,9 @@
+import type { Timeline } from './Timeline';
+/** A press on an event's card (vertical) or flag (horizontal). */
+export interface TimelineItemClickEventArgs {
+    index: number;
+    /** The item as given. */
+    item: unknown;
+    source: Timeline;
+    event: Event;
+}

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

@@ -0,0 +1,24 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** The colour of an event's dot and flag. */
+export type TimelineTone = 'default' | 'accent' | 'success' | 'caution' | 'danger' | 'info';
+/** One event on the `Timeline`. Each field may be a function of your state. */
+export interface TimelineItem {
+    /** Names the event in `value` and the events; without one its index does. */
+    key?: string;
+    /** When: a `Date`, an ISO text, or milliseconds. */
+    date: Bind<Date | string | number>;
+    title: Bind<string>;
+    /** The text under the title; folded until the card is pressed when the timeline is `collapsible`. */
+    description?: Bind<string>;
+    /** A glyph of the kit's set in the dot. */
+    glyph?: Bind<string>;
+    /** An icon of your own in the dot, in place of the glyph. */
+    icon?: IconSource;
+    /** Default `'default'`. */
+    tone?: Bind<TimelineTone>;
+    /** Any content in the card, made when the card is. */
+    content?: () => ComponentBase;
+    /** Anything of your own; the item comes back as given in the events. */
+    data?: unknown;
+}

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

@@ -0,0 +1,30 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { TimelineItem } from './timeline-item';
+import type { TimelineItemClickEventArgs } from './timeline-item-click-event-args';
+import type { TimelineSelectionChangedEventArgs } from './timeline-selection-changed-event-args';
+/** Down the page with a card per event, or along a line of dates with the chosen event's card under it. */
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/** How a date is written: a preset, or the options of `Intl.DateTimeFormat`. */
+export type TimelineDateFormat = 'short' | 'medium' | 'long' | Intl.DateTimeFormatOptions;
+/** Props of `Timeline`. Each one is also a settable property; a function is followed. */
+export interface TimelineProps extends ControlProps {
+    /** The events, in order. */
+    items?: Bind<readonly TimelineItem[]>;
+    /** Default `'vertical'`. */
+    orientation?: Bind<TimelineOrientation>;
+    /** Vertical: the cards take turns on either side of the line. Default `false`. */
+    alternate?: Bind<boolean>;
+    /** Vertical: a card shows its description only when pressed. Default `false`. */
+    collapsible?: Bind<boolean>;
+    /** How the dates are written, in the kit's language. Default `'medium'`. */
+    dateFormat?: Bind<TimelineDateFormat>;
+    /** Horizontal: the event whose card is shown, its `key` else its index. `x-model` binds it two-way. Default `0`. */
+    value?: Bind<string | number | null>;
+    /** What screen readers call it. Default: the kit's "Timeline". */
+    label?: Bind<string>;
+    /** A press on an event's card or flag. */
+    onItemClick?: (e: TimelineItemClickEventArgs) => void;
+    /** Horizontal: the shown event changed. */
+    onSelectionChanged?: (e: TimelineSelectionChangedEventArgs) => void;
+}

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

@@ -0,0 +1,11 @@
+import type { Timeline } from './Timeline';
+/** Horizontal: the event whose card is shown changed. */
+export interface TimelineSelectionChangedEventArgs {
+    index: number;
+    /** The item as given; `null` when there is none. */
+    item: unknown;
+    previous: number;
+    /** By a press or a key, else from code. */
+    byUser: boolean;
+    source: Timeline;
+}

package/dist/components/tooltip/Tooltip.d.ts

@@ -6,7 +6,7 @@ import type { TooltipShowOn } from './tooltip-show-on';
 import type { TooltipTarget } from './tooltip-target';
 /**
  * A short description shown next to an element: after the pointer rests on it, when it gets
- * keyboard focus, or from code. The pointer can move onto the tooltip without closing it; Escape,
+ * keyboard focus, or programmatically. The pointer can move onto the tooltip without closing it; Escape,
  * a press, leaving focus and scrolling close it. One tooltip is open at a time on the page, and
  * all of them share one set of document listeners. It never takes focus and holds nothing
  * interactive; the target is described by it (`aria-describedby`) while it is shown.

package/dist/components/treeview/TreeView.d.ts

@@ -103,7 +103,7 @@ export declare class TreeView<T = unknown> extends Control<HTMLDivElement, TreeV
     /** Opens every row whose children are known (children not loaded yet are not loaded). */
     expandAll(): void;
     collapseAll(): void;
-    /** Selects a row from code (`multiple`: adds it to the selection). */
+    /** Selects a row programmatically (`multiple`: adds it to the selection). */
     select(key: unknown): void;
     unselect(key: unknown): void;
     /** With `multiple`: every known row that can be selected. */

package/dist/components/validationsummary/ValidationSummary.d.ts

@@ -0,0 +1,56 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { ValidationGroup } from "../../parts/validation/ValidationGroup";
+import type { ValidationTarget } from "../../parts/validation/validation-target";
+import type { SummaryItemClickEventArgs } from "./summary-item-click-event-args";
+import type { ValidationSummaryProps } from "./validation-summary-props";
+interface Row {
+    target: ValidationTarget;
+    text: string;
+    li: Component<HTMLLIElement>;
+    button: Component<HTMLButtonElement>;
+}
+/**
+ * The failed fields of a `ValidationGroup`, one line each with the field's label and its message, under a header;
+ * a press on a line focuses the field. It draws itself again whenever a field of the group is checked, and stays
+ * out of sight while nothing has failed.
+ *
+ * @example
+ * const group = new ValidationGroup();
+ * <ValidationSummary group={group} />
+ * <TextBox label="Name" required validationGroup={group} />
+ * <Button text="Save" onclick={() => group.validate()} />
+ */
+export declare class ValidationSummary extends Control<HTMLDivElement, ValidationSummaryProps> {
+    itemClick: Emitter<SummaryItemClickEventArgs>;
+    head: Component<HTMLParagraphElement>;
+    headText: Component<HTMLSpanElement>;
+    list: Component<HTMLUListElement>;
+    rows: Row[];
+    targets: readonly ValidationTarget[];
+    stopTargets: (() => void) | null;
+    constructor(props?: IBaseProp<ValidationSummaryProps>);
+    get group(): ValidationGroup | null;
+    set group(value: Bind<ValidationGroup | null>);
+    get header(): string;
+    set header(value: Bind<string>);
+    get showHeader(): boolean;
+    set showHeader(value: Bind<boolean>);
+    get focusOnClick(): boolean;
+    set focusOnClick(value: Bind<boolean>);
+    /** A line was pressed (`target`, `text`). */
+    get onItemClick(): MotifEvent<SummaryItemClickEventArgs>;
+    /** The failed targets listed now, in the group's order. */
+    get failed(): readonly ValidationTarget[];
+    /** How many lines there are. */
+    get count(): number;
+    /** Draws the lines again from the fields as they are now. */
+    refresh(): void;
+    renderTargets(): void;
+    messageOf(target: ValidationTarget): string;
+    textOf(target: ValidationTarget): string;
+    draw(): void;
+    drawHeader(): void;
+    click(e: MouseEvent): void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export { ValidationSummary } from './ValidationSummary';
+export type { ValidationSummaryProps } from './validation-summary-props';
+export type { SummaryItemClickEventArgs } from './summary-item-click-event-args';

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

@@ -0,0 +1,11 @@
+import type { ValidationTarget } from '../../parts/validation/validation-target';
+import type { ValidationSummary } from './ValidationSummary';
+/** A line of the summary was pressed. */
+export interface SummaryItemClickEventArgs {
+    /** The field (or other target) the line stands for. */
+    target: ValidationTarget;
+    /** The line's text. */
+    text: string;
+    source: ValidationSummary;
+    event: Event;
+}

package/dist/components/validationsummary/validation-summary-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ValidationGroup } from '../../parts/validation/ValidationGroup';
+import type { SummaryItemClickEventArgs } from './summary-item-click-event-args';
+/** Props of `ValidationSummary`. Each one is also a settable property; a function is followed. */
+export interface ValidationSummaryProps extends ControlProps {
+    /** The group whose failed fields are listed. */
+    group?: Bind<ValidationGroup | null>;
+    /** The line above the list. Default: the kit's "Please correct the following". */
+    header?: Bind<string>;
+    /** Default `true`. */
+    showHeader?: Bind<boolean>;
+    /** A press on a line focuses its field. Default `true`. */
+    focusOnClick?: Bind<boolean>;
+    /** A line was pressed. */
+    onItemClick?: (e: SummaryItemClickEventArgs) => void;
+}

package/dist/core/control.d.ts

@@ -22,11 +22,11 @@ export interface ControlProps {
 /**
  * The base of every `@motifx-community/ui` control: the shared properties
  * (`text`, `enabled`, `visible`, `tabStop`) work the same whether the control
- * is written in JSX or created with `new` and changed from code.
+ * is written in JSX or created with `new` and changed programmatically.
  *
  * - A prop can be a value or a getter (`enabled={() => !state.busy}`); a
  *   getter keeps the property in sync with the state.
- * - Every property can be set from code, with a value (`ctrl.enabled = false`:
+ * - Every property can be set programmatically, with a value (`ctrl.enabled = false`:
  *   it replaces a getter given before, the code owns the value from then on) or
  *   with a function (`ctrl.enabled = () => !state.busy`: bound and followed; over plain data, read again on
  *   `reState()`).
@@ -116,7 +116,7 @@ export declare class Control<TElement extends HTMLElement = HTMLElement, TProps
     protected setAccessKey(key: string | null): void;
     /** Reads a property, tracked: reactive readers update when it changes. */
     protected getProperty<T>(name: string): T;
-    /** Sets a property from code: replaces a getter prop bound to it, then stores and renders. */
+    /** Sets a property programmatically: replaces a getter prop bound to it, then stores and renders. */
     protected setProperty(name: string, value: unknown): void;
     /** Stores a value the user entered; a bound getter is kept. */
     protected changeProperty(name: string, value: unknown): void;
@@ -135,7 +135,7 @@ export declare class Control<TElement extends HTMLElement = HTMLElement, TProps
     /**
      * Renders a property without an effect: `apply` runs now with the current
      * value and again on every change, whether it comes from a getter prop or
-     * from code. E.g. `this.observeProperty('text', (t) => (label.data = t))`.
+     * programmatically. E.g. `this.observeProperty('text', (t) => (label.data = t))`.
      */
     protected observeProperty<T>(name: string, apply: (value: T) => void): void;
     private slot;

package/dist/core/flow-home.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Where a surface made programmatically goes for an anchor: the nearest container that may hold a `<div>` and is not named
+ * by its content (a button would read the surface as part of its name). Near the anchor, it stays in the anchor's
+ * landmark and window (a modal window makes the rest inert).
+ */
+export declare function homeOf(anchor: Element): Element;

package/dist/core/fold-text.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Text the way a search compares it: lower case by the kit's language, accents and dots taken off, so
+ * `iz` finds `İzmir` and `ecole` finds `École` whatever the machine's own locale is. A search with a locale of
+ * its own gives it.
+ */
+export declare function foldText(text: string, locale?: string): string;

package/dist/core/ui-locale.d.ts

@@ -2,8 +2,6 @@ import { UiLocale } from './UiLocale';
 import type { UiStrings } from './ui-strings';
 /** The kit's built-in texts (English): what a language pack leaves out is shown in them. */
 export declare const enStrings: UiStrings;
-/** The Turkish pack. `uiLocale.use('tr')` loads it by itself; this is for code that assigns `uiLocale.strings`. */
-export declare const trStrings: UiStrings;
 /**
  * The language of the kit's controls. It starts with the page's and loads its pack; `uiLocale.use('tr-TR')`
  * switches, and every control draws its texts, dates and numbers again. Packs ship as

package/dist/core/ui-strings.d.ts

@@ -572,4 +572,71 @@ export interface UiStrings {
     recurrenceSummaryCount: string;
     recurrenceSummaryUntil: string;
     recurrenceSummaryCustom: string;
+    /** The stepper and the wizard. */
+    steps: string;
+    stepOf: string;
+    stepOptional: string;
+    stepDone: string;
+    stepError: string;
+    wizardNext: string;
+    wizardPrevious: string;
+    wizardFinish: string;
+    /** The date range box. */
+    rangeStart: string;
+    rangeEnd: string;
+    rangeOrder: string;
+    rangeTooShort: string;
+    rangeTooLong: string;
+    rangeToday: string;
+    rangeYesterday: string;
+    rangeLast7: string;
+    rangeLast30: string;
+    rangeThisMonth: string;
+    rangeLastMonth: string;
+    /** The file uploader. */
+    fileSelect: string;
+    fileSelectOne: string;
+    fileDrop: string;
+    fileDropOne: string;
+    fileUpload: string;
+    fileTooLarge: string;
+    fileTooSmall: string;
+    fileWrongType: string;
+    fileTooMany: string;
+    fileUploading: string;
+    fileUploaded: string;
+    fileFailed: string;
+    fileAborted: string;
+    fileAbort: string;
+    /** The gallery and the multi-view. */
+    gallery: string;
+    gallerySlides: string;
+    gallerySlideOf: string;
+    galleryPrevious: string;
+    galleryNext: string;
+    galleryChoose: string;
+    galleryPlay: string;
+    galleryPause: string;
+    multiView: string;
+    multiViewPageOf: string;
+    /** The splitter and the tile view. */
+    splitterCollapse: string;
+    splitterExpand: string;
+    tiles: string;
+    /** The resizable and the draggable. */
+    move: string;
+    sizeNow: string;
+    positionNow: string;
+    /** The speed dial and the validation summary. */
+    actions: string;
+    validationSummary: string;
+    /** The timeline. */
+    timeline: string;
+    timelineEarlier: string;
+    timelineLater: string;
+    /** The sortable and the scroll view. */
+    sortableMoved: string;
+    scrollPullDown: string;
+    scrollRelease: string;
+    scrollRefreshing: string;
 }