dap-design-system/dist/react/dap-ds-accordion/index.d.ts

Official design system for the DÁP (dap.gov.hu)

import { EventName } from '@lit/react';
import { default as Component } from '../../components/accordion/accordion.js';
import { DdsOpenedEvent, DdsClosedEvent } from '../../events/events';
export type { DdsOpenedEvent } from '../../events/events';
export type { DdsClosedEvent } from '../../events/events';
/**
* `dap-ds-accordion` is a custom accordion component.
* @element dap-ds-accordion
* @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
* @title - Accordion
*
* @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).
* @property {string} sizeMap - Responsive size map (e.g. "md:lg")
* @property {string} parentSized - When "true", size is taken from the parent card if present.
* @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
* @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.
* @property {boolean} opened - Whether the accordion is opened. Default is `false`.
* @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.
* @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
* @property {boolean} lastItem - Whether the accordion is the last item.
* @property {boolean} disabled - Whether the accordion is disabled.
* @property {boolean} loading - Whether the accordion is in loading state.
*
* @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.
* @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.
*
* @slot default - The content of the accordion.
* @slot heading - The heading of the accordion.
* @slot icon-opened - The icon when the accordion is opened.
* @slot icon-closed - The icon when the accordion is closed.
*
* @csspart base - The main accordion container.
* @csspart heading - The heading of the accordion.
* @csspart button - The button of the accordion.
* @csspart content - The content of the accordion.
* @csspart content-container - The container of the accordion content.
* @csspart icon-wrapper - The icon wrapper of the accordion.
* @csspart open-icon - The icon when the accordion is opened.
* @csspart open-icon-base - The base of the icon when the accordion is opened.
* @csspart close-icon - The icon when the accordion is closed.
* @csspart close-icon-base - The base of the icon when the accordion is closed.
*
* @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))
* @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)
* @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))
* @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))
* @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))
* @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
* @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
* @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))
* @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
* @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
* @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
* @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
* @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))
* @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))
* @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
* @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
    onDdsOpened: EventName<DdsOpenedEvent>;
    onDdsClosed: EventName<DdsClosedEvent>;
}>;
export default reactWrapper;