import { type EventEmitter } from '../../stencil-public-runtime'; import type { BrButtonType, BrDensity, BrLinkTarget, BrNavigateDetail, BrNavigationMode } from '../global.types'; import type { ItemSelectDetail } from './item.types'; /** * O `br-item` padroniza uma linha de conteúdo, ação ou link dentro de listas, menus ou agrupamentos verticais. * * Coloque o texto ou elementos no slot padrão. Use `interactive` para habilitar efeito de clique e foco, ou `href` para transformá-lo em link navegável. Para destacar um item escolhido, use `selected`. * * ```html * Item de ação * Meu Perfil * ``` * * ### Quando usar * * - Linhas de dados em listas (`br-list`) ou painéis verticais. * - Linhas com foco, hover e seleção consistentes com o design system. * * ### Quando evitar * * - Itens específicos de navegação estruturada: use `br-breadcrumb-item`, `br-tab-item` ou `br-step-item`. * - Opções de seleção em formulário: use `br-select-option`. * * Consulte as [diretrizes de design 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, Navegação * @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 atual. 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. Em itens interativos, também é atualizado pelo acionamento. */ 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 de alternância: o acionamento alterna `selected`, emite * `brItemSelect` e expõe o estado em `aria-pressed`. Para uma ação sem estado (ex.: "Sair"), * use `href` com `navigation-mode="event"` ou um `br-button`. * 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). * * Valores inválidos usam `medium`. */ density: BrDensity; private get effectiveTarget(); private get effectiveNavigationMode(); private get effectiveType(); /** * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`