@hypoth-ui/wc 0.1.1

package/dist/form-controls.d.ts

@@ -0,0 +1,1713 @@
+import { b as FormAssociatedInterface, V as ValidationFlags } from './registry-Bns0t11H.js';
+export { D as DsInput, j as InputSize, I as InputType } from './registry-Bns0t11H.js';
+import * as lit from 'lit';
+import { PropertyValues, nothing } from 'lit';
+import { D as DSElement } from './ds-element-Db0LMfxI.js';
+import './primitives.js';
+import './spinner-BWaNlc-Y.js';
+import './overlays.js';
+import { Placement, Option, FileInfo } from '@hypoth-ui/primitives-dom';
+import './data-display.js';
+import './stepper-CCRwcQOe.js';
+import './feedback.js';
+import './skeleton-MUdd2029.js';
+import './layout.js';
+
+type TextareaSize = "sm" | "md" | "lg";
+/**
+ * A textarea component with optional auto-resize.
+ *
+ * @element ds-textarea
+ * @fires input - Fired when the textarea value changes
+ * @fires ds:change - Fired when the textarea value is committed
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Description</ds-label>
+ *   <ds-textarea placeholder="Enter description..."></ds-textarea>
+ * </ds-field>
+ * ```
+ */
+declare class DsTextarea extends DSElement {
+    /** Textarea size */
+    size: TextareaSize;
+    /** Textarea name */
+    name: string;
+    /** Textarea value */
+    value: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Read-only state */
+    readonly: boolean;
+    /** Required state */
+    required: boolean;
+    /** Error state */
+    error: boolean;
+    /** Minimum length */
+    minlength?: number;
+    /** Maximum length */
+    maxlength?: number;
+    /** Number of visible text rows */
+    rows: number;
+    /** Minimum number of rows (for auto-resize) */
+    minRows: number;
+    /** Maximum number of rows (for auto-resize) */
+    maxRows?: number;
+    /** Enable auto-resize behavior */
+    autoResize: boolean;
+    /** ARIA labelledby - ID of element that labels this textarea */
+    private ariaLabelledBy?;
+    /** ARIA describedby - IDs of elements that describe this textarea */
+    private ariaDescribedBy?;
+    private attributeObserver;
+    private nativeTextarea;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Syncs ARIA attributes from the host element to internal state.
+     * The render method will apply these to the native textarea.
+     */
+    private syncAriaAttributes;
+    private handleInput;
+    private handleChange;
+    /**
+     * Adjusts the textarea height based on content.
+     */
+    private adjustHeight;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Returns the effective number of rows.
+     */
+    private getEffectiveRows;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-textarea": DsTextarea;
+    }
+}
+
+/**
+ * Label component for form fields.
+ *
+ * Used within ds-field to provide an accessible label that is
+ * automatically associated with the form control via aria-labelledby.
+ *
+ * @element ds-label
+ *
+ * @slot - Label text content
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Email address</ds-label>
+ *   <ds-input type="email"></ds-input>
+ * </ds-field>
+ * ```
+ */
+declare class DsLabel extends DSElement {
+    /**
+     * ID of the associated form control.
+     * Typically set automatically by the parent ds-field component.
+     */
+    for: string;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-label": DsLabel;
+    }
+}
+
+/**
+ * Description/help text component for form fields.
+ *
+ * Used within ds-field to provide supplementary help text that is
+ * automatically associated with the form control via aria-describedby.
+ *
+ * @element ds-field-description
+ *
+ * @slot - Description text content
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Password</ds-label>
+ *   <ds-input type="password"></ds-input>
+ *   <ds-field-description>
+ *     Must be at least 8 characters with one number
+ *   </ds-field-description>
+ * </ds-field>
+ * ```
+ */
+declare class DsFieldDescription extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-field-description": DsFieldDescription;
+    }
+}
+
+/**
+ * Error message component for form fields.
+ *
+ * Used within ds-field to display validation error messages that are
+ * automatically associated with the form control via aria-describedby.
+ * Error messages take precedence over descriptions in the ARIA description.
+ *
+ * @element ds-field-error
+ *
+ * @slot - Error message text content
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Email</ds-label>
+ *   <ds-input type="email" error></ds-input>
+ *   <ds-field-error>Please enter a valid email address</ds-field-error>
+ * </ds-field>
+ * ```
+ */
+declare class DsFieldError extends DSElement {
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-field-error": DsFieldError;
+    }
+}
+
+/**
+ * Field container component for form controls.
+ *
+ * Provides consistent layout and automatic ARIA attribute composition
+ * for form fields. Associates labels, descriptions, and error messages
+ * with the form control for accessibility.
+ *
+ * @element ds-field
+ *
+ * @slot - Field contents (label, form control, description, error)
+ *
+ * @csspart container - The field container element
+ *
+ * @cssprop --ds-field-gap - Gap between field children (default: 0.5rem)
+ * @cssprop --ds-field-error-color - Error message color
+ *
+ * @example
+ * ```html
+ * <ds-field required>
+ *   <ds-label>Email address</ds-label>
+ *   <ds-field-description>We'll never share your email</ds-field-description>
+ *   <ds-input type="email" name="email"></ds-input>
+ *   <ds-field-error>Please enter a valid email</ds-field-error>
+ * </ds-field>
+ * ```
+ */
+declare class DsField extends DSElement {
+    /** Marks the field as required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Generated unique ID for ARIA associations */
+    private fieldId;
+    /** Whether an error child is present */
+    private hasError;
+    /** Whether a description child is present */
+    private hasDescription;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates ARIA attributes on child components based on field structure.
+     */
+    private updateChildComponents;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-field": DsField;
+    }
+}
+
+/**
+ * Individual radio button within a group.
+ *
+ * @element ds-radio
+ *
+ * @slot - Radio label
+ *
+ * @example
+ * ```html
+ * <ds-radio-group name="size">
+ *   <ds-radio value="sm">Small</ds-radio>
+ *   <ds-radio value="md">Medium</ds-radio>
+ *   <ds-radio value="lg">Large</ds-radio>
+ * </ds-radio-group>
+ * ```
+ */
+declare class DsRadio extends DSElement {
+    /** Radio value */
+    value: string;
+    /** Selected state (managed by group) */
+    checked: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Label text captured from slot */
+    private labelText;
+    /** Unique ID for label association */
+    private labelId;
+    /** Whether this radio is focusable (managed by group) */
+    private _tabIndexValue;
+    get tabIndexValue(): number;
+    connectedCallback(): void;
+    /**
+     * Sets the checked state (called by RadioGroup).
+     */
+    setChecked(checked: boolean): void;
+    /**
+     * Sets the tabindex (called by RadioGroup for roving focus).
+     */
+    setTabIndex(index: number): void;
+    /**
+     * Focus the control element.
+     */
+    focusControl(): void;
+    private handleClick;
+    private handleKeyDown;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-radio": DsRadio;
+    }
+}
+
+type RadioOrientation = "horizontal" | "vertical";
+declare const DsRadioGroup_base: (new (...args: any[]) => FormAssociatedInterface & lit.LitElement) & typeof DSElement & {
+    formAssociated: true;
+};
+/**
+ * Container for radio button group with roving tabindex and native form participation.
+ *
+ * Uses ElementInternals for form association - the selected value is submitted with the form
+ * and the group participates in constraint validation.
+ *
+ * @element ds-radio-group
+ * @fires ds:change - Fired when selection changes with { value }
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @slot - ds-radio children
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-field>
+ *     <ds-label>Size</ds-label>
+ *     <ds-radio-group name="size" required>
+ *       <ds-radio value="sm">Small</ds-radio>
+ *       <ds-radio value="md">Medium</ds-radio>
+ *       <ds-radio value="lg">Large</ds-radio>
+ *     </ds-radio-group>
+ *     <ds-field-error></ds-field-error>
+ *   </ds-field>
+ *   <button type="submit">Submit</button>
+ * </form>
+ * ```
+ */
+declare class DsRadioGroup extends DsRadioGroup_base {
+    /** Layout and navigation axis */
+    orientation: RadioOrientation;
+    /** Default value for form reset */
+    private _defaultValue;
+    private rovingFocus;
+    private childObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Sets up the radio items with correct checked state and disabled state.
+     */
+    private setupRadios;
+    /**
+     * Updates tabindex values for roving focus.
+     */
+    private updateTabIndices;
+    /**
+     * Sets up roving focus for keyboard navigation.
+     */
+    private setupRovingFocus;
+    /**
+     * Gets all radio items in the group.
+     */
+    private getRadioItems;
+    /**
+     * Handles radio selection from click or keyboard.
+     */
+    private handleRadioSelect;
+    /**
+     * Selects a value and updates state.
+     */
+    private selectValue;
+    updated(changedProperties: Map<string, unknown>): void;
+    protected getFormValue(): string | null;
+    protected getValidationAnchor(): HTMLElement | undefined;
+    protected getValidationFlags(): ValidationFlags;
+    protected getValidationMessage(flags: ValidationFlags): string;
+    protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean;
+    protected shouldUpdateValidity(changedProperties: PropertyValues): boolean;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null, _mode: "restore" | "autocomplete"): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-radio-group": DsRadioGroup;
+    }
+}
+
+declare const DsSwitch_base: (new (...args: any[]) => FormAssociatedInterface & lit.LitElement) & typeof DSElement & {
+    formAssociated: true;
+};
+/**
+ * Toggle switch for boolean settings with role="switch" semantics and native form participation.
+ *
+ * Uses ElementInternals for form association - values are submitted with the form
+ * and the switch participates in constraint validation.
+ *
+ * @element ds-switch
+ * @fires ds:change - Fired on state change with { checked }
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @slot - Switch label
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-switch name="notifications">Enable notifications</ds-switch>
+ *   <button type="submit">Submit</button>
+ * </form>
+ *
+ * <ds-field>
+ *   <ds-label>Dark Mode</ds-label>
+ *   <ds-switch name="darkMode" custom-validation>Enable dark mode</ds-switch>
+ *   <ds-field-description>Switch between light and dark themes</ds-field-description>
+ *   <ds-field-error></ds-field-error>
+ * </ds-field>
+ * ```
+ */
+declare class DsSwitch extends DsSwitch_base {
+    /** Checked (on) state */
+    checked: boolean;
+    /** ARIA describedby - IDs of elements that describe this switch */
+    private ariaDescribedBy?;
+    /** Label text captured from slot */
+    private labelText;
+    /** Unique ID for label association */
+    private labelId;
+    /** Default checked state for form reset */
+    private _defaultChecked;
+    private attributeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Syncs ARIA attributes from the host element to internal state.
+     */
+    private syncAriaAttributes;
+    /**
+     * Toggles the switch state.
+     */
+    private toggle;
+    private handleClick;
+    private handleKeyDown;
+    protected getFormValue(): string | null;
+    protected getValidationAnchor(): HTMLElement | undefined;
+    protected getValidationFlags(): ValidationFlags;
+    protected getValidationMessage(flags: ValidationFlags): string;
+    protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean;
+    protected shouldUpdateValidity(changedProperties: PropertyValues): boolean;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null, _mode: "restore" | "autocomplete"): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-switch": DsSwitch;
+    }
+}
+
+type SelectContentState = "open" | "closed";
+/**
+ * Select content container with role="listbox".
+ *
+ * @element ds-select-content
+ *
+ * @slot - Select options (ds-select-option elements)
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ * @attr {string} data-placement - Current anchor position placement
+ *
+ * @example
+ * ```html
+ * <ds-select>
+ *   <button slot="trigger">Select fruit</button>
+ *   <ds-select-content>
+ *     <ds-select-option value="apple">Apple</ds-select-option>
+ *     <ds-select-option value="banana">Banana</ds-select-option>
+ *   </ds-select-content>
+ * </ds-select>
+ * ```
+ */
+declare class DsSelectContent extends DSElement {
+    /** Unique ID for ARIA association */
+    id: string;
+    /** Animation state (open or closed) - set by parent ds-select */
+    dataState: SelectContentState;
+    /** Optional label for the listbox */
+    label: string;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select-content": DsSelectContent;
+    }
+}
+
+/**
+ * Select option with role="option".
+ *
+ * @element ds-select-option
+ *
+ * @slot - Option content (text, icon, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-select-option value="apple">Apple</ds-select-option>
+ * <ds-select-option value="banana" disabled>Banana</ds-select-option>
+ * ```
+ */
+declare class DsSelectOption extends DSElement {
+    /** Whether the option is disabled */
+    disabled: boolean;
+    /** Value associated with this option */
+    value: string;
+    /** Display label (uses textContent if not specified) */
+    label: string;
+    connectedCallback(): void;
+    /**
+     * Gets the display label for this option.
+     */
+    getLabel(): string;
+    private updateAriaDisabled;
+    /**
+     * Sets the selected state of this option.
+     */
+    setSelected(selected: boolean): void;
+    /**
+     * Sets the highlighted state of this option.
+     */
+    setHighlighted(highlighted: boolean): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select-option": DsSelectOption;
+    }
+}
+
+/**
+ * Select trigger button with combobox role.
+ *
+ * @element ds-select-trigger
+ *
+ * @slot - Trigger content (button, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-select>
+ *   <ds-select-trigger>
+ *     <button>Select fruit</button>
+ *   </ds-select-trigger>
+ *   <ds-select-content>...</ds-select-content>
+ * </ds-select>
+ * ```
+ */
+declare class DsSelectTrigger extends DSElement {
+    /** Whether the parent select is disabled */
+    disabled: boolean;
+    connectedCallback(): void;
+    private setupTriggerAccessibility;
+    /**
+     * Updates ARIA attributes on the trigger element.
+     */
+    updateAria(expanded: boolean, activeDescendantId?: string, controlsId?: string): void;
+    /**
+     * Gets the actual trigger button element.
+     */
+    getTriggerElement(): HTMLElement | null;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select-trigger": DsSelectTrigger;
+    }
+}
+
+/**
+ * Select option group for organizing options into labeled sections.
+ *
+ * @element ds-select-group
+ *
+ * @slot - Group content (ds-select-label and ds-select-option children)
+ *
+ * @example
+ * ```html
+ * <ds-select-group>
+ *   <ds-select-label>Fruits</ds-select-label>
+ *   <ds-select-option value="apple">Apple</ds-select-option>
+ *   <ds-select-option value="banana">Banana</ds-select-option>
+ * </ds-select-group>
+ * ```
+ */
+declare class DsSelectGroup extends DSElement {
+    /** Optional label for the group (alternative to ds-select-label slot) */
+    label: string;
+    connectedCallback(): void;
+    private setupAriaLabelledBy;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select-group": DsSelectGroup;
+    }
+}
+
+/**
+ * Label for a select option group.
+ *
+ * @element ds-select-label
+ *
+ * @slot - Label text content
+ *
+ * @example
+ * ```html
+ * <ds-select-group>
+ *   <ds-select-label>Fruits</ds-select-label>
+ *   <ds-select-option value="apple">Apple</ds-select-option>
+ * </ds-select-group>
+ * ```
+ */
+declare class DsSelectLabel extends DSElement {
+    connectedCallback(): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select-label": DsSelectLabel;
+    }
+}
+
+declare const DsSelect_base: (new (...args: any[]) => FormAssociatedInterface & lit.LitElement) & typeof DSElement & {
+    formAssociated: true;
+};
+/**
+ * Select component with keyboard navigation, type-ahead, and native form participation.
+ *
+ * Uses ElementInternals for form association - the selected value is submitted with the form
+ * and the select participates in constraint validation.
+ *
+ * Implements WAI-ARIA Listbox pattern with:
+ * - Arrow key navigation between options
+ * - Type-ahead search to jump to options
+ * - Enter/Space/Click to select options
+ * - Escape to close
+ *
+ * @element ds-select
+ *
+ * @slot trigger - Trigger element (ds-select-trigger with button inside)
+ * @slot - Select content (ds-select-content with ds-select-option children)
+ *
+ * @fires ds:open-change - Fired when open state changes (detail: { open, reason })
+ * @fires ds:change - Fired when value changes (detail: { value, label })
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-select name="fruit" required>
+ *     <ds-select-trigger slot="trigger">
+ *       <button>Select fruit</button>
+ *     </ds-select-trigger>
+ *     <ds-select-content>
+ *       <ds-select-option value="apple">Apple</ds-select-option>
+ *       <ds-select-option value="banana">Banana</ds-select-option>
+ *     </ds-select-content>
+ *   </ds-select>
+ *   <button type="submit">Submit</button>
+ * </form>
+ * ```
+ */
+declare class DsSelect extends DsSelect_base {
+    /** Whether the select is open */
+    open: boolean;
+    /** Current selected value */
+    value: string;
+    /** Placement relative to trigger */
+    placement: Placement;
+    /** Offset distance from trigger in pixels */
+    offset: number;
+    /** Whether to flip placement when near viewport edge */
+    flip: boolean;
+    /** Whether to animate open/close transitions */
+    animated: boolean;
+    /** Whether the select is disabled */
+    disabled: boolean;
+    /** Whether the select is read-only */
+    readonly: boolean;
+    /** Whether to enable type-ahead search */
+    searchable: boolean;
+    /** Whether to show clear button */
+    clearable: boolean;
+    /** Enable virtualization for large lists */
+    virtualize: boolean;
+    /** Virtualization threshold (default: 100) */
+    virtualizationThreshold: number;
+    /** Whether the select is in a loading state (e.g., fetching options) */
+    loading: boolean;
+    /** Text to display/announce during loading */
+    loadingText: string;
+    /**
+     * Data-driven options array. Use this for programmatic option rendering.
+     * When provided, options will be rendered from this array instead of slots.
+     */
+    items: Option<string>[];
+    /** Visible item IDs for virtualization */
+    private visibleItemIds;
+    /** Default value for form reset */
+    private _defaultValue;
+    private behavior;
+    private anchorPosition;
+    private dismissLayer;
+    private presence;
+    private rovingFocus;
+    private typeAhead;
+    private virtualizedList;
+    private resizeObserver;
+    private scrollHandler;
+    private focusFirstOnOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Opens the select.
+     */
+    show(): void;
+    /**
+     * Closes the select.
+     */
+    close(): void;
+    /**
+     * Completes the close after exit animation.
+     */
+    private completeClose;
+    /**
+     * Toggles the select open/closed state.
+     */
+    toggle(): void;
+    /**
+     * Selects a value programmatically.
+     */
+    select(value: string): void;
+    /**
+     * Clears the selection.
+     */
+    clear(): void;
+    private getTriggerElement;
+    private getOptions;
+    private getEnabledOptions;
+    private getOptionByValue;
+    private registerOptions;
+    private updateOptionStates;
+    private handleTriggerClick;
+    private handleKeyDown;
+    private handleTriggerKeyDown;
+    private handleContentKeyDown;
+    private selectOption;
+    private selectHighlighted;
+    private handleDismiss;
+    private setupTriggerAccessibility;
+    private updateLoadingState;
+    private updateTriggerAria;
+    private setupPositioning;
+    private setupDismissLayer;
+    private setupRovingFocus;
+    private setupTypeAhead;
+    private handleTypeAheadKeyDown;
+    private focusInitialItem;
+    private cleanup;
+    updated(changedProperties: Map<string, unknown>): Promise<void>;
+    protected getFormValue(): string | null;
+    protected getValidationAnchor(): HTMLElement | undefined;
+    protected getValidationFlags(): ValidationFlags;
+    protected getValidationMessage(flags: ValidationFlags): string;
+    protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean;
+    protected shouldUpdateValidity(changedProperties: PropertyValues): boolean;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null, _mode: "restore" | "autocomplete"): void;
+    /**
+     * Returns true if using data-driven rendering.
+     */
+    private get isDataDriven();
+    /**
+     * Renders a single option from data.
+     */
+    private renderDataOption;
+    /**
+     * Renders data-driven options with optional virtualization.
+     */
+    private renderDataOptions;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select": DsSelect;
+    }
+}
+
+type ComboboxContentState = "open" | "closed";
+/**
+ * Combobox content container with role="listbox".
+ *
+ * @element ds-combobox-content
+ *
+ * @slot - Combobox options (ds-combobox-option elements)
+ *
+ * @attr {string} data-state - Animation state ("open" or "closed")
+ * @attr {string} data-placement - Current anchor position placement
+ *
+ * @example
+ * ```html
+ * <ds-combobox>
+ *   <input slot="input" placeholder="Search fruits..." />
+ *   <ds-combobox-content>
+ *     <ds-combobox-option value="apple">Apple</ds-combobox-option>
+ *     <ds-combobox-option value="banana">Banana</ds-combobox-option>
+ *   </ds-combobox-content>
+ * </ds-combobox>
+ * ```
+ */
+declare class DsComboboxContent extends DSElement {
+    /** Unique ID for ARIA association */
+    id: string;
+    /** Animation state (open or closed) - set by parent ds-combobox */
+    dataState: ComboboxContentState;
+    /** Optional label for the listbox */
+    label: string;
+    /** Whether to show loading indicator */
+    loading: boolean;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-combobox-content": DsComboboxContent;
+    }
+}
+
+/**
+ * Combobox input wrapper with combobox role.
+ *
+ * @element ds-combobox-input
+ *
+ * @slot - Input element
+ *
+ * @example
+ * ```html
+ * <ds-combobox>
+ *   <ds-combobox-input>
+ *     <input placeholder="Search..." />
+ *   </ds-combobox-input>
+ *   <ds-combobox-content>...</ds-combobox-content>
+ * </ds-combobox>
+ * ```
+ */
+declare class DsComboboxInput extends DSElement {
+    /** Whether the parent combobox is disabled */
+    disabled: boolean;
+    connectedCallback(): void;
+    private setupInputAccessibility;
+    /**
+     * Updates ARIA attributes on the input element.
+     */
+    updateAria(expanded: boolean, activeDescendantId?: string, controlsId?: string): void;
+    /**
+     * Sets the loading state on the input.
+     */
+    setLoading(loading: boolean): void;
+    /**
+     * Gets the actual input element.
+     */
+    getInputElement(): HTMLInputElement | null;
+    /**
+     * Gets the current input value.
+     */
+    getValue(): string;
+    /**
+     * Sets the input value.
+     */
+    setValue(value: string): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-combobox-input": DsComboboxInput;
+    }
+}
+
+/**
+ * Combobox option with role="option".
+ *
+ * @element ds-combobox-option
+ *
+ * @slot - Option content (text, icon, etc.)
+ *
+ * @example
+ * ```html
+ * <ds-combobox-option value="apple">Apple</ds-combobox-option>
+ * <ds-combobox-option value="banana" disabled>Banana</ds-combobox-option>
+ * ```
+ */
+declare class DsComboboxOption extends DSElement {
+    /** Whether the option is disabled */
+    disabled: boolean;
+    /** Value associated with this option */
+    value: string;
+    /** Display label (uses textContent if not specified) */
+    label: string;
+    connectedCallback(): void;
+    /**
+     * Gets the display label for this option.
+     */
+    getLabel(): string;
+    private updateAriaDisabled;
+    /**
+     * Sets the selected state of this option.
+     */
+    setSelected(selected: boolean): void;
+    /**
+     * Sets the highlighted state of this option.
+     */
+    setHighlighted(highlighted: boolean): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-combobox-option": DsComboboxOption;
+    }
+}
+
+/**
+ * Combobox tag for multi-select mode.
+ *
+ * @element ds-combobox-tag
+ *
+ * @slot - Tag content
+ *
+ * @fires ds:remove - Fired when tag remove button is clicked
+ *
+ * @example
+ * ```html
+ * <ds-combobox-tag value="apple">
+ *   Apple
+ *   <button slot="remove" aria-label="Remove Apple">×</button>
+ * </ds-combobox-tag>
+ * ```
+ */
+declare class DsComboboxTag extends DSElement {
+    /** Value associated with this tag */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Whether the tag is disabled (can't be removed) */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    /**
+     * Triggers removal of this tag.
+     */
+    remove_(): void;
+    /**
+     * Gets the display label for this tag.
+     */
+    getLabel(): string;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-combobox-tag": DsComboboxTag;
+    }
+}
+
+declare const DsCombobox_base: (new (...args: any[]) => FormAssociatedInterface & lit.LitElement) & typeof DSElement & {
+    formAssociated: true;
+};
+/**
+ * Combobox component with async loading, multi-select, keyboard navigation, and native form participation.
+ *
+ * Uses ElementInternals for form association - the selected value(s) are submitted with the form
+ * and the combobox participates in constraint validation.
+ *
+ * Implements WAI-ARIA Combobox pattern with:
+ * - Text input with autocomplete suggestions
+ * - Arrow key navigation between options
+ * - Async loading with debounce
+ * - Multi-select with tag display
+ * - Enter to select, Escape to close
+ *
+ * @element ds-combobox
+ *
+ * @slot input - Input element (ds-combobox-input with input inside)
+ * @slot tags - Selected value tags (for multi-select)
+ * @slot - Combobox content (ds-combobox-content with ds-combobox-option children)
+ *
+ * @fires ds:open - Fired when combobox opens
+ * @fires ds:close - Fired when combobox closes
+ * @fires ds:change - Fired when value changes (detail: { value, label } or { values, labels })
+ * @fires ds:input - Fired when input value changes (detail: { value })
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-combobox name="fruit" required>
+ *     <ds-combobox-input slot="input">
+ *       <input placeholder="Search fruits..." />
+ *     </ds-combobox-input>
+ *     <ds-combobox-content>
+ *       <ds-combobox-option value="apple">Apple</ds-combobox-option>
+ *       <ds-combobox-option value="banana">Banana</ds-combobox-option>
+ *     </ds-combobox-content>
+ *   </ds-combobox>
+ *   <button type="submit">Submit</button>
+ * </form>
+ * ```
+ */
+declare class DsCombobox extends DsCombobox_base {
+    /** Whether the combobox is open */
+    open: boolean;
+    /** Current selected value (single-select mode) */
+    value: string;
+    /** Current selected values (multi-select mode) */
+    values: string[];
+    /** Placement relative to input */
+    placement: Placement;
+    /** Offset distance from input in pixels */
+    offset: number;
+    /** Whether to flip placement when near viewport edge */
+    flip: boolean;
+    /** Whether to animate open/close transitions */
+    animated: boolean;
+    /** Whether the combobox is disabled */
+    disabled: boolean;
+    /** Enable multi-select mode */
+    multiple: boolean;
+    /** Allow creating new values */
+    creatable: boolean;
+    /** Debounce delay for async loading in milliseconds */
+    debounce: number;
+    /** Virtualization threshold (default: 100) */
+    virtualizationThreshold: number;
+    /** Enable virtualization for large lists */
+    virtualize: boolean;
+    /**
+     * Async loading function. Called when input changes (after debounce).
+     * Return an array of Option objects: { value: string, label: string, disabled?: boolean }
+     */
+    loadItems?: (query: string, signal: AbortSignal) => Promise<Option<string>[]>;
+    /**
+     * Data-driven options array. Use this for programmatic option rendering.
+     * When provided, options will be rendered from this array instead of slots.
+     */
+    items: Option<string>[];
+    /** Whether async loading is in progress (read-only) */
+    loading: boolean;
+    /** Error message from async loading (read-only) */
+    loadError: string | null;
+    /** Filtered items for display */
+    private filteredItems;
+    /** Visible item IDs for virtualization */
+    private visibleItemIds;
+    /** Default value for form reset (single-select) */
+    private _defaultValue;
+    /** Default values for form reset (multi-select) */
+    private _defaultValues;
+    private behavior;
+    private anchorPosition;
+    private dismissLayer;
+    private presence;
+    private rovingFocus;
+    private virtualizedList;
+    private resizeObserver;
+    private scrollHandler;
+    private loadAbortController;
+    private debounceTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private initBehavior;
+    /**
+     * Opens the combobox.
+     */
+    show(): void;
+    /**
+     * Closes the combobox.
+     */
+    close(): void;
+    private completeClose;
+    /**
+     * Selects a value programmatically.
+     */
+    select(value: string): void;
+    /**
+     * Removes a value (multi-select mode).
+     */
+    removeValue(value: string): void;
+    /**
+     * Clears all selections.
+     */
+    clear(): void;
+    /**
+     * Creates a new value (creatable mode).
+     */
+    create(value: string): void;
+    private getInputWrapper;
+    private getInputElement;
+    private getOptions;
+    private getEnabledOptions;
+    private getOptionByValue;
+    private registerOptions;
+    private filterOptions;
+    private updateOptionStates;
+    private handleInput;
+    /**
+     * Schedules async loading with debounce.
+     */
+    private scheduleAsyncLoad;
+    /**
+     * Executes the async load.
+     */
+    private executeAsyncLoad;
+    /**
+     * Manually trigger async loading (useful for initial load).
+     */
+    load(query?: string): Promise<void>;
+    private handleClick;
+    private handleKeyDown;
+    private handleTagRemove;
+    private scrollHighlightedIntoView;
+    private handleDismiss;
+    private setupInputAccessibility;
+    private updateInputAria;
+    private setupPositioning;
+    private setupDismissLayer;
+    private setupRovingFocus;
+    private cleanup;
+    updated(changedProperties: Map<string, unknown>): Promise<void>;
+    /**
+     * Returns true if using data-driven rendering.
+     */
+    private get isDataDriven();
+    /**
+     * Renders a single option from data.
+     */
+    private renderDataOption;
+    /**
+     * Renders loading state.
+     */
+    private renderLoading;
+    /**
+     * Renders error state.
+     */
+    private renderError;
+    /**
+     * Renders empty state.
+     */
+    private renderEmpty;
+    protected getFormValue(): FormData | string | null;
+    protected getValidationAnchor(): HTMLElement | undefined;
+    protected getValidationFlags(): ValidationFlags;
+    protected getValidationMessage(flags: ValidationFlags): string;
+    protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean;
+    protected shouldUpdateValidity(changedProperties: PropertyValues): boolean;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null, _mode: "restore" | "autocomplete"): void;
+    /**
+     * Renders data-driven options.
+     */
+    private renderDataOptions;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-combobox": DsCombobox;
+    }
+}
+
+type CalendarState = "open" | "closed";
+/**
+ * DatePicker calendar grid with navigation.
+ *
+ * @element ds-date-picker-calendar
+ *
+ * @slot header - Custom header content
+ *
+ * @fires ds:date-select - Fired when a date is selected
+ * @fires ds:navigate - Fired when month/year navigation occurs
+ *
+ * @example
+ * ```html
+ * <ds-date-picker-calendar
+ *   viewing-month="2026-01"
+ *   selected-date="2026-01-15"
+ *   min-date="2026-01-01"
+ * ></ds-date-picker-calendar>
+ * ```
+ */
+declare class DsDatePickerCalendar extends DSElement {
+    /** Current viewing month (YYYY-MM format) */
+    viewingMonth: string;
+    /** Selected date (ISO format) */
+    selectedDate: string;
+    /** Selected range start (ISO format) */
+    rangeStart: string;
+    /** Selected range end (ISO format) */
+    rangeEnd: string;
+    /** Minimum selectable date (ISO format) */
+    minDate: string;
+    /** Maximum selectable date (ISO format) */
+    maxDate: string;
+    /** Locale for formatting */
+    locale: string;
+    /** First day of week (0=Sunday, 1=Monday, etc.) */
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Animation state */
+    dataState: CalendarState;
+    /** Whether in range selection mode */
+    range: boolean;
+    private focusedDate;
+    private monthFormatter;
+    private weekdayFormatter;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateFormatters;
+    private getTodayIso;
+    private parseDate;
+    private formatIso;
+    private getViewingDate;
+    private getWeekdayNames;
+    private getMonthDays;
+    private isDateDisabled;
+    private isDateSelected;
+    private isDateInRange;
+    private isDateToday;
+    private isDateInCurrentMonth;
+    private handleDateClick;
+    private handleKeyDown;
+    /**
+     * Navigate to previous/next month.
+     */
+    navigateMonth(delta: number): void;
+    /**
+     * Navigate to previous/next year.
+     */
+    navigateYear(delta: number): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): lit.TemplateResult<1>;
+    private renderWeeks;
+    private renderDay;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-date-picker-calendar": DsDatePickerCalendar;
+    }
+}
+
+/**
+ * Result of parsing a typed date input.
+ */
+interface DateParseResult {
+    /** Whether the input was successfully parsed */
+    valid: boolean;
+    /** The parsed date in ISO format (YYYY-MM-DD), if valid */
+    date: string | null;
+    /** Error message if invalid */
+    error: string | null;
+}
+
+type DatePickerMode = "single" | "range";
+/**
+ * DatePicker component with calendar dropdown.
+ *
+ * Implements WAI-ARIA DatePicker pattern with:
+ * - Arrow key navigation within calendar grid
+ * - Page Up/Down for month navigation
+ * - Enter/Space to select date
+ * - Escape to close
+ *
+ * @element ds-date-picker
+ *
+ * @slot trigger - Trigger element (button or input)
+ * @slot - Calendar content (ds-date-picker-calendar)
+ *
+ * @fires ds:open - Fired when calendar opens
+ * @fires ds:close - Fired when calendar closes
+ * @fires ds:change - Fired when date changes (detail: { date } or { start, end })
+ *
+ * @example
+ * ```html
+ * <ds-date-picker value="2026-01-15">
+ *   <button slot="trigger">Select date</button>
+ *   <ds-date-picker-calendar></ds-date-picker-calendar>
+ * </ds-date-picker>
+ * ```
+ */
+declare class DsDatePicker extends DSElement {
+    /** Whether the calendar is open */
+    open: boolean;
+    /** Selection mode: single date or date range */
+    mode: DatePickerMode;
+    /** Selected date in ISO format (YYYY-MM-DD) */
+    value: string;
+    /** Range start date in ISO format */
+    rangeStart: string;
+    /** Range end date in ISO format */
+    rangeEnd: string;
+    /** Minimum selectable date in ISO format */
+    minDate: string;
+    /** Maximum selectable date in ISO format */
+    maxDate: string;
+    /** Locale for date formatting */
+    locale: string;
+    /** First day of week (0=Sunday, 1=Monday) */
+    firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Placement relative to trigger */
+    placement: Placement;
+    /** Offset distance from trigger in pixels */
+    offset: number;
+    /** Whether to flip placement when near viewport edge */
+    flip: boolean;
+    /** Whether to animate open/close transitions */
+    animated: boolean;
+    /** Whether the date picker is disabled */
+    disabled: boolean;
+    /** Whether the date picker is read-only */
+    readonly: boolean;
+    /** Whether to allow typed date input (when using input trigger) */
+    typedInput: boolean;
+    /** Current text value of the input (for typed input mode) */
+    inputValue: string;
+    /** Current validation error message */
+    inputError: string | null;
+    private anchorPosition;
+    private dismissLayer;
+    private presence;
+    private resizeObserver;
+    private scrollHandler;
+    private isSelectingRange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Opens the calendar.
+     */
+    show(): void;
+    /**
+     * Closes the calendar.
+     */
+    close(): void;
+    private completeClose;
+    /**
+     * Toggles the calendar.
+     */
+    toggle(): void;
+    /**
+     * Sets the selected date programmatically.
+     */
+    setDate(date: string): void;
+    /**
+     * Sets the date range programmatically.
+     */
+    setRange(start: string, end: string): void;
+    /**
+     * Clears the selected date(s).
+     */
+    clear(): void;
+    private getTriggerElement;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleDateSelect;
+    private handleDismiss;
+    /**
+     * Handles typed input events.
+     */
+    private handleTypedInput;
+    /**
+     * Handles input blur to finalize typed input.
+     */
+    private handleInputBlur;
+    /**
+     * Commits the typed input value as the selected date.
+     */
+    private commitTypedInput;
+    /**
+     * Gets the expected input format placeholder.
+     */
+    getFormatPlaceholder(): string;
+    /**
+     * Gets the current validation error.
+     */
+    getValidationError(): string | null;
+    /**
+     * Parses a typed date string and returns the validation result.
+     */
+    parseInput(input: string): DateParseResult;
+    private setupPositioning;
+    private setupDismissLayer;
+    private cleanup;
+    updated(changedProperties: Map<string, unknown>): Promise<void>;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-date-picker": DsDatePicker;
+    }
+}
+
+declare class DsSlider extends DSElement {
+    /** Minimum allowed value */
+    min: number;
+    /** Maximum allowed value */
+    max: number;
+    /** Step increment */
+    step: number;
+    /** Current value (single mode) */
+    value: number;
+    /** Range mode (two thumbs) */
+    range: boolean;
+    /** Minimum value in range mode */
+    rangeMin: number;
+    /** Maximum value in range mode */
+    rangeMax: number;
+    /** Orientation */
+    orientation: "horizontal" | "vertical";
+    /** Disabled state */
+    disabled: boolean;
+    /** Optional label */
+    label: string;
+    /** ARIA label */
+    ariaLabel: string | null;
+    /** Value text formatter for screen readers */
+    formatValueText?: (value: number) => string;
+    /** Show tick marks */
+    showTicks: boolean;
+    /** Show value tooltip on focus/drag */
+    showTooltip: boolean;
+    /** Number of tick marks (defaults to (max-min)/step if step > 1) */
+    tickCount?: number;
+    private behavior;
+    private focusedThumb;
+    private dragging;
+    private trackRef;
+    private boundHandlePointerMove;
+    private boundHandlePointerUp;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private initBehavior;
+    private handleThumbPointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handleTrackClick;
+    private getClosestThumb;
+    private handleThumbKeyDown;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private getValueText;
+    private handleThumbFocus;
+    private handleThumbBlur;
+    private getTickPositions;
+    private renderTicks;
+    private renderTooltip;
+    render(): typeof nothing | lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-slider": DsSlider;
+    }
+}
+
+type NumberInputFormat = "decimal" | "currency" | "percent";
+declare class DsNumberInput extends DSElement {
+    /** Minimum allowed value */
+    min: number | undefined;
+    /** Maximum allowed value */
+    max: number | undefined;
+    /** Step increment */
+    step: number;
+    /** Current value */
+    value: number | undefined;
+    /** Decimal precision */
+    precision: number;
+    /** Format type */
+    format: NumberInputFormat;
+    /** Currency code (for currency format) */
+    currency: string;
+    /** Locale for formatting */
+    locale: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Placeholder text */
+    placeholder: string;
+    /** Form field name */
+    name: string;
+    /** ARIA label */
+    ariaLabel: string | null;
+    /** Allow empty input */
+    allowEmpty: boolean;
+    /** Show increment/decrement buttons */
+    showButtons: boolean;
+    /** Prefix text (displayed before input) */
+    prefix: string;
+    /** Suffix text (displayed after input) */
+    suffix: string;
+    private behavior;
+    private inputValue;
+    private isFocused;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private initBehavior;
+    private handleInput;
+    private handleBlur;
+    private handleFocus;
+    private handleKeyDown;
+    private handleIncrement;
+    private handleDecrement;
+    render(): typeof nothing | lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-number-input": DsNumberInput;
+    }
+}
+
+declare class DsFileUpload extends DSElement {
+    /** Accepted file types (MIME types or extensions) */
+    accept: string;
+    /** Maximum number of files */
+    maxFiles: number;
+    /** Maximum file size in bytes */
+    maxSize: number | undefined;
+    /** Minimum file size in bytes */
+    minSize: number | undefined;
+    /** Allow multiple files */
+    multiple: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Show file list */
+    showFileList: boolean;
+    /** Show remove buttons in file list */
+    showRemove: boolean;
+    /** ARIA label */
+    ariaLabel: string | null;
+    private behavior;
+    private files;
+    private isDragging;
+    private announcement;
+    private inputRef;
+    private announcementTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private announce;
+    updated(changedProperties: Map<string, unknown>): void;
+    private initBehavior;
+    /** Public method to get current files */
+    getFiles(): FileInfo[];
+    /** Public method to clear all files */
+    clearFiles(): void;
+    /** Public method to remove a file */
+    removeFile(id: string): void;
+    private handleClick;
+    private handleInputChange;
+    private handleKeyDown;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDragOver;
+    private handleDrop;
+    private handleRemoveFile;
+    private renderFileItem;
+    render(): typeof nothing | lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-file-upload": DsFileUpload;
+    }
+}
+
+declare class DsTimePicker extends DSElement {
+    /** 12-hour or 24-hour format */
+    hourFormat: 12 | 24;
+    /** Show seconds segment */
+    showSeconds: boolean;
+    /** Time value as HH:MM or HH:MM:SS string */
+    value: string;
+    /** Minute step */
+    minuteStep: number;
+    /** Second step */
+    secondStep: number;
+    /** Disabled state */
+    disabled: boolean;
+    /** ARIA label */
+    ariaLabel: string | null;
+    private behavior;
+    private focusedSegment;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private initBehavior;
+    private parseTimeString;
+    private handleSegmentFocus;
+    private handleSegmentBlur;
+    private handleSegmentKeyDown;
+    private renderSegment;
+    render(): typeof nothing | lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-time-picker": DsTimePicker;
+    }
+}
+
+declare class DsPinInput extends DSElement {
+    /** Number of input fields */
+    length: number;
+    /** Current value */
+    value: string;
+    /** Allow alphanumeric characters */
+    alphanumeric: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Mask input (like password) */
+    mask: boolean;
+    /** ARIA label */
+    ariaLabel: string | null;
+    private behavior;
+    private focusedIndex;
+    private inputRefs;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private initBehavior;
+    /** Public method to clear the input */
+    clear(): void;
+    /** Public method to set value programmatically */
+    setValue(value: string): void;
+    private focusInput;
+    private handleInput;
+    private handleKeyDown;
+    private handlePaste;
+    private handleFocus;
+    private handleBlur;
+    render(): typeof nothing | lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-pin-input": DsPinInput;
+    }
+}
+
+declare const DsCheckbox_base: (new (...args: any[]) => FormAssociatedInterface & lit.LitElement) & typeof DSElement & {
+    formAssociated: true;
+};
+/**
+ * Checkbox input with tri-state support and native form participation.
+ *
+ * Uses ElementInternals for form association - values are submitted with the form
+ * and the checkbox participates in constraint validation.
+ *
+ * @element ds-checkbox
+ * @fires ds:change - Fired on state change with { checked, indeterminate }
+ * @fires ds:invalid - Fired when customValidation is true and validation fails
+ *
+ * @slot - Checkbox label
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <ds-checkbox name="accept" required>Accept terms and conditions</ds-checkbox>
+ *   <button type="submit">Submit</button>
+ * </form>
+ *
+ * <ds-field>
+ *   <ds-checkbox name="newsletter" custom-validation>Subscribe to newsletter</ds-checkbox>
+ *   <ds-field-error></ds-field-error>
+ * </ds-field>
+ * ```
+ */
+declare class DsCheckbox extends DsCheckbox_base {
+    /** Checked state */
+    checked: boolean;
+    /** Indeterminate (mixed) state */
+    indeterminate: boolean;
+    /** ARIA describedby - IDs of elements that describe this checkbox */
+    private ariaDescribedBy?;
+    /** Label text captured from slot */
+    private labelText;
+    /** Unique ID for label association */
+    private labelId;
+    /** Default checked state for form reset */
+    private _defaultChecked;
+    private attributeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Syncs ARIA attributes from the host element to internal state.
+     */
+    private syncAriaAttributes;
+    /**
+     * Returns the aria-checked value based on state.
+     */
+    private getAriaChecked;
+    /**
+     * Toggles the checkbox state.
+     */
+    private toggle;
+    private handleClick;
+    private handleKeyDown;
+    protected getFormValue(): string | null;
+    protected getValidationAnchor(): HTMLElement | undefined;
+    protected getValidationFlags(): ValidationFlags;
+    protected getValidationMessage(flags: ValidationFlags): string;
+    protected shouldUpdateFormValue(changedProperties: PropertyValues): boolean;
+    protected shouldUpdateValidity(changedProperties: PropertyValues): boolean;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null, _mode: "restore" | "autocomplete"): void;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-checkbox": DsCheckbox;
+    }
+}
+
+export { type CalendarState, type ComboboxContentState, type DatePickerMode, DsCheckbox, DsCombobox, DsComboboxContent, DsComboboxInput, DsComboboxOption, DsComboboxTag, DsDatePicker, DsDatePickerCalendar, DsField, DsFieldDescription, DsFieldError, DsFileUpload, DsLabel, DsNumberInput, DsPinInput, DsRadio, DsRadioGroup, DsSelect, DsSelectContent, DsSelectOption, DsSelectTrigger, DsSlider, DsSwitch, DsTextarea, DsTimePicker, type NumberInputFormat, type RadioOrientation, type SelectContentState, type TextareaSize };