import * as i0 from '@angular/core';
import * as i1 from '@angular/cdk/accordion';
import { CdkAccordionItem } from '@angular/cdk/accordion';
import * as i2 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * @description
 * Individual accordion item component that can be expanded or collapsed within an eui-accordion container.
 * Provides a collapsible panel with header and content sections, supporting smooth collapse animations.
 * Uses Angular CDK's accordion item functionality for managing expansion state and accessibility.
 * Supports size variants (S, M, L) and disabled state through BaseStatesDirective.
 * Emits toggleItem event when expansion state changes, allowing parent components to track state.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-accordion>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Header Text</eui-accordion-item-header>
 *     Panel content goes here
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * ### With initial expanded state and size variant
 * ```html
 * <eui-accordion-item isExpanded euiSizeS (toggleItem)="onToggle($event)">
 *   <eui-accordion-item-header>Small Item</eui-accordion-item-header>
 *   Content
 * </eui-accordion-item>
 * ```
 *
 * ### Disabled item
 * ```html
 * <eui-accordion-item euiDisabled>
 *   <eui-accordion-item-header>Disabled Item</eui-accordion-item-header>
 *   Content
 * </eui-accordion-item>
 * ```
 *
 * ### Accessibility
 * - Header is keyboard accessible with Enter/Space to toggle expansion
 * - ARIA attributes (aria-expanded, aria-controls) automatically managed by CDK
 * - Screen readers announce expansion state and content visibility changes
 * - Focus remains on header after toggling for consistent keyboard navigation
 * - Disabled items are not focusable and announced as disabled to screen readers
 *
 * ### Notes
 * - Must be used within an eui-accordion parent component
 * - Requires eui-accordion-item-header directive for header content
 * - Collapse animation is applied automatically on state changes
 * - Size variants (euiSizeS, euiSizeM, euiSizeL) affect header and content spacing
 * - toggleItem event emits boolean indicating current expanded state (true = expanded)
 * - isExpanded input can be used for programmatic control of expansion state
 */
declare class EuiAccordionItemComponent {
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses(): string;
    /**
     * Event emitted when the accordion item is toggled
     */
    readonly toggleItem: i0.OutputEmitterRef<boolean>;
    /** @description Instance of BaseStatesDirective for managing component states */
    protected baseStatesDirective: BaseStatesDirective;
    protected accItem: CdkAccordionItem;
    /**
     * Handles the toggle event for expanding/collapsing the accordion item
     * Prevents event propagation to avoid interfering with parent handlers
     *
     * @param event - The toggle event
     */
    onToggle(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<EuiAccordionItemComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EuiAccordionItemComponent, "eui-accordion-item", never, {}, { "toggleItem": "toggleItem"; }, never, ["eui-accordion-item-header", "*"], true, [{ directive: typeof i1.CdkAccordionItem; inputs: { "expanded": "isExpanded"; }; outputs: {}; }, { directive: typeof i2.BaseStatesDirective; inputs: { "euiSizeS": "euiSizeS"; "euiSizeM": "euiSizeM"; "euiSizeL": "euiSizeL"; "euiSizeVariant": "euiSizeVariant"; "euiDisabled": "euiDisabled"; }; outputs: {}; }]>;
}
/**
 * @description
 * Directive for marking and styling the header content of an accordion item.
 * Applied to content that should appear in the clickable header section of the accordion panel.
 * The header acts as the toggle trigger for expanding/collapsing the accordion item.
 * Content projected with this directive is displayed with appropriate styling and interactive behavior.
 *
 * @usageNotes
 * ```html
 * <eui-accordion-item>
 *   <eui-accordion-item-header>
 *     Section Title
 *   </eui-accordion-item-header>
 *   Panel content
 * </eui-accordion-item>
 * ```
 *
 * ### Accessibility
 * - Header content is automatically wrapped in an interactive button element
 * - Keyboard accessible with Enter/Space keys for toggling
 * - Screen readers announce the header text and expansion state
 *
 * ### Notes
 * - Required for proper accordion item structure
 * - Must be a direct child of eui-accordion-item
 * - Only one header directive should be used per accordion item
 * - Header content can include text, icons, or other inline elements
 */
declare class EuiAccordionItemHeaderDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<EuiAccordionItemHeaderDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiAccordionItemHeaderDirective, "eui-accordion-item-header", never, {}, {}, never, never, true, never>;
}

/**
 * @description
 * Accordion container component that manages a collection of expandable panel items.
 * Provides collapsible content sections with automatic expansion state coordination across child items.
 * Supports single or multi-expansion modes to control whether multiple panels can be open simultaneously.
 * Built on Angular CDK Accordion for robust expansion state management and accessibility.
 * Content is projected via ng-content, expecting eui-accordion-item children for proper functionality.
 * Typically used for organizing related content in expandable sections like FAQs, settings panels, or navigation menus.
 *
 * @usageNotes
 * #### Single expansion mode (default)
 * ```html
 * <eui-accordion>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Section 1</eui-accordion-item-header>
 *     Content for section 1
 *   </eui-accordion-item>
 *   <eui-accordion-item>
 *     <eui-accordion-item-header>Section 2</eui-accordion-item-header>
 *     Content for section 2
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * #### Multi-expansion mode
 * ```html
 * <eui-accordion isMulti>
 *   <eui-accordion-item (toggleItem)="onToggle($event)">
 *     <eui-accordion-item-header>Item 1</eui-accordion-item-header>
 *     Content 1
 *   </eui-accordion-item>
 * </eui-accordion>
 * ```
 *
 * ### Accessibility
 * - Uses Angular CDK Accordion which provides built-in ARIA attributes (aria-expanded, aria-controls)
 * - Each accordion item header is keyboard accessible and can be toggled with Enter/Space
 * - Screen readers announce expansion state changes automatically
 * - Focus management handled by CDK for keyboard navigation between items
 *
 * ### Notes
 * - In single-expansion mode (default), opening one item automatically closes others
 * - Set `isMulti` to allow multiple items to be expanded simultaneously
 * - Must contain eui-accordion-item children for proper functionality
 * - Expansion state is managed internally by Angular CDK Accordion
 * - Use toggleItem event on items to track expansion state changes
 */
declare class EuiAccordionComponent {
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    cssClasses(): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<EuiAccordionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EuiAccordionComponent, "eui-accordion", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkAccordion; inputs: { "multi": "isMulti"; }; outputs: {}; }]>;
}

declare const EUI_ACCORDION: readonly [typeof EuiAccordionComponent, typeof EuiAccordionItemComponent, typeof EuiAccordionItemHeaderDirective];

export { EUI_ACCORDION, EuiAccordionComponent, EuiAccordionItemComponent, EuiAccordionItemHeaderDirective };
//# sourceMappingURL=eui-components-eui-accordion.d.ts.map
