# Galeria com lightbox (`galeria`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Grade de miniaturas quadradas; clique abre a foto grande numa caixa escura com legenda, contagem, setas e teclado.

- **Categoria:** Mídia
- **Equivalente no Elementor:** Galeria (Gallery / Basic Gallery) com Lightbox
- **Arquivos:** `galeria.html`, `galeria.css`, `galeria.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-galeria`)

## Quando usar
- Fotos de evento, espaço, portfólio, bastidores

## Quando não usar
- Uma ou duas fotos (use imagem)
- Fotos que precisam de texto ao lado (use grade com imagem)

## Variações
- **2 colunas no celular, 3 no computador:** classe ds-galeria
- **4 colunas no computador:** classe ds-galeria--4

## Conteúdo esperado
- Miniatura (leve) e imagem grande de cada foto
- alt de cada foto
- Legenda opcional (data-ds-legenda)
- Rótulo da galeria (aria-label)

## Acessibilidade
- Cada miniatura é um link para a imagem grande (funciona sem JS)
- Caixa em <dialog> nativo: Esc fecha, foco preso dentro e devolvido à miniatura
- Setas do teclado e botões com nome; contagem "n de N" anunciada
- Fundo da caixa é a cor da marca do DS

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/galeria/galeria.css">
<script src="componentes/galeria/galeria.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-fundo-marca`, `--ds-cor-sobre-marca`, `--ds-curva`, `--ds-duracao-lenta`, `--ds-espaco-12`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-raio-md`, `--ds-tamanho-pequeno`.