import type React from 'react';
import type { AccordionDetail, AccordionItem } from './types.js';
export interface AccordionRef extends HTMLElement {
    /** Expands the panel at the given index. */
    expand(index: number): void;
    /** Collapses the panel at the given index. */
    collapse(index: number): void;
    /** Toggles the panel at the given index. Respects single/multiple mode. */
    toggle(index: number): void;
}
/**
 * Pass `items` as a typed array property, not as children or JSON text.
 * Each item needs `id`, `trigger_label`, and `panel_content` (not `label`/`content`).
 * Controlled mode: set `expanded` to an array of panel indices (for example `[0,2]`). Updates automatically on user interaction.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<AccordionRef>(null)`, pass `ref={api}`, then `api.current?.expand()`.
 * Available: expand(), collapse(), toggle().
 *
 * @csspart base
 */
export interface AccordionOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Expansion behavior: 'single' (only one panel open) or 'multiple' (independent panels). Allowed values: `single`, `multiple`.
     * @example 'single'
     */
    mode?: 'single' | 'multiple';
    /**
     * Whether all panels can be collapsed (when false, one panel always remains open).
     * @defaultValue false
     * @example true
     */
    collapsible?: boolean;
    /**
     * HTML heading level (1–6) for the panel trigger elements. Allowed values: `h2`, `h3`, `h4`, `h5`, `h6`.
     * @example 'h2'
     */
    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /**
     * Positional panel indices (0-based) to expand on initial render, passed as a number[] property. Example: [0, 2].
     * @example [0]
     */
    defaultExpanded?: number[];
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Typed array of item data objects. Bind as a property; do not stringify it or use children for list items.
     * @example [{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]
     */
    items?: AccordionItem[];
    /**
     * Controlled expanded state as a number[] property (for example [0, 2]). Updates on user interaction; never stringify it.
     * @example [0, 2]
     */
    expanded?: number[];
    /**
     * Fires when the committed component value or state changes. Detail: `AccordionDetail`.
     * @example (event) => console.log(event.detail.expanded)
     */
    onChange?: (event: CustomEvent<AccordionDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Accordion>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-accordion>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type AccordionProps = AccordionOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof AccordionOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Accordion: React.ForwardRefExoticComponent<AccordionOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof AccordionOwnProps> & React.RefAttributes<AccordionRef>>;