voa-ds-core 1.0.11 → 1.0.13

package/dist/voa/styles/external/voa-switch.external.css

@@ -1,215 +0,0 @@
-/**
- * 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:
- * @import '@voa-ds/tokens/global.css';
- * @import '@voa-ds/styles/voa-switch.css';
- * 
- * 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);
-}

package/dist/voa/styles/external/voa-tab.external.css

@@ -1,284 +0,0 @@
-/**
- * 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:
- * @import '@voa-ds/tokens/global.css';
- * @import '@voa-ds/styles/voa-tab.css';
- * 
- * 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;
-}

package/dist/voa/styles/external/voa-tag.external.css

@@ -1,206 +0,0 @@
-/**
- * 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:
- * @import '@voa-ds/tokens/global.css';
- * @import '@voa-ds/styles/voa-tag.css';
- * 
- * 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);
-}