SEED DS v2 — Bloco 4 · sub-bloco F preview v0.32c

Card (§26) · Divider (§27) · Lista (§28) — estáveis (v0.26). Accordion (§29) — estável (v0.28). Modal (§30) e Drawer (§31) — estáveis (v0.30). Avatar (§32): estável — Bloco 4 FECHADO 7/7 · validação executada 246/246 ✓ + visual aprovada em 2026-08-05.

§26 Card — outlined default, elevated restrito, 3 regimes de interação

Estático (regime a) — anatomia completa, heading definido pelo consumidor

UC 300482-1 — Fazenda Boa Vista

A4 Verde · Coelba · irrigante

Consumo de julho: 12.480 kWh. Geração: 11.920 kWh.

Elevated (restrito — nunca em grade densa)

Destaque deliberado: par superfície+sombra (tokens §2.8); no dark a borda assume.

Card-navegável (regime b, CD3) — link real no título + área estendida

Proibido quando o corpo tem dado copiável — este exemplo é navegação pura. Ação secundária sobe no z-index e continua clicável.

Proposta #482 — Galpão GV

Enviada há 2 dias · aguardando cliente

Fotovoltaico 75 kWp com Diagnóstico 360° incluído.

Card selecionável (CD4) — composição com o checkbox do Bloco 2

Selecione as UCs do rateio

Nesting (CD5) — interior muda de estilo, nunca repete card

Resumo do contrato
Sub-painel sunken: sem borda de card, sem sombra.

§27 Divider — decorativo por default; semântico é exceção declarada

Bloco A de conteúdo relacionado.

Bloco B — separado por divider decorativo (aria-hidden; AT não anuncia).

Seção nova — <hr> semântico (quebra temática real, role implícito separator).

FiltrosExibição

§28 Lista — estática × interativa (gridlist), densidades, slots CN

Estática — ul/li puro, com divider inset herdando DV2

Interativa (gridlist) — setas navegam, Enter abre, ação por item

Slots da central de notificações (LS5): não-lida por peso + dot; timestamp em trailing; navegar-à-fonte no Enter.

Densa (desktop)

§29 Accordion — multi-aberto default, botão-no-heading, mostrar tudo (4+ seções)

Default (multi-aberto) — 4 seções + Mostrar tudo/Ocultar tudo

Linha inteira é o botão (≥48px) · chevron gira · painel fechado usa hidden="until-found" (find-in-page revela e o beforematch sincroniza o estado) · heading h4 definido pelo consumidor.

Variante exclusiva (single, collapsible) — justificada por fluxo de leitura

§30 Modal · §31 Drawer — o 3º degrau da régua de sobreposição

Form: backdrop NÃO fecha (Esc e X sim) · Confirmação: foco inicial no botão não-destrutivo · Drawer <640px ocupa a largura toda · standard mantém a página interativa.

Nova unidade consumidora

Excluir a proposta #482?

A exclusão é permanente e remove o histórico de envios.

UC 300482-1 — Fazenda Boa Vista

Detalhe do registro sem perder o estado da página: consumo, geração e histórico ficariam aqui (tabela chega no Bloco 6).

Comparar fatura (standard)

Regime não-modal: a página continua interativa e rolável ao lado — inspeção lado-a-lado no desktop largo.

§32 Avatar — fallback em cadeia, neutro único, forma distingue pessoa×entidade

Cadeia de fallback e tamanhos

Iniciais PT-BR ignoram partículas ("João da Silva" → JS) · círculo=pessoa, quadrado=entidade (UC/empresa) · informativo só quando sozinho (o xl acima leva role="img").

Na lista (decorativo — o nome adjacente carrega)

Grupo/stack — máx. 3 + contador real (+N herda W7 → popover §24)

Prova grayscale — separação sem matiz (borda+espaço+tipografia)

Card outlined — contorno + raio carregam.
avatar: neutro já nasce grayscale; forma distingue pessoa×entidade

Prova 360px — teste do polegar

Card em 360px

padding 16, CTA 44px