voa-ds-core 1.0.11 → 1.0.12

package/dist/collection/styles/external/voa-option.external.css

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

package/dist/collection/styles/external/voa-pagination.external.css

@@ -1,125 +0,0 @@
-@import '../../tokens/global.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);
-}

package/dist/collection/styles/external/voa-radio.external.css

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