Página de Teste

Página "kitchen-sink": reúne todos os elementos e componentes usados na documentação do Arrow System, num só lugar, pra inspecionar e ajustar a estilização de cada um. Acesse em /teste.

---

1. Títulos (h1–h6)

Título h1

Título h2

Título h3

Título h4

Título h5

Título h6

---

2. Texto e inline

Parágrafo normal com negrito, itálico, negrito e itálico, tachado, código inline (ex.: #081128) e um link interno para Fundamentos e um link externo.

Texto com Ctrl + C (teclas), subscrito H₂O e sobrescrito x².

---

3. Listas

Não ordenada

• Item um
• Item dois
  • Sub-item 2.1
  • Sub-item 2.2
• Item três

Ordenada

1. Primeiro
2. Segundo
   1. Segundo-A
   2. Segundo-B
3. Terceiro

Tarefas (checklist)

• [x] Tarefa concluída
• [ ] Tarefa pendente
• [ ] Outra pendente

---

4. Citação (blockquote)

Esta é uma citação. Serve pra destacar uma fala, um princípio ou uma definição importante do design system.

— Arrow System

---

5. Divisor (horizontal rule)

O divisor abaixo é um --- no markdown:

---

6. Tabela nativa (markdown)

Prop	Tipo	Padrão	Descrição
label	string	-	Texto do componente.
variant	'blue' | 'red' | 'gray'	'blue'	Cor principal.
disabled	boolean	false	Desabilita a interação.

---

7. Bloco de código

<script setup>
import { MeButton } from '@me/ui-vue3'
</script>

<template>
  <MeButton label="Salvar" variant="blue" />
</template>

npm run dev    # http://localhost:5173

---

8. Containers do VitePress

Informação

Container info — contexto neutro.

Dica

Container tip — boa prática ou atalho útil.

Atenção

Container warning — cuidado, há restrições.

Perigo

Container danger — ação destrutiva ou erro.

Ver detalhes

Container details — conteúdo recolhível (clique pra expandir).

---

9. Componentes de documentação (projeto)

9.1 DocBanner

9.2 DocAlert

Info

Alerta informativo do projeto (componente `DocAlert`).

Dica

Alerta de dica.

Sucesso

Alerta de sucesso.

Atenção

Alerta de atenção.

Erro

Alerta de erro.

9.3 DocTable

Token	Valor	Uso
--space-2	8px	Espaçamento micro
--space-4	16px	Espaçamento base
--radius-10	10px	Raio interativo grande

9.4 TokenTable

	Token	Hex	Uso semântico
	--color-action-primary		CTA primário (Blizzard)
	--color-content-accent		Texto de destaque
	--color-surface-raised		Superfície elevada

9.5 DemoBlock (com componente Me*)

Novo

<MeButton label="Salvar" variant="blue" />
<MeButton label="Cancelar" variant="gray" :outlined="true" />
<MeBadge>Novo</MeBadge>

---

10. Imagem (markdown nativo)