import { LitElement, type TemplateResult } from 'lit';
import { type ColorPalette } from '@rhds/elements/lib/color-palettes.js';
import { ComposedEvent } from '@patternfly/pfe-core';
import { RhAccordionHeader, AccordionHeaderChangeEvent } from './rh-accordion-header.js';
import { RhAccordionPanel } from './rh-accordion-panel.js';
export * from './rh-accordion-header.js';
export * from './rh-accordion-panel.js';
export declare class AccordionExpandEvent extends ComposedEvent {
toggle: RhAccordionHeader;
panel: RhAccordionPanel;
constructor(toggle: RhAccordionHeader, panel: RhAccordionPanel);
}
export declare class AccordionCollapseEvent extends ComposedEvent {
toggle: RhAccordionHeader;
panel: RhAccordionPanel;
constructor(toggle: RhAccordionHeader, panel: RhAccordionPanel);
}
/**
* An accordion is a stacked list of panels which allows users to expand or collapse information
* when selected. They feature panels that consist of a section text label and a caret icon that
* collapses or expands to reveal more information.
*
* @summary Expands or collapses a stacked list of panels
*
* @alias accordion
*
* @fires {AccordionExpandEvent} expand - when a panel expands
* @fires {AccordionCollapseEvent} collapse - when a panel collapses
* @attr [accents=inline] Position accents in the header either inline or bottom
*/
export declare class RhAccordion extends LitElement {
#private;
static readonly styles: CSSStyleSheet[];
static isAccordion(target: EventTarget | null): target is RhAccordion;
static isHeader(target: EventTarget | null): target is RhAccordionHeader;
static isPanel(target: EventTarget | null): target is RhAccordionPanel;
static isAccordionChangeEvent(event: Event): event is AccordionHeaderChangeEvent;
/**
* Sets accordion header's accents position to inline or bottom
*/
accents?: 'inline' | 'bottom';
/**
* If this accordion uses large styles
*/
large: boolean;
/**
* Color Palette for this accordion.
* @see https://ux.redhat.com/theming/color-palettes/
*/
colorPalette?: ColorPalette;
/**
* Sets and reflects the currently expanded accordion 0-based indexes.
* Use commas to separate multiple indexes.
* ```html
*
* ...
*
* ```
*/
get expandedIndex(): number[];
set expandedIndex(value: number[]);
/** All headers for this accordion */
get headers(): RhAccordionHeader[];
/** All panels for this accordion */
get panels(): RhAccordionPanel[];
private ctx;
connectedCallback(): void;
render(): TemplateResult;
protected getUpdateComplete(): Promise;
private updateExpanded;
private contextChanged;
/**
* Initialize the accordion by connecting headers and panels
* with aria controls and labels; set up the default disclosure
* state if not set by the author; and check the URL for default
* open
*/
updateAccessibility(): void;
/**
* Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
* @param index header index to toggle
*/
toggle(index: number): Promise;
/**
* Accepts a 0-based index value (integer) for the set of accordion items to expand.
* Accepts an optional parent accordion to search for headers and panels.
* @param index header index to toggle
* @param parentAccordion target accordion to expand in
*/
expand(index: number, parentAccordion?: RhAccordion): Promise;
/**
* Expands all accordion items.
*/
expandAll(): Promise;
/**
* Accepts a 0-based index value (integer) for the set of accordion items to collapse.
* @param index header index to collapse
*/
collapse(index: number): Promise;
/**
* Collapses all accordion items.
*/
collapseAll(): Promise;
}
declare global {
interface HTMLElementTagNameMap {
'rh-accordion': RhAccordion;
}
interface HTMLElementEventMap {
'expand': AccordionExpandEvent;
'collapse': AccordionCollapseEvent;
}
}