import { LitElement } from 'lit'; /** * Form step interface */ export interface FormStep { label: string; status?: 'complete' | 'current' | 'incomplete'; } /** * USA Form Template * * Multi-step form page template following USWDS patterns. * Supports step indicators, form sections, and progress tracking. * * **Template Structure (from USWDS):** * - Skip navigation + Banner + Header * - Optional step indicator * - Form content area (patterns/components) * - Action buttons (next, back, submit) * - Optional sidebar * - Footer + Identifier * * @element usa-form-template * * @slot form-header - Content above the form (title, intro) * @slot form-content - Form fields and patterns * @slot form-actions - Submit/navigation buttons * @slot form-sidebar - Optional sidebar content * @slot header - Site header * @slot footer - Site footer * * @fires {CustomEvent} form-submit - Fired when form is submitted * @fires {CustomEvent} step-change - Fired when step changes * @fires {CustomEvent} template-ready - Fired when template initializes * * @example Basic single-step form * ```html * *
* * *
*
* ``` * * @example Multi-step form with step indicator * ```html * *
...
*
* ``` * * @uswds-template https://designsystem.digital.gov/templates/form-templates/ */ export declare class USAFormTemplate extends LitElement { protected createRenderRoot(): this; /** * Page language attribute */ lang: string; /** * Whether to show the government banner */ showBanner: boolean; /** * Whether to show the identifier at the bottom */ showIdentifier: boolean; /** * Form heading/title */ heading: string; /** * Form subheading/description */ subheading: string; /** * Whether to show step indicator */ showStepIndicator: boolean; /** * Current step number (1-based) */ currentStep: number; /** * Total number of steps */ totalSteps: number; /** * Step labels and statuses */ steps: FormStep[]; /** * Whether to center the step indicator labels */ centerStepLabels: boolean; /** * Whether to show sidebar */ showSidebar: boolean; /** * Sidebar position */ sidebarPosition: 'left' | 'right'; /** * Submit button text */ submitText: string; /** * Back button text */ backText: string; /** * Next button text */ nextText: string; /** * Whether to show back button */ showBackButton: boolean; /** * Form action URL */ actionUrl: string; /** * Form method */ method: string; /** * Form validation state */ private isValid; connectedCallback(): void; firstUpdated(changedProperties: Map): void; /** * Handle form submission */ private handleSubmit; /** * Handle back button click */ private handleBack; /** * Check if a slot has content */ private hasSlotContent; /** * Render step indicator */ private renderStepIndicator; /** * Render form actions */ private renderFormActions; /** * Render form content area */ private renderFormContent; /** * Render sidebar */ private renderSidebar; render(): import('lit-html').TemplateResult<1>; /** * Public API: Go to next step */ nextStep(): void; /** * Public API: Go to previous step */ previousStep(): void; /** * Public API: Go to specific step */ goToStep(step: number): void; /** * Public API: Set step status */ setStepStatus(stepIndex: number, status: 'complete' | 'current' | 'incomplete'): void; /** * Public API: Get form element */ getForm(): HTMLFormElement | null; /** * Public API: Validate form */ validateForm(): boolean; } //# sourceMappingURL=usa-form-template.d.ts.map