import { type Readable } from '@vielzeug/ripple';
import type { ComponentSize, SurfaceVariant } from '../../types';
/** Context provided by ore-accordion to its ore-accordion-item children. */
export type AccordionContext = {
    selectionMode: Readable<'single' | 'multiple' | undefined>;
    size: Readable<ComponentSize | undefined>;
    variant: Readable<SurfaceVariant | undefined>;
};
/** Injection key for the accordion context. */
export declare const ACCORDION_CTX: import("@vielzeug/ore").InjectionKey<AccordionContext>;
/** Accordion component properties */
export type OreAccordionEvents = {
    change: {
        expandedItem: HTMLElement;
    };
};
export type OreAccordionProps = {
    /** Selection mode (single = only one opens, multiple = multiple can be open) */
    selectionMode?: 'single' | 'multiple';
    /** Size for all items (propagated via context) */
    size?: ComponentSize;
    /** Visual variant for all items (propagated via context) */
    variant?: SurfaceVariant;
};
/**
 * A container for accordion items with single or multiple selection modes.
 *
 * @element ore-accordion
 * @element ore-accordion-item - Child element for each collapsible panel
 *
 * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'
 * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)
 * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)
 *
 * @fires expand - Emitted when an item expands. detail: { expanded: boolean; item: HTMLElement }
 * @fires change - Emitted when selection changes (single mode). detail: { expandedItem: HTMLElement }
 *
 * @slot - `ore-accordion-item` elements
 *
 * @cssprop --accordion-bg - Container background color (solid/flat/glass/frost variants)
 * @cssprop --accordion-border-color - Container border color (solid/flat variants)
 * @cssprop --accordion-divider-color - Divider color between items (text variant)
 * @cssprop --accordion-shadow - Container box shadow
 * @example
 * ```html
 * <ore-accordion selection-mode="single">
 *   <ore-accordion-item>
 *     <span slot="title">What is Refine?</span>
 *     <p>Refine is a headless web component library.</p>
 *   </ore-accordion-item>
 *   <ore-accordion-item>
 *     <span slot="title">How do I install it?</span>
 *     <p>Run <code>npm install @vielzeug/refine</code>.</p>
 *   </ore-accordion-item>
 * </ore-accordion>
 * <ore-accordion variant="bordered" selection-mode="multiple">
 *   <ore-accordion-item expanded><span slot="title">Open by default</span><p>Content</p></ore-accordion-item>
 * </ore-accordion>
 * ```
 */
export declare const ACCORDION_TAG: "ore-accordion";
//# sourceMappingURL=accordion.d.ts.map