voa-ds-core 1.0.10 → 1.0.12

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

@@ -1,295 +0,0 @@
-@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/collection/styles/external/voa-alert.external.css

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