voa-ds-core 1.0.8 → 1.0.10

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

@@ -0,0 +1,257 @@
+/**
+ * Estilização Externa do VoaButton
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-button
+ * 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=515-327
+ */
+
+/* ============================================
+   BASE - Elemento raiz do botão
+   ============================================ */
+
+voa-button::part(base) {
+  /* Tipografia */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size); /* Desktop/Body-sm/Regular */
+  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 */
+  transition: all 0.2s ease;
+}
+
+/* ============================================
+   TAMANHOS (Size)
+   ============================================ */
+
+/* Small (sm) */
+voa-button[size="sm"]::part(base) {
+  /* Padding: Vertical 4px, Horizontal 16px */
+  padding-block: var(--spacing-spacing-xs, 4px);
+  padding-inline: var(--spacing-spacing-md, 16px);
+  
+  border-radius: var(--radius-xs, 4px);
+  gap: 10px;
+}
+
+/* Medium (md) */
+voa-button[size="md"]::part(base) {
+  /* Padding: Vertical 8px, Horizontal 4px */
+  padding-block: var(--spacing-spacing-sm, 8px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  
+  min-width: 82px;
+  border-radius: var(--radius-sm, 8px);
+  gap: 4px;
+}
+
+/* Large (lg) - padrão */
+voa-button[size="lg"]::part(base) {
+  /* Padding: Vertical 12px, Horizontal 4px */
+  padding-block: var(--spacing-spacing-rg, 12px);
+  padding-inline: var(--spacing-spacing-xs, 4px);
+  
+  min-width: 98px;
+  border-radius: var(--radius-sm, 8px);
+  gap: 10px;
+}
+
+/* Ajuste de gap para variantes específicas no tamanho LG */
+voa-button[size="lg"][variant="tonal"]::part(base),
+voa-button[size="lg"][variant="ghost"]::part(base),
+voa-button[size="lg"][variant="link"]::part(base) {
+  gap: var(--spacing-spacing-xs, 4px);
+}
+
+/* ============================================
+   VARIANTES (Type)
+   ============================================ */
+
+/* Primary */
+voa-button[variant="primary"]::part(base) {
+  background-color: var(--brand-base, #0064cb);
+  color: var(--text-on-primary, #f1f1f1);
+  border: var(--border-width-thin) solid var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+voa-button[variant="primary"]:hover::part(base) {
+  background-color: var(--brand-hover, #00398d);
+  border-color: var(--brand-base-50, rgba(0, 100, 203, 0.5));
+}
+
+voa-button[variant="primary"]:active::part(base) {
+  background-color: var(--brand-active, #008fff);
+  border-color: var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+/* Secondary */
+voa-button[variant="secondary"]::part(base) {
+  background-color: var(--brand-secondary, #00e5ce);
+  color: var(--text-primary, #0b1215);
+  border: var(--border-width-thin) solid var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+voa-button[variant="secondary"]:hover::part(base) {
+  /* Figma indica bg-secondary também no hover, talvez mude apenas borda ou sombra? 
+     Mantendo conforme token do Figma output */
+  background-color: var(--brand-secondary, #00e5ce);
+  border-color: var(--structure-colors-bg-mask, rgba(0, 0, 0, 0.45));
+}
+
+voa-button[variant="secondary"]:active::part(base) {
+  /* Figma indica gradient overlay, simplificado aqui para tokens se possível */
+  background-color: var(--brand-secondary, #00e5ce);
+  border-color: var(--structure-colors-fill-secondary, rgba(24, 24, 27, 0.06));
+}
+
+/* Tonal */
+voa-button[variant="tonal"]::part(base) {
+  background-color: var(--brand-base-25, rgba(0, 100, 203, 0.25));
+  color: var(--text-primary, #0b1215);
+  border: none; 
+  /* Nota: Figma não mostra borda explicita no default tonal LG, 
+     mas mostra borda transparente/base no disabled/active em alguns casos. 
+     Vamos manter sem borda ou borda transparente para evitar pulos de layout. */
+  border: var(--border-width-thin) solid transparent;
+}
+
+voa-button[variant="tonal"]:hover::part(base) {
+  background-color: var(--brand-base-50, rgba(0, 100, 203, 0.5));
+}
+
+voa-button[variant="tonal"]:active::part(base) {
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+}
+
+/* Ghost */
+voa-button[variant="ghost"]::part(base) {
+  background-color: transparent;
+  color: var(--brand-base, #0064cb);
+  border: var(--border-width-thin) solid var(--brand-base, #0064cb);
+}
+
+voa-button[variant="ghost"]:hover::part(base) {
+  border-color: var(--brand-hover, #00398d);
+  color: var(--colors-light-secondary-light, #00e5ce); /* Figma output mostra cor secundária no hover? */
+}
+
+voa-button[variant="ghost"]:active::part(base) {
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+  border-color: var(--brand-base, #0064cb);
+  color: var(--colors-light-secondary-light, #00e5ce);
+}
+
+/* Link */
+voa-button[variant="link"]::part(base) {
+  background-color: transparent;
+  color: var(--palette-blue-blue-7, #1c7ed6);
+  border: none;
+  /* Mantendo borda transparente para consistência de box-model se necessário, 
+     mas link geralmente não tem borda. Figma não mostra borda. */
+}
+
+voa-button[variant="link"]:hover::part(base) {
+  color: var(--palette-blue-blue-9, #1864ab);
+  text-decoration: underline;
+}
+
+voa-button[variant="link"]:active::part(base) {
+  color: var(--palette-blue-blue-6, #228be6);
+}
+
+/* ============================================
+   ESTADOS DISABLED E LOADING
+   ============================================ */
+
+/* Disabled state */
+voa-button[disabled]:not([loading])::part(base) {
+  cursor: not-allowed;
+  
+  /* Primary Disabled */
+  background-color: var(--brand-base-15, rgba(0, 100, 203, 0.15));
+  /* Border color fixed: using semantic token with opacity */
+  border-color: var(--colors-structure-fill-secondary, rgba(24, 24, 27, 0.06));
+  /* Text color fixed: using value with opacity (token is opaque) */
+  color: rgba(11, 18, 21, 0.25);
+}
+
+voa-button[variant="secondary"][disabled]:not([loading])::part(base) {
+  background-color: var(--brand-secondary-15, rgba(0, 229, 206, 0.15));
+}
+
+voa-button[variant="tonal"][disabled]:not([loading])::part(base) {
+  /* Using token with opacity */
+  background-color: var(--colors-structure-fill-15, rgba(24, 24, 27, 0.15));
+}
+
+voa-button[variant="ghost"][disabled]:not([loading])::part(base) {
+  background-color: transparent;
+  /* Using token with opacity */
+  border-color: var(--colors-structure-fill-15, rgba(24, 24, 27, 0.15));
+}
+
+voa-button[variant="link"][disabled]:not([loading])::part(base) {
+  background-color: transparent;
+  color: var(--palette-blue-blue-2, #a5d8ff);
+}
+
+/* Loading state */
+voa-button[loading]::part(base),
+voa-button.loading::part(base) {
+  opacity: 0.7;
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+
+/* ============================================
+   FOCUS VISIBLE (Acessibilidade)
+   ============================================ */
+
+voa-button::part(base):focus-visible {
+  outline: 2px solid var(--brand-base, #0064cb);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   ELEMENTOS INTERNOS
+   ============================================ */
+
+/* Label */
+voa-button::part(label) {
+  display: inline-block;
+}
+
+/* Ícones */
+voa-button::part(icon-leading),
+voa-button::part(icon-trailing) {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+voa-button::part(icon-leading) svg,
+voa-button::part(icon-trailing) svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Loader */
+/* Note: @keyframes and animation are defined inside Shadow DOM (voa-button.css)
+   because CSS Parts API cannot access @keyframes from external scope.
+   Use CSS Custom Properties to customize: --voa-loader-size, --voa-loader-duration */
+
+voa-button::part(loader) {
+  /* Visual customization - size can override the internal default via CSS var */
+  color: currentColor;
+}
+
+voa-button[loading]::part(loader) {
+  margin-right: var(--spacing-spacing-xs, 4px);
+}

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

@@ -0,0 +1,30 @@
+/**
+ * External Styling for VoaCard
+ * 
+ * Uses CSS Parts API and design tokens.
+ */
+
+voa-card::part(base) {
+  background-color: var(--colors-structure-bg-base, #ffffff);
+  border: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  color: var(--text-primary, #111827);
+}
+
+voa-card::part(header) {
+  padding: var(--spacing-spacing-md, 16px);
+  border-bottom: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  font-weight: 600;
+}
+
+voa-card::part(body) {
+  padding: var(--spacing-spacing-md, 16px);
+}
+
+voa-card::part(footer) {
+  padding: var(--spacing-spacing-md, 16px);
+  border-top: 1px solid var(--colors-structure-border-color, #e5e7eb);
+  background-color: var(--colors-structure-bg-container, #f9fafb);
+}

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

@@ -0,0 +1,303 @@
+/**
+ * Estilização Externa do VoaCheckbox
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-checkbox
+ * 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=429-677
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/global.css';
+ * @import '@voa-ds/styles/voa-checkbox.css';
+ * 
+ * MAPEAMENTO DE TOKENS DO FIGMA PARA STYLE DICTIONARY:
+ * 
+ * Figma Token → Style Dictionary Token
+ * --------------------------------------------
+ * --structure-colors/bg-base → --structure-colors-bg-base (white)
+ * --palette/blue/blue-6 → --palette-blue-blue-6 (#228be6)
+ * --palette/blue/blue-8 → --palette-blue-blue-8 (#1971c2)
+ * --palette/blue/blue-4 → --palette-blue-blue-4 (#4dabf7)
+ * --structure-colors/border-color → --structure-colors-border-color (#adb5bd)
+ * --asset-colors/brand-base-50 → --brand-base-50 (rgba(0,100,203,0.5))
+ * --asset-colors/text-primary → --text-primary (#0b1215)
+ * --asset-colors/text-hover → --text-hover (#0064cb)
+ * --asset-colors/text-disabled → --text-disabled (rgba(11,18,21,0.25))
+ * --spacing/spacing-sm → --spacing-spacing-sm (8px)
+ * --border-radius/radius-sm → --radius-sm (4px)
+ * --base/family/family-sans → --font-family-sans ('Lato')
+ * 
+ * ESTRUTURA DO COMPONENTE INTERNALS (ElementInternals):
+ * 
+ * O componente agora usa ElementInternals para sincronizar com o Form API nativo:
+ * - setFormValue(): Define o valor que será submetido pelo formulário
+ * - ariaChecked: Define o estado de acessibilidade ('true' | 'false' | 'mixed')
+ * - ariaDisabled: Define se o componente está desabilitado para leitores de tela
+ * 
+ * Estrutura do DOM renderizado:
+ * <voa-checkbox>
+ *   <div part="base" class="checkbox-container">
+ *     <div part="indicator" class="checkbox-custom">
+ *       <!-- ::after renderiza o checkmark ou dash via CSS puro -->
+ *     </div>
+ *     <span part="label" class="checkbox-label">
+ *       <slot /> <!-- Conteúdo do label -->
+ *     </span>
+ *   </div>
+ * </voa-checkbox>
+ */
+
+/* ============================================
+   BASE - Container do checkbox
+   ============================================ */
+
+voa-checkbox::part(base) {
+  /* Gap estrutural - Token semântico conforme Figma */
+  gap: var(--structure-large-spacing-sm);
+  
+  /* Tipografia - Semantic Token */
+  font-family: var(--font-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6);
+  line-height: var(--line-height-body-md);
+  
+  /* Transição suave para estados hover/active */
+  transition: color 0.2s ease;
+}
+
+/* Sem label, sem gap */
+voa-checkbox[show-label="false"]::part(base) {
+  gap: 0;
+}
+
+/* ============================================
+   INDICATOR - Caixa do checkbox
+   ============================================ */
+
+/* Tamanho padrão (20px conforme Figma) */
+voa-checkbox::part(indicator) {
+  width: var(--checkbox-indicator-size);
+  height: var(--checkbox-indicator-size);
+  border-radius: var(--structure-large-radius-xs);
+  border: var(--border-width-thin) solid var(--structure-colors-border-color);
+  background-color: var(--structure-colors-bg-base);
+  box-sizing: border-box;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ============================================
+   ESTADOS - INACTIVE (Checkbox não selecionado)
+   ============================================ */
+
+/* Default - Inactive */
+voa-checkbox[state="inactive"]:not([disabled])::part(indicator) {
+  background-color: var(--structure-colors-bg-base); /* white */
+  border-color: var(--structure-colors-border-color); /* #adb5bd */
+}
+
+voa-checkbox[state="inactive"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Inactive */
+voa-checkbox[state="inactive"]:hover:not([disabled])::part(indicator) {
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="inactive"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Inactive */
+voa-checkbox[state="inactive"]:focus-visible:not([disabled])::part(indicator) {
+  border-color: #196cb8; /* Focused border color do Figma */
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADOS - ACTIVE (Checkbox selecionado)
+   ============================================ */
+
+/* Default - Active */
+voa-checkbox[state="active"]:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-6); /* #228be6 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+/* 
+ * CHECKMARK RENDERING via CSS pseudo-element ::after
+ * 
+ * Structure:
+ * - Uses ::after positioned absolutely within .checkbox-custom (part="indicator")
+ * - The structural CSS sets: display: inline-flex; align-items: center; justify-content: center
+ * - This ensures the ::after checkmark is centered perfectly within the 20x20 box
+ * 
+ * Transform logic:
+ * - translate(-50%, -50%): Center the element at the box center
+ * - rotate(45deg): Rotate to create the checkmark angle
+ * 
+ * Border drawing:
+ * - border-right: 2px solid white (vertical part of checkmark)
+ * - border-bottom: 2px solid white (horizontal part of checkmark)
+ * - Creates an inverted "L" that looks like a checkmark when rotated
+ */
+voa-checkbox[state="active"]:not([disabled])::part(indicator)::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 4px;
+  height: 8px;
+  border-right: 2px solid white;
+  border-bottom: 2px solid white;
+  box-shadow: 0px 0.667px 0.333px 0.033px rgba(24, 24, 24, 0.05);
+}
+
+voa-checkbox[state="active"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Active */
+voa-checkbox[state="active"]:hover:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-4); /* #4dabf7 - mais claro no hover */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="active"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Active */
+voa-checkbox[state="active"]:focus-visible:not([disabled])::part(indicator) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADOS - INDETERMINATE (Checkbox indeterminado)
+   ============================================ */
+
+/* Default - Indeterminate */
+voa-checkbox[state="indeterminate"]:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-6); /* #228be6 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+/* 
+ * INDETERMINATE INDICATOR via CSS pseudo-element ::after
+ * 
+ * Structure:
+ * - Uses ::after positioned absolutely within .checkbox-custom (part="indicator")
+ * - The structural CSS sets: display: inline-flex; align-items: center; justify-content: center
+ * - This ensures the ::after dash is centered perfectly within the 20x20 box
+ * 
+ * Transform logic:
+ * - translate(-50%, -50%): Center the element at the box center
+ * - Creates a simple horizontal dash
+ */
+voa-checkbox[state="indeterminate"]:not([disabled])::part(indicator)::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 2px;
+  background-color: white;
+  box-shadow: 0px 0.667px 0.333px 0.033px rgba(24, 24, 24, 0.05);
+}
+
+voa-checkbox[state="indeterminate"]:not([disabled])::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+}
+
+/* Hover - Indeterminate */
+voa-checkbox[state="indeterminate"]:hover:not([disabled])::part(indicator) {
+  background-color: var(--palette-blue-blue-4); /* #4dabf7 */
+  border-color: var(--palette-blue-blue-8); /* #1971c2 */
+}
+
+voa-checkbox[state="indeterminate"]:hover:not([disabled])::part(label) {
+  color: var(--text-hover); /* #0064cb */
+}
+
+/* Focused - Indeterminate */
+voa-checkbox[state="indeterminate"]:focus-visible:not([disabled])::part(indicator) {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* ============================================
+   ESTADO - DISABLED
+   ============================================ */
+
+/* Disabled - Inactive */
+voa-checkbox[state="inactive"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.06);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="inactive"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* Disabled - Active */
+voa-checkbox[state="active"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.25);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="active"][disabled]::part(indicator)::after {
+  opacity: 0.5;
+}
+
+voa-checkbox[state="active"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* Disabled - Indeterminate */
+voa-checkbox[state="indeterminate"][disabled]::part(indicator) {
+  background-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(24, 24, 24, 0.25);
+  cursor: not-allowed;
+}
+
+voa-checkbox[state="indeterminate"][disabled]::part(indicator)::after {
+  opacity: 0.5;
+}
+
+voa-checkbox[state="indeterminate"][disabled]::part(label) {
+  color: var(--text-disabled); /* rgba(11,18,21,0.25) */
+}
+
+/* ============================================
+   LABEL - Texto do label
+   ============================================ */
+
+voa-checkbox::part(label) {
+  color: var(--text-primary); /* #0b1215 */
+  user-select: none;
+}
+
+/* ============================================
+   INPUT - Elemento nativo (visualmente oculto)
+   ============================================ */
+
+voa-checkbox::part(input) {
+  /* Já está oculto no CSS estrutural, apenas garantir que não interfira */
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* ============================================
+   FOCUS VISIBLE - Outline para acessibilidade
+   ============================================ */
+
+voa-checkbox:focus-visible::part(base) {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}