voa-ds-core 1.0.4

package/dist/types/components.d.ts

@@ -0,0 +1,2731 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { CheckboxState } from "./components/voa-checkbox/voa-checkbox";
+export { CheckboxState } from "./components/voa-checkbox/voa-checkbox";
+export namespace Components {
+    interface VoaAccordion {
+        /**
+          * Shows the top divider.
+          * @default true
+         */
+        "divider": boolean;
+        /**
+          * If true, the accordion is expanded.
+          * @default false
+         */
+        "open": boolean;
+        "setFocus": () => Promise<void>;
+        /**
+          * Size variant.
+          * @default 'md'
+         */
+        "size": 'md' | 'lg';
+    }
+    /**
+     * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+     * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+     * Suporta variantes default (layout vertical) e inline (layout horizontal).
+     */
+    interface VoaAlert {
+        /**
+          * Título do alerta. Quando fornecido, será exibido como título principal. Para variant inline, apenas o título é exibido.
+         */
+        "alertTitle"?: string;
+        /**
+          * Determina se o alerta pode ser fechado pelo usuário.
+          * @default false
+         */
+        "closable": boolean;
+        /**
+          * Texto do rótulo para o botão de fechar, para acessibilidade. Padrão é "Fechar alerta".
+          * @default 'Fechar alerta'
+         */
+        "closeButtonLabel": string;
+        /**
+          * Descrição do alerta. Apenas exibida na variante default.
+         */
+        "description"?: string;
+        /**
+          * Texto do botão primário. Só será exibido se showButtons for true.
+         */
+        "primaryButtonText"?: string;
+        /**
+          * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.
+         */
+        "secondaryButtonText"?: string;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA Delega foco ao botão de fechar se existir
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Determina se os botões devem ser exibidos. Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido). Se false, os botões não serão exibidos, independente das outras props.
+          * @default false
+         */
+        "showButtons": boolean;
+        /**
+          * O tipo de alerta a ser exibido. Influencia a cor e o ícone. Padrão é 'info'.
+          * @default 'info'
+         */
+        "type": 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info';
+        /**
+          * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal). Padrão é 'default'.
+          * @default 'default'
+         */
+        "variant": 'default' | 'inline';
+    }
+    /**
+     * Componente Avatar do Voa Design System, baseado no design do Figma.
+     * Suporta exibição de ícone, iniciais ou imagem de perfil.
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaAvatar {
+        /**
+          * Texto alternativo para a imagem do avatar.
+         */
+        "alt"?: string;
+        /**
+          * As iniciais a serem exibidas quando type="initials".
+         */
+        "initials"?: string;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno do avatar.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Tamanho do avatar. Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)
+          * @default 'md'
+         */
+        "size": 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        /**
+          * URL da imagem do avatar quando type="photo".
+         */
+        "src"?: string;
+        /**
+          * Tipo de avatar a ser exibido. - 'icon': Exibe um ícone de usuário padrão - 'photo': Exibe uma imagem (requer prop src) - 'initials': Exibe iniciais de texto (requer prop initials)
+          * @default 'icon'
+         */
+        "type": 'icon' | 'photo' | 'initials';
+    }
+    /**
+     * Badge component para exibir indicadores visuais como texto, contadores ou status.
+     * Baseado no design do Figma (node-id: 397-3352).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaBadge {
+        /**
+          * O número a ser exibido como contador (para variantes indicator e indicator-overlay)
+         */
+        "count"?: number;
+        /**
+          * O nome do ícone a ser exibido (para variantes icon-only e icons)
+         */
+        "icon"?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';
+        /**
+          * O texto a ser exibido no badge (mapeado do Figma como "label")
+         */
+        "label"?: string;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA Delega foco ao elemento interno nativo
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Forma do badge conforme design do Figma
+          * @default 'default'
+         */
+        "shape": 'default' | 'pill';
+        /**
+          * Tamanho do badge conforme design do Figma
+          * @default 'md'
+         */
+        "size": 'sm' | 'md';
+        /**
+          * A variante do badge conforme design do Figma
+          * @default 'plain'
+         */
+        "variant": 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';
+    }
+    /**
+     * Componente de breadcrumbs (navegação estrutural).
+     * Baseado no design do Figma (node-id: 443-10022).
+     * *
+     */
+    interface VoaBreadcrumbs {
+        /**
+          * Variante visual do breadcrumb.
+          * @default 'default'
+         */
+        "type": 'default' | 'round' | 'outline';
+    }
+    /**
+     * Componente de divisor para breadcrumbs.
+     * Baseado no design do Figma (node-id: 443-9825).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaBreadcrumbsDivider {
+        /**
+          * Tipo de ícone a ser exibido como divisor. Mapeia as variantes do Figma: chevron, arrow, arrow-alt.
+          * @default 'chevron'
+         */
+        "icon": 'chevron' | 'arrow' | 'arrow-alt';
+    }
+    interface VoaBreadcrumbsItem {
+        /**
+          * Is this the current/active page?
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * HREF destination. If provided, renders an anchor tag. If missing, renders a span (current page or static item).
+         */
+        "href"?: string;
+        /**
+          * Target for the link (e.g., _blank)
+         */
+        "target"?: string;
+    }
+    /**
+     * Botão principal do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaButton {
+        /**
+          * Rótulo ARIA para acessibilidade. Usado quando o botão não tem texto visível (apenas ícone).
+         */
+        "ariaLabel": string;
+        /**
+          * Se verdadeiro, o botão estará desabilitado.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * O texto exibido no botão. Pode ser fornecido via prop ou via slot padrão.
+         */
+        "label"?: string;
+        /**
+          * Se verdadeiro, o botão exibe um estado de carregamento (spinner) e desabilita interações.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno nativo.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Tamanho do botão. Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).
+          * @default 'lg'
+         */
+        "size": 'sm' | 'md' | 'lg';
+        /**
+          * Tipo do botão HTML. Padrão é 'button' para evitar submissão de formulários.
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Variante visual do botão. Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.
+          * @default 'primary'
+         */
+        "variant": 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link';
+    }
+    interface VoaCard {
+    }
+    /**
+     * Componente de checkbox que segue o design system VOA.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaCheckbox {
+        /**
+          * Se o checkbox está desabilitado.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Nome do checkbox para formulários.
+         */
+        "name": string;
+        /**
+          * Se o label deve ser exibido.
+          * @default true
+         */
+        "showLabel": boolean;
+        /**
+          * State of the checkbox. active = checked inactive = unchecked indeterminate = partial/mixed
+          * @default 'inactive'
+         */
+        "state": CheckboxState;
+        /**
+          * Valor do checkbox para formulários.
+          * @default 'on'
+         */
+        "value": string;
+    }
+    /**
+     * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+     * Permite selecionar múltiplos itens dentro de um contêiner.
+     */
+    interface VoaContainerMultiSelect {
+        /**
+          * Se verdadeiro, o contêiner estará desabilitado.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Lista de itens para seleção
+          * @default []
+         */
+        "items": Array<{id: string, label: string, selected?: boolean}>;
+        /**
+          * Texto de placeholder quando não há itens selecionados
+          * @default 'Selecione os itens'
+         */
+        "placeholder": string;
+    }
+    interface VoaDatepicker {
+        "value": string;
+    }
+    interface VoaDrawer {
+        /**
+          * @default false
+         */
+        "open": boolean;
+    }
+    interface VoaDropdown {
+        /**
+          * @default []
+         */
+        "options": string[];
+    }
+    /**
+     * Componente de input para entrada de dados do Voa Design System.
+     * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaInput {
+        /**
+          * Indica se o campo está desabilitado
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Indica se o campo está em estado de erro
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Variante de preenchimento (filled vs unfilled)
+          * @default true
+         */
+        "fill": boolean;
+        /**
+          * Texto auxiliar ou mensagem de erro
+         */
+        "helperText"?: string;
+        /**
+          * ID do elemento input
+         */
+        "inputId"?: string;
+        /**
+          * Texto do label
+         */
+        "label"?: string;
+        /**
+          * Nome do elemento input
+         */
+        "name"?: string;
+        /**
+          * Texto de placeholder
+         */
+        "placeholder"?: string;
+        /**
+          * Indica se o campo é somente leitura
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Indica se o campo é obrigatório
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno nativo.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Mostrar ícone de informação na área de info
+          * @default true
+         */
+        "showInfoIcon": boolean;
+        /**
+          * Tamanho do input
+          * @default 'md'
+         */
+        "size": 'sm' | 'md' | 'lg';
+        /**
+          * Tipo do input (text, password, email, search, tel, etc.)
+          * @default 'text'
+         */
+        "type": string;
+        /**
+          * Indica se o campo está em estado de sucesso
+          * @default false
+         */
+        "valid": boolean;
+        /**
+          * Valor do input
+          * @default ''
+         */
+        "value"?: string;
+        /**
+          * Indica se o campo está em estado de aviso
+          * @default false
+         */
+        "warning": boolean;
+    }
+    /**
+     * Componente Input-Addon para elementos auxiliares em inputs.
+     * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaInputAddon {
+        /**
+          * Texto do botão (para variante button)
+          * @default 'Procurar...'
+         */
+        "buttonLabel"?: string;
+        /**
+          * Código do país (para variante flags)
+          * @default 'BR +55'
+         */
+        "countryCode"?: string;
+        /**
+          * Símbolo da moeda (para variante currency-pre)
+          * @default 'R$'
+         */
+        "currency"?: string;
+        /**
+          * Nome da moeda (para variante currency-post)
+          * @default 'Real'
+         */
+        "currencyName"?: string;
+        /**
+          * Plataforma do atalho (para variante shortcut)
+          * @default 'mac'
+         */
+        "platform"?: 'mac' | 'win';
+        /**
+          * Texto do label/prepend (para variantes label, select)
+          * @default 'http://'
+         */
+        "prependContent"?: string;
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno nativo.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Tecla do atalho (para variante shortcut)
+          * @default 'S'
+         */
+        "shortcut"?: string;
+        /**
+          * Variante do addon
+          * @default 'label'
+         */
+        "variant": 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post';
+    }
+    /**
+     * Componente Keybinding para exibir atalhos de teclado.
+     * Baseado no design do Figma, usado como subcomponente do input-addon.
+     * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     */
+    interface VoaKeybinding {
+        /**
+          * Plataforma do atalho (mac ou win)
+          * @default 'mac'
+         */
+        "platform": 'mac' | 'win';
+        /**
+          * A tecla do atalho (ex: "S", "K", "Enter")
+          * @default 'S'
+         */
+        "shortcut": string;
+    }
+    interface VoaLink {
+        "href": string;
+        /**
+          * @default "_self"
+         */
+        "target": string;
+    }
+    interface VoaList {
+        /**
+          * @default []
+         */
+        "items": string[];
+    }
+    interface VoaModal {
+        /**
+          * @default false
+         */
+        "open": boolean;
+    }
+    /**
+     * Componente Option do Voa Design System - Radio Button Pattern
+     * Acts as a standalone radio option that can be used in a radio group.
+     * Manages internal checked state and syncs with Native Form API via ElementInternals.
+     */
+    interface VoaOption {
+        /**
+          * If true, this option is selected.
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * If true, this option is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The label text displayed next to the radio indicator. If not provided, only the indicator is shown.
+         */
+        "label"?: string;
+        /**
+          * The name attribute for the radio group.
+         */
+        "name": string;
+        /**
+          * The value returned when this option is selected.
+         */
+        "value": string;
+    }
+    interface VoaPagination {
+        /**
+          * @default 1
+         */
+        "currentPage": number;
+        /**
+          * How many siblings to show around the current page. E.g., siblingCount=1 means: ... 4 [5] 6 ...
+          * @default 1
+         */
+        "siblingCount": number;
+        /**
+          * @default 1
+         */
+        "totalPages": number;
+    }
+    interface VoaPaginationItem {
+        /**
+          * Is this the current active page?
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * Is this item disabled?
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The type of item to render. - page: A standard page number - ellipsis: The "..." separator - prev/next: Navigation arrows
+          * @default 'page'
+         */
+        "type": 'page' | 'ellipsis' | 'prev' | 'next';
+    }
+    interface VoaProgress {
+        /**
+          * @default 0
+         */
+        "value": number;
+    }
+    /**
+     * Componente Radio Button do Voa Design System, baseado no design do Figma.
+     * Permite seleção única dentro de um grupo de opções.
+     * Este é o componente base do radio (apenas o indicador visual).
+     * Para opções com label, use o componente voa-option.
+     */
+    interface VoaRadio {
+        /**
+          * Se verdadeiro, o radio button estará selecionado.
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Se verdadeiro, o radio button estará desabilitado.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Nome do grupo de radio buttons (usado para agrupamento).
+         */
+        "name": string;
+        /**
+          * Método para delegar foco ao elemento interno do radio. Requerido para acessibilidade WCAG 2.2 AA.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Valor do radio button quando selecionado.
+         */
+        "value": string;
+    }
+    /**
+     * Componente Select principal do Voa Design System, baseado no design do Figma.
+     * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+     * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+     */
+    interface VoaSelect {
+        /**
+          * Se verdadeiro, o select estará desabilitado
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Se verdadeiro, o select terá estado de erro
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Mensagem de erro exibida abaixo do input
+         */
+        "errorMessage"?: string;
+        /**
+          * Se verdadeiro, a informação adicional será exibida
+          * @default false
+         */
+        "info": boolean;
+        /**
+          * Mensagem de informação adicional
+         */
+        "infoMessage"?: string;
+        /**
+          * Texto do label exibido acima do input
+         */
+        "label"?: string;
+        /**
+          * Lista de opções para seleção
+          * @default []
+         */
+        "options": Array<{value: string, label: string, disabled?: boolean}>;
+        /**
+          * Texto de placeholder
+          * @default 'Placeholder'
+         */
+        "placeholder": string;
+        /**
+          * Método para delegar foco ao elemento interno do select. Requerido para acessibilidade WCAG 2.2 AA.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Se verdadeiro, o label será exibido
+          * @default true
+         */
+        "showLabel": boolean;
+        /**
+          * Tipo de seleção: 'simple' para seleção única NOTA: 'multi' está temporariamente desabilitado até implementação correta
+          * @default 'simple'
+         */
+        "type": 'simple';
+        /**
+          * THE TRUTH. Read-only from parent.
+         */
+        "value"?: string;
+    }
+    /**
+     * Componente Base para Select do Voa Design System, baseado no design do Figma.
+     */
+    interface VoaSelectBase {
+        /**
+          * Se verdadeiro, o select estará desabilitado.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Se verdadeiro, o select terá estado de erro.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * Lista de opções para seleção
+          * @default []
+         */
+        "options": Array<{ value: string, label: string, disabled?: boolean }>;
+        /**
+          * Texto de placeholder quando não há item selecionado
+          * @default 'Select an option'
+         */
+        "placeholder": string;
+        /**
+          * Método para delegar foco ao elemento interno do select. Requerido para acessibilidade WCAG 2.2 AA.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * THE TRUTH. Read-only from parent.
+         */
+        "value"?: string;
+    }
+    interface VoaSkeleton {
+        /**
+          * @default "100px"
+         */
+        "height": string;
+        "variant": "text" | "circle";
+        /**
+          * @default "200px"
+         */
+        "width": string;
+    }
+    interface VoaStepper {
+        /**
+          * @default 0
+         */
+        "currentStep": number;
+        /**
+          * @default []
+         */
+        "steps": string[];
+    }
+    interface VoaSwitch {
+        /**
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "name": string;
+        /**
+          * @default false
+         */
+        "showLabel": boolean;
+        /**
+          * @default 'on'
+         */
+        "value": string;
+    }
+    interface VoaTab {
+        /**
+          * Controlled mode active index.
+         */
+        "activeIndex": number;
+        /**
+          * @default 'horizontal'
+         */
+        "direction": 'horizontal' | 'vertical';
+    }
+    /**
+     * Item individual de tab do Voa Design System.
+     * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+     * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * *
+     */
+    interface VoaTabItem {
+        /**
+          * Número a ser exibido no badge (opcional). Se não fornecido e showBadge=true, exibe "0".
+         */
+        "badgeCount"?: number;
+        /**
+          * Se verdadeiro, o item estará desabilitado. Alias para state="disabled".
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Índice do item (gerenciado pelo componente pai voa-tab). Usado internamente para identificação.
+         */
+        "itemIndex"?: number;
+        /**
+          * Posição do indicador de ativo (borda). Mapeia as posições do Figma: Default (bottom), Top, Right, Left.
+          * @default 'default'
+         */
+        "position": 'default' | 'top' | 'right' | 'left';
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Se verdadeiro, exibe um badge no item.
+          * @default false
+         */
+        "showBadge": boolean;
+        /**
+          * Estado do item de tab. Mapeia os estados do Figma: Active, Default, Disabled.
+          * @default 'default'
+         */
+        "state": 'active' | 'default' | 'disabled';
+    }
+    interface VoaTable {
+        /**
+          * @default []
+         */
+        "columns": string[];
+        /**
+          * @default []
+         */
+        "data": any[];
+    }
+    /**
+     * Tag component para exibir labels categorizadores, status ou metadados.
+     * Baseado no design do Figma (node-id: 1436-769).
+     * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaTag {
+        /**
+          * Exibe o ícone à esquerda (apenas se variant="icons")
+          * @default false
+         */
+        "iconLeft": boolean;
+        /**
+          * Exibe o ícone à direita (apenas se variant="icons")
+          * @default false
+         */
+        "iconRight": boolean;
+        /**
+          * O texto a ser exibido no tag
+         */
+        "label"?: string;
+        /**
+          * Forma do tag
+          * @default 'default'
+         */
+        "shape": 'default' | 'pill';
+        /**
+          * Tamanho do tag
+          * @default 'md'
+         */
+        "size": 'sm' | 'md';
+        /**
+          * A variante do tag
+          * @default 'plain'
+         */
+        "variant": 'plain' | 'icons';
+    }
+    /**
+     * Componente de área de texto para entrada de textos longos
+     */
+    interface VoaTextArea {
+        /**
+          * @default 20
+         */
+        "cols"?: number;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "errorMessage"?: string;
+        /**
+          * @default false
+         */
+        "hasError"?: boolean;
+        /**
+          * @default false
+         */
+        "info"?: boolean;
+        /**
+          * @default 'Identificador único'
+         */
+        "infoText"?: string;
+        "label"?: string;
+        "maxLength"?: number;
+        "name"?: string;
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * @default 4
+         */
+        "rows"?: number;
+        "setFocus": () => Promise<void>;
+        "textareaId"?: string;
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface VoaTimepicker {
+        "value": string;
+    }
+    /**
+     * Tooltip component do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * @example <voa-tooltip position="top" theme="spot" text="Hello World">
+     *   <span slot="icon">⚠️</span>
+     * </voa-tooltip>
+     */
+    interface VoaTooltip {
+        /**
+          * Rótulo ARIA para acessibilidade. Usado para descrever o tooltip para leitores de tela.
+         */
+        "ariaLabel": string;
+        /**
+          * Se verdadeiro, exibe o slot de ícone. Baseado na prop `icon` do design do Figma.
+          * @default true
+         */
+        "icon": boolean;
+        /**
+          * Posição da seta do tooltip. Mapeia as posições do Figma: top, bottom, left, right.
+          * @default 'bottom'
+         */
+        "position": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Método para acessibilidade WCAG 2.2 AA. Delega foco ao elemento interno.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Texto do tooltip. Pode ser fornecido via prop ou via slot padrão.
+          * @default 'Body text'
+         */
+        "text": string;
+        /**
+          * Tema de cor do tooltip. Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.
+          * @default 'default'
+         */
+        "theme": 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange';
+    }
+    /**
+     * Subcomponente de seta (arrow) para o VoaTooltip.
+     * Cria uma seta triangular apontando na direção especificada.
+     * A seta é implementada usando CSS border trick para criar um triângulo,
+     * permitindo colorização dinâmica via CSS variables.
+     */
+    interface VoaTooltipArrow {
+        /**
+          * Posição da seta. Determina em qual direção a seta aponta.
+          * @default 'bottom'
+         */
+        "position": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Tema de cor da seta. A cor da seta será mapeada via CSS variables baseadas no tema.
+          * @default 'default'
+         */
+        "theme": 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange';
+    }
+    interface VoaUpload {
+    }
+}
+export interface VoaAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaAccordionElement;
+}
+export interface VoaAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaAlertElement;
+}
+export interface VoaButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaButtonElement;
+}
+export interface VoaCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaCheckboxElement;
+}
+export interface VoaContainerMultiSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaContainerMultiSelectElement;
+}
+export interface VoaInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaInputElement;
+}
+export interface VoaInputAddonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaInputAddonElement;
+}
+export interface VoaOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaOptionElement;
+}
+export interface VoaPaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaPaginationElement;
+}
+export interface VoaPaginationItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaPaginationItemElement;
+}
+export interface VoaRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaRadioElement;
+}
+export interface VoaSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaSelectElement;
+}
+export interface VoaSelectBaseCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaSelectBaseElement;
+}
+export interface VoaStepperCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaStepperElement;
+}
+export interface VoaSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaSwitchElement;
+}
+export interface VoaTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaTabElement;
+}
+export interface VoaTabItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaTabItemElement;
+}
+export interface VoaTextAreaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVoaTextAreaElement;
+}
+declare global {
+    interface HTMLVoaAccordionElementEventMap {
+        "voaToggle": boolean;
+    }
+    interface HTMLVoaAccordionElement extends Components.VoaAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaAccordionElementEventMap>(type: K, listener: (this: HTMLVoaAccordionElement, ev: VoaAccordionCustomEvent<HTMLVoaAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaAccordionElementEventMap>(type: K, listener: (this: HTMLVoaAccordionElement, ev: VoaAccordionCustomEvent<HTMLVoaAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaAccordionElement: {
+        prototype: HTMLVoaAccordionElement;
+        new (): HTMLVoaAccordionElement;
+    };
+    interface HTMLVoaAlertElementEventMap {
+        "voaDismiss": void;
+        "voaPrimaryClick": void;
+        "voaSecondaryClick": void;
+    }
+    /**
+     * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+     * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+     * Suporta variantes default (layout vertical) e inline (layout horizontal).
+     */
+    interface HTMLVoaAlertElement extends Components.VoaAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaAlertElementEventMap>(type: K, listener: (this: HTMLVoaAlertElement, ev: VoaAlertCustomEvent<HTMLVoaAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaAlertElementEventMap>(type: K, listener: (this: HTMLVoaAlertElement, ev: VoaAlertCustomEvent<HTMLVoaAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaAlertElement: {
+        prototype: HTMLVoaAlertElement;
+        new (): HTMLVoaAlertElement;
+    };
+    /**
+     * Componente Avatar do Voa Design System, baseado no design do Figma.
+     * Suporta exibição de ícone, iniciais ou imagem de perfil.
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaAvatarElement extends Components.VoaAvatar, HTMLStencilElement {
+    }
+    var HTMLVoaAvatarElement: {
+        prototype: HTMLVoaAvatarElement;
+        new (): HTMLVoaAvatarElement;
+    };
+    /**
+     * Badge component para exibir indicadores visuais como texto, contadores ou status.
+     * Baseado no design do Figma (node-id: 397-3352).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaBadgeElement extends Components.VoaBadge, HTMLStencilElement {
+    }
+    var HTMLVoaBadgeElement: {
+        prototype: HTMLVoaBadgeElement;
+        new (): HTMLVoaBadgeElement;
+    };
+    /**
+     * Componente de breadcrumbs (navegação estrutural).
+     * Baseado no design do Figma (node-id: 443-10022).
+     * *
+     */
+    interface HTMLVoaBreadcrumbsElement extends Components.VoaBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLVoaBreadcrumbsElement: {
+        prototype: HTMLVoaBreadcrumbsElement;
+        new (): HTMLVoaBreadcrumbsElement;
+    };
+    /**
+     * Componente de divisor para breadcrumbs.
+     * Baseado no design do Figma (node-id: 443-9825).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaBreadcrumbsDividerElement extends Components.VoaBreadcrumbsDivider, HTMLStencilElement {
+    }
+    var HTMLVoaBreadcrumbsDividerElement: {
+        prototype: HTMLVoaBreadcrumbsDividerElement;
+        new (): HTMLVoaBreadcrumbsDividerElement;
+    };
+    interface HTMLVoaBreadcrumbsItemElement extends Components.VoaBreadcrumbsItem, HTMLStencilElement {
+    }
+    var HTMLVoaBreadcrumbsItemElement: {
+        prototype: HTMLVoaBreadcrumbsItemElement;
+        new (): HTMLVoaBreadcrumbsItemElement;
+    };
+    interface HTMLVoaButtonElementEventMap {
+        "dsClick": void;
+    }
+    /**
+     * Botão principal do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaButtonElement extends Components.VoaButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaButtonElementEventMap>(type: K, listener: (this: HTMLVoaButtonElement, ev: VoaButtonCustomEvent<HTMLVoaButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaButtonElementEventMap>(type: K, listener: (this: HTMLVoaButtonElement, ev: VoaButtonCustomEvent<HTMLVoaButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaButtonElement: {
+        prototype: HTMLVoaButtonElement;
+        new (): HTMLVoaButtonElement;
+    };
+    interface HTMLVoaCardElement extends Components.VoaCard, HTMLStencilElement {
+    }
+    var HTMLVoaCardElement: {
+        prototype: HTMLVoaCardElement;
+        new (): HTMLVoaCardElement;
+    };
+    interface HTMLVoaCheckboxElementEventMap {
+        "dsChange": CheckboxState;
+    }
+    /**
+     * Componente de checkbox que segue o design system VOA.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaCheckboxElement extends Components.VoaCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaCheckboxElementEventMap>(type: K, listener: (this: HTMLVoaCheckboxElement, ev: VoaCheckboxCustomEvent<HTMLVoaCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaCheckboxElementEventMap>(type: K, listener: (this: HTMLVoaCheckboxElement, ev: VoaCheckboxCustomEvent<HTMLVoaCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaCheckboxElement: {
+        prototype: HTMLVoaCheckboxElement;
+        new (): HTMLVoaCheckboxElement;
+    };
+    interface HTMLVoaContainerMultiSelectElementEventMap {
+        "voaSelectionChange": string[];
+    }
+    /**
+     * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+     * Permite selecionar múltiplos itens dentro de um contêiner.
+     */
+    interface HTMLVoaContainerMultiSelectElement extends Components.VoaContainerMultiSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaContainerMultiSelectElementEventMap>(type: K, listener: (this: HTMLVoaContainerMultiSelectElement, ev: VoaContainerMultiSelectCustomEvent<HTMLVoaContainerMultiSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaContainerMultiSelectElementEventMap>(type: K, listener: (this: HTMLVoaContainerMultiSelectElement, ev: VoaContainerMultiSelectCustomEvent<HTMLVoaContainerMultiSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaContainerMultiSelectElement: {
+        prototype: HTMLVoaContainerMultiSelectElement;
+        new (): HTMLVoaContainerMultiSelectElement;
+    };
+    interface HTMLVoaDatepickerElement extends Components.VoaDatepicker, HTMLStencilElement {
+    }
+    var HTMLVoaDatepickerElement: {
+        prototype: HTMLVoaDatepickerElement;
+        new (): HTMLVoaDatepickerElement;
+    };
+    interface HTMLVoaDrawerElement extends Components.VoaDrawer, HTMLStencilElement {
+    }
+    var HTMLVoaDrawerElement: {
+        prototype: HTMLVoaDrawerElement;
+        new (): HTMLVoaDrawerElement;
+    };
+    interface HTMLVoaDropdownElement extends Components.VoaDropdown, HTMLStencilElement {
+    }
+    var HTMLVoaDropdownElement: {
+        prototype: HTMLVoaDropdownElement;
+        new (): HTMLVoaDropdownElement;
+    };
+    interface HTMLVoaInputElementEventMap {
+        "dsChange": string;
+        "dsInput": string;
+        "dsFocus": FocusEvent;
+        "dsBlur": FocusEvent;
+    }
+    /**
+     * Componente de input para entrada de dados do Voa Design System.
+     * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaInputElement extends Components.VoaInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaInputElementEventMap>(type: K, listener: (this: HTMLVoaInputElement, ev: VoaInputCustomEvent<HTMLVoaInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaInputElementEventMap>(type: K, listener: (this: HTMLVoaInputElement, ev: VoaInputCustomEvent<HTMLVoaInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaInputElement: {
+        prototype: HTMLVoaInputElement;
+        new (): HTMLVoaInputElement;
+    };
+    interface HTMLVoaInputAddonElementEventMap {
+        "dsClick": void;
+    }
+    /**
+     * Componente Input-Addon para elementos auxiliares em inputs.
+     * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaInputAddonElement extends Components.VoaInputAddon, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaInputAddonElementEventMap>(type: K, listener: (this: HTMLVoaInputAddonElement, ev: VoaInputAddonCustomEvent<HTMLVoaInputAddonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaInputAddonElementEventMap>(type: K, listener: (this: HTMLVoaInputAddonElement, ev: VoaInputAddonCustomEvent<HTMLVoaInputAddonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaInputAddonElement: {
+        prototype: HTMLVoaInputAddonElement;
+        new (): HTMLVoaInputAddonElement;
+    };
+    /**
+     * Componente Keybinding para exibir atalhos de teclado.
+     * Baseado no design do Figma, usado como subcomponente do input-addon.
+     * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     */
+    interface HTMLVoaKeybindingElement extends Components.VoaKeybinding, HTMLStencilElement {
+    }
+    var HTMLVoaKeybindingElement: {
+        prototype: HTMLVoaKeybindingElement;
+        new (): HTMLVoaKeybindingElement;
+    };
+    interface HTMLVoaLinkElement extends Components.VoaLink, HTMLStencilElement {
+    }
+    var HTMLVoaLinkElement: {
+        prototype: HTMLVoaLinkElement;
+        new (): HTMLVoaLinkElement;
+    };
+    interface HTMLVoaListElement extends Components.VoaList, HTMLStencilElement {
+    }
+    var HTMLVoaListElement: {
+        prototype: HTMLVoaListElement;
+        new (): HTMLVoaListElement;
+    };
+    interface HTMLVoaModalElement extends Components.VoaModal, HTMLStencilElement {
+    }
+    var HTMLVoaModalElement: {
+        prototype: HTMLVoaModalElement;
+        new (): HTMLVoaModalElement;
+    };
+    interface HTMLVoaOptionElementEventMap {
+        "dsChange": string;
+    }
+    /**
+     * Componente Option do Voa Design System - Radio Button Pattern
+     * Acts as a standalone radio option that can be used in a radio group.
+     * Manages internal checked state and syncs with Native Form API via ElementInternals.
+     */
+    interface HTMLVoaOptionElement extends Components.VoaOption, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaOptionElementEventMap>(type: K, listener: (this: HTMLVoaOptionElement, ev: VoaOptionCustomEvent<HTMLVoaOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaOptionElementEventMap>(type: K, listener: (this: HTMLVoaOptionElement, ev: VoaOptionCustomEvent<HTMLVoaOptionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaOptionElement: {
+        prototype: HTMLVoaOptionElement;
+        new (): HTMLVoaOptionElement;
+    };
+    interface HTMLVoaPaginationElementEventMap {
+        "voaPageChange": number;
+    }
+    interface HTMLVoaPaginationElement extends Components.VoaPagination, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaPaginationElementEventMap>(type: K, listener: (this: HTMLVoaPaginationElement, ev: VoaPaginationCustomEvent<HTMLVoaPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaPaginationElementEventMap>(type: K, listener: (this: HTMLVoaPaginationElement, ev: VoaPaginationCustomEvent<HTMLVoaPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaPaginationElement: {
+        prototype: HTMLVoaPaginationElement;
+        new (): HTMLVoaPaginationElement;
+    };
+    interface HTMLVoaPaginationItemElementEventMap {
+        "itemClick": void;
+    }
+    interface HTMLVoaPaginationItemElement extends Components.VoaPaginationItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaPaginationItemElementEventMap>(type: K, listener: (this: HTMLVoaPaginationItemElement, ev: VoaPaginationItemCustomEvent<HTMLVoaPaginationItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaPaginationItemElementEventMap>(type: K, listener: (this: HTMLVoaPaginationItemElement, ev: VoaPaginationItemCustomEvent<HTMLVoaPaginationItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaPaginationItemElement: {
+        prototype: HTMLVoaPaginationItemElement;
+        new (): HTMLVoaPaginationItemElement;
+    };
+    interface HTMLVoaProgressElement extends Components.VoaProgress, HTMLStencilElement {
+    }
+    var HTMLVoaProgressElement: {
+        prototype: HTMLVoaProgressElement;
+        new (): HTMLVoaProgressElement;
+    };
+    interface HTMLVoaRadioElementEventMap {
+        "radioChange": { checked: boolean; value: string; name: string };
+        "radioFocus": void;
+        "radioBlur": void;
+    }
+    /**
+     * Componente Radio Button do Voa Design System, baseado no design do Figma.
+     * Permite seleção única dentro de um grupo de opções.
+     * Este é o componente base do radio (apenas o indicador visual).
+     * Para opções com label, use o componente voa-option.
+     */
+    interface HTMLVoaRadioElement extends Components.VoaRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaRadioElementEventMap>(type: K, listener: (this: HTMLVoaRadioElement, ev: VoaRadioCustomEvent<HTMLVoaRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaRadioElementEventMap>(type: K, listener: (this: HTMLVoaRadioElement, ev: VoaRadioCustomEvent<HTMLVoaRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaRadioElement: {
+        prototype: HTMLVoaRadioElement;
+        new (): HTMLVoaRadioElement;
+    };
+    interface HTMLVoaSelectElementEventMap {
+        "voaSelectChange": string;
+    }
+    /**
+     * Componente Select principal do Voa Design System, baseado no design do Figma.
+     * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+     * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+     */
+    interface HTMLVoaSelectElement extends Components.VoaSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaSelectElementEventMap>(type: K, listener: (this: HTMLVoaSelectElement, ev: VoaSelectCustomEvent<HTMLVoaSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaSelectElementEventMap>(type: K, listener: (this: HTMLVoaSelectElement, ev: VoaSelectCustomEvent<HTMLVoaSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaSelectElement: {
+        prototype: HTMLVoaSelectElement;
+        new (): HTMLVoaSelectElement;
+    };
+    interface HTMLVoaSelectBaseElementEventMap {
+        "voaChange": string;
+    }
+    /**
+     * Componente Base para Select do Voa Design System, baseado no design do Figma.
+     */
+    interface HTMLVoaSelectBaseElement extends Components.VoaSelectBase, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaSelectBaseElementEventMap>(type: K, listener: (this: HTMLVoaSelectBaseElement, ev: VoaSelectBaseCustomEvent<HTMLVoaSelectBaseElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaSelectBaseElementEventMap>(type: K, listener: (this: HTMLVoaSelectBaseElement, ev: VoaSelectBaseCustomEvent<HTMLVoaSelectBaseElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaSelectBaseElement: {
+        prototype: HTMLVoaSelectBaseElement;
+        new (): HTMLVoaSelectBaseElement;
+    };
+    interface HTMLVoaSkeletonElement extends Components.VoaSkeleton, HTMLStencilElement {
+    }
+    var HTMLVoaSkeletonElement: {
+        prototype: HTMLVoaSkeletonElement;
+        new (): HTMLVoaSkeletonElement;
+    };
+    interface HTMLVoaStepperElementEventMap {
+        "stepChanged": number;
+    }
+    interface HTMLVoaStepperElement extends Components.VoaStepper, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaStepperElementEventMap>(type: K, listener: (this: HTMLVoaStepperElement, ev: VoaStepperCustomEvent<HTMLVoaStepperElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaStepperElementEventMap>(type: K, listener: (this: HTMLVoaStepperElement, ev: VoaStepperCustomEvent<HTMLVoaStepperElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaStepperElement: {
+        prototype: HTMLVoaStepperElement;
+        new (): HTMLVoaStepperElement;
+    };
+    interface HTMLVoaSwitchElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLVoaSwitchElement extends Components.VoaSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaSwitchElementEventMap>(type: K, listener: (this: HTMLVoaSwitchElement, ev: VoaSwitchCustomEvent<HTMLVoaSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaSwitchElementEventMap>(type: K, listener: (this: HTMLVoaSwitchElement, ev: VoaSwitchCustomEvent<HTMLVoaSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaSwitchElement: {
+        prototype: HTMLVoaSwitchElement;
+        new (): HTMLVoaSwitchElement;
+    };
+    interface HTMLVoaTabElementEventMap {
+        "dsTabChange": { index: number };
+    }
+    interface HTMLVoaTabElement extends Components.VoaTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaTabElementEventMap>(type: K, listener: (this: HTMLVoaTabElement, ev: VoaTabCustomEvent<HTMLVoaTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaTabElementEventMap>(type: K, listener: (this: HTMLVoaTabElement, ev: VoaTabCustomEvent<HTMLVoaTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaTabElement: {
+        prototype: HTMLVoaTabElement;
+        new (): HTMLVoaTabElement;
+    };
+    interface HTMLVoaTabItemElementEventMap {
+        "tabClick": void;
+    }
+    /**
+     * Item individual de tab do Voa Design System.
+     * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+     * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * *
+     */
+    interface HTMLVoaTabItemElement extends Components.VoaTabItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaTabItemElementEventMap>(type: K, listener: (this: HTMLVoaTabItemElement, ev: VoaTabItemCustomEvent<HTMLVoaTabItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaTabItemElementEventMap>(type: K, listener: (this: HTMLVoaTabItemElement, ev: VoaTabItemCustomEvent<HTMLVoaTabItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaTabItemElement: {
+        prototype: HTMLVoaTabItemElement;
+        new (): HTMLVoaTabItemElement;
+    };
+    interface HTMLVoaTableElement extends Components.VoaTable, HTMLStencilElement {
+    }
+    var HTMLVoaTableElement: {
+        prototype: HTMLVoaTableElement;
+        new (): HTMLVoaTableElement;
+    };
+    /**
+     * Tag component para exibir labels categorizadores, status ou metadados.
+     * Baseado no design do Figma (node-id: 1436-769).
+     * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface HTMLVoaTagElement extends Components.VoaTag, HTMLStencilElement {
+    }
+    var HTMLVoaTagElement: {
+        prototype: HTMLVoaTagElement;
+        new (): HTMLVoaTagElement;
+    };
+    interface HTMLVoaTextAreaElementEventMap {
+        "voaChange": string;
+        "voaInput": string;
+        "voaFocus": FocusEvent;
+        "voaBlur": FocusEvent;
+    }
+    /**
+     * Componente de área de texto para entrada de textos longos
+     */
+    interface HTMLVoaTextAreaElement extends Components.VoaTextArea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLVoaTextAreaElementEventMap>(type: K, listener: (this: HTMLVoaTextAreaElement, ev: VoaTextAreaCustomEvent<HTMLVoaTextAreaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLVoaTextAreaElementEventMap>(type: K, listener: (this: HTMLVoaTextAreaElement, ev: VoaTextAreaCustomEvent<HTMLVoaTextAreaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLVoaTextAreaElement: {
+        prototype: HTMLVoaTextAreaElement;
+        new (): HTMLVoaTextAreaElement;
+    };
+    interface HTMLVoaTimepickerElement extends Components.VoaTimepicker, HTMLStencilElement {
+    }
+    var HTMLVoaTimepickerElement: {
+        prototype: HTMLVoaTimepickerElement;
+        new (): HTMLVoaTimepickerElement;
+    };
+    /**
+     * Tooltip component do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * @example <voa-tooltip position="top" theme="spot" text="Hello World">
+     *   <span slot="icon">⚠️</span>
+     * </voa-tooltip>
+     */
+    interface HTMLVoaTooltipElement extends Components.VoaTooltip, HTMLStencilElement {
+    }
+    var HTMLVoaTooltipElement: {
+        prototype: HTMLVoaTooltipElement;
+        new (): HTMLVoaTooltipElement;
+    };
+    /**
+     * Subcomponente de seta (arrow) para o VoaTooltip.
+     * Cria uma seta triangular apontando na direção especificada.
+     * A seta é implementada usando CSS border trick para criar um triângulo,
+     * permitindo colorização dinâmica via CSS variables.
+     */
+    interface HTMLVoaTooltipArrowElement extends Components.VoaTooltipArrow, HTMLStencilElement {
+    }
+    var HTMLVoaTooltipArrowElement: {
+        prototype: HTMLVoaTooltipArrowElement;
+        new (): HTMLVoaTooltipArrowElement;
+    };
+    interface HTMLVoaUploadElement extends Components.VoaUpload, HTMLStencilElement {
+    }
+    var HTMLVoaUploadElement: {
+        prototype: HTMLVoaUploadElement;
+        new (): HTMLVoaUploadElement;
+    };
+    interface HTMLElementTagNameMap {
+        "voa-accordion": HTMLVoaAccordionElement;
+        "voa-alert": HTMLVoaAlertElement;
+        "voa-avatar": HTMLVoaAvatarElement;
+        "voa-badge": HTMLVoaBadgeElement;
+        "voa-breadcrumbs": HTMLVoaBreadcrumbsElement;
+        "voa-breadcrumbs-divider": HTMLVoaBreadcrumbsDividerElement;
+        "voa-breadcrumbs-item": HTMLVoaBreadcrumbsItemElement;
+        "voa-button": HTMLVoaButtonElement;
+        "voa-card": HTMLVoaCardElement;
+        "voa-checkbox": HTMLVoaCheckboxElement;
+        "voa-container-multi-select": HTMLVoaContainerMultiSelectElement;
+        "voa-datepicker": HTMLVoaDatepickerElement;
+        "voa-drawer": HTMLVoaDrawerElement;
+        "voa-dropdown": HTMLVoaDropdownElement;
+        "voa-input": HTMLVoaInputElement;
+        "voa-input-addon": HTMLVoaInputAddonElement;
+        "voa-keybinding": HTMLVoaKeybindingElement;
+        "voa-link": HTMLVoaLinkElement;
+        "voa-list": HTMLVoaListElement;
+        "voa-modal": HTMLVoaModalElement;
+        "voa-option": HTMLVoaOptionElement;
+        "voa-pagination": HTMLVoaPaginationElement;
+        "voa-pagination-item": HTMLVoaPaginationItemElement;
+        "voa-progress": HTMLVoaProgressElement;
+        "voa-radio": HTMLVoaRadioElement;
+        "voa-select": HTMLVoaSelectElement;
+        "voa-select-base": HTMLVoaSelectBaseElement;
+        "voa-skeleton": HTMLVoaSkeletonElement;
+        "voa-stepper": HTMLVoaStepperElement;
+        "voa-switch": HTMLVoaSwitchElement;
+        "voa-tab": HTMLVoaTabElement;
+        "voa-tab-item": HTMLVoaTabItemElement;
+        "voa-table": HTMLVoaTableElement;
+        "voa-tag": HTMLVoaTagElement;
+        "voa-text-area": HTMLVoaTextAreaElement;
+        "voa-timepicker": HTMLVoaTimepickerElement;
+        "voa-tooltip": HTMLVoaTooltipElement;
+        "voa-tooltip-arrow": HTMLVoaTooltipArrowElement;
+        "voa-upload": HTMLVoaUploadElement;
+    }
+}
+declare namespace LocalJSX {
+    interface VoaAccordion {
+        /**
+          * Shows the top divider.
+          * @default true
+         */
+        "divider"?: boolean;
+        /**
+          * Emitted when the user interacts with the header. Payload: the requested new state (boolean).
+         */
+        "onVoaToggle"?: (event: VoaAccordionCustomEvent<boolean>) => void;
+        /**
+          * If true, the accordion is expanded.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Size variant.
+          * @default 'md'
+         */
+        "size"?: 'md' | 'lg';
+    }
+    /**
+     * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+     * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+     * Suporta variantes default (layout vertical) e inline (layout horizontal).
+     */
+    interface VoaAlert {
+        /**
+          * Título do alerta. Quando fornecido, será exibido como título principal. Para variant inline, apenas o título é exibido.
+         */
+        "alertTitle"?: string;
+        /**
+          * Determina se o alerta pode ser fechado pelo usuário.
+          * @default false
+         */
+        "closable"?: boolean;
+        /**
+          * Texto do rótulo para o botão de fechar, para acessibilidade. Padrão é "Fechar alerta".
+          * @default 'Fechar alerta'
+         */
+        "closeButtonLabel"?: string;
+        /**
+          * Descrição do alerta. Apenas exibida na variante default.
+         */
+        "description"?: string;
+        /**
+          * Evento emitido quando o alerta é dispensado (fechado).
+         */
+        "onVoaDismiss"?: (event: VoaAlertCustomEvent<void>) => void;
+        /**
+          * Evento emitido quando o botão primário é clicado.
+         */
+        "onVoaPrimaryClick"?: (event: VoaAlertCustomEvent<void>) => void;
+        /**
+          * Evento emitido quando o botão secundário é clicado.
+         */
+        "onVoaSecondaryClick"?: (event: VoaAlertCustomEvent<void>) => void;
+        /**
+          * Texto do botão primário. Só será exibido se showButtons for true.
+         */
+        "primaryButtonText"?: string;
+        /**
+          * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.
+         */
+        "secondaryButtonText"?: string;
+        /**
+          * Determina se os botões devem ser exibidos. Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido). Se false, os botões não serão exibidos, independente das outras props.
+          * @default false
+         */
+        "showButtons"?: boolean;
+        /**
+          * O tipo de alerta a ser exibido. Influencia a cor e o ícone. Padrão é 'info'.
+          * @default 'info'
+         */
+        "type"?: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info';
+        /**
+          * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal). Padrão é 'default'.
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'inline';
+    }
+    /**
+     * Componente Avatar do Voa Design System, baseado no design do Figma.
+     * Suporta exibição de ícone, iniciais ou imagem de perfil.
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaAvatar {
+        /**
+          * Texto alternativo para a imagem do avatar.
+         */
+        "alt"?: string;
+        /**
+          * As iniciais a serem exibidas quando type="initials".
+         */
+        "initials"?: string;
+        /**
+          * Tamanho do avatar. Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)
+          * @default 'md'
+         */
+        "size"?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        /**
+          * URL da imagem do avatar quando type="photo".
+         */
+        "src"?: string;
+        /**
+          * Tipo de avatar a ser exibido. - 'icon': Exibe um ícone de usuário padrão - 'photo': Exibe uma imagem (requer prop src) - 'initials': Exibe iniciais de texto (requer prop initials)
+          * @default 'icon'
+         */
+        "type"?: 'icon' | 'photo' | 'initials';
+    }
+    /**
+     * Badge component para exibir indicadores visuais como texto, contadores ou status.
+     * Baseado no design do Figma (node-id: 397-3352).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaBadge {
+        /**
+          * O número a ser exibido como contador (para variantes indicator e indicator-overlay)
+         */
+        "count"?: number;
+        /**
+          * O nome do ícone a ser exibido (para variantes icon-only e icons)
+         */
+        "icon"?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';
+        /**
+          * O texto a ser exibido no badge (mapeado do Figma como "label")
+         */
+        "label"?: string;
+        /**
+          * Forma do badge conforme design do Figma
+          * @default 'default'
+         */
+        "shape"?: 'default' | 'pill';
+        /**
+          * Tamanho do badge conforme design do Figma
+          * @default 'md'
+         */
+        "size"?: 'sm' | 'md';
+        /**
+          * A variante do badge conforme design do Figma
+          * @default 'plain'
+         */
+        "variant"?: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';
+    }
+    /**
+     * Componente de breadcrumbs (navegação estrutural).
+     * Baseado no design do Figma (node-id: 443-10022).
+     * *
+     */
+    interface VoaBreadcrumbs {
+        /**
+          * Variante visual do breadcrumb.
+          * @default 'default'
+         */
+        "type"?: 'default' | 'round' | 'outline';
+    }
+    /**
+     * Componente de divisor para breadcrumbs.
+     * Baseado no design do Figma (node-id: 443-9825).
+     * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaBreadcrumbsDivider {
+        /**
+          * Tipo de ícone a ser exibido como divisor. Mapeia as variantes do Figma: chevron, arrow, arrow-alt.
+          * @default 'chevron'
+         */
+        "icon"?: 'chevron' | 'arrow' | 'arrow-alt';
+    }
+    interface VoaBreadcrumbsItem {
+        /**
+          * Is this the current/active page?
+          * @default false
+         */
+        "active"?: boolean;
+        /**
+          * HREF destination. If provided, renders an anchor tag. If missing, renders a span (current page or static item).
+         */
+        "href"?: string;
+        /**
+          * Target for the link (e.g., _blank)
+         */
+        "target"?: string;
+    }
+    /**
+     * Botão principal do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaButton {
+        /**
+          * Rótulo ARIA para acessibilidade. Usado quando o botão não tem texto visível (apenas ícone).
+         */
+        "ariaLabel"?: string;
+        /**
+          * Se verdadeiro, o botão estará desabilitado.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * O texto exibido no botão. Pode ser fornecido via prop ou via slot padrão.
+         */
+        "label"?: string;
+        /**
+          * Se verdadeiro, o botão exibe um estado de carregamento (spinner) e desabilita interações.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * Evento emitido ao clicar no botão. Segue o padrão kebab-case: dsClick.
+         */
+        "onDsClick"?: (event: VoaButtonCustomEvent<void>) => void;
+        /**
+          * Tamanho do botão. Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).
+          * @default 'lg'
+         */
+        "size"?: 'sm' | 'md' | 'lg';
+        /**
+          * Tipo do botão HTML. Padrão é 'button' para evitar submissão de formulários.
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Variante visual do botão. Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link';
+    }
+    interface VoaCard {
+    }
+    /**
+     * Componente de checkbox que segue o design system VOA.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaCheckbox {
+        /**
+          * Se o checkbox está desabilitado.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Nome do checkbox para formulários.
+         */
+        "name"?: string;
+        /**
+          * Emitido quando o estado do checkbox muda. Segue o padrão kebab-case: dsChange.
+         */
+        "onDsChange"?: (event: VoaCheckboxCustomEvent<CheckboxState>) => void;
+        /**
+          * Se o label deve ser exibido.
+          * @default true
+         */
+        "showLabel"?: boolean;
+        /**
+          * State of the checkbox. active = checked inactive = unchecked indeterminate = partial/mixed
+          * @default 'inactive'
+         */
+        "state"?: CheckboxState;
+        /**
+          * Valor do checkbox para formulários.
+          * @default 'on'
+         */
+        "value"?: string;
+    }
+    /**
+     * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+     * Permite selecionar múltiplos itens dentro de um contêiner.
+     */
+    interface VoaContainerMultiSelect {
+        /**
+          * Se verdadeiro, o contêiner estará desabilitado.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Lista de itens para seleção
+          * @default []
+         */
+        "items"?: Array<{id: string, label: string, selected?: boolean}>;
+        /**
+          * Evento emitido quando a seleção é alterada
+         */
+        "onVoaSelectionChange"?: (event: VoaContainerMultiSelectCustomEvent<string[]>) => void;
+        /**
+          * Texto de placeholder quando não há itens selecionados
+          * @default 'Selecione os itens'
+         */
+        "placeholder"?: string;
+    }
+    interface VoaDatepicker {
+        "value"?: string;
+    }
+    interface VoaDrawer {
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+    }
+    interface VoaDropdown {
+        /**
+          * @default []
+         */
+        "options"?: string[];
+    }
+    /**
+     * Componente de input para entrada de dados do Voa Design System.
+     * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaInput {
+        /**
+          * Indica se o campo está desabilitado
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Indica se o campo está em estado de erro
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Variante de preenchimento (filled vs unfilled)
+          * @default true
+         */
+        "fill"?: boolean;
+        /**
+          * Texto auxiliar ou mensagem de erro
+         */
+        "helperText"?: string;
+        /**
+          * ID do elemento input
+         */
+        "inputId"?: string;
+        /**
+          * Texto do label
+         */
+        "label"?: string;
+        /**
+          * Nome do elemento input
+         */
+        "name"?: string;
+        /**
+          * Evento emitido quando o campo perde foco
+         */
+        "onDsBlur"?: (event: VoaInputCustomEvent<FocusEvent>) => void;
+        /**
+          * Evento emitido quando o valor é alterado
+         */
+        "onDsChange"?: (event: VoaInputCustomEvent<string>) => void;
+        /**
+          * Evento emitido quando o campo ganha foco
+         */
+        "onDsFocus"?: (event: VoaInputCustomEvent<FocusEvent>) => void;
+        /**
+          * Evento emitido durante a digitação
+         */
+        "onDsInput"?: (event: VoaInputCustomEvent<string>) => void;
+        /**
+          * Texto de placeholder
+         */
+        "placeholder"?: string;
+        /**
+          * Indica se o campo é somente leitura
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Indica se o campo é obrigatório
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Mostrar ícone de informação na área de info
+          * @default true
+         */
+        "showInfoIcon"?: boolean;
+        /**
+          * Tamanho do input
+          * @default 'md'
+         */
+        "size"?: 'sm' | 'md' | 'lg';
+        /**
+          * Tipo do input (text, password, email, search, tel, etc.)
+          * @default 'text'
+         */
+        "type"?: string;
+        /**
+          * Indica se o campo está em estado de sucesso
+          * @default false
+         */
+        "valid"?: boolean;
+        /**
+          * Valor do input
+          * @default ''
+         */
+        "value"?: string;
+        /**
+          * Indica se o campo está em estado de aviso
+          * @default false
+         */
+        "warning"?: boolean;
+    }
+    /**
+     * Componente Input-Addon para elementos auxiliares em inputs.
+     * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaInputAddon {
+        /**
+          * Texto do botão (para variante button)
+          * @default 'Procurar...'
+         */
+        "buttonLabel"?: string;
+        /**
+          * Código do país (para variante flags)
+          * @default 'BR +55'
+         */
+        "countryCode"?: string;
+        /**
+          * Símbolo da moeda (para variante currency-pre)
+          * @default 'R$'
+         */
+        "currency"?: string;
+        /**
+          * Nome da moeda (para variante currency-post)
+          * @default 'Real'
+         */
+        "currencyName"?: string;
+        /**
+          * Evento emitido quando o addon é clicado (para variantes interativas)
+         */
+        "onDsClick"?: (event: VoaInputAddonCustomEvent<void>) => void;
+        /**
+          * Plataforma do atalho (para variante shortcut)
+          * @default 'mac'
+         */
+        "platform"?: 'mac' | 'win';
+        /**
+          * Texto do label/prepend (para variantes label, select)
+          * @default 'http://'
+         */
+        "prependContent"?: string;
+        /**
+          * Tecla do atalho (para variante shortcut)
+          * @default 'S'
+         */
+        "shortcut"?: string;
+        /**
+          * Variante do addon
+          * @default 'label'
+         */
+        "variant"?: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post';
+    }
+    /**
+     * Componente Keybinding para exibir atalhos de teclado.
+     * Baseado no design do Figma, usado como subcomponente do input-addon.
+     * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     */
+    interface VoaKeybinding {
+        /**
+          * Plataforma do atalho (mac ou win)
+          * @default 'mac'
+         */
+        "platform"?: 'mac' | 'win';
+        /**
+          * A tecla do atalho (ex: "S", "K", "Enter")
+          * @default 'S'
+         */
+        "shortcut"?: string;
+    }
+    interface VoaLink {
+        "href"?: string;
+        /**
+          * @default "_self"
+         */
+        "target"?: string;
+    }
+    interface VoaList {
+        /**
+          * @default []
+         */
+        "items"?: string[];
+    }
+    interface VoaModal {
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+    }
+    /**
+     * Componente Option do Voa Design System - Radio Button Pattern
+     * Acts as a standalone radio option that can be used in a radio group.
+     * Manages internal checked state and syncs with Native Form API via ElementInternals.
+     */
+    interface VoaOption {
+        /**
+          * If true, this option is selected.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * If true, this option is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The label text displayed next to the radio indicator. If not provided, only the indicator is shown.
+         */
+        "label"?: string;
+        /**
+          * The name attribute for the radio group.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the user selects this option.
+         */
+        "onDsChange"?: (event: VoaOptionCustomEvent<string>) => void;
+        /**
+          * The value returned when this option is selected.
+         */
+        "value"?: string;
+    }
+    interface VoaPagination {
+        /**
+          * @default 1
+         */
+        "currentPage"?: number;
+        "onVoaPageChange"?: (event: VoaPaginationCustomEvent<number>) => void;
+        /**
+          * How many siblings to show around the current page. E.g., siblingCount=1 means: ... 4 [5] 6 ...
+          * @default 1
+         */
+        "siblingCount"?: number;
+        /**
+          * @default 1
+         */
+        "totalPages"?: number;
+    }
+    interface VoaPaginationItem {
+        /**
+          * Is this the current active page?
+          * @default false
+         */
+        "active"?: boolean;
+        /**
+          * Is this item disabled?
+          * @default false
+         */
+        "disabled"?: boolean;
+        "onItemClick"?: (event: VoaPaginationItemCustomEvent<void>) => void;
+        /**
+          * The type of item to render. - page: A standard page number - ellipsis: The "..." separator - prev/next: Navigation arrows
+          * @default 'page'
+         */
+        "type"?: 'page' | 'ellipsis' | 'prev' | 'next';
+    }
+    interface VoaProgress {
+        /**
+          * @default 0
+         */
+        "value"?: number;
+    }
+    /**
+     * Componente Radio Button do Voa Design System, baseado no design do Figma.
+     * Permite seleção única dentro de um grupo de opções.
+     * Este é o componente base do radio (apenas o indicador visual).
+     * Para opções com label, use o componente voa-option.
+     */
+    interface VoaRadio {
+        /**
+          * Se verdadeiro, o radio button estará selecionado.
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Se verdadeiro, o radio button estará desabilitado.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Nome do grupo de radio buttons (usado para agrupamento).
+         */
+        "name"?: string;
+        /**
+          * Evento emitido quando o radio button perde foco.
+         */
+        "onRadioBlur"?: (event: VoaRadioCustomEvent<void>) => void;
+        /**
+          * Evento emitido quando o estado do radio button muda.
+         */
+        "onRadioChange"?: (event: VoaRadioCustomEvent<{ checked: boolean; value: string; name: string }>) => void;
+        /**
+          * Evento emitido quando o radio button recebe foco.
+         */
+        "onRadioFocus"?: (event: VoaRadioCustomEvent<void>) => void;
+        /**
+          * Valor do radio button quando selecionado.
+         */
+        "value"?: string;
+    }
+    /**
+     * Componente Select principal do Voa Design System, baseado no design do Figma.
+     * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+     * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+     */
+    interface VoaSelect {
+        /**
+          * Se verdadeiro, o select estará desabilitado
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Se verdadeiro, o select terá estado de erro
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Mensagem de erro exibida abaixo do input
+         */
+        "errorMessage"?: string;
+        /**
+          * Se verdadeiro, a informação adicional será exibida
+          * @default false
+         */
+        "info"?: boolean;
+        /**
+          * Mensagem de informação adicional
+         */
+        "infoMessage"?: string;
+        /**
+          * Texto do label exibido acima do input
+         */
+        "label"?: string;
+        /**
+          * Evento emitido quando o valor é alterado
+         */
+        "onVoaSelectChange"?: (event: VoaSelectCustomEvent<string>) => void;
+        /**
+          * Lista de opções para seleção
+          * @default []
+         */
+        "options"?: Array<{value: string, label: string, disabled?: boolean}>;
+        /**
+          * Texto de placeholder
+          * @default 'Placeholder'
+         */
+        "placeholder"?: string;
+        /**
+          * Se verdadeiro, o label será exibido
+          * @default true
+         */
+        "showLabel"?: boolean;
+        /**
+          * Tipo de seleção: 'simple' para seleção única NOTA: 'multi' está temporariamente desabilitado até implementação correta
+          * @default 'simple'
+         */
+        "type"?: 'simple';
+        /**
+          * THE TRUTH. Read-only from parent.
+         */
+        "value"?: string;
+    }
+    /**
+     * Componente Base para Select do Voa Design System, baseado no design do Figma.
+     */
+    interface VoaSelectBase {
+        /**
+          * Se verdadeiro, o select estará desabilitado.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Se verdadeiro, o select terá estado de erro.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * Evento emitido quando o valor é alterado
+         */
+        "onVoaChange"?: (event: VoaSelectBaseCustomEvent<string>) => void;
+        /**
+          * Lista de opções para seleção
+          * @default []
+         */
+        "options"?: Array<{ value: string, label: string, disabled?: boolean }>;
+        /**
+          * Texto de placeholder quando não há item selecionado
+          * @default 'Select an option'
+         */
+        "placeholder"?: string;
+        /**
+          * THE TRUTH. Read-only from parent.
+         */
+        "value"?: string;
+    }
+    interface VoaSkeleton {
+        /**
+          * @default "100px"
+         */
+        "height"?: string;
+        "variant"?: "text" | "circle";
+        /**
+          * @default "200px"
+         */
+        "width"?: string;
+    }
+    interface VoaStepper {
+        /**
+          * @default 0
+         */
+        "currentStep"?: number;
+        "onStepChanged"?: (event: VoaStepperCustomEvent<number>) => void;
+        /**
+          * @default []
+         */
+        "steps"?: string[];
+    }
+    interface VoaSwitch {
+        /**
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "name"?: string;
+        "onDsChange"?: (event: VoaSwitchCustomEvent<boolean>) => void;
+        /**
+          * @default false
+         */
+        "showLabel"?: boolean;
+        /**
+          * @default 'on'
+         */
+        "value"?: string;
+    }
+    interface VoaTab {
+        /**
+          * Controlled mode active index.
+         */
+        "activeIndex"?: number;
+        /**
+          * @default 'horizontal'
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Event emitted when the active tab changes.
+         */
+        "onDsTabChange"?: (event: VoaTabCustomEvent<{ index: number }>) => void;
+    }
+    /**
+     * Item individual de tab do Voa Design System.
+     * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+     * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * *
+     */
+    interface VoaTabItem {
+        /**
+          * Número a ser exibido no badge (opcional). Se não fornecido e showBadge=true, exibe "0".
+         */
+        "badgeCount"?: number;
+        /**
+          * Se verdadeiro, o item estará desabilitado. Alias para state="disabled".
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Índice do item (gerenciado pelo componente pai voa-tab). Usado internamente para identificação.
+         */
+        "itemIndex"?: number;
+        /**
+          * Evento emitido quando o tab é clicado. O pai (voa-tab) escuta isso para gerenciar a seleção.
+         */
+        "onTabClick"?: (event: VoaTabItemCustomEvent<void>) => void;
+        /**
+          * Posição do indicador de ativo (borda). Mapeia as posições do Figma: Default (bottom), Top, Right, Left.
+          * @default 'default'
+         */
+        "position"?: 'default' | 'top' | 'right' | 'left';
+        /**
+          * Se verdadeiro, exibe um badge no item.
+          * @default false
+         */
+        "showBadge"?: boolean;
+        /**
+          * Estado do item de tab. Mapeia os estados do Figma: Active, Default, Disabled.
+          * @default 'default'
+         */
+        "state"?: 'active' | 'default' | 'disabled';
+    }
+    interface VoaTable {
+        /**
+          * @default []
+         */
+        "columns"?: string[];
+        /**
+          * @default []
+         */
+        "data"?: any[];
+    }
+    /**
+     * Tag component para exibir labels categorizadores, status ou metadados.
+     * Baseado no design do Figma (node-id: 1436-769).
+     * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+     * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     */
+    interface VoaTag {
+        /**
+          * Exibe o ícone à esquerda (apenas se variant="icons")
+          * @default false
+         */
+        "iconLeft"?: boolean;
+        /**
+          * Exibe o ícone à direita (apenas se variant="icons")
+          * @default false
+         */
+        "iconRight"?: boolean;
+        /**
+          * O texto a ser exibido no tag
+         */
+        "label"?: string;
+        /**
+          * Forma do tag
+          * @default 'default'
+         */
+        "shape"?: 'default' | 'pill';
+        /**
+          * Tamanho do tag
+          * @default 'md'
+         */
+        "size"?: 'sm' | 'md';
+        /**
+          * A variante do tag
+          * @default 'plain'
+         */
+        "variant"?: 'plain' | 'icons';
+    }
+    /**
+     * Componente de área de texto para entrada de textos longos
+     */
+    interface VoaTextArea {
+        /**
+          * @default 20
+         */
+        "cols"?: number;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "errorMessage"?: string;
+        /**
+          * @default false
+         */
+        "hasError"?: boolean;
+        /**
+          * @default false
+         */
+        "info"?: boolean;
+        /**
+          * @default 'Identificador único'
+         */
+        "infoText"?: string;
+        "label"?: string;
+        "maxLength"?: number;
+        "name"?: string;
+        "onVoaBlur"?: (event: VoaTextAreaCustomEvent<FocusEvent>) => void;
+        "onVoaChange"?: (event: VoaTextAreaCustomEvent<string>) => void;
+        "onVoaFocus"?: (event: VoaTextAreaCustomEvent<FocusEvent>) => void;
+        "onVoaInput"?: (event: VoaTextAreaCustomEvent<string>) => void;
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * @default 4
+         */
+        "rows"?: number;
+        "textareaId"?: string;
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface VoaTimepicker {
+        "value"?: string;
+    }
+    /**
+     * Tooltip component do Voa Design System, baseado no design do Figma.
+     * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+     * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+     * @example <voa-tooltip position="top" theme="spot" text="Hello World">
+     *   <span slot="icon">⚠️</span>
+     * </voa-tooltip>
+     */
+    interface VoaTooltip {
+        /**
+          * Rótulo ARIA para acessibilidade. Usado para descrever o tooltip para leitores de tela.
+         */
+        "ariaLabel"?: string;
+        /**
+          * Se verdadeiro, exibe o slot de ícone. Baseado na prop `icon` do design do Figma.
+          * @default true
+         */
+        "icon"?: boolean;
+        /**
+          * Posição da seta do tooltip. Mapeia as posições do Figma: top, bottom, left, right.
+          * @default 'bottom'
+         */
+        "position"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Texto do tooltip. Pode ser fornecido via prop ou via slot padrão.
+          * @default 'Body text'
+         */
+        "text"?: string;
+        /**
+          * Tema de cor do tooltip. Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.
+          * @default 'default'
+         */
+        "theme"?: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange';
+    }
+    /**
+     * Subcomponente de seta (arrow) para o VoaTooltip.
+     * Cria uma seta triangular apontando na direção especificada.
+     * A seta é implementada usando CSS border trick para criar um triângulo,
+     * permitindo colorização dinâmica via CSS variables.
+     */
+    interface VoaTooltipArrow {
+        /**
+          * Posição da seta. Determina em qual direção a seta aponta.
+          * @default 'bottom'
+         */
+        "position"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Tema de cor da seta. A cor da seta será mapeada via CSS variables baseadas no tema.
+          * @default 'default'
+         */
+        "theme"?: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange';
+    }
+    interface VoaUpload {
+    }
+    interface IntrinsicElements {
+        "voa-accordion": VoaAccordion;
+        "voa-alert": VoaAlert;
+        "voa-avatar": VoaAvatar;
+        "voa-badge": VoaBadge;
+        "voa-breadcrumbs": VoaBreadcrumbs;
+        "voa-breadcrumbs-divider": VoaBreadcrumbsDivider;
+        "voa-breadcrumbs-item": VoaBreadcrumbsItem;
+        "voa-button": VoaButton;
+        "voa-card": VoaCard;
+        "voa-checkbox": VoaCheckbox;
+        "voa-container-multi-select": VoaContainerMultiSelect;
+        "voa-datepicker": VoaDatepicker;
+        "voa-drawer": VoaDrawer;
+        "voa-dropdown": VoaDropdown;
+        "voa-input": VoaInput;
+        "voa-input-addon": VoaInputAddon;
+        "voa-keybinding": VoaKeybinding;
+        "voa-link": VoaLink;
+        "voa-list": VoaList;
+        "voa-modal": VoaModal;
+        "voa-option": VoaOption;
+        "voa-pagination": VoaPagination;
+        "voa-pagination-item": VoaPaginationItem;
+        "voa-progress": VoaProgress;
+        "voa-radio": VoaRadio;
+        "voa-select": VoaSelect;
+        "voa-select-base": VoaSelectBase;
+        "voa-skeleton": VoaSkeleton;
+        "voa-stepper": VoaStepper;
+        "voa-switch": VoaSwitch;
+        "voa-tab": VoaTab;
+        "voa-tab-item": VoaTabItem;
+        "voa-table": VoaTable;
+        "voa-tag": VoaTag;
+        "voa-text-area": VoaTextArea;
+        "voa-timepicker": VoaTimepicker;
+        "voa-tooltip": VoaTooltip;
+        "voa-tooltip-arrow": VoaTooltipArrow;
+        "voa-upload": VoaUpload;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "voa-accordion": LocalJSX.VoaAccordion & JSXBase.HTMLAttributes<HTMLVoaAccordionElement>;
+            /**
+             * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+             * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+             * Suporta variantes default (layout vertical) e inline (layout horizontal).
+             */
+            "voa-alert": LocalJSX.VoaAlert & JSXBase.HTMLAttributes<HTMLVoaAlertElement>;
+            /**
+             * Componente Avatar do Voa Design System, baseado no design do Figma.
+             * Suporta exibição de ícone, iniciais ou imagem de perfil.
+             * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+             * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-avatar": LocalJSX.VoaAvatar & JSXBase.HTMLAttributes<HTMLVoaAvatarElement>;
+            /**
+             * Badge component para exibir indicadores visuais como texto, contadores ou status.
+             * Baseado no design do Figma (node-id: 397-3352).
+             * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+             * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-badge": LocalJSX.VoaBadge & JSXBase.HTMLAttributes<HTMLVoaBadgeElement>;
+            /**
+             * Componente de breadcrumbs (navegação estrutural).
+             * Baseado no design do Figma (node-id: 443-10022).
+             * *
+             */
+            "voa-breadcrumbs": LocalJSX.VoaBreadcrumbs & JSXBase.HTMLAttributes<HTMLVoaBreadcrumbsElement>;
+            /**
+             * Componente de divisor para breadcrumbs.
+             * Baseado no design do Figma (node-id: 443-9825).
+             * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+             * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-breadcrumbs-divider": LocalJSX.VoaBreadcrumbsDivider & JSXBase.HTMLAttributes<HTMLVoaBreadcrumbsDividerElement>;
+            "voa-breadcrumbs-item": LocalJSX.VoaBreadcrumbsItem & JSXBase.HTMLAttributes<HTMLVoaBreadcrumbsItemElement>;
+            /**
+             * Botão principal do Voa Design System, baseado no design do Figma.
+             * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-button": LocalJSX.VoaButton & JSXBase.HTMLAttributes<HTMLVoaButtonElement>;
+            "voa-card": LocalJSX.VoaCard & JSXBase.HTMLAttributes<HTMLVoaCardElement>;
+            /**
+             * Componente de checkbox que segue o design system VOA.
+             * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-checkbox": LocalJSX.VoaCheckbox & JSXBase.HTMLAttributes<HTMLVoaCheckboxElement>;
+            /**
+             * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+             * Permite selecionar múltiplos itens dentro de um contêiner.
+             */
+            "voa-container-multi-select": LocalJSX.VoaContainerMultiSelect & JSXBase.HTMLAttributes<HTMLVoaContainerMultiSelectElement>;
+            "voa-datepicker": LocalJSX.VoaDatepicker & JSXBase.HTMLAttributes<HTMLVoaDatepickerElement>;
+            "voa-drawer": LocalJSX.VoaDrawer & JSXBase.HTMLAttributes<HTMLVoaDrawerElement>;
+            "voa-dropdown": LocalJSX.VoaDropdown & JSXBase.HTMLAttributes<HTMLVoaDropdownElement>;
+            /**
+             * Componente de input para entrada de dados do Voa Design System.
+             * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-input": LocalJSX.VoaInput & JSXBase.HTMLAttributes<HTMLVoaInputElement>;
+            /**
+             * Componente Input-Addon para elementos auxiliares em inputs.
+             * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+             * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-input-addon": LocalJSX.VoaInputAddon & JSXBase.HTMLAttributes<HTMLVoaInputAddonElement>;
+            /**
+             * Componente Keybinding para exibir atalhos de teclado.
+             * Baseado no design do Figma, usado como subcomponente do input-addon.
+             * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             */
+            "voa-keybinding": LocalJSX.VoaKeybinding & JSXBase.HTMLAttributes<HTMLVoaKeybindingElement>;
+            "voa-link": LocalJSX.VoaLink & JSXBase.HTMLAttributes<HTMLVoaLinkElement>;
+            "voa-list": LocalJSX.VoaList & JSXBase.HTMLAttributes<HTMLVoaListElement>;
+            "voa-modal": LocalJSX.VoaModal & JSXBase.HTMLAttributes<HTMLVoaModalElement>;
+            /**
+             * Componente Option do Voa Design System - Radio Button Pattern
+             * Acts as a standalone radio option that can be used in a radio group.
+             * Manages internal checked state and syncs with Native Form API via ElementInternals.
+             */
+            "voa-option": LocalJSX.VoaOption & JSXBase.HTMLAttributes<HTMLVoaOptionElement>;
+            "voa-pagination": LocalJSX.VoaPagination & JSXBase.HTMLAttributes<HTMLVoaPaginationElement>;
+            "voa-pagination-item": LocalJSX.VoaPaginationItem & JSXBase.HTMLAttributes<HTMLVoaPaginationItemElement>;
+            "voa-progress": LocalJSX.VoaProgress & JSXBase.HTMLAttributes<HTMLVoaProgressElement>;
+            /**
+             * Componente Radio Button do Voa Design System, baseado no design do Figma.
+             * Permite seleção única dentro de um grupo de opções.
+             * Este é o componente base do radio (apenas o indicador visual).
+             * Para opções com label, use o componente voa-option.
+             */
+            "voa-radio": LocalJSX.VoaRadio & JSXBase.HTMLAttributes<HTMLVoaRadioElement>;
+            /**
+             * Componente Select principal do Voa Design System, baseado no design do Figma.
+             * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+             * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+             */
+            "voa-select": LocalJSX.VoaSelect & JSXBase.HTMLAttributes<HTMLVoaSelectElement>;
+            /**
+             * Componente Base para Select do Voa Design System, baseado no design do Figma.
+             */
+            "voa-select-base": LocalJSX.VoaSelectBase & JSXBase.HTMLAttributes<HTMLVoaSelectBaseElement>;
+            "voa-skeleton": LocalJSX.VoaSkeleton & JSXBase.HTMLAttributes<HTMLVoaSkeletonElement>;
+            "voa-stepper": LocalJSX.VoaStepper & JSXBase.HTMLAttributes<HTMLVoaStepperElement>;
+            "voa-switch": LocalJSX.VoaSwitch & JSXBase.HTMLAttributes<HTMLVoaSwitchElement>;
+            "voa-tab": LocalJSX.VoaTab & JSXBase.HTMLAttributes<HTMLVoaTabElement>;
+            /**
+             * Item individual de tab do Voa Design System.
+             * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+             * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             * *
+             */
+            "voa-tab-item": LocalJSX.VoaTabItem & JSXBase.HTMLAttributes<HTMLVoaTabItemElement>;
+            "voa-table": LocalJSX.VoaTable & JSXBase.HTMLAttributes<HTMLVoaTableElement>;
+            /**
+             * Tag component para exibir labels categorizadores, status ou metadados.
+             * Baseado no design do Figma (node-id: 1436-769).
+             * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+             * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             */
+            "voa-tag": LocalJSX.VoaTag & JSXBase.HTMLAttributes<HTMLVoaTagElement>;
+            /**
+             * Componente de área de texto para entrada de textos longos
+             */
+            "voa-text-area": LocalJSX.VoaTextArea & JSXBase.HTMLAttributes<HTMLVoaTextAreaElement>;
+            "voa-timepicker": LocalJSX.VoaTimepicker & JSXBase.HTMLAttributes<HTMLVoaTimepickerElement>;
+            /**
+             * Tooltip component do Voa Design System, baseado no design do Figma.
+             * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+             * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+             * @example <voa-tooltip position="top" theme="spot" text="Hello World">
+             *   <span slot="icon">⚠️</span>
+             * </voa-tooltip>
+             */
+            "voa-tooltip": LocalJSX.VoaTooltip & JSXBase.HTMLAttributes<HTMLVoaTooltipElement>;
+            /**
+             * Subcomponente de seta (arrow) para o VoaTooltip.
+             * Cria uma seta triangular apontando na direção especificada.
+             * A seta é implementada usando CSS border trick para criar um triângulo,
+             * permitindo colorização dinâmica via CSS variables.
+             */
+            "voa-tooltip-arrow": LocalJSX.VoaTooltipArrow & JSXBase.HTMLAttributes<HTMLVoaTooltipArrowElement>;
+            "voa-upload": LocalJSX.VoaUpload & JSXBase.HTMLAttributes<HTMLVoaUploadElement>;
+        }
+    }
+}