Componentes

O CTA de CONVERSÃO — o verde de "fale com a gente", não o roxo da ação do produto. Aqui o verde é semântica (a ação favorável), então sai do par `success`/`success-foreground`, que já vem com AA medido nos dois temas: no claro o fill fica no passo 700 justamente para carregar texto branco, porque o 500 dá 3,35:1 e reprova.

`target="_blank"` recebe `rel="noreferrer"` do próprio componente — sem ele a página aberta alcança `window.opener`.

Superfície desktop, o padrão. Enviar só habilita quando há texto; os nomes acessíveis dos controles vêm de `labels`.

O microfone fica ativo e a digitação é bloqueada. `labels.stopRecording` é opcional — sem ele o nome não muda e quem comunica o estado é o `aria-pressed`.

O intervalo entre o clique no microfone e a captura existir — permissão, segredo, socket. O spinner fica no MICROFONE, e a digitação continua LIBERADA (ao contrário de `recording` e `transcribing`): a permissão pode levar segundos, e travar o campo nesse intervalo pune quem só quis clicar.

A transcrição PROVISÓRIA, em cinza. É uma camada sobre o campo, não o valor dele: não pode ser submetida, não rouba clique e não é anunciada a leitor de tela. Ela é desenhada na posição do cursor, pelo mesmo cálculo que a inserção final usa — as duas concordam por construção.

O intervalo entre parar a gravação e o texto aparecer. Compare com `Sending`: o spinner fica no MICROFONE, onde a pessoa acabou de clicar, e o ícone de enviar continua sendo o de enviar — trocá-lo diria 'sua mensagem foi enviada', quando nada foi enviado.

Um turno rodando, sem `onStop`: a digitação continua liberada (mudou em 02/09/2026 — antes `sending` desabilitava tudo) e o botão segue sendo enviar, como antes da fila (compat).

Campo vazio → PARAR. Digite algo → volta a ser enviar. Envie (o campo esvazia) → PARAR de novo. `labels.stop` é o nome acessível do botão nesse estado.

A fila mora ACIMA do campo, e não na trilha da conversa: enquanto pendentes, essas mensagens ainda vão acontecer, e misturá-las ao que já aconteceu apagaria essa diferença. Cada item mostra um chip por arquivo anexado — descartar o item descarta os arquivos junto.

Pílula de 56px que expande em posição ao ser tocada, fechando de novo ao tocar fora enquanto está vazia. Não tem os estados `recording`/`sending` nem o seletor de arquivo — o compilador recusa essas props aqui.

Clipe e microfone só viram botões quando recebem callback. Sem ele são decoração (`aria-hidden`), fora da ordem de tabulação — um controle focável que anuncia uma ação inexistente é pior do que glifo nenhum.

Os seis do desenho. O fundo claro faz parte da story, não do componente — ele é transparente e serve a qualquer superfície.

Com número ímpar, o extra fica à esquerda — nenhum nó é perdido. O componente não fixa seis; a órbita compacta repete o leque quando passam disso.

`soft` (padrão) é o realce claro; `brand` é o gradiente da marca do avatar de persona/usuário. Cada tone fecha o par fundo + texto — não troque só o fundo por `className`, é assim que aparece branco sobre roxo claro.

`direction="from"` é para quando o usuário acabou de chegar a este módulo vindo de outro — a seta aponta para a esquerda e fica antes do ícone/título/subtítulo, em vez de depois. O texto ("Veio de..." em vez de "Ir para...") é responsabilidade de quem usa o componente, via `title`/`sub`.

`active` reflete o estado `open` do `SideDrawer` correspondente — aplique enquanto a gaveta estiver aberta e remova quando ela fechar.

O card nunca abre a gaveta sozinho — o app é quem liga `active`/`onActivate` ao `open`/`onOpenChange` do `SideDrawer`. Um clique no card fechado abre; um clique no card já ativo fecha (mesmo efeito do X interno do SideDrawer).

`label` (eyebrow) e `description` são linhas próprias, em de-ênfase, entre o título e a chamada (`sub`) — os cartões de roteiro do Concierge carregam os três, e colapsar dois deles em um perde conteúdo do script.

Desmarcado, o ✓ fica invisível mas continua ocupando espaço — a lista não pula ao marcar. A cor vem do consumidor porque nas listas de origem ela codifica domínio (oportunidade × sensibilidade).

`tone="hero"` é a MESMA frase usada como abertura de uma peça inteira, em corpo de display — troca corpo, entrelinha e tracking juntos, que é por que é um tom e não três classes copiadas pelo consumidor. `HeroBand` o compõe junto do gradiente e do topo em duas pontas; avulso, ele serve a qualquer abertura que não precise da faixa.

`tone="section"` abre uma SEÇÃO, um degrau abaixo da capa: sai da escala de display do DS (`--text-display-xl`, 30px) e — diferente do `hero` — não salta no `sm:`, porque uma abertura de seção divide a linha com o gráfico que explica e 36px em meia grade estouram a coluna. `SectionLead` o compõe junto do rótulo e do parágrafo.

Sem eyebrow e sem aside, a linha do topo não é desenhada — a faixa não reserva espaço para o que não existe. Os rótulos e o parágrafo são todos opcionais; só a frase é obrigatória.

xs e sm existem para os tiles que carregam um número (posição num ranking, etapa), não um ícone.

`tone="none"` + `className` para uma cor que não existe como token do DS — é como os webapps aplicam a paleta da própria oferta sem pedir uma variante nova ao pacote.

Preenchido é o chip do `InsightCardDeck`: ali ele é o único elemento colorido de um card branco e precisa do peso do preenchimento.

Contornado é o chip do `RecommendationList`: numa lista de quatro linhas, quatro pastilhas preenchidas competem entre si e com o texto que importa. O texto é o MESMO passo do par nas duas superfícies — o contorno o reusa por `currentColor`.

As abas viram botões dentro de uma cápsula. A borda inferior some: duas afordâncias de “aba ativa” ao mesmo tempo competem — aqui quem marca é a pílula clara atrás do rótulo.

`color` é prop e não variante: em legenda a cor é DADO — vem da paleta da série e muda a cada dataset, então não há classe Tailwind para ela.

`labelPosition="top"` sobe SÓ o rótulo, via `order-first` — inverter o bloco inteiro levaria o delta textual junto. A ordem no DOM não muda, então a leitura assistiva também não.

`deltaVariant="badge"` põe a variação como pílula ao lado do valor. A seta some: dentro da pílula, cor e sinal já dão a direção.

`deltaPosition="below"` põe a pílula numa linha própria embaixo do número — a anatomia dos três cards de cabeçalho do Flash Temático, onde a leitura é rótulo, número e variação, uma coisa por linha. Ao lado do número (o default) é o que cabe na faixa de indicadores, onde o espaço horizontal é o que sobra.

`surface="none"` tira fundo e padding para o tile compor dentro de um card que já os tem — é como o Pulso monta o cabeçalho do gráfico combinado.

`children` cai abaixo da métrica — o slot onde os tiles de tendência encaixam um sparkline. O bloco cinza aqui é um marcador; no app é um `TrendAreaChart`.

O grid não fixa cinco: com três, o ímpar sobra na primeira coluna. O ordinal chega FORMATADO — zerar à esquerda é decisão de locale, não de layout.