voa-ds-core 1.0.8 → 1.0.10

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

@@ -0,0 +1,118 @@
+/**
+ * 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

@@ -0,0 +1,346 @@
+/**
+ * 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

@@ -0,0 +1,183 @@
+/**
+ * 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;
+}
+