Generated UI component API

Generated from SDK TypeScript declarations/JSDoc and component definitions. Run npm run build to refresh. Do not edit this file.

Authoring contract: 1.2.0. Markup returns HTML strings; mounting is frontend-only and never requests backend capabilities.

Dialog

Identity: fdo.dialog; primitive: dialog; role: dialog.

declare function createDialog(dom: DOM, options: DialogMarkupOptions): string;
declare function mountDialog(root: HTMLDialogElement, options?: UIMountOptions): DialogController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	true
`description`	`string`	true
`ariaLabel`	`string`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`cancelLabel`	`string`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: body, footer. States: closed, open, destroyed.

Events: onClose, onStateChange, onDiagnostic.

Confirmation Dialog

Identity: fdo.confirmation-dialog; primitive: dialog; role: alertdialog.

declare function createConfirmationDialog(dom: DOM, options: ConfirmationDialogMarkupOptions): string;
declare function mountConfirmationDialog(root: HTMLDialogElement, options: ConfirmationDialogMountOptions): ConfirmationDialogController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	true
`description`	`string`	true
`ariaLabel`	`string`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`cancelLabel`	`string`	true
`confirmLabel`	`string`	true
`pendingLabel`	`string`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: body, footer. States: closed, open, pending, error, destroyed.

Events: onConfirm, onClose, onStateChange, onDiagnostic.

Popover

Identity: fdo.popover; primitive: popover; role: region.

declare function createPopover(dom: DOM, options: PopoverMarkupOptions): string;
declare function mountPopover(root: HTMLElement, options: PopoverMountOptions): PopoverController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	true
`description`	`string`	true
`ariaLabel`	`string`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: body, footer. States: closed, open, destroyed.

Events: onClose, onStateChange, onDiagnostic.

Progress Bar

Identity: fdo.progress-bar; primitive: progress; role: progressbar.

declare function createProgressBar(dom: DOM, options: ProgressBarMarkupOptions): string;
declare function mountProgressBar(root: HTMLElement, options?: ProgressBarMountOptions): ProgressBarController;

Editable property	Type	Optional
`id`	`string`	false
`label`	`string`	true
`value`	`number`	true
`max`	`number`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: none. States: determinate, indeterminate, destroyed.

Events: onStateChange, onDiagnostic.

Toast

Identity: fdo.toast; primitive: live-region; role: status.

declare function createToast(dom: DOM, options: ToastMarkupOptions): string;
declare function mountToast(root: HTMLElement, options?: ToastMountOptions): ToastController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	true
`message`	`string`	false
`ariaLabel`	`string`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`variant`	`ToastVariant`	true
`dismissLabel`	`string`	true
`progress`	`Omit<ProgressBarMarkupOptions, "id">`	true
`progress.label`	`string`	true
`progress.value`	`number`	true
`progress.max`	`number`	true
`progress.ariaLabelledBy`	`string`	true
`progress.ariaDescribedBy`	`string`	true
`progress.options.classes`	`string[]`	true
`progress.options.style`	`DOMStyleMap`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: title, message, progress. States: closed, open, destroyed.

Events: onClose, onStateChange, onDiagnostic.

Inline Alert

Identity: fdo.inline-alert; primitive: live-region; role: status.

declare function createInlineAlert(dom: DOM, options: InlineAlertMarkupOptions): string;
declare function mountInlineAlert(root: HTMLElement, options?: InlineAlertMountOptions): InlineAlertController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	true
`message`	`string`	false
`ariaLabel`	`string`	true
`ariaLabelledBy`	`string`	true
`ariaDescribedBy`	`string`	true
`variant`	`ToastVariant`	true
`visible`	`boolean`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: title, message. States: visible, hidden, destroyed.

Events: onStateChange, onDiagnostic.

Toast Region

Identity: fdo.toast-region; primitive: section; role: region.

declare function createToastRegion(dom: DOM, options: ToastRegionMarkupOptions): string;
declare function mountToastRegion(root: HTMLElement, options?: ToastRegionMountOptions): ToastRegionController;

Editable property	Type	Optional
`id`	`string`	false
`label`	`string`	false
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: body. States: empty, active, destroyed.

Events: onStateChange, onDiagnostic.

Async Action Button

Identity: fdo.async-action-button; primitive: button; role: group.

declare function createAsyncActionButton(dom: DOM, options: AsyncActionButtonMarkupOptions): string;
declare function mountAsyncActionButton(root: HTMLElement, options: AsyncActionButtonMountOptions): AsyncActionButtonController;

Editable property	Type	Optional
`id`	`string`	false
`label`	`string`	false
`pendingLabel`	`string`	true
`successLabel`	`string`	true
`cancelLabel`	`string`	true
`disabled`	`boolean`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: none. States: idle, pending, success, error, cancelled, destroyed.

Events: onAction, onStateChange, onDiagnostic.

Tabs

Identity: fdo.tabs; primitive: tabs; role: group.

declare function createTabs(dom: DOM, options: TabsMarkupOptions): string;
declare function mountTabs(root: HTMLElement, options?: TabsMountOptions): TabsController;

Editable property	Type	Optional
`id`	`string`	false
`label`	`string`	false
`items`	`TabItem[]`	false
`activeKey`	`string`	true
`orientation`	`"horizontal" \| "vertical"`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: panels. States: active, destroyed.

Events: onStateChange, onDiagnostic.

Disclosure

Identity: fdo.disclosure; primitive: details; role: group.

declare function createDisclosure(dom: DOM, options: DisclosureMarkupOptions): string;
declare function mountDisclosure(root: HTMLElement, options?: DisclosureMountOptions): DisclosureController;

Editable property	Type	Optional
`id`	`string`	false
`title`	`string`	false
`open`	`boolean`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: body. States: closed, open, destroyed.

Events: onStateChange, onDiagnostic.

Accordion

Identity: fdo.accordion; primitive: accordion; role: region.

declare function createAccordion(dom: DOM, options: AccordionMarkupOptions): string;
declare function mountAccordion(root: HTMLElement, options?: AccordionMountOptions): AccordionController;

Editable property	Type	Optional
`id`	`string`	false
`label`	`string`	false
`items`	`AccordionItem[]`	false
`multiple`	`boolean`	true
`options.classes`	`string[]`	true
`options.style`	`DOMStyleMap`	true

Child slots: items. States: closed, open, destroyed.

Events: onStateChange, onDiagnostic.

Exported types

type ComponentRoot = HTMLElement & { [COMPONENT_MOUNT]?: { destroy(): void } };

interface ComponentPreviewOptionsMap {
    'fdo.dialog': DialogMarkupOptions;
    'fdo.confirmation-dialog': ConfirmationDialogMarkupOptions;
    'fdo.popover': PopoverMarkupOptions;
    'fdo.progress-bar': ProgressBarMarkupOptions;
    'fdo.toast': ToastMarkupOptions;
    'fdo.inline-alert': InlineAlertMarkupOptions;
    'fdo.toast-region': ToastRegionMarkupOptions;
    'fdo.async-action-button': AsyncActionButtonMarkupOptions;
    'fdo.tabs': TabsMarkupOptions;
    'fdo.disclosure': DisclosureMarkupOptions;
    'fdo.accordion': AccordionMarkupOptions;
}

type ComponentPreviewCase = { [K in keyof ComponentPreviewOptionsMap]: {
    id: string; identity: K; state: string; properties: ComponentPreviewOptionsMap[K];
} }[keyof ComponentPreviewOptionsMap];

interface DialogMarkupOptions {
    id: string;
    title?: string;
    description?: string;
    ariaLabel?: string;
    ariaLabelledBy?: string;
    ariaDescribedBy?: string;
    body?: string;
    footer?: string;
    options?: UIStyleOptions;
    cancelLabel?: string;
}

interface ConfirmationDialogMarkupOptions extends DialogMarkupOptions {
    confirmLabel?: string;
    pendingLabel?: string;
}

interface PopoverMarkupOptions extends Omit<DialogMarkupOptions, 'cancelLabel'> {}

interface UIMountOptions {
    initialFocus?: HTMLElement;
    restoreFocus?: boolean;
    onClose?: (reason: UICloseReason) => void | Promise<void>;
    onStateChange?: (state: UIState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface DialogController {
    open(opener?: HTMLElement): void;
    close(reason?: UICloseReason): void;
    getState(): UIState;
    destroy(): void;
}

interface ConfirmationDialogMountOptions extends UIMountOptions {
    /** Cancellation/teardown aborts this signal; caller must honor it for external work. */
    onConfirm: (context: { signal: AbortSignal }) => void | Promise<void>;
    formatError?: (error: unknown) => string;
}

interface ConfirmationDialogController extends DialogController {
    /** Coalesces concurrent calls; false on cancellation/failure, true on successful confirmation. */
    confirm(): Promise<boolean>;
}

interface PopoverMountOptions extends UIMountOptions {
    anchor: HTMLElement;
    placement?: PopoverPlacement;
    gap?: number;
    viewportPadding?: number;
    /** Shift into the visual viewport; flip also switches top/bottom when space is insufficient. */
    overflow?: 'shift' | 'flip';
}

interface PopoverController extends DialogController {
    updatePosition(): void;
}

interface ProgressBarMarkupOptions {
    id: string;
    label?: string;
    value?: number | null;
    max?: number;
    ariaLabelledBy?: string;
    ariaDescribedBy?: string;
    options?: UIStyleOptions;
}

interface ProgressBarMountOptions {
    onStateChange?: (state: ProgressBarState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface ProgressBarController {
    setValue(value: number | null, max?: number): void;
    getState(): ProgressBarState;
    destroy(): void;
}

interface ToastMarkupOptions {
    id: string;
    message: string;
    title?: string;
    ariaLabel?: string;
    ariaLabelledBy?: string;
    ariaDescribedBy?: string;
    variant?: ToastVariant;
    dismissLabel?: string;
    /** Composed progress is independently labelled. No automatic completion/dismissal is implied. */
    progress?: Omit<ProgressBarMarkupOptions, 'id'>;
    options?: UIStyleOptions;
}

interface ToastUpdate {
    message?: string;
    title?: string;
    variant?: ToastVariant;
}

interface ToastMountOptions {
    /** Milliseconds of unpaused visibility; 0 (default) disables automatic dismissal. */
    duration?: number;
    onClose?: (reason: ToastCloseReason) => void | Promise<void>;
    onStateChange?: (state: ToastState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface ToastController {
    show(): void;
    close(reason?: ToastCloseReason): void;
    update(content: ToastUpdate): void;
    /** Requires progress to have been included during composition. */
    setProgress(value: number | null, max?: number): void;
    pause(): void;
    resume(): void;
    getState(): ToastState;
    destroy(): void;
}

interface InlineAlertMarkupOptions extends Omit<ToastMarkupOptions, 'progress' | 'dismissLabel'> {
    visible?: boolean;
}

interface InlineAlertMountOptions {
    onStateChange?: (state: InlineAlertState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface InlineAlertController {
    show(): void;
    hide(): void;
    update(content: ToastUpdate): void;
    getState(): InlineAlertState;
    destroy(): void;
}

interface ToastRegionMarkupOptions {
    id: string;
    label: string;
    /** Trusted composed toast HTML; the region does not enqueue it automatically. */
    body?: string;
    options?: UIStyleOptions;
}

interface ToastRegionMountOptions {
    maxVisible?: number;
    maxQueued?: number;
    onStateChange?: (state: ToastRegionState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface ToastRegionEntryOptions extends ToastMountOptions { key?: string; }

interface ToastRegionController {
    /** Accept a composed toast element already inserted inside this region. Duplicate keys/full queues return false. */
    enqueue(root: HTMLElement, options?: ToastRegionEntryOptions): boolean;
    dismiss(key: string): void;
    update(key: string, content: ToastUpdate): void;
    setProgress(key: string, value: number | null, max?: number): void;
    clear(): void;
    getState(): ToastRegionState;
    destroy(): void;
}

interface AsyncActionButtonMarkupOptions {
    id: string;
    label: string;
    pendingLabel?: string;
    successLabel?: string;
    cancelLabel?: string;
    disabled?: boolean;
    options?: UIStyleOptions;
}

interface AsyncActionButtonMountOptions {
    /** Supplied explicitly; never routed to a backend implicitly. Honor signal for cancellable external work. */
    onAction: (context: { signal: AbortSignal }) => void | Promise<void>;
    formatError?: (error: unknown) => string;
    onStateChange?: (state: AsyncActionButtonState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface AsyncActionButtonController {
    /** Coalesces concurrent calls; false on failure, cancellation, disabled or destroyed state. */
    run(): Promise<boolean>;
    cancel(): void;
    reset(): void;
    setDisabled(disabled: boolean): void;
    getState(): AsyncActionButtonState;
    destroy(): void;
}

interface TabItem {
    key: string;
    label: string;
    /** Trusted HTML composition. */
    body: string;
    disabled?: boolean;
}

interface TabsMarkupOptions {
    id: string;
    label: string;
    items: TabItem[];
    activeKey?: string;
    orientation?: 'horizontal' | 'vertical';
    options?: UIStyleOptions;
}

interface TabsMountOptions {
    activation?: 'automatic' | 'manual';
    onStateChange?: (state: TabsState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface TabsController {
    select(key: string, focus?: boolean): void;
    getState(): TabsState;
    destroy(): void;
}

interface DisclosureMarkupOptions {
    id: string;
    title: string;
    /** Trusted HTML composition. */
    body: string;
    open?: boolean;
    options?: UIStyleOptions;
}

interface DisclosureMountOptions {
    onStateChange?: (state: DisclosureState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface DisclosureController {
    setOpen(open: boolean): void;
    toggle(): void;
    getState(): DisclosureState;
    destroy(): void;
}

interface AccordionItem {
    key: string;
    title: string;
    /** Trusted HTML composition. */
    body: string;
    open?: boolean;
}

interface AccordionMarkupOptions {
    id: string;
    label: string;
    items: AccordionItem[];
    /** Default false: at most one section is open; all may be closed. */
    multiple?: boolean;
    options?: UIStyleOptions;
}

interface AccordionMountOptions {
    onStateChange?: (state: AccordionState) => void | Promise<void>;
    onDiagnostic?: (diagnostic: UIDiagnostic) => void | Promise<void>;
}

interface AccordionController {
    setOpen(key: string, open: boolean): void;
    getState(): AccordionState;
    destroy(): void;
}

interface ComponentGalleryOptions { id?: string; }

type UICloseReason = 'confirm' | 'cancel' | 'escape' | 'programmatic' | 'dismiss' | 'destroy';

type UIState = Readonly<{ open: boolean; destroyed: boolean; pending: boolean; error: string | null; closeReason: UICloseReason | null }>;

type UIDiagnostic = { code: string; message: string; detail?: string };

type UIStyleOptions = Partial<Pick<DOMOptions, 'classes' | 'style'>>;

type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';

type ProgressBarState = Readonly<{ value: number | null; max: number; destroyed: boolean }>;

type ToastVariant = 'info' | 'success' | 'warning' | 'error';

type ToastCloseReason = 'dismiss' | 'timeout' | 'programmatic' | 'destroy';

type ToastState = Readonly<{
    open: boolean;
    destroyed: boolean;
    paused: boolean;
    variant: ToastVariant;
    closeReason: ToastCloseReason | null;
    progress: ProgressBarState | null;
}>;

type InlineAlertState = Readonly<{ visible: boolean; variant: ToastVariant; destroyed: boolean }>;

type ToastRegionState = Readonly<{
    destroyed: boolean;
    entries: ReadonlyArray<Readonly<{ key: string; status: 'visible' | 'queued' }>>;
}>;

type AsyncActionPhase = 'idle' | 'pending' | 'success' | 'error' | 'cancelled';

type AsyncActionButtonState = Readonly<{ phase: AsyncActionPhase; error: string | null; disabled: boolean; destroyed: boolean }>;

type TabsState = Readonly<{ activeKey: string; destroyed: boolean }>;

type DisclosureState = Readonly<{ open: boolean; destroyed: boolean }>;

type AccordionState = Readonly<{ openKeys: ReadonlyArray<string>; destroyed: boolean }>;

Navigation Menu

Repository navigation

UI_COMPONENT_API.generated.md

UI_COMPONENT_API.generated.md

Generated UI component API

Dialog

Confirmation Dialog

Popover

Progress Bar

Toast

Inline Alert

Toast Region

Async Action Button

Tabs

Disclosure

Accordion

Exported types

FilesExpand file tree

UI_COMPONENT_API.generated.md

Latest commit

History

UI_COMPONENT_API.generated.md

File metadata and controls

Generated UI component API

Dialog

Confirmation Dialog

Popover

Progress Bar

Toast

Inline Alert

Toast Region

Async Action Button

Tabs

Disclosure

Accordion

Exported types