Componentes

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`.

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.

`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).

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.

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.

`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`.

É um `<ol>`: a ordem é a informação. O traço vem de uma borda no próprio `<ol>`, então não para no penúltimo item nem sobra depois do último.

`size="sm"` para o vazio de UMA LISTA — dentro de um modal ou gaveta, onde o bloco padrão (py-16, título extrabold) viraria um cabeçalho no lugar de uma nota.