voa-ds-core 1.0.4 → 1.0.5

package/dist/styles/voa-components.css

@@ -0,0 +1,4839 @@
+/**
+ * VOA Design System - Consolidated Component Styles
+ *
+ *
+ * IMPORTANTE: Importe este arquivo APÓS os tokens:
+ * @import 'voa-ds-core/dist/voa/voa.css';
+ * @import 'voa-ds-core/components';
+ *
+ * Versão: 1.0.5
+ * Gerado automaticamente em: 2026-01-26T14:04:55.923Z
+ */
+
+
+/* ============================================
+   voa-accordion.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaAccordion
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-accordion
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-201
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * ============================================
+ * ARQUITETURA DE ANIMAÇÃO
+ * ============================================
+ * 
+ * Este componente segue a filosofia "Headless" onde:
+ * - Stencil fornece a MECÂNICA (estado, estrutura Grid)
+ * - Consumidor fornece a MOTION (timing, easing, comportamento)
+ * 
+ * TÉCNICA: CSS Grid Trick
+ * - Usa grid-template-rows: 0fr → 1fr para animar altura
+ * - Permite animação suave de altura 0 para auto
+ * - Mais performático que max-height ou height
+ * 
+ * TIMING:
+ * - Conteúdo: 250ms cubic-bezier(0.4, 0, 0.2, 1) - Material Design easing
+ * - Ícone: 200ms cubic-bezier(0.4, 0, 0.2, 1) - Interação rápida
+ * - Header: 200ms cubic-bezier(0.4, 0, 0.2, 1) - Hover suave
+ * 
+ * ACESSIBILIDADE:
+ * - Suporta prefers-reduced-motion para usuários sensíveis a movimento
+ * - Remove todas as animações quando reduzido é preferido
+ * 
+ * CUSTOMIZAÇÃO:
+ * - Consumidor pode sobrescrever timing via CSS Parts
+ * - Consumidor pode adicionar diferentes tipos de animação (slide, fade, etc.)
+ * - Consumidor controla acessibilidade globalmente
+ */
+
+/* ============================================
+   BASE - Container principal do accordion
+   ============================================ */
+voa-accordion::part(base) {
+  /* Background - Semantic Token */
+  background-color: var(--structure-colors-bg-base);
+
+  /* Padding do container - Semantic Token */
+  padding: var(--structure-large-spacing-sm);
+
+  /* Gap entre header e content (5px conforme Figma) */
+  gap: 5px;
+
+  /* Border quando divider=true */
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+/* Aplicar border-top quando divider=true */
+voa-accordion[divider]::part(base) {
+  border-top: 1px solid var(--structure-colors-border-color-secondary);
+}
+
+/* ============================================
+   HEADER - Botão clicável do cabeçalho
+   ============================================ */
+voa-accordion::part(header) {
+  /* Reset de estilos do botão */
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  /* Tipografia do header (herdada do title) */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+
+  /* Cursor pointer */
+  cursor: pointer;
+
+  /* Transição suave para hover - Matches design system pattern */
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+voa-accordion::part(header):hover {
+  opacity: 0.8;
+}
+
+voa-accordion::part(header):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ============================================
+   HEADER-CONTENT - Container flex do header
+   ============================================ */
+/* Layout flex já definido no CSS estrutural */
+/* Padding horizontal apenas para size=lg (definido abaixo) */
+
+/* Padding horizontal para size=lg */
+voa-accordion[size="lg"]::part(header-content) {
+  padding-inline: var(--structure-large-spacing-sm);
+}
+
+/* ============================================
+   TITLE - Texto do título
+   ============================================ */
+voa-accordion::part(title) {
+  /* Tipografia: 16px, SemiBold (600), line-height 24px */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: 24px;
+
+  /* Cor do texto - Semantic Token */
+  color: var(--text-primary);
+
+  /* Espaçamento */
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   ICON - Ícone expand/collapse
+   ============================================ */
+voa-accordion::part(icon) {
+  /* Cor do ícone - Semantic Token */
+  color: var(--text-primary);
+
+  /* Tamanho fixo 16x16px */
+  width: 16px;
+  height: 16px;
+
+  /* Transição suave para rotação - Consumer controls timing
+     Matches design system pattern: 200ms for quick interactions */
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Rotação do ícone quando aberto (opcional, para melhor UX) */
+voa-accordion[open]::part(icon) {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   CONTENT - Container do conteúdo expansível
+   ============================================ */
+voa-accordion::part(content) {
+  /* Tipografia do conteúdo: 14px, Regular (400), line-height 16px */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+
+  /* Cor do texto - Semantic Token */
+  color: var(--text-primary);
+
+  /* Padding padrão (size=md) */
+  padding: 0;
+
+  /* ANIMATION: The visual transition logic lives here.
+     Consumer controls timing, easing, and behavior.
+     
+     Using Material Design-inspired easing for smooth height transitions:
+     - Height animation: 250ms with ease-out for natural deceleration
+     - Opacity: synchronized with height for smooth fade effect
+     - Matches design system patterns (similar to switch/button timing) */
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
+
+/* Padding para size=lg conforme Figma */
+voa-accordion[size="lg"]::part(content) {
+  padding-inline: var(--structure-large-spacing-sm);
+  padding-block: var(--structure-large-radius-xl);
+}
+
+/* Espaçamento interno do conteúdo */
+voa-accordion::part(content)>* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Espaçamento entre parágrafos no conteúdo */
+voa-accordion::part(content)>*+* {
+  margin-top: var(--structure-large-spacing-xs);
+}
+
+/* ============================================
+   ESTADOS E VARIAÇÕES - ANIMAÇÃO
+   ============================================ */
+
+/* Accordion fechado - anima para altura 0
+   Usa múltiplos seletores para garantir compatibilidade
+   com diferentes formas de controle de estado */
+voa-accordion:not([open])::part(content),
+voa-accordion.voa-accordion--closed::part(content) {
+  /* Grid trick: 0fr = altura zero, permitindo animação suave */
+  grid-template-rows: 0fr;
+  /* Opacidade zero para fade out suave */
+  opacity: 0;
+  /* Garante que o conteúdo não seja interativo quando fechado */
+  pointer-events: none;
+}
+
+/* Accordion aberto - anima para altura auto (1fr) */
+voa-accordion[open]::part(content),
+voa-accordion.voa-accordion--open::part(content) {
+  /* Grid trick: 1fr = altura automática baseada no conteúdo */
+  grid-template-rows: 1fr;
+  /* Opacidade total para fade in suave */
+  opacity: 1;
+  /* Restaura interatividade quando aberto */
+  pointer-events: auto;
+}
+
+/* ============================================
+   ACESSIBILIDADE
+   ============================================ */
+
+/* Focus visível para navegação por teclado */
+voa-accordion::part(header):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ============================================
+   ACESSIBILIDADE - PREFERS REDUCED MOTION
+   ============================================ */
+
+/* Prefers Reduced Motion - Mandatory for accessibility
+   Disables animations for users who prefer reduced motion.
+   This ensures the component remains accessible to users with
+   vestibular disorders or motion sensitivity. */
+@media (prefers-reduced-motion: reduce) {
+  /* Remove todas as transições de animação */
+  voa-accordion::part(content) {
+    transition: none;
+    /* Mantém estados visuais, apenas remove animação */
+  }
+  
+  voa-accordion::part(icon) {
+    transition: none;
+  }
+  
+  voa-accordion::part(header) {
+    transition: none;
+  }
+  
+  /* Garante que o estado final seja aplicado imediatamente */
+  voa-accordion:not([open])::part(content),
+  voa-accordion.voa-accordion--closed::part(content) {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  
+  voa-accordion[open]::part(content),
+  voa-accordion.voa-accordion--open::part(content) {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   EXEMPLOS DE CUSTOMIZAÇÃO
+   ============================================ */
+
+/* Exemplo: Accordion com cor de fundo customizada */
+/*
+voa-accordion.custom-bg::part(base) {
+  background-color: var(--structure-colors-bg-container, #f5f5f5);
+}
+*/
+
+/* Exemplo: Accordion com espaçamento customizado */
+/*
+voa-accordion.custom-spacing::part(base) {
+  padding: var(--structure-large-spacing-md, 1rem);
+  gap: var(--spacing-spacing-sm, 0.5rem);
+}
+*/
+
+/* Exemplo: Accordion com tipografia customizada */
+/*
+voa-accordion.custom-typography::part(title) {
+  font-size: var(--typography-base-type-scale-5, 20px);
+  font-weight: var(--typography-base-type-scale-4-weight, 700);
+}
+*/
+
+/* ============================================
+   voa-alert.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaAlert
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-alert
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2706
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * */
+
+/* ============================================
+   BASE - Container principal do alert
+   ============================================ */
+voa-alert::part(base) {
+  /* Border radius padrão - Semantic Token */
+  border-radius: var(--radius-sm);
+  
+  /* Border - Separado em propriedades explícitas para permitir override apenas da cor */
+  border-width: 1.5px;
+  border-style: solid;
+  /* Cor padrão da borda - será sobrescrita por regras específicas de tipo */
+  border-color: var(--structure-colors-border-color);
+  
+  /* Padding padrão para variant default - Semantic Token */
+  padding: var(--spacing-spacing-md);
+  
+  /* Gap entre conteúdo e botões - Semantic Token */
+  gap: var(--spacing-spacing-md, 1rem);
+}
+
+/* Variante inline: padding e border-radius diferentes */
+voa-alert[variant="inline"]::part(base) {
+  /* Padding inline: 20px horizontal, 14px vertical - conforme Figma */
+  padding: var(--spacing-spacing-lg, 14px) var(--spacing-spacing-xl, 20px);
+  border-radius: var(--radius-md);
+  /* Gap entre elementos na variante inline - Figma especifica 10px */
+  gap: 10px;
+}
+
+/* ============================================
+   CORES POR TIPO - Background e Border
+   ============================================ */
+
+/* Basic */
+voa-alert[type="basic"]::part(base) {
+  background-color: var(--structure-colors-bg-container);
+  border-color: var(--structure-colors-border-color);
+}
+
+/* Success */
+voa-alert[type="success"]::part(base) {
+  background-color: var(--palette-green-green-2);
+  border-color: var(--palette-green-green-4);
+}
+
+/* Info */
+voa-alert[type="info"]::part(base) {
+  background-color: var(--palette-blue-blue-2);
+  border-color: var(--palette-blue-blue-3);
+}
+
+/* Warning */
+voa-alert[type="warning"]::part(base) {
+  background-color: var(--palette-yellow-yellow-2);
+  border-color: var(--palette-yellow-yellow-4);
+}
+
+/* Warning Inline */
+voa-alert[type="warning-inline"]::part(base) {
+  background-color: var(--palette-yellow-yellow-1);
+  border-color: var(--palette-yellow-yellow-4);
+}
+
+/* Error */
+voa-alert[type="error"]::part(base) {
+  background-color: var(--palette-red-red-2);
+  border-color: var(--palette-red-red-4);
+}
+
+/* Variante inline - ajustes de border para alguns tipos */
+voa-alert[variant="inline"][type="info"]::part(base) {
+  border-color: var(--palette-blue-blue-4);
+}
+
+voa-alert[variant="inline"][type="success"]::part(base) {
+  border-color: var(--palette-green-green-3);
+}
+
+voa-alert[variant="inline"][type="error"]::part(base) {
+  border-color: var(--palette-red-red-5);
+}
+
+/* ============================================
+   CONTENT-WRAPPER - Wrapper do conteúdo principal
+   ============================================ */
+voa-alert::part(content-wrapper) {
+  /* Gap entre ícone e conteúdo - Figma especifica 16px (radius-lg) */
+  gap: var(--radius-lg, 16px);
+}
+
+voa-alert[variant="inline"]::part(content-wrapper) {
+  /* Gap entre ícone e conteúdo na variante inline - Figma especifica 10px */
+  gap: 10px;
+}
+
+/* ============================================
+   ICON - Container do ícone
+   ============================================ */
+voa-alert::part(icon) {
+  /* Tamanho do ícone para variant default */
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  
+  /* Cor do ícone - será definida por tipo */
+  color: currentColor;
+}
+
+voa-alert[variant="inline"]::part(icon) {
+  /* Tamanho do ícone para variant inline */
+  width: 20px;
+  height: 20px;
+}
+
+/* Cores dos ícones por tipo - Semantic Tokens quando disponíveis */
+voa-alert[type="success"]::part(icon),
+voa-alert[type="success"]::part(icon) svg {
+  color: var(--semantic-colors-success);
+}
+
+voa-alert[type="info"]::part(icon),
+voa-alert[type="info"]::part(icon) svg {
+  color: var(--palette-blue-blue-9);
+}
+
+voa-alert[type="warning"]::part(icon),
+voa-alert[type="warning"]::part(icon) svg,
+voa-alert[type="warning-inline"]::part(icon),
+voa-alert[type="warning-inline"]::part(icon) svg {
+  color: var(--palette-yellow-yellow-9);
+}
+
+voa-alert[type="error"]::part(icon),
+voa-alert[type="error"]::part(icon) svg {
+  color: var(--palette-red-red-9);
+}
+
+voa-alert[type="basic"]::part(icon),
+voa-alert[type="basic"]::part(icon) svg {
+  color: var(--palette-gray-gray-6);
+}
+
+/* ============================================
+   CONTENT - Container do conteúdo
+   ============================================ */
+voa-alert::part(content) {
+  /* Flex para layout vertical (default) ou horizontal (inline) */
+  flex: 1;
+  
+  /* Tipografia base - Design Token */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  color: var(--text-primary);
+}
+
+/* ============================================
+   TITLE - Título do alerta
+   ============================================ */
+voa-alert::part(title) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: var(--line-height-body-md, 24px);
+  color: var(--text-primary);
+  
+  /* Margin */
+  margin: 0;
+}
+
+voa-alert[variant="inline"]::part(title) {
+  /* Tipografia inline - menor */
+  font-size: var(--typography-base-type-scale-7, 14px);
+  line-height: var(--line-height-body-sm, 16px);
+}
+
+/* ============================================
+   DESCRIPTION - Descrição do alerta
+   ============================================ */
+voa-alert::part(description) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--text-secondary);
+  
+  /* Espaçamento do título - Semantic Token */
+  margin-top: var(--spacing-spacing-xs, 4px);
+  margin-bottom: 0;
+}
+
+/* ============================================
+   CONTENT-INNER - Wrapper interno do conteúdo
+   ============================================ */
+voa-alert::part(content-inner) {
+  /* Layout flex vertical para título e descrição */
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* Gap será controlado via margin-top na descrição */
+}
+
+/* ============================================
+   CLOSE-BUTTON - Botão de fechar
+   ============================================ */
+voa-alert::part(close-button) {
+  /* Tamanho do ícone de fechar para variant default */
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  
+  /* Cor do ícone de fechar - Primitive Token (não há token semântico para isso) */
+  color: var(--palette-gray-gray-6);
+  
+  /* Hover */
+  transition: opacity 0.2s ease;
+}
+
+voa-alert::part(close-button):hover {
+  opacity: 0.7;
+}
+
+voa-alert::part(close-button):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+voa-alert[variant="inline"]::part(close-button) {
+  /* Tamanho do ícone de fechar para variant inline */
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   ACTIONS - Container dos botões de ação
+   ============================================ */
+voa-alert::part(actions) {
+  /* Layout flex para botões */
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  
+  /* Gap entre botões - Semantic Token */
+  gap: var(--spacing-spacing-sm, 0.5rem);
+  
+  /* Padding top para separar do conteúdo - Semantic Token */
+  padding-top: var(--spacing-spacing-xs);
+}
+
+/* ============================================
+   BUTTONS - Estilização via exportparts
+   ============================================ */
+/* 
+ * Os botões são expostos via exportparts no voa-alert:
+ * - primary-btn-base: Parte "base" do botão primário
+ * - secondary-btn-base: Parte "base" do botão secundário (ghost)
+ * 
+ * Isso permite estilizar os botões de fora do Shadow DOM.
+ */
+
+/* Base styles for both buttons */
+voa-alert::part(primary-btn-base),
+voa-alert::part(secondary-btn-base) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  text-align: center;
+  
+  /* Border-radius padrão - Semantic Token */
+  border-radius: var(--radius-sm);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Transição suave para estados hover/active */
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  
+  /* Padding para size="sm" */
+  padding-block: var(--spacing-spacing-xs);
+  padding-inline: var(--spacing-spacing-xs);
+  min-width: 98px;
+  gap: var(--spacing-spacing-xs, 0.25rem);
+}
+
+/* Primary Button */
+voa-alert::part(primary-btn-base) {
+  background-color: var(--brand-base);
+  color: var(--text-on-primary);
+  border: var(--border-width-thin) solid var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):hover {
+  background-color: var(--brand-hover);
+  border-color: var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):active {
+  background-color: var(--brand-active);
+  border-color: var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+/* Secondary/Ghost Button - Com cores de danger */
+voa-alert::part(secondary-btn-base) {
+  background-color: transparent;
+  color: var(--semantic-colors-danger);
+  border: 1px solid transparent;
+}
+
+voa-alert::part(secondary-btn-base):hover {
+  background-color: var(--semantic-colors-danger);
+  color: var(--text-on-primary);
+  border-color: var(--semantic-colors-danger);
+}
+
+voa-alert::part(secondary-btn-base):active {
+  background-color: var(--semantic-colors-danger);
+  color: var(--text-on-primary);
+  border-color: var(--semantic-colors-danger);
+  opacity: 0.9;
+}
+
+voa-alert::part(secondary-btn-base):focus-visible {
+  outline: 2px solid var(--semantic-colors-danger);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   voa-avatar.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaAvatar
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-avatar
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2809&t=eEPGXVkQRijr3FMg-4
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * */
+
+/* ============================================
+   BASE - Container principal do avatar
+   ============================================ */
+voa-avatar::part(base) {
+  /* Background do avatar - Semantic Token (conforme Figma: bg-elevated) */
+  background-color: var(--structure-colors-bg-elevated);
+  
+  /* Border-radius circular - Semantic Token (conforme Figma: radius-round) */
+  border-radius: var(--radius-round);
+  
+  /* Shadow conforme Figma: 0px 4px 4px 0px rgba(0,0,0,0.25) */
+  box-shadow: var(--voa-shadow-avatar);
+}
+
+/* ============================================
+   INITIALS - Texto de iniciais
+   ============================================ */
+voa-avatar::part(initials) {
+  /* Cor do texto - Semantic Token (conforme Figma: text-primary) */
+  color: var(--text-primary);
+  
+  /* Font-family (Manrope SemiBold conforme Figma) */
+  font-family: var(--font-family-sans, 'Manrope', sans-serif);
+  font-weight: var(--typography-base-body-sm-bold-weight); /* SemiBold */
+  font-style: normal;
+  
+  /* Line-height */
+  line-height: 1;
+  
+  /* Text transform já aplicado no CSS estrutural */
+}
+
+/* Tamanhos de fonte para iniciais baseados no size do avatar */
+voa-avatar[size="xs"]::part(initials) {
+  font-size: var(--avatar-font-size-xs); /* Conforme Figma: 8px para xs */
+}
+
+voa-avatar[size="sm"]::part(initials) {
+  font-size: var(--avatar-font-size-sm); /* Conforme Figma: 12px para sm */
+}
+
+voa-avatar[size="md"]::part(initials) {
+  font-size: var(--avatar-font-size-md); /* Conforme Figma: 16px para md */
+}
+
+voa-avatar[size="lg"]::part(initials) {
+  font-size: var(--avatar-font-size-lg); /* Conforme Figma: 24px para lg */
+}
+
+voa-avatar[size="xl"]::part(initials) {
+  font-size: var(--avatar-font-size-xl); /* Conforme Figma: 28px para xl */
+}
+
+/* ============================================
+   ICON - Ícone SVG padrão
+   ============================================ */
+voa-avatar::part(icon) {
+  /* Cor do ícone - Primitive Token (conforme Figma: rgba(73, 80, 87, 1) = gray-7) */
+  /* Nota: Não há token semântico específico para cor de ícone, usando primitivo */
+  color: var(--palette-gray-gray-7);
+  
+  /* Fill será aplicado via currentColor */
+  fill: currentColor;
+}
+
+/* ============================================
+   IMAGE - Imagem do avatar
+   ============================================ */
+voa-avatar::part(image) {
+  /* Estilos estruturais já aplicados no CSS do componente */
+  /* Apenas garantir que a imagem preencha o container */
+  object-fit: cover;
+  object-position: center;
+}
+
+/* ============================================
+   VARIAÇÕES POR TIPO
+   ============================================ */
+
+/* Avatar tipo photo - sem background (apenas imagem) */
+voa-avatar[type="photo"]::part(base) {
+  background-color: transparent;
+}
+
+/* Avatar tipo icon - com background */
+voa-avatar[type="icon"]::part(base) {
+  background-color: var(--structure-colors-bg-elevated);
+}
+
+/* Avatar tipo initials - com background */
+voa-avatar[type="initials"]::part(base) {
+  background-color: var(--structure-colors-bg-elevated);
+}
+
+/* ============================================
+   ACESSIBILIDADE
+   ============================================ */
+
+/* Focus visível para navegação por teclado (se o avatar for interativo) */
+voa-avatar::part(base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   voa-badge.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaBadge
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-badge
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-3352
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-container → --structure-colors-bg-container
+ * --structure-colors/border-color → --structure-colors-border-color
+ * --structure-colors/border-color-secondary → --structure-colors-border-color-secondary
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --spacing/spacing-md → --spacing-spacing-md (16px)
+ * --spacing/spacing-lg → --spacing-spacing-lg (24px)
+ * --spacing/spacing-xxs → --spacing-spacing-xxs (2px)
+ * --radius/radius-xs → --radius-xs (4px)
+ * --radius/radius-round → --radius-round (1024px)
+ * --semantic-colors/danger → --semantic-colors-danger
+ * --asset-colors/text-primary → --text-primary
+ * --base/family/family-sans → --font-family-sans
+ */
+
+/* ============================================
+   BASE - Container principal do badge
+   ============================================ */
+voa-badge::part(base) {
+  /* Background padrão - Semantic Token (conforme Figma: structure-colors/bg-container) */
+  background-color: var(--structure-colors-bg-container, #f1f3f5);
+  
+  /* Border padrão - Figma: 1.5px solid */
+  border: 1.5px solid var(--structure-colors-border-color, #adb5bd);
+  
+  /* Border-radius padrão para state="default" - Semantic Token (conforme Figma: radius/radius-xs) */
+  border-radius: var(--radius-xs, 4px);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+}
+
+/* State: Pill - Border-radius completamente arredondado */
+voa-badge[shape="pill"]::part(base) {
+  /* Border-radius pill - Semantic Token (conforme Figma: radius/radius-round = 1024px) */
+  border-radius: var(--radius-round, 1024px);
+}
+
+/* ============================================
+   VARIANTE: ICON-ONLY
+   Figma: Type=icon-only
+   ============================================ */
+
+/* Icon-only - Size: md, State: default */
+voa-badge[variant="icon-only"]::part(base) {
+  /* Padding uniforme - Figma: spacing-xs (4px) */
+  padding: var(--spacing-spacing-xs, 4px);
+  /* Gap entre elementos - Figma: 4px */
+  gap: 4px;
+}
+
+/* Icon-only - Size: sm */
+voa-badge[variant="icon-only"][size="sm"]::part(base) {
+  padding: var(--spacing-spacing-xs, 4px);
+  gap: 4px;
+}
+
+/* ============================================
+   VARIANTE: INDICATOR
+   Figma: Type=indicator
+   ============================================ */
+
+/* Indicator - Size: md, State: default */
+voa-badge[variant="indicator"]::part(base),
+voa-badge[variant="indicator"][size="md"]::part(base) {
+  /* Padding - Figma: px=spacing-xs (4px), py=spacing-xxs (2px) */
+  padding-block: var(--spacing-spacing-xxs, 2px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  /* Height - Figma: spacing-lg (24px) */
+  height: var(--spacing-spacing-lg, 24px);
+  /* Max-width - Figma: 24px */
+  max-width: 24px;
+  /* Gap - Figma: 10px */
+  gap: 10px;
+}
+
+/* Indicator - Size: sm, State: default */
+voa-badge[variant="indicator"][size="sm"]::part(base) {
+  padding-block: var(--spacing-spacing-xxs, 2px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  /* Size - Figma: spacing-md (16px) x spacing-md (16px) */
+  width: var(--spacing-spacing-md, 16px);
+  height: var(--spacing-spacing-md, 16px);
+  max-width: 24px;
+  gap: 10px;
+  /* Border color secondary para sm - Figma */
+  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
+}
+
+/* Indicator - Size: md, State: pill */
+voa-badge[variant="indicator"][shape="pill"]::part(base),
+voa-badge[variant="indicator"][shape="pill"][size="md"]::part(base) {
+  padding-block: var(--radius-xs, 4px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  height: 24px;
+  gap: 10px;
+  /* items-start no Figma, portanto align-items: flex-start */
+  align-items: flex-start;
+}
+
+/* Indicator - Size: sm, State: pill */
+voa-badge[variant="indicator"][shape="pill"][size="sm"]::part(base) {
+  padding-block: var(--radius-xs, 4px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  width: var(--spacing-spacing-md, 16px);
+  height: var(--spacing-spacing-md, 16px);
+  gap: 10px;
+  align-items: flex-start;
+  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
+}
+
+/* ============================================
+   VARIANTE: INDICATOR-OVERLAY
+   Figma: Type=indicator-overlay (fundo vermelho)
+   ============================================ */
+
+/* Indicator-overlay - Base styles */
+voa-badge[variant="indicator-overlay"]::part(base) {
+  /* Background vermelho - Semantic Token (conforme Figma: semantic-colors/danger) */
+  background-color: var(--semantic-colors-danger, #e51937);
+  /* Border com fill-secondary - Figma */
+  border-color: var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+/* Indicator-overlay - Size: md, State: default */
+voa-badge[variant="indicator-overlay"][size="md"]::part(base) {
+  padding-block: var(--spacing-spacing-xxs, 2px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  height: var(--spacing-spacing-lg, 24px);
+  max-width: 24px;
+  gap: 10px;
+}
+
+/* Indicator-overlay - Size: sm, State: default */
+voa-badge[variant="indicator-overlay"][size="sm"]::part(base) {
+  padding-block: var(--spacing-spacing-xxs, 2px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  /* Size fixa 16x16 - Figma */
+  width: var(--spacing-spacing-md, 16px);
+  height: var(--spacing-spacing-md, 16px);
+  max-width: 24px;
+  gap: 10px;
+}
+
+/* Indicator-overlay - Size: md, State: pill */
+voa-badge[variant="indicator-overlay"][shape="pill"]::part(base),
+voa-badge[variant="indicator-overlay"][shape="pill"][size="md"]::part(base) {
+  padding-block: var(--radius-xs, 4px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  height: 24px;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+/* Indicator-overlay - Size: sm, State: pill */
+voa-badge[variant="indicator-overlay"][shape="pill"][size="sm"]::part(base) {
+  padding-block: var(--radius-xs, 4px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  width: var(--spacing-spacing-md, 16px);
+  height: var(--spacing-spacing-md, 16px);
+  gap: 10px;
+  align-items: flex-start;
+}
+
+/* ============================================
+   VARIANTE: INDICATOR-ONLY
+   Figma: Type=indicator-only (apenas ponto vermelho)
+   ============================================ */
+
+voa-badge[variant="indicator-only"]::part(base) {
+  /* Background vermelho - Figma */
+  background-color: var(--semantic-colors-danger, #e51937);
+  /* Border-radius - Figma: radius-xs (4px) */
+  border-radius: var(--radius-xs, 4px);
+  /* Tamanho fixo - Figma: spacing-sm (8px) x spacing-sm (8px) */
+  width: var(--spacing-spacing-sm, 8px);
+  height: var(--spacing-spacing-sm, 8px);
+  /* Sem border - Figma */
+  border: none;
+  /* Sem padding */
+  padding: 0;
+  /* Shadow - Figma: 0px 4px 4px 0px rgba(0,0,0,0.25) */
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+/* ============================================
+   VARIANTE: PLAIN (compatibilidade legado)
+   Nota: Não existe no Figma atual, mantido para retrocompatibilidade
+   ============================================ */
+
+voa-badge[variant="plain"]::part(base) {
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-sm, 8px);
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+voa-badge[variant="plain"][size="sm"]::part(base) {
+  padding: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   VARIANTE: ICONS (compatibilidade legado)
+   Nota: Não existe no Figma atual, mantido para retrocompatibilidade
+   ============================================ */
+
+voa-badge[variant="icons"]::part(base) {
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-sm, 8px);
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+voa-badge[variant="icons"][size="sm"]::part(base) {
+  padding: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   LABEL - Texto do badge
+   ============================================ */
+voa-badge::part(label) {
+  /* Cor do texto - Semantic Token (conforme Figma: asset-colors/text-primary) */
+  color: var(--text-primary, #0b1215);
+  
+  /* Font-family - Figma: base/family/family-sans */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  
+  /* Font-weight: Regular (400) */
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  font-style: normal;
+  
+  /* Line-height e font-size por tamanho */
+  line-height: 16px;
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+}
+
+/* Size: Small - Tipografia menor */
+voa-badge[size="sm"]::part(label) {
+  font-size: 11px;
+  line-height: 12px;
+}
+
+/* ============================================
+   INDICATOR - Contador numérico
+   ============================================ */
+voa-badge::part(indicator) {
+  /* Cor do texto - Figma: asset-colors/text-primary */
+  color: var(--text-primary, #0b1215);
+  
+  /* Font-family - Figma: base/family/family-sans com SemiBold */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  
+  /* Font-weight: SemiBold (600) - Figma */
+  font-weight: 600;
+  font-style: normal;
+  
+  /* Text alignment */
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+/* Indicator - Size: md */
+voa-badge[size="md"]::part(indicator),
+voa-badge[variant="indicator"][size="md"]::part(indicator),
+voa-badge[variant="indicator-overlay"][size="md"]::part(indicator) {
+  /* Figma: 14px, line-height 16px, size 16x16 */
+  font-size: 14px;
+  line-height: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+/* Indicator - Size: sm */
+voa-badge[size="sm"]::part(indicator),
+voa-badge[variant="indicator"][size="sm"]::part(indicator),
+voa-badge[variant="indicator-overlay"][size="sm"]::part(indicator) {
+  /* Figma: 10px, line-height 8px, size 8x8 */
+  font-size: 10px;
+  line-height: 8px;
+  width: 8px;
+  height: 8px;
+}
+
+/* Variante: Indicator-overlay - Texto branco */
+voa-badge[variant="indicator-overlay"]::part(indicator) {
+  /* Cor do texto branco - Figma: structure-colors/bg-base */
+  color: var(--structure-colors-bg-base, #ffffff);
+}
+
+/* ============================================
+   ICON - Ícone do badge
+   ============================================ */
+voa-badge::part(icon),
+voa-badge::part(icon-leading),
+voa-badge::part(icon-trailing) {
+  /* Cor do ícone - Figma usa cor específica do ícone (ex: rgba(0, 229, 206, 1) para check) */
+  /* Mantemos currentColor para flexibilidade */
+  color: currentColor;
+  fill: currentColor;
+}
+
+/* Icon - Size: md */
+voa-badge[size="md"]::part(icon),
+voa-badge[size="md"]::part(icon-leading),
+voa-badge[size="md"]::part(icon-trailing),
+voa-badge[variant="icon-only"][size="md"]::part(icon) {
+  /* Figma: 16x16 */
+  width: 16px;
+  height: 16px;
+}
+
+/* Icon - Size: sm */
+voa-badge[size="sm"]::part(icon),
+voa-badge[size="sm"]::part(icon-leading),
+voa-badge[size="sm"]::part(icon-trailing),
+voa-badge[variant="icon-only"][size="sm"]::part(icon) {
+  /* Figma: 8x8 para icon-only sm */
+  width: 8px;
+  height: 8px;
+}
+
+/* ============================================
+   ACESSIBILIDADE
+   ============================================ */
+
+/* Focus visível para navegação por teclado (se o badge for interativo) */
+voa-badge::part(base):focus-visible {
+  outline: 2px solid var(--brand-base, #0064cb);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   voa-breadcrumbs.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaBreadcrumbs
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-breadcrumbs
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=443-10022&t=eEPGXVkQRijr3FMg-4
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-base → --structure-colors-bg-base
+ * --structure-colors/fill-15 → --structure-colors-fill-15
+ * --structure-colors/border-color-secondary → --structure-colors-border-color-secondary
+ * --radius/radius-round → --radius-round
+ * --radius/radius-lg → --radius-lg
+ * --spacing/spacing-md → --spacing-spacing-md (16px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --asset-colors/text-secondary → --text-secondary
+ * --asset-colors/text-hover → --text-hover (ou --brand-base)
+ * --base/family/family-sans → --font-family-sans
+ */
+
+/* ============================================
+   BASE - Container principal do breadcrumb
+   ============================================ */
+voa-breadcrumbs::part(base) {
+  /* Background padrão (default) - Semantic Token (conforme Figma: structure-colors/bg-base) */
+  background-color: var(--structure-colors-bg-base);
+  
+  /* Padding horizontal - Semantic Token (conforme Figma: spacing/spacing-md = 16px) */
+  padding-inline: var(--spacing-spacing-md);
+  
+  /* Padding vertical */
+  padding-block: 0;
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Gap entre items - Semantic Token (conforme Figma: spacing/spacing-sm = 8px) */
+  /* Note: Gap is handled by separator margin in the items */
+  gap: 0;
+}
+
+/* Variante: Round - Estilos específicos */
+voa-breadcrumbs[type="round"]::part(base) {
+  /* Background round - Semantic Token (conforme Figma: structure-colors/fill-15) */
+  background-color: var(--structure-colors-fill-15);
+  
+  /* Border - Semantic Token (conforme Figma: structure-colors/border-color-secondary) */
+  border: var(--border-width-thin) solid var(--structure-colors-border-color-secondary);
+  
+  /* Border-radius completamente arredondado - Semantic Token (conforme Figma: radius/radius-round) */
+  border-radius: var(--radius-round);
+  
+  /* Padding round - Semantic Token (conforme Figma: radius/radius-lg = 16px) */
+  padding-inline: var(--radius-lg);
+}
+
+/* Variante: Outline - Estilos específicos */
+voa-breadcrumbs[type="outline"]::part(base) {
+  /* Background transparente */
+  background-color: transparent;
+  
+  /* Border - Semantic Token */
+  border: var(--border-width-thin) solid var(--structure-colors-border-color-secondary);
+  
+  /* Border-radius padrão */
+  border-radius: var(--radius-sm);
+  
+  /* Padding similar ao round para compensar a borda */
+  padding-inline: var(--spacing-spacing-md);
+}
+
+/* ============================================
+   BREADCRUMBS ITEM - Item do breadcrumb
+   ============================================ */
+
+/* Base do item (Content) */
+voa-breadcrumbs-item::part(content) {
+  /* Display flex para alinhamento */
+  display: inline-flex;
+  align-items: center;
+  
+  /* Padding vertical - Semantic Token (conforme Figma: spacing/spacing-xs = 4px) */
+  padding-block: var(--spacing-spacing-xs);
+  
+  /* Text decoration para links */
+  text-decoration: none;
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Cursor pointer para links */
+  cursor: pointer;
+
+  /* --- Text Styles from Figma (component-specific overrides) --- */
+  /* Cor do texto - Figma: asset-colors/text-secondary = #00e5ce (teal) */
+  color: #00e5ce;
+  
+  /* Font-family - Semantic Token (conforme Figma: base/family/family-sans) */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  
+  /* Font-weight: Regular (400) */
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  font-style: normal;
+  
+  /* Font-size: 10px conforme Figma (Legal/Regular) */
+  font-size: 0.625rem; /* 10px */
+  line-height: 16px;
+  
+  /* Text alignment right conforme Figma */
+  text-align: right;
+}
+
+/* Item ativo (span) - sem cursor pointer */
+voa-breadcrumbs-item[active]::part(content) {
+  cursor: default;
+  
+  /* --- Active Text Styles from Figma --- */
+  /* Cor do texto ativo - Figma: asset-colors/text-hover = #0064cb (blue) */
+  color: #0064cb;
+  
+  /* Font-weight: SemiBold (600) conforme Figma (Legal/Bold) */
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+}
+
+/* Link não ativo - hover effect */
+voa-breadcrumbs-item::part(content):hover {
+  /* Text decoration underline para links */
+  text-decoration: underline;
+}
+
+voa-breadcrumbs-item[active]::part(content):hover {
+  /* Sem underline quando ativo */
+  text-decoration: none;
+}
+
+/* ============================================
+   BREADCRUMBS SEPARATOR - Divisor entre items
+   ============================================ */
+
+/* Base do divisor */
+voa-breadcrumbs-item::part(separator) {
+  /* Cor do ícone - Figma: rgba(159, 159, 168, 1) = gray separator */
+  color: rgba(159, 159, 168, 1);
+  
+  /* Fill será aplicado via currentColor */
+  fill: currentColor;
+  
+  /* Margem horizontal - Semantic Token (conforme Figma: spacing/spacing-sm = 8px) */
+  margin-inline: var(--spacing-spacing-sm);
+}
+
+/* Tamanho do ícone - 16x16 conforme Figma */
+voa-breadcrumbs-item::part(separator) svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   ACESSIBILIDADE
+   ============================================ */
+
+/* Focus visível para navegação por teclado */
+voa-breadcrumbs-item::part(content):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Link ativo não precisa de focus */
+voa-breadcrumbs-item[active]::part(content):focus-visible {
+  outline: none;
+}
+
+/* ============================================
+   voa-button.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaButton
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-button
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=515-327
+ */
+
+/* ============================================
+   BASE - Elemento raiz do botão
+   ============================================ */
+
+voa-button::part(base) {
+  /* Tipografia */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size); /* Desktop/Body-sm/Regular */
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-sm);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Transição suave */
+  transition: all 0.2s ease;
+}
+
+/* ============================================
+   TAMANHOS (Size)
+   ============================================ */
+
+/* Small (sm) */
+voa-button[size="sm"]::part(base) {
+  /* Padding: Vertical 4px, Horizontal 16px */
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-md, 16px);
+  
+  border-radius: var(--radius-xs, 4px);
+  gap: 10px;
+}
+
+/* Medium (md) */
+voa-button[size="md"]::part(base) {
+  /* Padding: Vertical 8px, Horizontal 4px */
+  padding-block: var(--spacing-spacing-sm, 8px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  
+  min-width: 82px;
+  border-radius: var(--radius-sm, 8px);
+  gap: 4px;
+}
+
+/* Large (lg) - padrão */
+voa-button[size="lg"]::part(base) {
+  /* Padding: Vertical 12px, Horizontal 4px */
+  padding-block: var(--spacing-spacing-rg, 12px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  
+  min-width: 98px;
+  border-radius: var(--radius-sm, 8px);
+  gap: 10px;
+}
+
+/* Ajuste de gap para variantes específicas no tamanho LG */
+voa-button[size="lg"][variant="tonal"]::part(base),
+voa-button[size="lg"][variant="ghost"]::part(base),
+voa-button[size="lg"][variant="link"]::part(base) {
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   VARIANTES (Type)
+   ============================================ */
+
+/* Primary */
+voa-button[variant="primary"]::part(base) {
+  background-color: var(--brand-base, #0064cb);
+  color: var(--text-on-primary, #f1f1f1);
+  border: var(--border-width-thin) solid var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+voa-button[variant="primary"]:hover::part(base) {
+  background-color: var(--brand-hover, #00398d);
+  border-color: var(--brand-base-50, rgba(0, 100, 203, 0.5));
+}
+
+voa-button[variant="primary"]:active::part(base) {
+  background-color: var(--brand-active, #008fff);
+  border-color: var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+/* Secondary */
+voa-button[variant="secondary"]::part(base) {
+  background-color: var(--brand-secondary, #00e5ce);
+  color: var(--text-primary, #0b1215);
+  border: var(--border-width-thin) solid var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+voa-button[variant="secondary"]:hover::part(base) {
+  /* Figma indica bg-secondary também no hover, talvez mude apenas borda ou sombra? 
+     Mantendo conforme token do Figma output */
+  background-color: var(--brand-secondary, #00e5ce);
+  border-color: var(--structure-colors-bg-mask, rgba(0, 0, 0, 0.45));
+}
+
+voa-button[variant="secondary"]:active::part(base) {
+  /* Figma indica gradient overlay, simplificado aqui para tokens se possível */
+  background-color: var(--brand-secondary, #00e5ce);
+  border-color: var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+/* Tonal */
+voa-button[variant="tonal"]::part(base) {
+  background-color: var(--brand-base-25, rgba(0, 100, 203, 0.25));
+  color: var(--text-primary, #0b1215);
+  border: none; 
+  /* Nota: Figma não mostra borda explicita no default tonal LG, 
+     mas mostra borda transparente/base no disabled/active em alguns casos. 
+     Vamos manter sem borda ou borda transparente para evitar pulos de layout. */
+  border: var(--border-width-thin) solid transparent;
+}
+
+voa-button[variant="tonal"]:hover::part(base) {
+  background-color: var(--brand-base-50, rgba(0, 100, 203, 0.5));
+}
+
+voa-button[variant="tonal"]:active::part(base) {
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+}
+
+/* Ghost */
+voa-button[variant="ghost"]::part(base) {
+  background-color: transparent;
+  color: var(--brand-base, #0064cb);
+  border: var(--border-width-thin) solid var(--brand-base, #0064cb);
+}
+
+voa-button[variant="ghost"]:hover::part(base) {
+  border-color: var(--brand-hover, #00398d);
+  color: var(--colors-light-secondary-light, #00e5ce); /* Figma output mostra cor secundária no hover? */
+}
+
+voa-button[variant="ghost"]:active::part(base) {
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+  border-color: var(--brand-base, #0064cb);
+  color: var(--colors-light-secondary-light, #00e5ce);
+}
+
+/* Link */
+voa-button[variant="link"]::part(base) {
+  background-color: transparent;
+  color: var(--palette-blue-blue-7, #1c7ed6);
+  border: none;
+  /* Mantendo borda transparente para consistência de box-model se necessário, 
+     mas link geralmente não tem borda. Figma não mostra borda. */
+}
+
+voa-button[variant="link"]:hover::part(base) {
+  color: var(--palette-blue-blue-9, #1864ab);
+  text-decoration: underline;
+}
+
+voa-button[variant="link"]:active::part(base) {
+  color: var(--palette-blue-blue-6, #228be6);
+}
+
+/* ============================================
+   ESTADOS DISABLED E LOADING
+   ============================================ */
+
+/* Disabled state */
+voa-button[disabled]:not([loading])::part(base) {
+  cursor: not-allowed;
+  
+  /* Primary Disabled */
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+  /* Border color fixed: using semantic token with opacity */
+  border-color: var(--colors-structure-fill-secondary, rgba(24, 24, 27, 0.06));
+  /* Text color fixed: using value with opacity (token is opaque) */
+  color: rgba(11, 18, 21, 0.25);
+}
+
+voa-button[variant="secondary"][disabled]:not([loading])::part(base) {
+  background-color: var(--brand-secondary-15, rgba(0, 229, 206, 0.15));
+}
+
+voa-button[variant="tonal"][disabled]:not([loading])::part(base) {
+  /* Using token with opacity */
+  background-color: var(--colors-structure-fill-15, rgba(24, 24, 27, 0.15));
+}
+
+voa-button[variant="ghost"][disabled]:not([loading])::part(base) {
+  background-color: transparent;
+  /* Using token with opacity */
+  border-color: var(--colors-structure-fill-15, rgba(24, 24, 27, 0.15));
+}
+
+voa-button[variant="link"][disabled]:not([loading])::part(base) {
+  background-color: transparent;
+  color: var(--palette-blue-blue-2, #a5d8ff);
+}
+
+/* Loading state */
+voa-button[loading]::part(base),
+voa-button.loading::part(base) {
+  opacity: 0.7;
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+
+/* ============================================
+   FOCUS VISIBLE (Acessibilidade)
+   ============================================ */
+
+voa-button::part(base):focus-visible {
+  outline: 2px solid var(--brand-base, #0064cb);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   ELEMENTOS INTERNOS
+   ============================================ */
+
+/* Label */
+voa-button::part(label) {
+  display: inline-block;
+}
+
+/* Ícones */
+voa-button::part(icon-leading),
+voa-button::part(icon-trailing) {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+voa-button::part(icon-leading) svg,
+voa-button::part(icon-trailing) svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Loader */
+/* Note: @keyframes and animation are defined inside Shadow DOM (voa-button.css)
+   because CSS Parts API cannot access @keyframes from external scope.
+   Use CSS Custom Properties to customize: --voa-loader-size, --voa-loader-duration */
+
+voa-button::part(loader) {
+  /* Visual customization - size can override the internal default via CSS var */
+  color: currentColor;
+}
+
+voa-button[loading]::part(loader) {
+  margin-right: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   voa-card.external.css
+   ============================================ */
+
+/**
+ * External Styling for VoaCard
+ * 
+ * Uses CSS Parts API and design tokens.
+ */
+
+voa-card::part(base) {
+  background-color: var(--colors-structure-bg-base, #ffffff);
+  border: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  color: var(--text-primary, #111827);
+}
+
+voa-card::part(header) {
+  padding: var(--spacing-spacing-md, 16px);
+  border-bottom: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  font-weight: 600;
+}
+
+voa-card::part(body) {
+  padding: var(--spacing-spacing-md, 16px);
+}
+
+voa-card::part(footer) {
+  padding: var(--spacing-spacing-md, 16px);
+  border-top: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  background-color: var(--colors-structure-bg-container, #f9fafb);
+}
+
+/* ============================================
+   voa-checkbox.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaCheckbox
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-checkbox
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=429-677
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-base → --structure-colors-bg-base (white)
+ * --palette/blue/blue-6 → --palette-blue-blue-6 (#228be6)
+ * --palette/blue/blue-8 → --palette-blue-blue-8 (#1971c2)
+ * --palette/blue/blue-4 → --palette-blue-blue-4 (#4dabf7)
+ * --structure-colors/border-color → --structure-colors-border-color (#adb5bd)
+ * --asset-colors/brand-base-50 → --brand-base-50 (rgba(0,100,203,0.5))
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ * --asset-colors/text-hover → --text-hover (#0064cb)
+ * --asset-colors/text-disabled → --text-disabled (rgba(11,18,21,0.25))
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --border-radius/radius-sm → --radius-sm (4px)
+ * --base/family/family-sans → --font-family-sans ('Lato')
+ * 
+ * ESTRUTURA DO COMPONENTE INTERNALS (ElementInternals):
+ * 
+ * O componente agora usa ElementInternals para sincronizar com o Form API nativo:
+ * - setFormValue(): Define o valor que será submetido pelo formulário
+ * - ariaChecked: Define o estado de acessibilidade ('true' | 'false' | 'mixed')
+ * - ariaDisabled: Define se o componente está desabilitado para leitores de tela
+ * 
+ * Estrutura do DOM renderizado:
+ * <voa-checkbox>
+ *   <div part="base" class="checkbox-container">
+ *     <div part="indicator" class="checkbox-custom">
+ *       <!-- ::after renderiza o checkmark ou dash via CSS puro -->
+ *     </div>
+ *     <span part="label" class="checkbox-label">
+ *       <slot /> <!-- Conteúdo do label -->
+ *     </span>
+ *   </div>
+ * </voa-checkbox>
+ */
+
+/* ============================================
+   BASE - Container do checkbox
+   ============================================ */
+
+voa-checkbox::part(base) {
+  /* Gap estrutural - Token semântico conforme Figma */
+  gap: var(--structure-large-spacing-sm);
+  
+  /* Tipografia - Semantic Token */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  line-height: var(--line-height-body-md);
+  
+  /* Transição suave para estados hover/active */
+  transition: color 0.2s ease;
+}
+
+/* Sem label, sem gap */
+voa-checkbox[show-label="false"]::part(base) {
+  gap: 0;
+}
+
+/* ============================================
+   INDICATOR - Caixa do checkbox
+   ============================================ */
+
+/* Tamanho padrão (20px conforme Figma) */
+voa-checkbox::part(indicator) {
+  width: var(--checkbox-indicator-size);
+  height: var(--checkbox-indicator-size);
+  border-radius: var(--structure-large-radius-xs);
+  border: var(--border-width-thin) solid var(--structure-colors-border-color);
+  background-color: var(--structure-colors-bg-base);
+  box-sizing: border-box;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ============================================
+   ESTADOS - INACTIVE (Checkbox não selecionado)
+   ============================================ */
+
+/* Default - Inactive */
+voa-checkbox[state="inactive"]:not([disabled])::part(indicator) {
+  background-color: var(--structure-colors-bg-base); /* white */
+  border-color: var(--structure-colors-border-color); /* #adb5bd */
+}
+
+voa-checkbox[state="inactive"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Inactive */
+voa-checkbox[state="inactive"]:hover:not([disabled])::part(indicator) {
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="inactive"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Inactive */
+voa-checkbox[state="inactive"]:focus-visible:not([disabled])::part(indicator) {
+  border-color: #196cb8; /* Focused border color do Figma */
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADOS - ACTIVE (Checkbox selecionado)
+   ============================================ */
+
+/* Default - Active */
+voa-checkbox[state="active"]:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-6); /* #228be6 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+/* 
+ * CHECKMARK RENDERING via CSS pseudo-element ::after
+ * 
+ * Structure:
+ * - Uses ::after positioned absolutely within .checkbox-custom (part="indicator")
+ * - The structural CSS sets: display: inline-flex; align-items: center; justify-content: center
+ * - This ensures the ::after checkmark is centered perfectly within the 20x20 box
+ * 
+ * Transform logic:
+ * - translate(-50%, -50%): Center the element at the box center
+ * - rotate(45deg): Rotate to create the checkmark angle
+ * 
+ * Border drawing:
+ * - border-right: 2px solid white (vertical part of checkmark)
+ * - border-bottom: 2px solid white (horizontal part of checkmark)
+ * - Creates an inverted "L" that looks like a checkmark when rotated
+ */
+voa-checkbox[state="active"]:not([disabled])::part(indicator)::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 4px;
+  height: 8px;
+  border-right: 2px solid white;
+  border-bottom: 2px solid white;
+  box-shadow: 0px 0.667px 0.333px 0.033px rgba(24, 24, 24, 0.05);
+}
+
+voa-checkbox[state="active"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Active */
+voa-checkbox[state="active"]:hover:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-4); /* #4dabf7 - mais claro no hover */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="active"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Active */
+voa-checkbox[state="active"]:focus-visible:not([disabled])::part(indicator) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADOS - INDETERMINATE (Checkbox indeterminado)
+   ============================================ */
+
+/* Default - Indeterminate */
+voa-checkbox[state="indeterminate"]:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-6); /* #228be6 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+/* 
+ * INDETERMINATE INDICATOR via CSS pseudo-element ::after
+ * 
+ * Structure:
+ * - Uses ::after positioned absolutely within .checkbox-custom (part="indicator")
+ * - The structural CSS sets: display: inline-flex; align-items: center; justify-content: center
+ * - This ensures the ::after dash is centered perfectly within the 20x20 box
+ * 
+ * Transform logic:
+ * - translate(-50%, -50%): Center the element at the box center
+ * - Creates a simple horizontal dash
+ */
+voa-checkbox[state="indeterminate"]:not([disabled])::part(indicator)::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 2px;
+  background-color: white;
+  box-shadow: 0px 0.667px 0.333px 0.033px rgba(24, 24, 24, 0.05);
+}
+
+voa-checkbox[state="indeterminate"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Indeterminate */
+voa-checkbox[state="indeterminate"]:hover:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-4); /* #4dabf7 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="indeterminate"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Indeterminate */
+voa-checkbox[state="indeterminate"]:focus-visible:not([disabled])::part(indicator) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADO - DISABLED
+   ============================================ */
+
+/* Disabled - Inactive */
+voa-checkbox[state="inactive"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.06);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="inactive"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* Disabled - Active */
+voa-checkbox[state="active"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.25);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="active"][disabled]::part(indicator)::after {
+  opacity: 0.5;
+}
+
+voa-checkbox[state="active"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* Disabled - Indeterminate */
+voa-checkbox[state="indeterminate"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.25);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="indeterminate"][disabled]::part(indicator)::after {
+  opacity: 0.5;
+}
+
+voa-checkbox[state="indeterminate"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* ============================================
+   LABEL - Texto do label
+   ============================================ */
+
+voa-checkbox::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+  user-select: none;
+}
+
+/* ============================================
+   INPUT - Elemento nativo (visualmente oculto)
+   ============================================ */
+
+voa-checkbox::part(input) {
+  /* Já está oculto no CSS estrutural, apenas garantir que não interfira */
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* ============================================
+   FOCUS VISIBLE - Outline para acessibilidade
+   ============================================ */
+
+voa-checkbox:focus-visible::part(base) {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ============================================
+   voa-input-addon.external.css
+   ============================================ */
+
+/* 
+ * VoaInputAddon Component Styles
+ * 
+ * Estilos aplicados via CSS Parts API usando design tokens semânticos.
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+ * 
+ * Typography Tokens:
+ * - Desktop/Body-md/Bold: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-bold-weight), font-size: 16px, line-height: 24px
+ * - Desktop/Body-sm/Regular: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-regular-weight), font-size: 14px, line-height: 16px
+ * - Desktop/Body-sm/Bold: font-family: var(--base/family/family-sans, 'Lato'), font-weight: var(--typography-base-body-sm-bold-weight), font-size: 14px, line-height: 16px
+ */
+
+/* Base */
+voa-input-addon::part(base) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  flex-grow: 0;
+  height: 46px;
+}
+
+voa-input-addon--interactive::part(base) {
+  cursor: pointer;
+  user-select: none;
+}
+
+voa-input-addon--interactive::part(base):hover {
+  opacity: 0.8;
+}
+
+voa-input-addon--interactive::part(base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+/* Content */
+voa-input-addon::part(content) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-spacing-xxs, 2px);
+  height: 100%;
+  flex-shrink: 0;
+}
+
+/* Text - Desktop/Body-md/Bold */
+voa-input-addon::part(text) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: 24px;
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* Variante: Label */
+voa-input-addon[variant="label"]::part(base) {
+  background-color: var(--palette-gray-gray-2, #e9ecef);
+  border-right: 1px solid var(--palette-gray-gray-2, #e9ecef);
+  padding: 10px var(--structure-large-spacing-rg, 12px) 10px 10px;
+}
+
+voa-input-addon[variant="label"]::part(content) {
+  gap: 10px;
+}
+
+/* Variante: Select */
+voa-input-addon[variant="select"]::part(base) {
+  background-color: var(--palette-gray-gray-2, #e9ecef);
+  border-right: 1px solid var(--palette-gray-gray-2, #e9ecef);
+  padding: 10px var(--spacing-spacing-xxs, 2px) 10px 10px;
+}
+
+voa-input-addon[variant="select"]::part(dropdown-icon) {
+  width: 24px;
+  height: 24px;
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* Variante: Flags */
+voa-input-addon[variant="flags"]::part(base) {
+  background-color: var(--palette-gray-gray-2, #e9ecef);
+  padding: var(--structure-large-spacing-rg, 12px) 0 var(--structure-large-spacing-rg, 12px) var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input-addon[variant="flags"]::part(content) {
+  gap: 0;
+}
+
+voa-input-addon[variant="flags"]::part(icon) {
+  width: 24px;
+  height: 24px;
+  background-color: var(--palette-gray-gray-6, #868e96);
+  border-radius: 100px;
+  flex-shrink: 0;
+}
+
+voa-input-addon[variant="flags"]::part(text) {
+  padding-left: var(--spacing-spacing-xs, 4px);
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--palette-gray-gray-6, #868e96);
+}
+
+voa-input-addon[variant="flags"]::part(dropdown-icon) {
+  width: 24px;
+  height: 24px;
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* Variante: Button */
+voa-input-addon[variant="button"]::part(base) {
+  padding: var(--spacing-spacing-xs, 4px);
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+voa-input-addon[variant="button"]::part(content) {
+  background-color: var(--palette-gray-gray-3, #dee2e6);
+  border: var(--border-width-thin) solid var(--palette-gray-gray-5, #adb5bd);
+  border-radius: var(--structure-large-radius-md, 12px);
+  padding: var(--spacing-spacing-xs, 4px) var(--spacing-spacing-sm, 8px);
+  gap: var(--spacing-spacing-xxs, 2px);
+  justify-content: center;
+  height: 100%;
+}
+
+voa-input-addon[variant="button"]::part(text) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--palette-gray-gray-6, #868e96);
+}
+
+/* Variante: Clear */
+voa-input-addon[variant="clear"]::part(base) {
+  padding: 11px var(--structure-large-spacing-rg, 12px);
+  gap: 10px;
+}
+
+voa-input-addon[variant="clear"]::part(content) {
+  gap: 10px;
+}
+
+voa-input-addon[variant="clear"]::part(icon) {
+  width: 24px;
+  height: 24px;
+  color: #76767f; /* Figma spec: rgba(118, 118, 127, 1) */
+}
+
+/* Variante: Shortcut */
+voa-input-addon[variant="shortcut"]::part(base) {
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+voa-input-addon[variant="shortcut"]::part(content) {
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+/* Note: Shortcut variant uses voa-keybinding component internally */
+/* Style voa-keybinding separately if needed */
+
+/* Variante: Currency-pre */
+voa-input-addon[variant="currency-pre"]::part(base) {
+  padding: 10px;
+  gap: 10px;
+}
+
+voa-input-addon[variant="currency-pre"]::part(content) {
+  gap: 10px;
+}
+
+voa-input-addon[variant="currency-pre"]::part(text) {
+  font-family: 'Manrope', sans-serif;
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: 24px;
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* Variante: Currency-post */
+voa-input-addon[variant="currency-post"]::part(base) {
+  gap: var(--spacing-spacing-sm, 8px);
+}
+
+voa-input-addon[variant="currency-post"]::part(content) {
+  gap: var(--spacing-spacing-sm, 8px);
+}
+
+voa-input-addon[variant="currency-post"]::part(text) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--palette-gray-gray-6, #868e96);
+}
+
+voa-input-addon[variant="currency-post"]::part(dropdown-icon) {
+  width: 24px;
+  height: 24px;
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* ============================================
+   voa-input.external.css
+   ============================================ */
+
+/* 
+ * VoaInput Component Styles
+ * 
+ * Estilos aplicados via CSS Parts API usando design tokens semânticos.
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006
+ */
+
+/* Input Container */
+voa-input::part(container) {
+  background-color: var(--colors-structure-bg-base, #ffffff);
+  border: var(--border-width-medium) solid var(--structure-colors-border-color, #adb5bd);
+  border-radius: var(--structure-large-radius-lg, 16px);
+  padding: var(--structure-large-spacing-rg, 12px);
+  gap: var(--structure-large-spacing-sm, 8px);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: var(--voa-shadow-input);
+}
+
+/* Quando há prefix ou suffix, remover padding do container mas manter altura */
+voa-input[data-has-prefix="true"]::part(container),
+voa-input[data-has-suffix="true"]::part(container) {
+  padding: 0;
+  gap: 0;
+  align-items: stretch;
+}
+
+/* Garantir que addons não redimensionem o container */
+voa-input[data-has-prefix="true"]::part(prefix),
+voa-input[data-has-suffix="true"]::part(suffix) {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+/* Padding do input quando há addons - apenas nas laterais sem addon */
+voa-input[data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
+  padding: 0;
+  padding-right: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
+  padding: 0;
+  padding-left: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[data-has-prefix="true"][data-has-suffix="true"]::part(input) {
+  padding: 0;
+}
+
+/* Padding padrão do input quando não há addons */
+voa-input:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
+  padding: 0 var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="sm"]::part(container) {
+  padding: var(--structure-large-spacing-sm, 8px);
+  height: 32px;
+  max-height: 32px;
+}
+
+voa-input[size="sm"][data-has-prefix="true"]::part(container),
+voa-input[size="sm"][data-has-suffix="true"]::part(container) {
+  padding: 0;
+  gap: 0;
+  height: 32px;
+  max-height: 32px;
+}
+
+voa-input[size="sm"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
+  padding: 0;
+  padding-right: var(--structure-large-spacing-sm, 8px);
+}
+
+voa-input[size="sm"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
+  padding: 0;
+  padding-left: var(--structure-large-spacing-sm, 8px);
+}
+
+voa-input[size="sm"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
+  padding: 0;
+}
+
+voa-input[size="sm"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
+  padding: 0 var(--structure-large-spacing-sm, 8px);
+}
+
+voa-input[size="md"]::part(container) {
+  padding: var(--structure-large-spacing-rg, 12px);
+  height: 48px;
+  max-height: 48px;
+}
+
+voa-input[size="md"][data-has-prefix="true"]::part(container),
+voa-input[size="md"][data-has-suffix="true"]::part(container) {
+  padding: 0;
+  gap: 0;
+  height: 48px;
+  max-height: 48px;
+}
+
+voa-input[size="md"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
+  padding: 0;
+  padding-right: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="md"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
+  padding: 0;
+  padding-left: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="md"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
+  padding: 0;
+}
+
+voa-input[size="md"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
+  padding: 0 var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="lg"]::part(container) {
+  padding: var(--structure-large-spacing-rg, 12px);
+  height: 56px;
+  max-height: 56px;
+}
+
+voa-input[size="lg"][data-has-prefix="true"]::part(container),
+voa-input[size="lg"][data-has-suffix="true"]::part(container) {
+  padding: 0;
+  gap: 0;
+  height: 56px;
+  max-height: 56px;
+}
+
+voa-input[size="lg"][data-has-prefix="true"]:not([data-has-suffix="true"])::part(input) {
+  padding: 0;
+  padding-right: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="lg"][data-has-suffix="true"]:not([data-has-prefix="true"])::part(input) {
+  padding: 0;
+  padding-left: var(--structure-large-spacing-rg, 12px);
+}
+
+voa-input[size="lg"][data-has-prefix="true"][data-has-suffix="true"]::part(input) {
+  padding: 0;
+}
+
+voa-input[size="lg"]:not([data-has-prefix="true"]):not([data-has-suffix="true"])::part(input) {
+  padding: 0 var(--structure-large-spacing-rg, 12px);
+}
+
+/* Input element */
+voa-input::part(input) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6, 16px);
+  line-height: var(--typography-base-type-scale-4, 24px);
+  color: var(--text-primary, #0b1215);
+  background-color: transparent;
+  border: none;
+  outline: none;
+  flex: 1 1 0%;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+voa-input::part(input)::placeholder {
+  color: var(--text-placeholder, #9f9fa8);
+}
+
+/* Title Row & Label */
+voa-input::part(title-row) {
+  margin-bottom: 6px;
+}
+
+voa-input::part(label) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-5, 20px);
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  line-height: 32px;
+  color: var(--text-secondary, #495057);
+  display: block;
+}
+
+/* Info */
+voa-input::part(info) {
+  color: var(--text-secondary, #495057);
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-8, 12px);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  padding-bottom: 6px; /* Align with label baseline visually */
+}
+
+voa-input::part(info-icon) {
+  color: var(--text-secondary, #495057);
+}
+
+voa-input .voa-input__required-indicator {
+  color: var(--semantic-colors-danger, #e51937);
+  margin-left: var(--structure-large-spacing-xxs, 2px);
+}
+
+/* Helper text */
+voa-input::part(helper-text) {
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--text-secondary, #495057);
+  margin-top: 6px;
+  display: block;
+}
+
+voa-input[error]::part(helper-text) {
+  color: var(--semantic-colors-danger, #e51937);
+}
+
+voa-input[valid]::part(helper-text) {
+  color: var(--semantic-colors-success, #109e7c);
+}
+
+voa-input[warning]::part(helper-text) {
+  color: var(--semantic-colors-warning, #ff9900);
+}
+
+/* States - Hover */
+voa-input:not([disabled]):not([readonly]):hover::part(container) {
+  border-color: var(--input-hover-border-color, var(--brand-base, #0064cb));
+  background-color: var(--palette-gray-gray-1, #f1f3f5);
+}
+
+/* States - Focused */
+voa-input:focus-within::part(container) {
+  border-color: var(--input-focus-border-color, var(--brand-base, #0064cb));
+  box-shadow: var(--input-active-inner-shadow, inset 0px 0px 8px 2px rgba(0, 100, 203, 0.5)),
+              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
+}
+
+/* States - Error */
+voa-input[error]::part(container) {
+  border-color: var(--semantic-colors-danger, #e51937);
+}
+
+voa-input[error]:focus-within::part(container) {
+  border-color: var(--semantic-colors-danger, #e51937);
+  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-danger, #e51937),
+              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
+}
+
+/* States - Valid */
+voa-input[valid]::part(container) {
+  border-color: var(--semantic-colors-success, #109e7c);
+}
+
+voa-input[valid]:focus-within::part(container) {
+  border-color: var(--semantic-colors-success, #109e7c);
+  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-success, #109e7c),
+              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
+}
+
+/* States - Warning */
+voa-input[warning]::part(container) {
+  border-color: var(--semantic-colors-warning, #ff9900);
+}
+
+voa-input[warning]:focus-within::part(container) {
+  border-color: var(--semantic-colors-warning, #ff9900);
+  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-warning, #ff9900),
+              var(--input-active-drop-shadow, 0px 4px 4px rgba(24, 24, 27, 0.15));
+}
+
+/* States - Disabled */
+voa-input[disabled]::part(container) {
+  background-color: var(--colors-structure-bg-base-disabled, rgba(255, 255, 255, 0.25));
+  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+voa-input[disabled]::part(input) {
+  color: var(--text-disabled, #0b1215);
+  cursor: not-allowed;
+}
+
+/* States - Readonly */
+voa-input[readonly]::part(container) {
+  background-color: var(--colors-structure-bg-container, #f1f3f5);
+}
+
+/* Prefix/Suffix slots */
+voa-input::part(prefix),
+voa-input::part(suffix) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: auto;
+  min-width: 0;
+}
+
+/* Unfilled variant */
+voa-input[fill="false"]::part(container) {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/* ============================================
+   voa-keybinding.external.css
+   ============================================ */
+
+/* 
+ * VoaKeybinding Component Styles
+ * 
+ * Estilos aplicados via CSS Parts API usando design tokens semânticos.
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322
+ */
+
+voa-keybinding::part(base) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-spacing-xxs, 2px);
+  border: var(--border-width-thin) solid var(--structure-colors-border-color);
+  border-radius: var(--structure-large-radius-sm);
+  padding: var(--structure-large-radius-xs) var(--structure-large-spacing-xs);
+  background-color: transparent;
+}
+
+voa-keybinding::part(key-icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--palette-gray-gray-6, #868e96);
+}
+
+voa-keybinding::part(key-text) {
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size);
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  line-height: normal;
+  color: var(--palette-gray-gray-6, #868e96);
+}
+
+/* ============================================
+   voa-option.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaOption
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-option
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * */
+
+/* ============================================
+   BASE - Container raiz do option
+   ============================================ */
+
+voa-option::part(base) {
+  /* Gap entre indicator e label - Semantic Token conforme Figma */
+  gap: var(--voa-spacing-sm);
+  
+  /* Transição suave para estados */
+  transition: color 0.2s ease;
+}
+
+/* Sem label, sem gap */
+voa-option:not([label])::part(base) {
+  gap: 0;
+}
+
+/* ============================================
+   INDICATOR - Componente radio visual
+   ============================================ */
+
+voa-option::part(indicator) {
+  /* O indicator externo gerencia o espaçamento e layout */
+  flex-shrink: 0;
+  
+  /* Border around the radio circle - Default state (unchecked) */
+  border: var(--border-width-thin) solid var(--structure-colors-bg-base, #ffffff);
+  border-radius: 50%;
+  background-color: var(--structure-colors-bg-base, #ffffff);
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.2);
+}
+
+/* Checked indicator - Primary blue state */
+voa-option[checked]:not([disabled])::part(indicator) {
+  border-color: var(--colors-light-primary-light, #0064cb);
+  background-color: var(--colors-light-primary-light, #0064cb);
+  box-shadow: 0 0 0 3px rgba(0, 100, 203, 0.1);
+}
+
+/* Hover indicator - Unchecked */
+voa-option:not([disabled]):not([checked]):hover::part(indicator) {
+  border-color: rgba(24, 24, 27, 0.3);
+  box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.3);
+}
+
+/* Hover indicator - Checked */
+voa-option[checked]:not([disabled]):hover::part(indicator) {
+  border-color: var(--colors-light-primary-light-400, #0071c8);
+  background-color: var(--colors-light-primary-light-400, #0071c8);
+  box-shadow: 0 0 0 3px var(--colors-light-primary-light-opacity-15);
+}
+
+/* Focus indicator - Unchecked */
+voa-option:not([disabled]):not([checked]):focus-visible::part(indicator) {
+  border-color: var(--colors-light-secondary-light, #00e5ce);
+  box-shadow: inset 0 0 0 1px var(--colors-light-secondary-light, #00e5ce), 0 0 0 3px var(--colors-light-secondary-light-100, #b5eee3);
+}
+
+/* Focus indicator - Checked */
+voa-option[checked]:not([disabled]):focus-visible::part(indicator) {
+  border-color: var(--colors-light-secondary-light, #00e5ce);
+  background-color: var(--colors-light-primary-light, #0064cb);
+  box-shadow: 0 0 0 2px var(--structure-colors-bg-base, #ffffff), 0 0 0 4px var(--colors-light-secondary-light, #00e5ce);
+}
+
+/* Disabled indicator border */
+voa-option[disabled]::part(indicator) {
+  border-color: var(--colors-structure-fill-15);
+  background-color: var(--colors-structure-fill-quaternary);
+  opacity: 0.6;
+  box-shadow: inset 0 0 0 1px var(--colors-structure-fill-terciary);
+}
+
+/* ============================================
+   INDICATOR-DOT - Ponto interior do radio
+   ============================================ */
+
+voa-option::part(indicator-dot) {
+  /* Size e visibility são controlados pelos states abaixo */
+  width: 0;
+  height: 0;
+  background-color: var(--structure-colors-bg-base, #ffffff);
+  border-radius: 50%;
+  transition: width 0.2s ease, height 0.2s ease;
+}
+
+/* Checked - Dot aparece com cor branca */
+voa-option[checked]:not([disabled])::part(indicator-dot) {
+  width: var(--option-indicator-dot-size);
+  height: var(--option-indicator-dot-size);
+  background-color: var(--structure-colors-bg-base, #ffffff);
+}
+
+/* Disabled checked - Dot com opacidade */
+voa-option[disabled][checked]::part(indicator-dot) {
+  width: var(--option-indicator-dot-size);
+  height: var(--option-indicator-dot-size);
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================
+   LABEL - Texto da opção
+   ============================================ */
+
+voa-option::part(label) {
+  /* Tipografia - Semantic Token conforme Figma */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  line-height: var(--line-height-body-md);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  
+  /* Cor padrão - Texto base */
+  color: rgba(24, 24, 27, 1);
+  
+  /* User select desabilitado */
+  user-select: none;
+  
+  /* Transição suave para estados hover/focus */
+  transition: color 0.2s ease;
+}
+
+/* ============================================
+   ESTADOS - Default
+   ============================================ */
+
+/* Default - Unchecked */
+voa-option:not([checked])::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Default - Checked */
+voa-option[checked]::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* ============================================
+   ESTADOS - Hover
+   ============================================ */
+
+/* Hover - Unchecked */
+voa-option:not([checked]):not([disabled]):hover::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Hover - Checked */
+voa-option[checked]:not([disabled]):hover::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Hover - Base container cursor */
+voa-option:not([disabled]):hover {
+  cursor: pointer;
+}
+
+/* ============================================
+   ESTADOS - Focus
+   ============================================ */
+
+/* Focus - Unchecked */
+voa-option:not([checked]):focus-visible::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* Focus - Checked */
+voa-option[checked]:focus-visible::part(label) {
+  color: rgba(24, 24, 27, 1);
+}
+
+/* ============================================
+   ESTADO - Disabled
+   ============================================ */
+
+/* Disabled - Unchecked */
+voa-option[disabled]:not([checked])::part(label) {
+  color: rgba(24, 24, 27, 0.4);
+}
+
+/* Disabled - Checked */
+voa-option[disabled][checked]::part(label) {
+  color: rgba(24, 24, 27, 0.4);
+}
+
+/* ============================================
+   ACESSIBILIDADE - Focus visível
+   ============================================ */
+
+voa-option:focus-within::part(base) {
+  outline: none;
+}
+
+/* Respeitar preferências de movimento reduzido */
+@media (prefers-reduced-motion: reduce) {
+  voa-option::part(indicator),
+  voa-option::part(indicator-dot),
+  voa-option::part(label) {
+    transition: none;
+  }
+}
+
+/* ============================================
+   voa-pagination.external.css
+   ============================================ */
+
+/* Base styles for all pagination items (buttons) */
+voa-pagination-item::part(base) {
+  border-radius: var(--voa-radius-md);
+  background-color: var(--voa-bg-base);
+  color: var(--voa-text-secondary);
+  transition: all 0.2s ease;
+}
+
+/* Hover state */
+voa-pagination-item:hover::part(base) {
+  background-color: var(--structure-colors-bg-elevated);
+}
+
+/* Active state (current page) - Figma: white bg, blue border, blue inner shadow */
+voa-pagination-item[active="true"]::part(base) {
+  background-color: var(--voa-bg-base);
+  border: var(--border-width-thin) solid var(--brand-base);
+  color: var(--voa-text-primary);
+  box-shadow: var(--input-active-inner-shadow);
+}
+
+/* Disabled state */
+voa-pagination-item[disabled="true"]::part(base) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Number text styling - Figma: Lato SemiBold, 16px, line-height 24px */
+voa-pagination-item::part(content) {
+  font-family: var(--voa-font-family-sans);
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  font-size: 1rem;
+  line-height: 24px;
+  color: inherit;
+  text-align: center;
+}
+
+/* Ellipsis styling - Figma: Manrope SemiBold, 20px */
+voa-pagination-item[type="ellipsis"]::part(content) {
+  font-family: 'Manrope', sans-serif;
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  font-size: 1.25rem;
+  line-height: 0;
+  color: var(--voa-text-secondary);
+}
+
+/* Icon styling */
+voa-pagination-item::part(icon) {
+  color: var(--voa-text-secondary);
+  width: 16px;
+  height: 16px;
+}
+
+voa-pagination-item::part(icon) svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+}
+
+/* Page Size & Goto Styling - Figma: Lato Regular, 14px, line-height 16px */
+voa-pagination-item::part(label) {
+  font-family: var(--voa-font-family-sans);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  font-size: var(--typography-base-body-sm-regular-size);
+  line-height: 16px;
+  color: var(--voa-text-secondary);
+}
+
+/* Select box (page-size) - Figma: white bg, border, 32px height */
+voa-pagination-item::part(select) {
+  height: 32px;
+  padding: 0 var(--voa-spacing-xs);
+  background-color: var(--voa-bg-base);
+  border: var(--border-width-medium) solid var(--voa-border-color);
+  border-radius: var(--voa-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Input wrapper (goto-page) - Figma: white bg, border, 32px height */
+voa-pagination-item::part(input-wrapper) {
+  height: 32px;
+  padding: 0 var(--voa-spacing-md);
+  background-color: var(--voa-bg-base);
+  border: var(--border-width-medium) solid var(--voa-border-color);
+  border-radius: var(--voa-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+/* Input field - Figma: Lato Regular, 16px, line-height 24px */
+voa-pagination-item::part(input) {
+  width: 20px;
+  text-align: center;
+  font-family: var(--voa-font-family-sans);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  font-size: 1rem;
+  line-height: 24px;
+  color: var(--voa-text-primary);
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+voa-pagination-item::part(input):focus {
+  outline: none;
+}
+
+/* Value display in select */
+voa-pagination-item .voa-pagination-item__value {
+  font-family: var(--voa-font-family-sans);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  font-size: 1rem;
+  line-height: 24px;
+  color: var(--voa-text-primary);
+}
+
+/* ============================================
+   voa-radio.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaRadio
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-radio
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-base → --structure-colors-bg-base
+ * --structure-colors/bg-elevated → --structure-colors-bg-elevated
+ * --structure-colors/bg-base-disabled → --structure-colors-bg-base-disabled
+ * --structure-colors/border-color → --structure-colors-border-color
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary
+ * --structure-colors/fill-quaternary → --structure-colors-fill-quaternary
+ * --Colors/Light/primary-light-200 → --colors-light-primary-light-200 (#008fff)
+ * --Colors/Light/primary-light-400 → --colors-light-primary-light-400 (#0071c8)
+ * --Colors/Light/secondary-light-100 → --colors-light-secondary-light-100 (#b5eee3) - CYAN
+ * --Colors/Light/secondary-light → --colors-light-secondary-light (#00e5ce) - CYAN
+ * --asset-colors/text-hover → --text-hover (ou --brand-base)
+ * --asset-colors/brand-base-50 → --brand-base-50
+ * --asset-colors/brand-base-25 → --brand-base-25
+ * --asset-colors/brand-hover → --brand-hover
+ * --radius/radius-xxs → --radius-xxs
+ * --radius/radius-round → --radius-round (100%)
+ * 
+ * EFEITOS VISUAIS IMPORTANTES DO FIGMA:
+ * - Estado focused checked: fill #008fff, stroke #0071c8, dot fill #b5eee3, dot stroke #00e5ce
+ * - Estado focused unchecked: glow interno com brand-base-50
+ * - Estados checked: sombras internas para efeito de profundidade
+ */
+
+/* ============================================
+   BASE - Elemento raiz do radio (label)
+   ============================================ */
+
+voa-radio::part(base) {
+  /* Sem estilos visuais aqui - apenas estrutura */
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+/* ============================================
+   INDICATOR - Círculo externo do radio (20px)
+   ============================================ */
+
+voa-radio::part(indicator) {
+  /* Tamanho fixo conforme Figma */
+  width: var(--radio-indicator-size);
+  height: var(--radio-indicator-size);
+  min-width: var(--radio-indicator-size);
+  min-height: var(--radio-indicator-size);
+  
+  /* Border-radius circular */
+  border-radius: var(--radius-round, 50%);
+  
+  /* Border padrão - Semantic Token */
+  border: var(--border-width-thick) solid var(--structure-colors-border-color);
+  
+  /* Background padrão - Semantic Token */
+  background-color: var(--structure-colors-bg-base);
+  
+  /* Transição suave */
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ============================================
+   INDICATOR - Estados Unchecked
+   ============================================ */
+
+/* Default - Unchecked */
+voa-radio:not([checked])::part(indicator) {
+  background-color: var(--structure-colors-bg-base);
+  border-color: var(--structure-colors-border-color);
+}
+
+/* Hover - Unchecked */
+voa-radio:not([checked]):hover::part(indicator) {
+  background-color: var(--structure-colors-bg-elevated);
+  border-color: var(--structure-colors-border-color);
+  /* Outline externo com brand-secondary-50 conforme Figma */
+  box-shadow: 0 0 0 4px var(--brand-secondary-50, var(--colors-light-secondary-light-opacity-50, rgba(0, 229, 206, 0.5)));
+}
+
+/* Focus - Unchecked (COR ESPECIAL: stroke CYAN conforme Figma) */
+voa-radio:not([checked]):focus-visible::part(indicator) {
+  background-color: var(--structure-colors-bg-base);
+  /* Stroke CYAN (#00e5ce) conforme Figma, não brand-base-50 */
+  border-color: var(--colors-light-secondary-light, var(--brand-secondary, #00e5ce)); /* rgba(0, 229, 206, 1) - CYAN */
+  /* Glow interno conforme Figma - inset shadow com CYAN (brand-secondary-50) */
+  box-shadow: var(--shadow-focus-secondary);
+}
+
+/* Disabled - Unchecked */
+voa-radio[disabled]:not([checked])::part(indicator) {
+  background-color: var(--structure-colors-bg-base-disabled);
+  border-color: var(--structure-colors-fill-secondary);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   INDICATOR - Estados Checked
+   ============================================ */
+
+/* Default - Checked */
+voa-radio[checked]::part(indicator) {
+  /* Usar primary-light-200 quando disponível (mais claro), fallback para brand-base */
+  background-color: var(--colors-light-primary-light-200, var(--voa-radio-v2-checked-bg, var(--text-hover, var(--brand-base))));
+  border-color: var(--structure-colors-fill-secondary);
+  /* Shadow interna sutil para efeito de profundidade conforme Figma */
+  /* Nota: O Figma usa overlay complexo - replicamos com inset shadow */
+  box-shadow: inset 0 var(--radius-xxs, 2px) 0 0 var(--structure-colors-bg-base-disabled, rgba(255, 255, 255, 0.25));
+}
+
+/* Hover - Checked (COR ESPECIAL: brand-base + stroke CYAN conforme Figma) */
+voa-radio[checked]:hover::part(indicator) {
+  /* Hover checked usa brand-base (#0064cb) e stroke CYAN conforme Figma */
+  background-color: var(--text-hover, var(--brand-base, #0064cb)); /* rgba(0, 100, 203, 1) */
+  border-color: var(--colors-light-secondary-light, var(--brand-secondary, #00e5ce)); /* rgba(0, 229, 206, 1) - CYAN */
+  /* Shadow interna mantida no hover */
+  /* Outline externo com brand-secondary-50 conforme Figma */
+  box-shadow: inset 0 var(--radius-xxs, 2px) 0 0 var(--structure-colors-bg-base-disabled, rgba(255, 255, 255, 0.25)),
+              0 0 0 4px var(--brand-secondary-50, var(--colors-light-secondary-light-opacity-50, rgba(0, 229, 206, 0.5)));
+}
+
+/* Focus - Checked (especial: usa cores diferentes conforme Figma) */
+voa-radio[checked]:focus-visible::part(indicator) {
+  /* Cores específicas do estado focused checked conforme Figma */
+  /* Fill: rgba(0, 143, 255, 1) - primary-light-200 */
+  background-color: var(--colors-light-primary-light-200, var(--voa-radio-v2-checked-bg, #008fff)); /* Mais claro que brand-base */
+  /* Stroke: rgba(0, 113, 200, 1) - primary-light-400 */
+  border-color: var(--colors-light-primary-light-400, var(--voa-radio-v2-checked-border, #0071c8)); /* Stroke mais escuro */
+  /* Shadow interna para efeito de profundidade conforme Figma */
+  /* Nota: O Figma usa overlay com inset negativo - replicamos com inset shadow */
+  box-shadow: inset 0 var(--radius-xxs, 2px) 0 0 var(--structure-colors-bg-base-disabled, rgba(255, 255, 255, 0.25));
+}
+
+/* Disabled - Checked */
+voa-radio[disabled][checked]::part(indicator) {
+  /* Figma mostra brand-base (#0064cb) mas com opacidade reduzida visualmente (disabled) */
+  /* Usando brand-base-25 para representar estado disabled */
+  background-color: var(--brand-base-25, var(--colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25)));
+  /* Stroke também usa brand-base-25 conforme Figma (fill e stroke iguais) */
+  border-color: var(--brand-base-25, var(--colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25)));
+  cursor: not-allowed;
+}
+
+/* ============================================
+   DOT - Círculo interno quando selecionado (8px)
+   ============================================ */
+
+voa-radio::part(dot) {
+  /* Tamanho fixo conforme Figma */
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  min-height: 8px;
+  
+  /* Border-radius circular */
+  border-radius: var(--radius-round, 50%);
+  
+  /* Background padrão - Semantic Token */
+  background-color: var(--structure-colors-bg-base);
+  
+  /* Border sutil - Semantic Token */
+  border: var(--border-width-thin) solid var(--structure-colors-fill-quaternary);
+  
+  /* Posicionamento já definido no CSS estrutural (centralizado perfeitamente) */
+  /* Não sobrescrever left/top aqui para manter centralização do CSS estrutural */
+  
+  /* Transição suave para transform, opacity, background-color e border-color */
+  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Dot - Checked (visível) */
+voa-radio[checked]::part(dot) {
+  background-color: var(--structure-colors-bg-base);
+  border-color: var(--structure-colors-fill-quaternary);
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Dot - Focused Checked (COR ESPECIAL: CYAN conforme Figma) */
+voa-radio[checked]:focus-visible::part(dot) {
+  /* Cores CYAN especiais do estado focused conforme Figma */
+  /* IMPORTANTE: No estado focused, o dot tem cor CYAN, não branco */
+  background-color: var(--colors-light-secondary-light-100, #b5eee3); /* CYAN claro - rgba(181, 238, 227, 1) */
+  border-color: var(--colors-light-secondary-light, #00e5ce); /* CYAN - rgba(0, 229, 206, 1) */
+}
+
+/* Dot - Disabled Checked */
+voa-radio[disabled][checked]::part(dot) {
+  background-color: var(--structure-colors-bg-base-disabled);
+  border-color: var(--structure-colors-fill-quaternary);
+}
+
+/* ============================================
+   INPUT - Input nativo (oculto mas acessível)
+   ============================================ */
+
+voa-radio::part(input) {
+  /* Já oculto no CSS estrutural, mas garantimos acessibilidade */
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+/* ============================================
+   ACESSIBILIDADE - Focus visível
+   ============================================ */
+
+voa-radio:focus-within::part(base) {
+  outline: none;
+}
+
+/* Respeitar preferências de movimento reduzido */
+@media (prefers-reduced-motion: reduce) {
+  voa-radio::part(indicator),
+  voa-radio::part(dot) {
+    transition: none;
+  }
+}
+
+/* ============================================
+   voa-select.external.css
+   ============================================ */
+
+/**
+ * External Styling for VoaSelect Component
+ * 
+ * This file demonstrates how to style the voa-select component
+ * using CSS Parts API and semantic design tokens.
+ * 
+ * Based on Figma design:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev
+ * 
+ * Usage:
+ * * * 
+ * DESIGN TOKEN MAPPING (Figma → CSS Variables):
+ * 
+ * Typography (from Figma):
+ * - Label: family-name:var(--base/family/family-sans,'Lato:SemiBold') 20px / 32px (Desktop/Body-lg/Bold)
+ * - Input: family-name:var(--base/family/family-sans,'Lato:Regular') 16px / 24px (Desktop/Body-md/Regular)
+ * - Info: Lato Regular 14px / 16px
+ * - Error: Lato Regular 12px / 16px
+ * 
+ * Colors (from Figma):
+ * - Background: var(--structure-colors/bg-base, #ffffff)
+ * - Border: var(--structure-colors/border-color, #adb5bd)
+ * - Border Active: var(--asset-colors/brand-base, #0064cb)
+ * - Text Primary: var(--asset-colors/text-primary, #0b1215)
+ * - Text Secondary: var(--asset-colors/text-secondary, #495057)
+ * - Text Placeholder: var(--asset-colors/text-placeholder, #9f9fa8)
+ * - Text Disabled: rgba(11, 18, 21, 0.25)
+ * - Background Disabled: rgba(255, 255, 255, 0.25)
+ * - Border Disabled: rgba(24, 24, 27, 0.06)
+ * - Focus Shadow: rgba(0, 100, 203, 0.5) - Input/active effect
+ * 
+ * Spacing (from Figma):
+ * - Gap header to input: 6px
+ * - Gap label to info: var(--spacing/spacing-xs, 4px)
+ * - Input padding: 12px
+ * - Input gap: 8px
+ * - Badge gap: var(--spacing/spacing-xs, 4px)
+ * 
+ * Border Radius (from Figma):
+ * - Input: 15.75px
+ * - Badge: var(--radius-round, 1024px)
+ * 
+ * Border Width (from Figma):
+ * - Input: 1.125px
+ * - Badge: 1px dashed
+ */
+
+/* ============================================
+   BASE - Container principal do select
+   ============================================ */
+voa-select::part(base) {
+  /* Estrutura apenas - estilos visuais aplicados via parts específicos */
+  box-sizing: border-box;
+}
+
+/* ============================================
+   HEADER - Container do label e info
+   ============================================ */
+voa-select::part(header) {
+  /* Gap entre header e input - valor específico do Figma (6px) */
+  margin-bottom: var(--structure-slim-spacing-xs);
+
+  /* Gap entre label e info - Figma: spacing/spacing-xs (4px) */
+  gap: var(--structure-large-spacing-xs);
+
+  box-sizing: border-box;
+}
+
+/* ============================================
+   LABEL - Label text
+   ============================================ */
+voa-select::part(label) {
+  /* Typography - Figma: Desktop/Body-lg/Bold (Lato SemiBold 20px / 32px) */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: 20px;
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  line-height: 32px;
+  font-style: normal;
+
+  /* Color - Figma: asset-colors/text-primary */
+  color: var(--text-primary, #0b1215);
+
+  box-sizing: border-box;
+}
+
+/* ============================================
+   INFO - Container de informação
+   ============================================ */
+voa-select::part(info) {
+  /* Gap entre texto e ícone - Figma: spacing/spacing-xs (4px) */
+  gap: var(--structure-large-spacing-xs, 4px);
+
+  box-sizing: border-box;
+}
+
+voa-select::part(info) .voa-select__info-message {
+  /* Typography - Figma: Lato Regular 14px / 16px */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-sm);
+  font-style: normal;
+
+  /* Color - Figma: asset-colors/text-secondary */
+  color: var(--text-secondary, #495057);
+}
+
+voa-select::part(info) svg {
+  /* Icon size - Figma: 16px */
+  width: 16px;
+  height: 16px;
+
+  /* Color - Figma: asset-colors/text-secondary */
+  color: var(--text-secondary, #495057);
+}
+
+/* ============================================
+   INPUT - Input container (with border)
+   ============================================ */
+voa-select::part(input) {
+  /* Background - Figma: structure-colors/bg-base */
+  background-color: var(--colors-structure-bg-base, #ffffff);
+
+  /* Border - Figma: 1.125px solid border-color */
+  border: var(--border-width-medium) solid var(--colors-structure-border-color, #adb5bd);
+
+  /* Border-radius - Figma: 15.75px */
+  border-radius: var(--structure-large-radius-lg);
+
+  /* Padding - Figma: 12px */
+  padding: 0 var(--structure-large-spacing-rg, 12px);
+
+  /* CSS variable for dropdown positioning (inherited to shadow DOM via scoped: false) */
+  --select-input-padding: 12px;
+
+  /* Allow input to wrap content dynamically (especially for multi-select) */
+  min-height: 48px;
+  height: auto;
+
+  /* Box-sizing */
+  box-sizing: border-box;
+
+  /* Transitions for state changes */
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ============================================
+   INPUT WRAPPER - Container interno com flexbox
+   ============================================ */
+voa-select::part(input-wrapper) {
+  /* Gap entre ícone e conteúdo - Figma: 8px */
+  gap: var(--structure-large-spacing-sm, 8px);
+
+  box-sizing: border-box;
+}
+
+/* ============================================
+   ICON - Left icon slot
+   ============================================ */
+voa-select::part(icon) {
+  /* Icon size - Figma: 24px */
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+
+  /* Color - Figma: asset-colors/text-secondary */
+  color: var(--text-secondary, #495057);
+
+  box-sizing: border-box;
+}
+
+voa-select [slot="icon"],
+voa-select [slot="prefix"] {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ============================================
+   INPUT STATES
+   ============================================ */
+
+/* State: Default - already applied above */
+
+/* State: Selected/Filled - Item selected (blue border) */
+voa-select[data-state="selected"]::part(input),
+voa-select[data-state="filled"]::part(input) {
+  /* Border-color - Figma: asset-colors/brand-base */
+  border-color: var(--branding-coi-colors-light-primary-light, #0064cb);
+}
+
+/* State: Focused - Field in focus (blue border + inner shadow) */
+voa-select[data-state="focused"]::part(input),
+voa-select::part(input):focus-within {
+  /* Border-color - Figma: asset-colors/brand-base */
+  border-color: var(--branding-coi-colors-light-primary-light, #0064cb);
+
+  /* Box-shadow - Figma: Input/active effect (inset 0px 0px 8px 2px rgba(0,100,203,0.5)) */
+  box-shadow: inset 0px 0px 8px 2px var(--branding-coi-colors-light-primary-light-opacity-50, rgba(0, 100, 203, 0.5));
+}
+
+/* State: Disabled - Field disabled */
+voa-select[disabled]::part(input),
+voa-select[data-state="disabled"]::part(input) {
+  /* Background - Figma: structure-colors/bg-base-disabled */
+  background-color: var(--colors-structure-bg-base-disabled, var(--branding-coi-colors-light-primary-light-opacity-15, rgba(255, 255, 255, 0.25)));
+
+  /* Border-color - Figma: structure-colors/fill-secondary */
+  border-color: var(--colors-structure-fill-secondary, var(--colors-structure-fill-15, rgba(24, 24, 27, 0.06)));
+
+  cursor: not-allowed;
+}
+
+/* State: Error - Field with error */
+voa-select[error]::part(input) {
+  /* Border-color - Use danger color or keep brand-base per Figma */
+  border-color: var(--colors-semantic-danger, var(--branding-coi-colors-light-primary-light, #0064cb));
+}
+
+/* ============================================
+   SUBCOMPONENT STYLES - voa-select-base
+   ============================================ */
+
+/* Control button - the clickable trigger */
+voa-select-base::part(control) {
+  /* Make it fill the container */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  /* Remove button styling */
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  /* Typography inherited from parent */
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-align: left;
+
+  box-sizing: border-box;
+}
+
+/* Placeholder and text inside select-base */
+voa-select-base::part(value) {
+  /* Typography - Figma: Desktop/Body-md/Regular (Lato Regular 16px / 24px) */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-md);
+  font-style: normal;
+
+  /* Color - Figma: asset-colors/text-placeholder */
+  color: var(--text-placeholder, #9f9fa8);
+
+  /* Text alignment */
+  text-align: left;
+
+  box-sizing: border-box;
+}
+
+/* When value is selected (filled) */
+voa-select-base[value]::part(value) {
+  /* Color - Figma: asset-colors/text-primary */
+  color: var(--text-primary, #0b1215);
+}
+
+/* Disabled state for label */
+voa-select[disabled]::part(label),
+voa-select[data-state="disabled"]::part(label) {
+  /* Color - Figma: text-disabled with opacity */
+  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
+}
+
+/* Disabled state for placeholder and content */
+voa-select[disabled] voa-select-base::part(value),
+voa-select[data-state="disabled"] voa-select-base::part(value) {
+  /* Color - Figma: text-disabled with opacity */
+  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
+}
+
+/* ============================================
+   ERROR MESSAGE - Error message
+   ============================================ */
+voa-select::part(error-message) {
+  /* Typography - Figma: Lato Regular 12px / 16px */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-8);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-sm);
+  font-style: normal;
+
+  /* Color - Figma: asset-colors/text-secondary */
+  color: var(--text-secondary, #495057);
+
+  /* Margin-top - Figma: 6px gap after input */
+  margin-top: 6px;
+
+  box-sizing: border-box;
+}
+
+/* ============================================
+   MULTI-SELECT STYLES
+   ============================================ */
+
+/* Remove vertical padding from input when multi-select */
+voa-select[type="multi"]::part(input) {
+  /* Remove vertical padding (top and bottom), keep only horizontal - Figma: 12px */
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: var(--structure-large-spacing-rg, 12px);
+  padding-right: var(--structure-large-spacing-rg, 12px);
+}
+
+/* Multi-select container inside input */
+voa-select .voa-select__content voa-container-multi-select::part(base) {
+  /* Layout adjustments if needed */
+  box-sizing: border-box;
+}
+
+/* ============================================
+   BADGES INSIDE MULTI-SELECT - voa-badge styling
+   ============================================ */
+/* 
+ * IMPORTANT: Since badges are inside the Shadow DOM of voa-container-multi-select,
+ * and voa-container-multi-select is inside the Shadow DOM of voa-select,
+ * we need to apply badge styles here as well (external CSS).
+ * 
+ * Base badge styles are applied in voa-container-multi-select.css (inside Shadow DOM),
+ * but we apply them here too to ensure they work even when the container CSS
+ * cannot fully penetrate the badge's Shadow DOM.
+ */
+
+/* Badge base inside multi-select */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(base) {
+  /* Background - Figma: brand-base with 15% opacity */
+  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15)) !important;
+
+  /* Border - Figma: 1px dashed brand-base */
+  border: var(--border-width-thin) dashed var(--branding-coi-colors-light-primary-light, #0064cb) !important;
+
+  /* Border-radius - Figma: pill shape (1024px from tokens) */
+  border-radius: var(--structure-large-radius-round) !important;
+
+  /* Padding - Figma: 2px vertical, 4px horizontal */
+  padding-block: var(--structure-large-spacing-xxs) !important;
+  padding-inline: var(--structure-large-spacing-xs) !important;
+
+  /* Typography - Figma: Lato Regular 16px / 24px */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif) !important;
+  font-size: var(--typography-base-type-scale-6) !important;
+  font-weight: var(--typography-base-body-sm-regular-weight) !important;
+  line-height: var(--line-height-body-md) !important;
+  font-style: normal !important;
+
+  /* Text color - Figma: brand-base */
+  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
+
+  /* Display and layout */
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: var(--structure-large-spacing-xxs, 2px) !important;
+
+  /* Transitions */
+  transition: background-color 0.2s ease, border-color 0.2s ease !important;
+}
+
+/* Badge hover state */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {
+  background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25)) !important;
+  border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8) !important;
+}
+
+/* Badge label */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(label) {
+  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
+  white-space: nowrap;
+}
+
+/* Leading icon - hide */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {
+  display: none !important;
+}
+
+/* Trailing icon (close) of badge */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  color: var(--branding-coi-colors-light-primary-light, #0064cb) !important;
+  flex-shrink: 0;
+  margin-left: var(--structure-large-spacing-xxs, 2px);
+}
+
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {
+  width: 12px !important;
+  height: 12px !important;
+  display: block !important;
+  flex-shrink: 0;
+}
+
+/* Close icon hover */
+voa-select voa-container-multi-select .voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {
+  opacity: 0.8;
+}
+
+/* Disabled state */
+voa-select[disabled] voa-container-multi-select .voa-container-multi-select__badge-wrapper voa-badge::part(base) {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+/* ============================================
+   DROPDOWN - Options menu
+   ============================================ */
+
+/* Animation for dropdown entrance and exit */
+@keyframes dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dropdownExit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* Dropdown inside voa-select-base - visual styles only */
+/* Structural positioning is in voa-select-base.css */
+/* Listbox container (role="listbox") */
+voa-select-base::part(dropdown) {
+  /* Visual styles - Figma specs */
+  background-color: var(--colors-structure-bg-base, #ffffff);
+  
+  /* Outline - 1.125px border using design token */
+  border: var(--border-width-medium) solid var(--colors-structure-border-color, #adb5bd);
+  border-radius: 15.75px;
+
+  /* Shadow for elevation - Figma: drop shadow effect with enhanced depth */
+  box-shadow: var(--voa-shadow-option, 0px 8px 16px rgba(0, 0, 0, 0.15)), 
+              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),
+              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);
+
+  /* Padding inside dropdown - vertical only */
+  padding: var(--structure-large-spacing-sm, 8px) 0;
+
+  /* Animation - entrance effect */
+  animation: dropdownEnter 0.2s ease-out forwards;
+  opacity: 1;
+  transform: translateY(0);
+
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Ensure proper stacking context */
+  position: relative;
+  z-index: 1000;
+}
+
+/* Exit animation state - when dropdown is hidden */
+voa-select-base::part(dropdown).voa-select__dropdown--hidden {
+  animation: dropdownExit 0.15s ease-in forwards;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* ============================================
+   DROPDOWN OPTION - Individual option
+   ============================================ */
+
+voa-select-base::part(option) {
+  /* Padding for options - Figma: 8px vertical, 12px horizontal */
+  padding: 8px 12px;
+
+  /* Typography - Figma: Lato Regular 16px / 24px */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: 16px;
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: 24px;
+  font-style: normal;
+
+  /* Color - Figma: text-primary */
+  color: var(--text-primary, #0b1215);
+
+  /* Box-sizing */
+  box-sizing: border-box;
+
+  /* Smooth transitions for all state changes */
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Hover state for options */
+voa-select-base::part(option):hover {
+  background-color: var(--colors-structure-bg-container, #f1f3f5);
+  cursor: pointer;
+}
+
+/* Active state for options (keyboard navigation highlight) */
+voa-select-base .voa-select__option--active {
+  background-color: var(--colors-structure-bg-container, #f1f3f5);
+}
+
+/* Selected state for options */
+voa-select-base .voa-select__option--selected {
+  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));
+  color: var(--branding-coi-colors-light-primary-light, #0064cb);
+}
+
+/* Disabled state for options */
+voa-select-base .voa-select__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================
+   DROPDOWN INDICATOR - Dropdown icon
+   ============================================ */
+
+/* Dropdown icon is inside voa-select-base */
+voa-select-base::part(indicator) {
+  /* Icon size - Figma: 24px */
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+
+  /* Color - Figma: text-primary */
+  color: var(--text-primary, #0b1215);
+
+  /* Ensure proper display */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+}
+
+voa-select-base::part(indicator) svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Disabled state for dropdown indicator */
+voa-select[disabled] voa-select-base::part(indicator),
+voa-select[data-state="disabled"] voa-select-base::part(indicator) {
+  /* Color - Figma: text-disabled with opacity */
+  color: var(--text-disabled-with-opacity, rgba(11, 18, 21, 0.25));
+}
+
+/* ============================================
+   voa-switch.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaSwitch
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-switch
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=443-10259
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --asset-colors/brand-base → --brand-base (#0064cb)
+ * --asset-colors/brand-secondary → --brand-secondary (#00e5ce)
+ * --asset-colors/brand-secondary-50 → --brand-secondary-50 (rgba(0,229,206,0.5)) - Estado OFF default
+ * --asset-colors/brand-secondary-15 → --brand-secondary-15 (rgba(0,229,206,0.15)) - Estado disabled
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary (rgba(24,24,27,0.06))
+ * --structure-colors/fill-15 → --structure-colors-fill-15 (rgba(24,24,27,0.15))
+ * --structure-colors/fill-terciary → --structure-colors-fill-terciary (rgba(24,24,27,0.04))
+ * --structure-colors/fill-quaternary → --structure-colors-fill-quaternary (rgba(24,24,27,0.02))
+ * --radius/radius-round → --radius-round (1024px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --base/family/family-sans → --font-family-sans ('Lato')
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ */
+
+/* ============================================
+   BASE - Container do switch
+   ============================================ */
+
+voa-switch::part(base) {
+  /* Gap estrutural - Token semântico conforme Figma */
+  gap: var(--structure-large-spacing-sm);
+}
+
+/* Sem label, sem gap */
+voa-switch[show-label="false"]::part(base) {
+  gap: 0;
+}
+
+/* ============================================
+   TRACK - Container do switch (40px x 20px)
+   ============================================ */
+
+voa-switch::part(track) {
+  /* Border radius conforme Figma */
+  border-radius: var(--structure-large-radius-round);
+  /* 1024px - completamente arredondado */
+  border: var(--border-width-thin) solid var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  box-sizing: border-box;
+  /* Transições suaves para mudanças de cor */
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================
+   THUMB - Elemento circular que se move (16px)
+   ============================================ */
+
+voa-switch::part(thumb) {
+  /* Border radius conforme Figma */
+  border-radius: var(--structure-large-radius-round);
+  /* 1024px - completamente arredondado */
+  border: var(--border-width-thin) solid;
+  box-sizing: border-box;
+
+  /* Variáveis locais para cálculo de posicionamento robusto */
+  --thumb-size: var(--switch-thumb-size);
+  --track-padding: 2px;
+  --thumb-offset: calc(var(--thumb-size) + var(--track-padding));
+
+  /* 
+   * ANIMATION FIX:
+   * Usamos margin-left para animar porque precisamos de referência à largura do PAI (track).
+   * Transform usa % relativo ao próprio elemento, o que não funciona para largura de track variável.
+   * Margin-left com % é relativo à largura do container.
+   */
+  margin-left: 0;
+  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Quando checked, move o thumb para a direita */
+voa-switch[checked]::part(thumb) {
+  /* 
+   * CÁLCULO ROBUSTO:
+   * 100% = Largura total do track (variável)
+   * - 16px (thumb)
+   * - 2px (padding direito)
+   * = Posição final correta independente da largura do track
+   */
+  margin-left: calc(100% - var(--thumb-offset));
+}
+
+/* ============================================
+   SHADOW - Sombra interna
+   ============================================ */
+
+voa-switch::part(shadow) {
+  /* Shadow interna conforme Figma: inset 0px 2px 4px 0px rgba(24, 24, 24, 0.25) */
+  box-shadow: var(--shadow-switch-inset);
+  border-radius: inherit;
+}
+
+/* ============================================
+   ESTADOS - OFF (default)
+   ============================================ */
+
+/* Default - Off */
+voa-switch:not([checked]):not([disabled])::part(track) {
+  background-color: var(--colors-structure-fill-quaternary);
+  /* rgba(24,24,27,0.02) */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+}
+
+voa-switch:not([checked]):not([disabled])::part(thumb) {
+  background-color: var(--brand-secondary-50);
+  /* rgba(0,229,206,0.5) - Atualizado do Figma para melhor contraste */
+  border-color: var(--colors-structure-fill-terciary);
+  /* rgba(24,24,27,0.04) */
+}
+
+/* ============================================
+   ESTADOS - ON (checked)
+   ============================================ */
+
+/* Default - On */
+voa-switch[checked]:not([disabled])::part(track) {
+  background-color: var(--brand-base);
+  /* #0064cb */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+}
+
+voa-switch[checked]:not([disabled])::part(thumb) {
+  background-color: var(--brand-secondary);
+  /* #00e5ce */
+  border-color: var(--colors-structure-fill-15);
+  /* rgba(24,24,27,0.15) */
+}
+
+/* ============================================
+   ESTADO - DISABLED
+   ============================================ */
+
+/* Disabled - Off */
+voa-switch:not([checked])[disabled]::part(track) {
+  background-color: var(--colors-structure-fill-quaternary);
+  /* rgba(24,24,27,0.02) */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  opacity: 0.5;
+}
+
+voa-switch:not([checked])[disabled]::part(thumb) {
+  background-color: var(--brand-secondary-15);
+  /* rgba(0,229,206,0.15) */
+  border-color: var(--colors-structure-fill-terciary);
+  /* rgba(24,24,27,0.04) */
+  opacity: 0.5;
+}
+
+/* Disabled - On */
+voa-switch[checked][disabled]::part(track) {
+  background-color: var(--brand-base);
+  /* #0064cb */
+  border-color: var(--colors-structure-fill-secondary);
+  /* rgba(24,24,27,0.06) */
+  opacity: 0.5;
+}
+
+voa-switch[checked][disabled]::part(thumb) {
+  background-color: var(--brand-secondary);
+  /* #00e5ce */
+  border-color: var(--colors-structure-fill-15);
+  /* rgba(24,24,27,0.15) */
+  opacity: 0.5;
+}
+
+/* ============================================
+   LABEL - Texto do label
+   ============================================ */
+
+voa-switch::part(label) {
+  color: var(--text-primary);
+  /* #0b1215 */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  line-height: var(--line-height-body-md);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  user-select: none;
+}
+
+voa-switch[disabled]::part(label) {
+  color: var(--text-disabled);
+  /* rgba(11,18,21,0.25) */
+}
+
+/* ============================================
+   FOCUS VISIBLE - Outline para acessibilidade
+   ============================================ */
+
+voa-switch:focus-visible::part(base) {
+  outline: var(--border-width-medium) solid var(--brand-base);
+  outline-offset: var(--structure-large-spacing-xs);
+  border-radius: var(--structure-large-radius-xs);
+}
+
+/* ============================================
+   voa-tab.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaTab e VoaTabItem
+ * 
+ * Este arquivo demonstra como estilizar os componentes voa-tab e voa-tab-item
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * - Tab: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553
+ * - Tab Item: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA CSS VARIABLES (global.css):
+ * 
+ * Figma Token → CSS Variable (from global.css)
+ * -------------------------------------------------------
+ * --asset-colors/brand-base → --brand-base
+ * --asset-colors/text-primary → --text-primary
+ * --asset-colors/text-disabled → --text-disabled (rendered as rgba, ~0.25 opacity)
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --spacing/spacing-rg → --spacing-spacing-rg (12px)
+ * --spacing/spacing-md → --spacing-spacing-md (16px)
+ * --spacing/spacing-lg → --spacing-spacing-lg (24px)
+ * --spacing/spacing-xxs → --spacing-spacing-xxs (2px)
+ * --radius/radius-md → --radius-md (12px)
+ * --radius/radius-xl → --radius-xl (24px)
+ * --radius/radius-round → --radius-round (1024px)
+ * --base/family/family-sans → --font-family-sans
+ * --semantic-colors/danger → --semantic-colors-danger
+ * --structure-colors/fill-secondary → --structure-colors-fill-secondary
+ * --structure-colors/bg-base → --structure-colors-bg-base
+ */
+
+/* ============================================
+   VOA-TAB - Container de tabs
+   ============================================ */
+
+voa-tab::part(base) {
+  /* Border-bottom para separador entre grupos de tabs */
+  border-bottom: var(--border-width-thin) solid var(--text-disabled);
+  box-sizing: border-box;
+}
+
+voa-tab::part(list) {
+  /* Gap entre itens conforme direção */
+  box-sizing: border-box;
+}
+
+/* Gap horizontal (padrão) */
+voa-tab[direction="horizontal"]::part(list) {
+  gap: var(--structure-large-spacing-lg);
+}
+
+/* Gap vertical */
+voa-tab[direction="vertical"]::part(list) {
+  gap: var(--structure-large-spacing-md);
+}
+
+/* ============================================
+   VOA-TAB-ITEM - Item individual de tab
+   ============================================ */
+
+/* Base - Tipografia e estrutura */
+voa-tab-item::part(base) {
+  /* Tipografia - Desktop/Body-sm/Regular */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size);
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: var(--line-height-body-sm);
+
+  /* Box-sizing */
+  box-sizing: border-box;
+
+  /* Transição suave para estados */
+  /* Transição suave para estados */
+  transition: color 0.2s ease;
+
+  /* Gap entre label e badge */
+  gap: var(--structure-large-spacing-xxs);
+}
+
+/* ============================================
+   ESTADOS - Cores por estado
+   ============================================ */
+
+/* Estado Active - Brand color */
+voa-tab-item[state="active"]::part(base) {
+  color: var(--brand-base);
+}
+
+/* Estado Default - Text primary */
+voa-tab-item[state="default"]::part(base) {
+  color: var(--text-primary);
+}
+
+/* Estado Disabled - Text disabled com opacity */
+voa-tab-item[state="disabled"]::part(base),
+voa-tab-item[disabled]::part(base) {
+  color: var(--text-disabled);
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================
+   POSIÇÕES - Padding e borders por posição
+   ============================================ */
+
+/* Posição Default (bottom border) */
+voa-tab-item[position="default"]::part(base) {
+  padding-inline: var(--spacing-spacing-xs);
+  padding-block: var(--spacing-spacing-rg);
+}
+
+voa-tab-item[position="default"]::part(base)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--brand-base);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="default"][state="active"]::part(base)::after {
+  transform: scaleX(1);
+}
+
+/* Posição Top (top border) */
+voa-tab-item[position="top"]::part(base) {
+  padding-inline: var(--spacing-spacing-xs);
+  padding-block: var(--radius-md);
+}
+
+voa-tab-item[position="top"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--brand-base);
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="top"][state="active"]::part(base)::after {
+  transform: scaleX(1);
+}
+
+/* Posição Right (right border) */
+voa-tab-item[position="right"]::part(base) {
+  padding-inline: var(--radius-xl);
+  padding-block: var(--spacing-spacing-sm);
+}
+
+voa-tab-item[position="right"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--brand-base);
+  transform: scaleY(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="right"][state="active"]::part(base)::after {
+  transform: scaleY(1);
+}
+
+/* Posição Left (left border) */
+voa-tab-item[position="left"]::part(base) {
+  padding-inline: var(--spacing-spacing-lg);
+  padding-block: var(--spacing-spacing-sm);
+}
+
+voa-tab-item[position="left"]::part(base)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background-color: var(--brand-base);
+  transform: scaleY(0);
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+
+voa-tab-item[position="left"][state="active"]::part(base)::after {
+  transform: scaleY(1);
+}
+
+/* ============================================
+   LABEL - Texto do item
+   ============================================ */
+
+voa-tab-item::part(label) {
+  /* Herda estilos do base, mas pode ser customizado se necessário */
+  display: inline-block;
+}
+
+/* ============================================
+   BADGE - Indicador de notificação
+   ============================================ */
+
+voa-tab-item::part(badge) {
+  /* Estrutura do badge */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  box-sizing: border-box;
+
+  /* Cores - Semantic Tokens */
+  background-color: var(--semantic-colors-danger);
+  border: var(--border-width-thick) solid var(--structure-colors-fill-secondary);
+  border-radius: var(--radius-round);
+
+  /* Padding interno */
+  padding: var(--spacing-spacing-xs);
+}
+
+voa-tab-item::part(badge) .voa-tab-item__badge-text {
+  /* Tipografia do badge - Typography/Legal-bold */
+  font-family: 'Manrope', sans-serif;
+  font-size: var(--typography-base-legal-bold-size, 10px);
+  font-weight: var(--typography-base-legal-bold-weight, 600);
+  line-height: var(--typography-base-legal-bold-line-height, 16px);
+
+  /* Cores */
+  color: var(--structure-colors-bg-base);
+
+  /* Layout */
+  text-align: center;
+  white-space: nowrap;
+  width: 8px;
+  height: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   ESTADOS HOVER/FOCUS
+   ============================================ */
+
+/* Hover apenas em itens não-disabled */
+voa-tab-item[state="default"]:hover::part(base),
+voa-tab-item[state="active"]:hover::part(base) {
+  /* Pode adicionar efeito hover se necessário */
+  opacity: 0.8;
+}
+
+voa-tab-item[state="disabled"]:hover::part(base),
+voa-tab-item[disabled]:hover::part(base) {
+  /* Sem hover em disabled */
+  opacity: 1;
+}
+
+/* Focus-visible para acessibilidade WCAG 2.2 AA */
+voa-tab-item::part(base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+voa-tab-item[state="disabled"]::part(base):focus-visible,
+voa-tab-item[disabled]::part(base):focus-visible {
+  /* Sem focus em disabled */
+  outline: none;
+}
+
+/* ============================================
+   voa-tag.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaTag
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-tag
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-container → --structure-colors-bg-container (#f1f3f5)
+ * --structure-colors/border-color → --structure-colors-border-color (#adb5bd)
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --radius/radius-xs → --radius-xs (4px)
+ * --radius/radius-round → --radius-round (1024px)
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ * --base/family/family-sans → --typography-base-family-sans ("Lato", sans-serif)
+ * 
+ * Tamanhos de fonte do Figma:
+ * - MD: 14px, line-height 16px
+ * - SM: 11px, line-height 12px
+ * 
+ * Tamanhos de ícone:
+ * - MD: 16px
+ * - SM: 12px
+ */
+
+/* ============================================
+   BASE - Container principal do tag
+   ============================================ */
+voa-tag::part(base) {
+  /* Background padrão - Semantic Token (conforme Figma: structure-colors/bg-container) */
+  background-color: var(--structure-colors-bg-container, #f1f3f5);
+  
+  /* Border padrão - 1.5px solid (conforme Figma) */
+  border: var(--border-width-thick, 1.5px) solid var(--structure-colors-border-color, #adb5bd);
+  
+  /* Border-radius padrão para shape="default" - Semantic Token (conforme Figma: radius/radius-xs) */
+  border-radius: var(--radius-xs, 4px);
+  
+  /* Gap entre elementos - Semantic Token (conforme Figma: spacing/spacing-xs) */
+  gap: var(--spacing-spacing-xs, 4px);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+}
+
+/* Shape: Pill - Border-radius completamente arredondado */
+voa-tag[shape="pill"]::part(base) {
+  /* Border-radius pill - Semantic Token (conforme Figma: radius/radius-round) */
+  border-radius: var(--radius-round, 1024px);
+}
+
+/* ============================================
+   PADDING POR TAMANHO
+   ============================================ */
+
+/* Size: Medium (md) - Padding padrão */
+voa-tag[size="md"]::part(base) {
+  /* Padding para size md - Semantic Tokens (conforme Figma: spacing/spacing-xs vertical, spacing/spacing-sm horizontal) */
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-sm, 8px);
+}
+
+/* Size: Small (sm) - Padding reduzido */
+voa-tag[size="sm"]::part(base) {
+  /* Padding menor para size sm - Semantic Token (conforme Figma: spacing/spacing-xs) */
+  padding: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   LABEL - Texto do tag
+   ============================================ */
+voa-tag::part(label) {
+  /* Cor do texto - Semantic Token (conforme Figma: asset-colors/text-primary) */
+  color: var(--text-primary, #0b1215);
+  
+  /* Família de fonte - Semantic Token (conforme Figma: base/family/family-sans) */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  
+  /* Peso da fonte - Regular (400) */
+  font-weight: 400;
+  
+  /* Estilo da fonte */
+  font-style: normal;
+}
+
+/* Label - Size: Medium (md) */
+voa-tag[size="md"]::part(label) {
+  /* Tamanho de fonte md - 14px (conforme Figma) */
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  
+  /* Line-height md - 16px (conforme Figma) */
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+}
+
+/* Label - Size: Small (sm) */
+voa-tag[size="sm"]::part(label) {
+  /* Tamanho de fonte sm - 11px (conforme Figma: Desktop/Body-xs/Regular) */
+  font-size: var(--typography-base-type-scale-9, 11px);
+  
+  /* Line-height sm - 12px (conforme Figma) */
+  line-height: 12px;
+}
+
+/* ============================================
+   ÍCONES - Containers dos ícones
+   ============================================ */
+voa-tag::part(icon-start),
+voa-tag::part(icon-end) {
+  /* Cor dos ícones - usando brand-secondary (conforme Figma: teal/cyan) */
+  color: var(--brand-secondary, #00e5ce);
+  
+  /* Alinhamento */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ícones - Size: Medium (md) */
+voa-tag[size="md"]::part(icon-start),
+voa-tag[size="md"]::part(icon-end) {
+  /* Tamanho do ícone md - 16px (conforme Figma) */
+  width: 16px;
+  height: 16px;
+}
+
+/* Ícones - Size: Small (sm) */
+voa-tag[size="sm"]::part(icon-start),
+voa-tag[size="sm"]::part(icon-end) {
+  /* Tamanho do ícone sm - 12px (conforme Figma) */
+  width: 12px;
+  height: 12px;
+}
+
+/* Estilização de SVGs dentro dos slots de ícone */
+voa-tag[size="md"] [slot="icon-start"],
+voa-tag[size="md"] [slot="icon-end"] {
+  width: 16px;
+  height: 16px;
+  fill: var(--brand-secondary, #00e5ce);
+}
+
+voa-tag[size="sm"] [slot="icon-start"],
+voa-tag[size="sm"] [slot="icon-end"] {
+  width: 12px;
+  height: 12px;
+  fill: var(--brand-secondary, #00e5ce);
+}
+
+/* ============================================
+   ESTADOS INTERATIVOS (Opcional - para uso futuro)
+   ============================================ */
+
+/* Hover state */
+voa-tag:hover::part(base) {
+  /* Sutil destaque no hover */
+  border-color: var(--structure-colors-border-color-secondary, #dee2e6);
+}
+
+/* Focus state - Acessibilidade */
+voa-tag:focus-visible::part(base) {
+  outline: 2px solid var(--brand-base, #0064cb);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DARK THEME SUPPORT
+   ============================================ */
+[data-theme="dark"] voa-tag::part(base) {
+  /* Background dark - usando tokens dark */
+  background-color: var(--structure-colors-bg-container);
+  
+  /* Border dark */
+  border-color: var(--structure-colors-border-color);
+}
+
+[data-theme="dark"] voa-tag::part(label) {
+  /* Cor do texto dark - garantir contraste adequado com fallback explícito */
+  color: var(--text-primary, #ffffff);
+}
+
+/* Variantes com backgrounds coloridos precisam de texto claro */
+[data-theme="dark"] voa-tag[variant="solid"]::part(label),
+[data-theme="dark"] voa-tag[variant="tonal"]::part(label) {
+  color: var(--text-primary, #ffffff);
+}
+
+[data-theme="dark"] voa-tag::part(icon-start),
+[data-theme="dark"] voa-tag::part(icon-end) {
+  /* Cor dos ícones dark - usando brand primary (teal no dark mode) */
+  color: var(--brand-base, #00e5ce);
+}
+
+[data-theme="dark"] voa-tag [slot="icon-start"],
+[data-theme="dark"] voa-tag [slot="icon-end"] {
+  fill: var(--brand-base, #00e5ce);
+}
+
+/* ============================================
+   voa-text-area.external.css
+   ============================================ */
+
+/* 
+ * VoaTextArea Component Styles
+ * 
+ * Estilos aplicados via CSS Parts API usando design tokens semânticos.
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=552-1198
+ */
+
+/* Label Wrapper */
+voa-text-area::part(label-wrapper) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 6px;
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+/* Label Text */
+voa-text-area::part(label) {
+  font-family: var(--voa-font-family-sans);
+  font-size: 20px;
+  font-weight: var(--typography-base-body-sm-bold-weight);
+  line-height: 32px;
+  color: var(--text-secondary);
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+/* Required Indicator */
+voa-text-area::part(required-indicator) {
+  color: var(--semantic-colors-danger);
+  margin-left: 2px;
+}
+
+/* Label Info Section */
+voa-text-area::part(label-info) {
+  display: flex;
+  gap: var(--spacing-spacing-xs, 4px);
+  align-items: center;
+  padding-bottom: 6px;
+}
+
+/* Label Info Text */
+voa-text-area::part(label-info-text) {
+  font-family: var(--voa-font-family-sans);
+  font-size: 12px;
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: 16px;
+  color: var(--text-secondary);
+}
+
+/* Label Info Icon */
+voa-text-area::part(label-info-icon) {
+  width: 16px;
+  height: 16px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+/* Textarea Container */
+voa-text-area::part(container) {
+  background-color: var(--structure-colors-bg-base);
+  border: var(--border-width-medium) solid var(--structure-colors-border-color);
+  border-radius: var(--structure-large-radius-lg);
+  padding: var(--spacing-spacing-sm, 8px);
+  min-height: 120px;
+  position: relative;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Textarea Container - Focused State (Active) */
+voa-text-area:focus-within::part(container) {
+  border-color: var(--brand-base);
+  box-shadow: inset 0px 0px 8px 2px var(--brand-base-50, rgba(0, 100, 203, 0.5));
+}
+
+/* Textarea Container - Error State */
+voa-text-area[has-error]::part(container) {
+  border-color: var(--semantic-colors-danger);
+}
+
+voa-text-area[has-error]:focus-within::part(container) {
+  border-color: var(--semantic-colors-danger);
+  box-shadow: inset 0px 0px 8px 2px var(--semantic-colors-danger);
+}
+
+/* Textarea Container - Disabled State */
+voa-text-area[disabled]::part(container) {
+  background-color: var(--structure-colors-bg-base-disabled);
+  border-color: var(--structure-colors-border-color);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Textarea Container - Readonly State */
+voa-text-area[readonly]::part(container) {
+  background-color: var(--structure-colors-bg-container);
+}
+
+/* Textarea Element */
+voa-text-area::part(textarea) {
+  font-family: var(--voa-font-family-sans);
+  font-size: 16px;
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: 24px;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  flex: 1 0 0;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+voa-text-area::part(textarea)::placeholder {
+  color: var(--text-placeholder);
+}
+
+/* Textarea - Disabled State */
+voa-text-area[disabled]::part(textarea) {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+/* Resize Handle */
+voa-text-area::part(resize-handle) {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--structure-colors-border-color-secondary);
+  box-sizing: border-box;
+}
+
+voa-text-area[disabled]::part(resize-handle),
+voa-text-area[readonly]::part(resize-handle) {
+  display: none;
+}
+
+/* Character Counter */
+voa-text-area::part(character-counter) {
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: 14px;
+  font-weight: var(--typography-base-body-sm-regular-weight);
+  line-height: 16px;
+  color: var(--text-secondary);
+  text-align: right;
+  margin-top: 6px;
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* Error Message */
+voa-text-area::part(error-message) {
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--semantic-colors-danger);
+  margin-top: 6px;
+  display: block;
+}
+
+/* ============================================
+   voa-tooltip.external.css
+   ============================================ */
+
+/**
+ * Estilização Externa do VoaTooltip
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-tooltip
+ * usando CSS Parts API e design tokens semânticos.
+ * 
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=538-2010&t=Kno5mRpQSwBY8jAM-4
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * * * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --spacing/spacing-xs → --spacing-spacing-xs (4px)
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --spacing/spacing-rg → --spacing-spacing-rg (12px)
+ * --radius/radius-sm → --radius-sm (8px)
+ * --radius/radius-xxs → --radius-xxs (2px)
+ * --base/family/family-sans → --font-family-sans (Lato)
+ * --structure-colors/bg-elevated → --tooltip-default-bg
+ * --structure-colors/border-color → --tooltip-default-border
+ * --structure-colors/bg-spot → --tooltip-spot-bg
+ * --structure-colors/bg-mask → --tooltip-spot-border
+ * --palette/{color}/{color}-5 → --tooltip-{color}-bg
+ * --palette/{color}/{color}-6 → --tooltip-{color}-border
+ */
+
+/* ============================================
+   TOOLTIP BODY - Estilos base
+   ============================================ */
+
+/* Base Tooltip Body - Default Theme */
+voa-tooltip::part(body) {
+  /* Background - Semantic Token (conforme Figma: structure-colors/bg-elevated) */
+  background-color: var(--structure-colors-bg-elevated);
+  
+  /* Border - Semantic Token (conforme Figma: structure-colors/border-color) */
+  border: var(--border-width-thick) solid var(--structure-colors-border-color);
+  
+  /* Border-radius - Semantic Token (conforme Figma: radius/radius-sm) */
+  border-radius: var(--structure-large-radius-sm);
+  
+  /* Padding - Semantic Tokens (conforme Figma: spacing/spacing-sm e spacing/spacing-rg) */
+  padding: var(--structure-large-spacing-sm) var(--structure-large-spacing-rg);
+  
+  /* Gap entre ícone e texto - Semantic Token (conforme Figma: spacing/spacing-xs) */
+  gap: var(--structure-large-spacing-xs);
+  
+  /* Inset shadow - Semantic Tokens (conforme Figma: radius/radius-xxs e structure-colors/bg-base-disabled) */
+  box-shadow: inset 0px var(--structure-large-radius-xxs) 0px 0px var(--structure-colors-bg-base-disabled);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Variáveis CSS para estilização do triângulo (definidas no componente, podem ser sobrescritas aqui) */
+  --arrow-color: var(--structure-colors-bg-elevated);
+  --arrow-border-color: var(--structure-colors-border-color);
+  --tooltip-bg: var(--structure-colors-bg-elevated);
+}
+
+/* ============================================
+   TOOLTIP CONTENT - Tipografia
+   ============================================ */
+
+voa-tooltip::part(content) {
+  /* Cor do texto - Semantic Token (conforme Figma: asset-colors/text-primary) */
+  color: var(--text-primary);
+  
+  /* Font-family - Semantic Token (conforme Figma: base/family/family-sans) */
+  font-family: var(--font-family-sans);
+  
+  /* Font-size e line-height conforme Figma: Body-sm/Regular (14px / 16px) */
+  font-size: var(--typography-base-body-sm-regular-size);
+  line-height: var(--line-height-body-sm);
+  
+  /* Text-align conforme design */
+  text-align: center;
+}
+
+/* ============================================
+   TOOLTIP ARROW - Criado via ::after do body
+   ============================================ */
+
+/* As pseudo-elementos ::before e ::after do triângulo são criados no CSS estrutural do componente */
+/* A estilização (cores) é feita via variáveis CSS definidas aqui */
+
+/* ============================================
+   TEMA: SPOT (fundo escuro)
+   ============================================ */
+
+voa-tooltip[theme="spot"]::part(body) {
+  background-color: var(--structure-colors-bg-spot);
+  border-color: var(--structure-colors-bg-mask);
+}
+
+voa-tooltip[theme="spot"]::part(content) {
+  color: var(--text-on-primary);
+}
+
+voa-tooltip[theme="spot"]::part(body) {
+  --arrow-color: var(--structure-colors-bg-spot);
+  --arrow-border-color: var(--structure-colors-bg-mask);
+  --tooltip-bg: var(--structure-colors-bg-spot);
+}
+
+/* ============================================
+   TEMA: PINK
+   ============================================ */
+
+voa-tooltip[theme="pink"]::part(body) {
+  background-color: var(--palette-pink-pink-5);
+  border-color: var(--palette-pink-pink-6);
+}
+
+voa-tooltip[theme="pink"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="pink"]::part(body) {
+  --arrow-color: var(--palette-pink-pink-5);
+  --arrow-border-color: var(--palette-pink-pink-6);
+  --tooltip-bg: var(--palette-pink-pink-5);
+}
+
+/* ============================================
+   TEMA: GRAPE
+   ============================================ */
+
+voa-tooltip[theme="grape"]::part(body) {
+  background-color: var(--palette-grape-grape-5);
+  border-color: var(--palette-grape-grape-6);
+}
+
+voa-tooltip[theme="grape"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="grape"]::part(body) {
+  --arrow-color: var(--palette-grape-grape-5);
+  --arrow-border-color: var(--palette-grape-grape-6);
+  --tooltip-bg: var(--palette-grape-grape-5);
+}
+
+/* ============================================
+   TEMA: VIOLET
+   ============================================ */
+
+voa-tooltip[theme="violet"]::part(body) {
+  background-color: var(--palette-violet-violet-5);
+  border-color: var(--palette-violet-violet-6);
+}
+
+voa-tooltip[theme="violet"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="violet"]::part(body) {
+  --arrow-color: var(--palette-violet-violet-5);
+  --arrow-border-color: var(--palette-violet-violet-6);
+  --tooltip-bg: var(--palette-violet-violet-5);
+}
+
+/* ============================================
+   TEMA: INDIGO
+   ============================================ */
+
+voa-tooltip[theme="indigo"]::part(body) {
+  background-color: var(--palette-indigo-indigo-5);
+  border-color: var(--palette-indigo-indigo-6);
+}
+
+voa-tooltip[theme="indigo"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="indigo"]::part(body) {
+  --arrow-color: var(--palette-indigo-indigo-5);
+  --arrow-border-color: var(--palette-indigo-indigo-6);
+  --tooltip-bg: var(--palette-indigo-indigo-5);
+}
+
+/* ============================================
+   TEMA: BLUE
+   ============================================ */
+
+voa-tooltip[theme="blue"]::part(body) {
+  background-color: var(--palette-blue-blue-5);
+  border-color: var(--palette-blue-blue-6);
+}
+
+voa-tooltip[theme="blue"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="blue"]::part(body) {
+  --arrow-color: var(--palette-blue-blue-5);
+  --arrow-border-color: var(--palette-blue-blue-6);
+  --tooltip-bg: var(--palette-blue-blue-5);
+}
+
+/* ============================================
+   TEMA: CYAN
+   ============================================ */
+
+voa-tooltip[theme="cyan"]::part(body) {
+  background-color: var(--palette-cyan-cyan-5);
+  border-color: var(--palette-cyan-cyan-6);
+}
+
+voa-tooltip[theme="cyan"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="cyan"]::part(body) {
+  --arrow-color: var(--palette-cyan-cyan-5);
+  --arrow-border-color: var(--palette-cyan-cyan-6);
+  --tooltip-bg: var(--palette-cyan-cyan-5);
+}
+
+/* ============================================
+   TEMA: TEAL
+   ============================================ */
+
+voa-tooltip[theme="teal"]::part(body) {
+  background-color: var(--palette-teal-teal-5);
+  border-color: var(--palette-teal-teal-6);
+}
+
+voa-tooltip[theme="teal"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="teal"]::part(body) {
+  --arrow-color: var(--palette-teal-teal-5);
+  --arrow-border-color: var(--palette-teal-teal-6);
+  --tooltip-bg: var(--palette-teal-teal-5);
+}
+
+/* ============================================
+   TEMA: LIME
+   ============================================ */
+
+voa-tooltip[theme="lime"]::part(body) {
+  background-color: var(--palette-lime-lime-5);
+  border-color: var(--palette-lime-lime-6);
+}
+
+voa-tooltip[theme="lime"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="lime"]::part(body) {
+  --arrow-color: var(--palette-lime-lime-5);
+  --arrow-border-color: var(--palette-lime-lime-6);
+  --tooltip-bg: var(--palette-lime-lime-5);
+}
+
+/* ============================================
+   TEMA: ORANGE
+   ============================================ */
+
+voa-tooltip[theme="orange"]::part(body) {
+  background-color: var(--palette-orange-orange-5);
+  border-color: var(--palette-orange-orange-6);
+}
+
+voa-tooltip[theme="orange"]::part(content) {
+  color: var(--structure-colors-bg-base);
+}
+
+voa-tooltip[theme="orange"]::part(body) {
+  --arrow-color: var(--palette-orange-orange-5);
+  --arrow-border-color: var(--palette-orange-orange-6);
+  --tooltip-bg: var(--palette-orange-orange-5);
+}
+
+/* ============================================
+   DARK THEME SUPPORT
+   ============================================ */
+
+[data-theme="dark"] voa-tooltip::part(body) {
+  /* Background dark - usando tokens dark */
+  background-color: var(--structure-colors-bg-elevated);
+  
+  /* Border dark */
+  border-color: var(--structure-colors-border-color);
+  
+  /* Arrow colors for dark mode */
+  --arrow-color: var(--structure-colors-bg-elevated);
+  --arrow-border-color: var(--structure-colors-border-color);
+  --tooltip-bg: var(--structure-colors-bg-elevated);
+}
+
+[data-theme="dark"] voa-tooltip::part(content) {
+  /* Cor do texto dark - garantir contraste adequado */
+  color: var(--text-primary, #ffffff);
+}
+
+/* ============================================
+   ICON SLOT - Estilização do ícone
+   ============================================ */
+
+voa-tooltip::part(icon-slot) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+voa-tooltip::part(icon-slot) ::slotted(*) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}