---
name: 'Lumo · Component Creation Protocol'
description: 'Define como componentes Angular devem ser criados, estruturados, documentados e testados no Design System Lumo.'
---

# Overview

# Lumo · Component Creation Protocol

## Objetivo

Esta Rule garante que **todo componente Angular no Lumo** seja criado de forma consistente, escalável e acessível, obedecendo ao Design System sem repetir princípios já definidos no `Lumo · Core Principles`.

---

## Estrutura de Arquivos

Todo componente deve conter:

```
<component-name>
<component-name>.component.ts
<component-name>.component.html
<component-name>.component.spec.ts
<component-name>.docs.md
```

- **Angular 20+**: Standalone é padrão.
- **TailwindCSS**: Todo estilo deve ser via classes Tailwind.
- **Documentação** (`.docs.md`):
  - Propósito do componente
  - Todos os **inputs** e **outputs**
  - Exemplos de uso
  - Estados: default, hover, focus, active, disabled

---

## Processo de Criação

1. Definir **intenção e papel** do componente (Estrutural, Interativo ou Informacional)
2. Definir **layout e espaçamento mínimo**
3. Definir **estados visuais essenciais** (hover, active, focus, disabled)
4. Criar arquivos seguindo a **estrutura técnica e documentação**
5. Implementar **acessibilidade moderna**:
   - ARIA attributes e roles corretos
   - Foco lógico e visível
   - Contraste adequado (mínimo 4.5:1 para texto)
   - Área de clique touch-friendly
6. Testar **funcionalidade e acessibilidade**
7. Revisar **consistência com o sistema**
8. Publicar como **pacote npm**:

```
export * from './<component-name>/<component-name>.component';
```

## Padrões de Acessibildiade

1. ARIA roles e labels corretos
2. Keyboard navigation lógica
3. Foco visível e gerenciável
4. Contraste adequado
5. Responsivo e touch-friendly

## Antipadrões a Evitar

1. Componentes que só funcionam isoladamente
2. Dependência de sombra ou borda para hierarquia
3. Cor de marca em fundo ou borda estrutural
4. Padding, altura ou radius fora da escala semântica
5. Componentes que exigem explicação para serem compreendidos