voa-ds-core 1.0.8 → 1.0.10

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

@@ -0,0 +1,295 @@
+@import '../../tokens/global.css';
+
+/**
+ * Estilização Externa do VoaAccordion
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-accordion
+ * 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-201
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/dist/tokens.css';
+ * @import '@voa-ds/styles/voa-accordion.css';
+ * 
+ * ============================================
+ * ARQUITETURA DE ANIMAÇÃO
+ * ============================================
+ * 
+ * Este componente segue a filosofia "Headless" onde:
+ * - Stencil fornece a MECÂNICA (estado, estrutura Grid)
+ * - Consumidor fornece a MOTION (timing, easing, comportamento)
+ * 
+ * TÉCNICA: CSS Grid Trick
+ * - Usa grid-template-rows: 0fr → 1fr para animar altura
+ * - Permite animação suave de altura 0 para auto
+ * - Mais performático que max-height ou height
+ * 
+ * TIMING:
+ * - Conteúdo: 250ms cubic-bezier(0.4, 0, 0.2, 1) - Material Design easing
+ * - Ícone: 200ms cubic-bezier(0.4, 0, 0.2, 1) - Interação rápida
+ * - Header: 200ms cubic-bezier(0.4, 0, 0.2, 1) - Hover suave
+ * 
+ * ACESSIBILIDADE:
+ * - Suporta prefers-reduced-motion para usuários sensíveis a movimento
+ * - Remove todas as animações quando reduzido é preferido
+ * 
+ * CUSTOMIZAÇÃO:
+ * - Consumidor pode sobrescrever timing via CSS Parts
+ * - Consumidor pode adicionar diferentes tipos de animação (slide, fade, etc.)
+ * - Consumidor controla acessibilidade globalmente
+ */
+
+/* ============================================
+   BASE - Container principal do accordion
+   ============================================ */
+voa-accordion::part(base) {
+  /* Background - Semantic Token */
+  background-color: var(--structure-colors-bg-base);
+
+  /* Padding do container - Semantic Token */
+  padding: var(--structure-large-spacing-sm);
+
+  /* Gap entre header e content (5px conforme Figma) */
+  gap: 5px;
+
+  /* Border quando divider=true */
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+/* Aplicar border-top quando divider=true */
+voa-accordion[divider]::part(base) {
+  border-top: 1px solid var(--structure-colors-border-color-secondary);
+}
+
+/* ============================================
+   HEADER - Botão clicável do cabeçalho
+   ============================================ */
+voa-accordion::part(header) {
+  /* Reset de estilos do botão */
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  /* Tipografia do header (herdada do title) */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+
+  /* Cursor pointer */
+  cursor: pointer;
+
+  /* Transição suave para hover - Matches design system pattern */
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+voa-accordion::part(header):hover {
+  opacity: 0.8;
+}
+
+voa-accordion::part(header):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ============================================
+   HEADER-CONTENT - Container flex do header
+   ============================================ */
+/* Layout flex já definido no CSS estrutural */
+/* Padding horizontal apenas para size=lg (definido abaixo) */
+
+/* Padding horizontal para size=lg */
+voa-accordion[size="lg"]::part(header-content) {
+  padding-inline: var(--structure-large-spacing-sm);
+}
+
+/* ============================================
+   TITLE - Texto do título
+   ============================================ */
+voa-accordion::part(title) {
+  /* Tipografia: 16px, SemiBold (600), line-height 24px */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: 24px;
+
+  /* Cor do texto - Semantic Token */
+  color: var(--text-primary);
+
+  /* Espaçamento */
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   ICON - Ícone expand/collapse
+   ============================================ */
+voa-accordion::part(icon) {
+  /* Cor do ícone - Semantic Token */
+  color: var(--text-primary);
+
+  /* Tamanho fixo 16x16px */
+  width: 16px;
+  height: 16px;
+
+  /* Transição suave para rotação - Consumer controls timing
+     Matches design system pattern: 200ms for quick interactions */
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Rotação do ícone quando aberto (opcional, para melhor UX) */
+voa-accordion[open]::part(icon) {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   CONTENT - Container do conteúdo expansível
+   ============================================ */
+voa-accordion::part(content) {
+  /* Tipografia do conteúdo: 14px, Regular (400), line-height 16px */
+  font-family: var(--voa-font-family-sans, var(--font-family-sans, 'Lato', sans-serif));
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+
+  /* Cor do texto - Semantic Token */
+  color: var(--text-primary);
+
+  /* Padding padrão (size=md) */
+  padding: 0;
+
+  /* ANIMATION: The visual transition logic lives here.
+     Consumer controls timing, easing, and behavior.
+     
+     Using Material Design-inspired easing for smooth height transitions:
+     - Height animation: 250ms with ease-out for natural deceleration
+     - Opacity: synchronized with height for smooth fade effect
+     - Matches design system patterns (similar to switch/button timing) */
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
+
+/* Padding para size=lg conforme Figma */
+voa-accordion[size="lg"]::part(content) {
+  padding-inline: var(--structure-large-spacing-sm);
+  padding-block: var(--structure-large-radius-xl);
+}
+
+/* Espaçamento interno do conteúdo */
+voa-accordion::part(content)>* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Espaçamento entre parágrafos no conteúdo */
+voa-accordion::part(content)>*+* {
+  margin-top: var(--structure-large-spacing-xs);
+}
+
+/* ============================================
+   ESTADOS E VARIAÇÕES - ANIMAÇÃO
+   ============================================ */
+
+/* Accordion fechado - anima para altura 0
+   Usa múltiplos seletores para garantir compatibilidade
+   com diferentes formas de controle de estado */
+voa-accordion:not([open])::part(content),
+voa-accordion.voa-accordion--closed::part(content) {
+  /* Grid trick: 0fr = altura zero, permitindo animação suave */
+  grid-template-rows: 0fr;
+  /* Opacidade zero para fade out suave */
+  opacity: 0;
+  /* Garante que o conteúdo não seja interativo quando fechado */
+  pointer-events: none;
+}
+
+/* Accordion aberto - anima para altura auto (1fr) */
+voa-accordion[open]::part(content),
+voa-accordion.voa-accordion--open::part(content) {
+  /* Grid trick: 1fr = altura automática baseada no conteúdo */
+  grid-template-rows: 1fr;
+  /* Opacidade total para fade in suave */
+  opacity: 1;
+  /* Restaura interatividade quando aberto */
+  pointer-events: auto;
+}
+
+/* ============================================
+   ACESSIBILIDADE
+   ============================================ */
+
+/* Focus visível para navegação por teclado */
+voa-accordion::part(header):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ============================================
+   ACESSIBILIDADE - PREFERS REDUCED MOTION
+   ============================================ */
+
+/* Prefers Reduced Motion - Mandatory for accessibility
+   Disables animations for users who prefer reduced motion.
+   This ensures the component remains accessible to users with
+   vestibular disorders or motion sensitivity. */
+@media (prefers-reduced-motion: reduce) {
+  /* Remove todas as transições de animação */
+  voa-accordion::part(content) {
+    transition: none;
+    /* Mantém estados visuais, apenas remove animação */
+  }
+  
+  voa-accordion::part(icon) {
+    transition: none;
+  }
+  
+  voa-accordion::part(header) {
+    transition: none;
+  }
+  
+  /* Garante que o estado final seja aplicado imediatamente */
+  voa-accordion:not([open])::part(content),
+  voa-accordion.voa-accordion--closed::part(content) {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  
+  voa-accordion[open]::part(content),
+  voa-accordion.voa-accordion--open::part(content) {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   EXEMPLOS DE CUSTOMIZAÇÃO
+   ============================================ */
+
+/* Exemplo: Accordion com cor de fundo customizada */
+/*
+voa-accordion.custom-bg::part(base) {
+  background-color: var(--structure-colors-bg-container, #f5f5f5);
+}
+*/
+
+/* Exemplo: Accordion com espaçamento customizado */
+/*
+voa-accordion.custom-spacing::part(base) {
+  padding: var(--structure-large-spacing-md, 1rem);
+  gap: var(--spacing-spacing-sm, 0.5rem);
+}
+*/
+
+/* Exemplo: Accordion com tipografia customizada */
+/*
+voa-accordion.custom-typography::part(title) {
+  font-size: var(--typography-base-type-scale-5, 20px);
+  font-weight: var(--typography-base-type-scale-4-weight, 700);
+}
+*/

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

@@ -0,0 +1,348 @@
+/**
+ * Estilização Externa do VoaAlert
+ * 
+ * Este arquivo demonstra como estilizar o componente voa-alert
+ * 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-2706
+ * 
+ * Para usar, importe este arquivo após os tokens:
+ * @import '@voa-ds/tokens/dist/tokens.css';
+ * @import '@voa-ds/styles/voa-alert.css';
+ */
+
+/* ============================================
+   BASE - Container principal do alert
+   ============================================ */
+voa-alert::part(base) {
+  /* Border radius padrão - Semantic Token */
+  border-radius: var(--radius-sm);
+  
+  /* Border - Separado em propriedades explícitas para permitir override apenas da cor */
+  border-width: 1.5px;
+  border-style: solid;
+  /* Cor padrão da borda - será sobrescrita por regras específicas de tipo */
+  border-color: var(--structure-colors-border-color);
+  
+  /* Padding padrão para variant default - Semantic Token */
+  padding: var(--spacing-spacing-md);
+  
+  /* Gap entre conteúdo e botões - Semantic Token */
+  gap: var(--spacing-spacing-md, 1rem);
+}
+
+/* Variante inline: padding e border-radius diferentes */
+voa-alert[variant="inline"]::part(base) {
+  /* Padding inline: 20px horizontal, 14px vertical - conforme Figma */
+  padding: var(--spacing-spacing-lg, 14px) var(--spacing-spacing-xl, 20px);
+  border-radius: var(--radius-md);
+  /* Gap entre elementos na variante inline - Figma especifica 10px */
+  gap: 10px;
+}
+
+/* ============================================
+   CORES POR TIPO - Background e Border
+   ============================================ */
+
+/* Basic */
+voa-alert[type="basic"]::part(base) {
+  background-color: var(--structure-colors-bg-container);
+  border-color: var(--structure-colors-border-color);
+}
+
+/* Success */
+voa-alert[type="success"]::part(base) {
+  background-color: var(--palette-green-green-2);
+  border-color: var(--palette-green-green-4);
+}
+
+/* Info */
+voa-alert[type="info"]::part(base) {
+  background-color: var(--palette-blue-blue-2);
+  border-color: var(--palette-blue-blue-3);
+}
+
+/* Warning */
+voa-alert[type="warning"]::part(base) {
+  background-color: var(--palette-yellow-yellow-2);
+  border-color: var(--palette-yellow-yellow-4);
+}
+
+/* Warning Inline */
+voa-alert[type="warning-inline"]::part(base) {
+  background-color: var(--palette-yellow-yellow-1);
+  border-color: var(--palette-yellow-yellow-4);
+}
+
+/* Error */
+voa-alert[type="error"]::part(base) {
+  background-color: var(--palette-red-red-2);
+  border-color: var(--palette-red-red-4);
+}
+
+/* Variante inline - ajustes de border para alguns tipos */
+voa-alert[variant="inline"][type="info"]::part(base) {
+  border-color: var(--palette-blue-blue-4);
+}
+
+voa-alert[variant="inline"][type="success"]::part(base) {
+  border-color: var(--palette-green-green-3);
+}
+
+voa-alert[variant="inline"][type="error"]::part(base) {
+  border-color: var(--palette-red-red-5);
+}
+
+/* ============================================
+   CONTENT-WRAPPER - Wrapper do conteúdo principal
+   ============================================ */
+voa-alert::part(content-wrapper) {
+  /* Gap entre ícone e conteúdo - Figma especifica 16px (radius-lg) */
+  gap: var(--radius-lg, 16px);
+}
+
+voa-alert[variant="inline"]::part(content-wrapper) {
+  /* Gap entre ícone e conteúdo na variante inline - Figma especifica 10px */
+  gap: 10px;
+}
+
+/* ============================================
+   ICON - Container do ícone
+   ============================================ */
+voa-alert::part(icon) {
+  /* Tamanho do ícone para variant default */
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  
+  /* Cor do ícone - será definida por tipo */
+  color: currentColor;
+}
+
+voa-alert[variant="inline"]::part(icon) {
+  /* Tamanho do ícone para variant inline */
+  width: 20px;
+  height: 20px;
+}
+
+/* Cores dos ícones por tipo - Semantic Tokens quando disponíveis */
+voa-alert[type="success"]::part(icon),
+voa-alert[type="success"]::part(icon) svg {
+  color: var(--semantic-colors-success);
+}
+
+voa-alert[type="info"]::part(icon),
+voa-alert[type="info"]::part(icon) svg {
+  color: var(--palette-blue-blue-9);
+}
+
+voa-alert[type="warning"]::part(icon),
+voa-alert[type="warning"]::part(icon) svg,
+voa-alert[type="warning-inline"]::part(icon),
+voa-alert[type="warning-inline"]::part(icon) svg {
+  color: var(--palette-yellow-yellow-9);
+}
+
+voa-alert[type="error"]::part(icon),
+voa-alert[type="error"]::part(icon) svg {
+  color: var(--palette-red-red-9);
+}
+
+voa-alert[type="basic"]::part(icon),
+voa-alert[type="basic"]::part(icon) svg {
+  color: var(--palette-gray-gray-6);
+}
+
+/* ============================================
+   CONTENT - Container do conteúdo
+   ============================================ */
+voa-alert::part(content) {
+  /* Flex para layout vertical (default) ou horizontal (inline) */
+  flex: 1;
+  
+  /* Tipografia base - Design Token */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  color: var(--text-primary);
+}
+
+/* ============================================
+   TITLE - Título do alerta
+   ============================================ */
+voa-alert::part(title) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-type-scale-6, 16px);
+  font-weight: var(--typography-base-body-sm-bold-weight, 600);
+  line-height: var(--line-height-body-md, 24px);
+  color: var(--text-primary);
+  
+  /* Margin */
+  margin: 0;
+}
+
+voa-alert[variant="inline"]::part(title) {
+  /* Tipografia inline - menor */
+  font-size: var(--typography-base-type-scale-7, 14px);
+  line-height: var(--line-height-body-sm, 16px);
+}
+
+/* ============================================
+   DESCRIPTION - Descrição do alerta
+   ============================================ */
+voa-alert::part(description) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  color: var(--text-secondary);
+  
+  /* Espaçamento do título - Semantic Token */
+  margin-top: var(--spacing-spacing-xs, 4px);
+  margin-bottom: 0;
+}
+
+/* ============================================
+   CONTENT-INNER - Wrapper interno do conteúdo
+   ============================================ */
+voa-alert::part(content-inner) {
+  /* Layout flex vertical para título e descrição */
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* Gap será controlado via margin-top na descrição */
+}
+
+/* ============================================
+   CLOSE-BUTTON - Botão de fechar
+   ============================================ */
+voa-alert::part(close-button) {
+  /* Tamanho do ícone de fechar para variant default */
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  
+  /* Cor do ícone de fechar - Primitive Token (não há token semântico para isso) */
+  color: var(--palette-gray-gray-6);
+  
+  /* Hover */
+  transition: opacity 0.2s ease;
+}
+
+voa-alert::part(close-button):hover {
+  opacity: 0.7;
+}
+
+voa-alert::part(close-button):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+voa-alert[variant="inline"]::part(close-button) {
+  /* Tamanho do ícone de fechar para variant inline */
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   ACTIONS - Container dos botões de ação
+   ============================================ */
+voa-alert::part(actions) {
+  /* Layout flex para botões */
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  
+  /* Gap entre botões - Semantic Token */
+  gap: var(--spacing-spacing-sm, 0.5rem);
+  
+  /* Padding top para separar do conteúdo - Semantic Token */
+  padding-top: var(--spacing-spacing-xs);
+}
+
+/* ============================================
+   BUTTONS - Estilização via exportparts
+   ============================================ */
+/* 
+ * Os botões são expostos via exportparts no voa-alert:
+ * - primary-btn-base: Parte "base" do botão primário
+ * - secondary-btn-base: Parte "base" do botão secundário (ghost)
+ * 
+ * Isso permite estilizar os botões de fora do Shadow DOM.
+ */
+
+/* Base styles for both buttons */
+voa-alert::part(primary-btn-base),
+voa-alert::part(secondary-btn-base) {
+  /* Tipografia - Design Tokens */
+  font-family: var(--typography-base-family-sans, 'Lato', sans-serif);
+  font-size: var(--typography-base-body-sm-regular-size, 14px);
+  font-weight: var(--typography-base-body-sm-regular-weight, 400);
+  line-height: var(--typography-base-body-sm-regular-line-height, 16px);
+  text-align: center;
+  
+  /* Border-radius padrão - Semantic Token */
+  border-radius: var(--radius-sm);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Transição suave para estados hover/active */
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  
+  /* Padding para size="sm" */
+  padding-block: var(--spacing-spacing-xs);
+  padding-inline: var(--spacing-spacing-xs);
+  min-width: 98px;
+  gap: var(--spacing-spacing-xs, 0.25rem);
+}
+
+/* Primary Button */
+voa-alert::part(primary-btn-base) {
+  background-color: var(--brand-base);
+  color: var(--text-on-primary);
+  border: var(--border-width-thin) solid var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):hover {
+  background-color: var(--brand-hover);
+  border-color: var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):active {
+  background-color: var(--brand-active);
+  border-color: var(--brand-base-50);
+}
+
+voa-alert::part(primary-btn-base):focus-visible {
+  outline: 2px solid var(--brand-base);
+  outline-offset: 2px;
+}
+
+/* Secondary/Ghost Button - Com cores de danger */
+voa-alert::part(secondary-btn-base) {
+  background-color: transparent;
+  color: var(--semantic-colors-danger);
+  border: 1px solid transparent;
+}
+
+voa-alert::part(secondary-btn-base):hover {
+  background-color: var(--semantic-colors-danger);
+  color: var(--text-on-primary);
+  border-color: var(--semantic-colors-danger);
+}
+
+voa-alert::part(secondary-btn-base):active {
+  background-color: var(--semantic-colors-danger);
+  color: var(--text-on-primary);
+  border-color: var(--semantic-colors-danger);
+  opacity: 0.9;
+}
+
+voa-alert::part(secondary-btn-base):focus-visible {
+  outline: 2px solid var(--semantic-colors-danger);
+  outline-offset: 2px;
+}
+
+