voa-ds-core 1.0.8 → 1.0.10

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

@@ -0,0 +1,213 @@
+/**
+ * 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/voa/styles/external/voa-pagination.external.css

@@ -0,0 +1,125 @@
+@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/voa/styles/external/voa-radio.external.css

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