voa-ds-core 1.0.10 → 1.0.12

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

@@ -1,118 +0,0 @@
-/**
- * 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:
- * @import '@voa-ds/tokens/dist/tokens.css';
- * @import '@voa-ds/styles/voa-avatar.css';
- */
-
-/* ============================================
-   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;
-}
-

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

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

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

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