@rarui/components 1.19.0 → 1.21.0

package/dist/index.d.ts

@@ -17466,6 +17466,71 @@ declare const styles: {
 
 type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
 
+declare const accordionStyles: {
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":disabled": {
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+        size: {
+            large: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            medium: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            small: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    body: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+};
+
+type AccordionVariants = Omit<NonNullable<RecipeVariants<typeof accordionStyles.item>>, "selected"> & NonNullable<RecipeVariants<typeof accordionStyles.body>>;
+
+declare const breadcrumbStyles: {
+    breadcrumb: string;
+    item: RuntimeFn<{
+        /**
+         * Indicates whether the breadcrumb item is currently active.
+         * An active item is typically styled differently to show that it represents the current page.
+         */
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type BreadcrumbVariants = NonNullable<RecipeVariants<typeof breadcrumbStyles.item>>;
+
 declare const cardStyles: {
     card: RuntimeFn<{
         /**
@@ -17999,6 +18064,48 @@ interface ToggleTyping {
 }
 type ToggleProps = ToggleTyping & ToggleVariants;
 
+interface AccordionProps {
+    /**
+     * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
+     */
+    selectedDefault?: string;
+    /**
+     * Disables the accordion, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+type AccordionBodyProps = Pick<AccordionVariants, "padding">;
+
+interface AccordionHeaderTyping {
+    /**
+     * The title to display in the accordion header.
+     */
+    title?: string;
+    /**
+     * The subtitle to display in the accordion header.
+     */
+    subtitle?: string;
+    /**
+     * Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
+     * @default false
+     */
+    noIconToggle?: boolean;
+}
+type AccordionHeaderProps = AccordionHeaderTyping & Pick<AccordionVariants, "size">;
+
+interface AccordionItemProps {
+    /**
+     * Unique indicator to identify accordion items
+     */
+    index: string;
+    /**
+     * This is an attribute used to identify a DOM node for testing purposes.
+     */
+    testId?: string;
+}
+
 interface BannerTyping {
     /**
      * A function to be called when the user closes the banner. This function is typically used to handle the closing action.
@@ -18059,6 +18166,14 @@ interface ModalHeaderTypings {
 }
 type ModalHeaderProps = ModalHeaderTypings;
 
+interface BreadcrumbItemTyping {
+    /**
+     * The name of the breadcrumb item. This is typically the text that is displayed for the item.
+     */
+    name?: string;
+}
+type BreadcrumbItemProps = BreadcrumbItemTyping & BreadcrumbVariants;
+
 type LinkProps = LinkVariants;
 
 interface PaginationTyping {
@@ -18175,7 +18290,7 @@ declare class RaruiDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
-type IconName = "phone-call-outlined" | "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
+type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-call-outlined" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18824,6 +18939,86 @@ declare class RaruiToggle extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-breadcrumb": RaruiBreadcrumb;
+    }
+}
+/**
+ * ## Rarui Breadcrumb
+ * ---
+ * Componente de navegação hierárquica que permite aos usuários navegar através de uma estrutura de páginas.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb) for more details.
+ */
+interface BreadcrumbProperties {
+    /**
+     * Especifica o número de itens do breadcrumb a serem exibidos após o truncamento.
+     * Útil para gerenciar a exibição de listas longas de breadcrumb.
+     * @default 10
+     */
+    "items-after-truncate"?: number;
+}
+
+declare class RaruiBreadcrumb extends LitElement {
+    itemsAfterTruncate: BreadcrumbProperties["items-after-truncate"];
+    private items;
+    private visibleItems;
+    private hiddenItems;
+    private firstItem?;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    private updateItems;
+    private getTextContent;
+    private getSlotContent;
+    private calculateVisibilityDistribution;
+    private renderSeparator;
+    private renderFirstItem;
+    private renderDropdownItems;
+    private renderVisibleItems;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-breadcrumb-item": RaruiBreadcrumbItem;
+    }
+}
+/**
+ * ## Rarui BreadcrumbItem
+ * ---
+ * Item individual do breadcrumb que pode ser renderizado como link ou botão.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb-item) for more details.
+ */
+type BreadcrumbItemProperties = BreadcrumbItemProps & {
+    /**
+     * Nome do item do breadcrumb exibido como texto.
+     */
+    name?: string;
+    /**
+     * URL de destino quando o item for um link.
+     */
+    href?: string;
+    /**
+     * Tipo de elemento a ser renderizado.
+     * @default "button"
+     */
+    as?: "button" | "a";
+};
+
+declare class RaruiBreadcrumbItem extends LitElement {
+    name?: BreadcrumbItemProperties["name"];
+    href?: BreadcrumbItemProperties["href"];
+    active?: BreadcrumbItemProperties["active"];
+    as?: BreadcrumbItemProperties["as"];
+    static styles: CSSResult;
+    private handleClick;
+    render(): TemplateResult<1>;
+    private renderContent;
+    private hasSlotContent;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-link": RaruiLink;
@@ -18983,6 +19178,120 @@ declare class RaruiSideNavigationItem extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion": RaruiAccordion;
+    }
+}
+/**
+ * ## Rarui Accordion
+ * ---
+ * The Accordion component displays a list of expandable sections that users can toggle open or closed.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionProperties = Pick<AccordionProps, "disabled"> & {
+    /**
+     * Informs which accordion item is open by default.
+     * @default ""
+     */
+    "selected-default"?: string;
+};
+
+declare class RaruiAccordion extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    selectedDefault?: AccordionProperties["selected-default"];
+    disabled?: AccordionProperties["disabled"];
+    private selected;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleItemToggle;
+    private updateItemsState;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-item": RaruiAccordionItem;
+    }
+}
+/**
+ * ## Rarui Accordion Item
+ * ---
+ * Container for accordion header and body content.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionItemProperties = Pick<AccordionItemProps, "index">;
+
+declare class RaruiAccordionItem extends LitElement {
+    index: AccordionItemProperties["index"];
+    selected: boolean;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleHeaderClick;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-header": RaruiAccordionHeader;
+    }
+}
+/**
+ * ## Rarui Accordion Header
+ * ---
+ * Clickable header section that toggles the accordion item visibility.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionHeaderProperties = Pick<AccordionHeaderProps, "size" | "subtitle" | "title"> & {
+    /**
+     * Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
+     * @default false
+     */
+    "no-icon-toggle"?: boolean;
+};
+
+declare class RaruiAccordionHeader extends LitElement {
+    title: NonNullable<AccordionHeaderProperties["title"]>;
+    subtitle: AccordionHeaderProperties["subtitle"];
+    size: AccordionHeaderProperties["size"];
+    noIconToggle: AccordionHeaderProperties["no-icon-toggle"];
+    disabled: boolean;
+    selected: boolean;
+    static styles: CSSResult;
+    private handleClick;
+    private getTitleSize;
+    private getSubtitleSize;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-body": RaruiAccordionBody;
+    }
+}
+/**
+ * ## Rarui Accordion Body
+ * ---
+ * Content area that is shown/hidden when accordion item is toggled.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionBodyProperties = Partial<AccordionBodyProps>;
+
+declare class RaruiAccordionBody extends LitElement {
+    padding: AccordionBodyProperties["padding"];
+    selected: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;