Interface: ConfirmationDialogControllerOptions

import { html } from '@gluonjs/core';
import { AppShell, ConfirmationDialog, WorkflowTimeline, createConfirmationDialogController, confirmationDialogStyles, organismManifest, organismStyles, workflowTimelineStyles, type AppShellProps, type ConfirmationDialogAttributes, type ConfirmationDialogController, type ConfirmationDialogControllerOptions, type ConfirmationDialogInitialFocus, type ConfirmationDialogProps, type WorkflowTimelineProps, type WorkflowTimelineStatus, type WorkflowTimelineOverallState, type WorkflowTimelineAttributes, type WorkflowTimelineStep, type WorkflowTimelineMessages } from '@gluonjs/organisms';

const shell = {
  header: html`<strong>GLUON GOODS</strong>`,
  navigation: html`<a href="/shop">Shop</a><a href="/bag">Bag</a>`,
  children: html`<h1>New arrivals</h1>`,
  footer: html`<small>Free shipping over €100</small>`,
} satisfies AppShellProps;
const initialFocus: ConfirmationDialogInitialFocus = '[data-confirm-primary]';
const confirmationOptions = { initialFocus } satisfies ConfirmationDialogControllerOptions;
const confirmationController: ConfirmationDialogController = createConfirmationDialogController(confirmationOptions);
const confirmationAttributes = { '@close': () => console.log('closed') } satisfies ConfirmationDialogAttributes;
const confirmation = { id: 'archive-confirmation', title: 'Archive order?', description: 'The caller owns the archive mutation.', safeAction: 'Cancel', primaryAction: html`<button data-confirm-primary>Archive</button>`, dismissOnBackdrop: false, controller: confirmationController, attributes: confirmationAttributes } satisfies ConfirmationDialogProps;
const workflowStep: WorkflowTimelineStep = { id: 'review', label: 'Review', status: 'current' satisfies WorkflowTimelineStatus, role: 'Reviewer', evidence: 'Ticket 42' };
const workflowState: WorkflowTimelineOverallState = 'degraded';
const workflowAttributes: WorkflowTimelineAttributes = { 'aria-label': 'Order workflow' };
const workflowMessages: WorkflowTimelineMessages = { timeline: 'Ablauf', status: (status) => `Status: ${status}`, step: (position, total) => `${position} von ${total}`, evidence: 'Nachweis' };
const workflow: WorkflowTimelineProps = { id: 'order-workflow', steps: [workflowStep], state: workflowState, messages: workflowMessages, role: 'Operations', evidence: 'Import log 42', attributes: workflowAttributes };
console.log(AppShell(shell), ConfirmationDialog(confirmation), WorkflowTimeline(workflow), confirmationDialogStyles, organismStyles, workflowTimelineStyles, organismManifest.entries);