import { type EventEmitter } from '../../stencil-public-runtime'; import type { BrButtonType, BrDensity, BrLinkTarget, BrNavigateDetail, BrNavigationMode } from '../global.types'; import type { ItemSelectDetail } from './item.types'; /** * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/item?tab=designer). * * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.). * * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias. * * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais. * * @category Conteúdo * @status stable * @part item - Elemento principal do item (botão, link ou div). */ export declare class Item { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrItemElement; /** * Indica se o slot padrão possui conteúdo atribuído. */ hasSlotDefault: boolean; /** * Indica se o slot `end` possui conteúdo atribuído. */ hasSlotEnd: boolean; /** * Indica se o slot `start` possui conteúdo atribuído. */ hasSlotStart: boolean; /** * Estado interno de seleção usado na renderização e emissão de eventos. */ selectedValue: boolean; rovingTabIndex: number; /** * Desabilita a interação com o componente. * */ disabled: boolean; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Indica se o item está no estado ativo. * Se definido como verdadeiro, o item será exibido como ativo. * @deprecated Use `active`. */ isActive: boolean; /** Estado ativo canônico. Quando informado, tem precedência sobre `isActive`. */ active?: boolean; /** * Indica se o item está no estado selecionado. * Se definido como verdadeiro, o item será exibido como selecionado. * @deprecated Use `selected`. */ isSelected: boolean; /** Estado selecionado canônico. Quando informado, tem precedência sobre `isSelected`. */ selected?: boolean; /** * Marca o item como interativo, permitindo que toda a superfície do item seja clicável. * @deprecated Use `interactive`. */ isInteractive: boolean; /** Torna toda a superfície interativa. Quando informado, tem precedência sobre `isInteractive`. */ interactive?: boolean; /** * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link. */ href?: string; /** * Define o alvo do link quando `href` está presente. Pode ser: * - `_blank` para abrir em uma nova aba, * - `_self` para abrir na mesma aba, * - `_parent` para abrir na aba pai, * - `_top` para abrir na aba superior. */ target?: BrLinkTarget; /** * Controla como o componente integra a navegação mantendo `href` real no elemento navegável. * - `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C. * - `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. * Cliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos. */ navigationMode: BrNavigationMode; /** * Quando definido como `true`, o item será tratado como um botão. * @deprecated Use `button`. */ isButton: boolean; /** Renderiza o item como botão. Quando informado, tem precedência sobre `isButton`. */ button?: boolean; /** * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser: * - `'submit'` para enviar um formulário, * - `'reset'` para redefinir um formulário, * - `'button'` para um botão padrão. */ type: BrButtonType; /** * Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário. */ value?: string; /** * Define a densidade visual do componente. * * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento). * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos. * - `large`: Baixa densidade (componente maior, mais espaçamento e altura). * */ density: BrDensity; /** * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`