/** * Copyright Aquera Inc 2023 * * This source code is licensed under the BSD-3-Clause license found in the * LICENSE file in the root directory of this source tree. */ import { TemplateResult } from 'lit'; import NileElement from '../internal/nile-element'; import type { CSSResultGroup } from 'lit'; /** * Nile detail component. * * @tag nile-accordion * */ export declare class NileAccordion extends NileElement { /** * @summary Accordian show a brief summary and expand to show additional content. * * @dependency nile-icon * * @slot - The accordian' main content. * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute. * @slot expand-icon - Optional expand icon to use instead of the default. Works best with ``. * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with ``. * * @event nile-show - Emitted when the accordian opens. * @event nile-after-show - Emitted after the accordian opens and all animations are complete. * @event nile-hide - Emitted when the accordian closes. * @event nile-after-hide - Emitted after the accordian closes and all animations are complete. * * @csspart base - The component's base wrapper. * @csspart header - The header that wraps both the summary and the expand/collapse icon. * @csspart summary - The container that wraps the summary. * @csspart summary-icon - The container that wraps the expand/collapse icons. * @csspart content - The accordian content. * * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation. * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation. */ static styles: CSSResultGroup; accordian: HTMLElement; header: HTMLElement; body: HTMLElement; expandIconSlot: HTMLSlotElement; /** * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state. */ open: boolean; /** * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`. * Defaults to `'light'`. */ variant: 'dark' | 'light'; /** * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`. * Defaults to `'right'`. */ expandIconPlacement: 'left' | 'right'; /** * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`. * Defaults to `'md'`. */ size: 'sm' | 'md' | 'lg'; /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */ summary: string; /** Disables the accordian so it can't be toggled. */ disabled: boolean; firstUpdated(): void; private handleSummaryClick; private handleSummaryKeyDown; handleOpenChange(): Promise; /** Shows the accordian. */ show(): Promise; /** Hides the accordian */ hide(): Promise; render(): TemplateResult<1>; } export default NileAccordion; declare global { interface HTMLElementTagNameMap { 'nile-accordion': NileAccordion; } }