@codenhub/styles 0.6.0 → 0.8.0

package/docs/pt-BR/usage/buttons.md

@@ -0,0 +1,135 @@
+---
+title: Botões
+description: Ações destrutivas e secundárias, botões de ícone, tamanhos, links com cara de botão, estados desabilitados e como carregar ícones.
+order: 1
+source: 54f7c8a1eee5a0f696dc60b9f60f42026d49c5d5
+---
+
+# Botões
+
+A tela de configurações tem um botão de salvar e um de cancelar. Esta página acrescenta o resto das ações: uma zona de perigo com um botão destrutivo de excluir, um botão de ícone que copia uma chave de API e botões menores para uma linha mais densa. Ela também trata de botões desabilitados e de como carregar os ícones usados aqui e nas próximas páginas.
+
+## Adicione uma zona de perigo
+
+Uma ação destrutiva fica num card próprio, no fim da tela. O card é soft e destrutivo, para ser lido como um aviso; o botão é sólido, para ser o elemento que mais chama atenção naquele card:
+
+```html
+<section class="card soft destructive stack" aria-labelledby="danger-title">
+  <h2 class="text-title-sm" id="danger-title">Delete account</h2>
+  <p>This removes your projects, invoices, and API keys. It cannot be undone.</p>
+  <div class="cluster">
+    <button class="btn destructive" type="button">Delete account</button>
+    <button class="btn ghost" type="button">Export data first</button>
+  </div>
+</section>
+```
+
+O card e o botão declaram `.destructive` cada um, porque [a intenção não é herdada](../concepts.md#intenção-qual-cor). Pelo mesmo motivo, o botão de exportar mantém a cor neutra dentro do card vermelho.
+
+## Escolha um preenchimento e uma borda
+
+Um botão aceita uma intenção, uma classe de preenchimento e uma classe de borda, todas opcionais. Sem nenhuma, o botão é sólido e sem borda:
+
+```html
+<button class="btn primary">Save changes</button>
+<button class="btn secondary">Preview</button>
+<button class="btn primary soft">Invite member</button>
+<button class="btn destructive ghost edged">Revoke key</button>
+<button class="btn ghost">Cancel</button>
+```
+
+Um botão **neutro** nunca é preenchido por completo. A cor dele é a própria cor do texto da página, então um preenchimento total seria um bloco preto ou branco, o elemento que mais chama atenção na página justamente para a intenção que não significa nada em particular. Em vez disso, um botão neutro `.solid` para em 20% de preenchimento, um cinza discreto um tom mais escuro que o `.soft`. Toda intenção com nome preenche até 100%.
+
+No hover, o preenchimento de um botão aumenta em `--hover-step` (14%), então um botão `.ghost` ganha um tom e um `.solid` muda para a cor de hover da sua intenção. Ao ser pressionado, ele encolhe um pouco (`scale(0.97)`); uma [estética](./aesthetics.md) pode trocar isso pelo seu próprio efeito de clique, e, com a preferência do usuário por movimento reduzido, ele ainda acontece, de imediato.
+
+Um botão neutro `.soft` ou `.ghost` dentro de uma superfície preenchida, como um botão Cancelar num `.card.solid.primary` ou num `.alert.solid.destructive`, imprime o rótulo e a linha na cor de texto dessa superfície, então continua legível sobre o preenchimento. Um campo de texto faz o mesmo. Um botão com intenção mantém a própria cor, e um neutro `.solid` também, porque fica sobre um preenchimento próprio.
+
+Quando um botão preenchido tem o foco do teclado, uma linha de 2px da cor da página corre por dentro do anel de foco, então o anel continua visível sobre um botão preenchido da mesma cor, como `.solid.primary`.
+
+## Tamanhos e formatos
+
+| Classe    | Efeito                                                                                                                                                                     |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _nenhuma_ | Pelo menos 2.5rem de altura (`--control-height`), 1rem de padding lateral e o mesmo tamanho de fonte do texto ao redor.                                                    |
+| `.sm`     | Pelo menos 2rem de altura, 0.75rem de padding lateral, texto de 0.875rem.                                                                                                  |
+| `.lg`     | Pelo menos 3rem de altura, 1.25rem de padding lateral, texto de 1.0625rem.                                                                                                 |
+| `.pill`   | Extremidades totalmente arredondadas.                                                                                                                                      |
+| `.icon`   | Quadrado. Pelo menos 2.5rem de cada lado, 2rem com `.sm`, 3rem com `.lg`.                                                                                                  |
+| `.p-xs`   | O padding mais justo (0.5rem nas laterais, 0.125rem em cima e embaixo). Também remove a altura mínima, para que o botão caiba numa célula de tabela ou numa toolbar densa. |
+| `.p-sm`   | Padding compacto (0.625rem nas laterais, 0.25rem em cima e embaixo).                                                                                                       |
+| `.p-lg`   | Padding espaçoso (1.5rem nas laterais, 0.75rem em cima e embaixo).                                                                                                         |
+
+Uma classe de tamanho e uma de padding podem ser combinadas. Só o `.p-xs` remove a altura mínima de um botão com rótulo; todas as outras combinações a mantêm. Num botão de ícone, qualquer classe `.p-*` remove o tamanho mínimo, e o botão passa a ter o tamanho do ícone mais esse padding: 0.125rem, 0.25rem ou 0.75rem ao redor.
+
+O visual base desenha cantos que acompanham o tamanho: um botão `.sm` ou `.p-sm` tem cantos um pouco menores que o padrão, e um `.lg`, um pouco maiores.
+
+## Botões de ícone
+
+A lista de chaves de API da tela de configurações tem um botão de copiar ao lado de cada chave. Um botão só com ícone precisa de um nome acessível, porque o ícone não tem texto que um leitor de tela consiga ler:
+
+```html
+<button class="btn icon ghost" type="button" aria-label="Copy API key">
+  <i class="ic-lucide-copy" aria-hidden="true"></i>
+</button>
+<button class="btn ghost sm" type="button">
+  <i class="ic-lucide-download" aria-hidden="true"></i>
+  Download invoice
+</button>
+```
+
+Um botão é uma linha flex com espaçamento de 0.5rem, então um ícone ao lado de um rótulo fica espaçado sem markup extra.
+
+### Carregando ícones
+
+Este pacote não entrega ícones. Os exemplos desta documentação usam o `@codenhub/icons` com a família Lucide, e os nomes de classe dele sempre incluem a família, como `ic-lucide-copy`. Instale e carregue uma vez, ao lado deste pacote:
+
+```sh
+pnpm add @codenhub/icons
+```
+
+Com CSS compilado, importe as regras base e cada família que você usa:
+
+```css
+@import "@codenhub/styles";
+@import "@codenhub/icons";
+@import "@codenhub/icons/lucide";
+```
+
+Com o código-fonte do Tailwind, importe o entrypoint de Tailwind dele depois do deste pacote:
+
+```css
+@import "@codenhub/styles/tw";
+@import "@codenhub/icons/tw";
+```
+
+Qualquer outro ícone também funciona: um `<svg>` inline com `stroke="currentColor"` ou `fill="currentColor"` pega a cor do texto do botão da mesma forma.
+
+## Links com cara de botão
+
+Um link que navega, como "View billing history", continua sendo um link. Escreva-o como `<a href>` com `.btn`, e ele ganha o mesmo visual:
+
+```html
+<a class="btn secondary ghost edged" href="/settings/billing">View billing history</a>
+```
+
+Não use `<div class="btn">` nem `<span class="btn">`: eles parecem botões, mas não podem receber foco nem ser acionados pelo teclado. Use `<button>` para ações e `<a href>` para navegação.
+
+## Botões desabilitados
+
+Qualquer um destes deixa um botão com aparência de desabilitado: o atributo `disabled`, `.disabled`, `aria-disabled="true"` ou `data-disabled`. Um botão desabilitado é desenhado com 58% de opacidade e cursor de não permitido, e não muda no hover nem ao ser pressionado.
+
+```html
+<button class="btn primary" type="submit" disabled>Save changes</button>
+
+<a class="btn ghost" aria-disabled="true">Download invoice</a>
+```
+
+Só o atributo `disabled` impede o botão de funcionar. `.disabled`, `aria-disabled` e `data-disabled` mudam apenas a aparência: um clique ou a tecla Enter ainda o acionam, então o seu código precisa ignorá-lo. `aria-disabled` é a escolha certa quando o botão deve continuar focável, por exemplo para que um tooltip explique por que ele está desabilitado. Um link não tem atributo `disabled`, então remova também o `href` dele quando ele não deve navegar.
+
+## Estado de carregamento
+
+Não existe classe de carregamento. Um botão carregando é um botão desabilitado com um ícone de spinner que você fornece, e a página de [Feedback](./feedback.md#mostre-que-o-formulário-está-salvando) monta isso para o botão de salvar. Desabilite o botão para que um segundo clique não envie o formulário duas vezes.
+
+## A seguir
+
+Os botões estão prontos; o card que eles salvam ainda não tem nada para salvar. [Formulários](./forms.md) acrescenta os campos do perfil.

package/docs/pt-BR/usage/composing.md

@@ -0,0 +1,168 @@
+---
+title: Composição
+description: Consulta sobre como intenção, apresentação, estética e elevação se combinam, o visual padrão de cada componente e quais classes cada componente lê.
+order: 8
+source: 2493c7c14124565b565b1226e99d4b3de3b087b2
+---
+
+# Composição
+
+Esta é uma página de consulta. [Montando uma tela](../concepts.md) apresenta intenção, apresentação e estética; esta página tem as regras completas para combiná-las, o visual padrão de cada componente, quais classes cada componente lê e a elevação.
+
+## Combinando classes
+
+```html
+<div class="soft">
+  <button class="btn primary">Soft primary button</button>
+  <span class="badge success">Soft success badge</span>
+  <button class="btn primary ghost edged">Outlined: the class on the element wins</button>
+</div>
+```
+
+- **A apresentação é herdada.** `.solid`, `.soft`, `.ghost`, `.edged` e `.edgeless` funcionam no componente ou em qualquer contêiner, e uma classe no elemento vence uma herdada de um contêiner. Um contêiner define o visual de tudo dentro dele, e qualquer elemento pode escolher o seu.
+- **Estéticas e [tokens de material](./customizing.md#tokens-de-material) são herdados** da mesma forma.
+- **A intenção não é herdada.** `.primary` e as outras classes de intenção colorem só o elemento em que estão. Um contêiner que recolorisse silenciosamente tudo dentro dele deixaria vermelho o botão neutro de cancelar de um card vermelho de zona de perigo. `.neutral` dá nome ao padrão; use-o onde um elemento receberia uma intenção, como uma linha de tabela dentro de uma tabela `.success`. Veja [Temas → Tokens de intenção](./theming.md#tokens-de-intenção).
+- **A elevação não é herdada.** `.raised` eleva só o elemento em que está; veja [Elevação](#elevação).
+- **O tamanho não é herdado.** `.sm` e `.lg` mudam o tamanho só do botão ou do controle em que estão, então um formulário `.sm` não encolhe os campos dentro dele. Veja [Botões → Tamanhos e formatos](./buttons.md#tamanhos-e-formatos) e [Formulários → Tamanhos](./forms.md#tamanhos).
+
+Com os entrypoints de código-fonte do Tailwind, cada classe acima, exceto as classes de estética, também é um utilitário do Tailwind, então variantes como `md:lg` e `dark:solid` funcionam e `@apply btn primary soft sm` dá a uma classe sua a combinação inteira. Os modificadores documentados com cada componente, como `.tight` ou `.interactive`, também são utilitários, então `@apply stack tight` funciona. As classes de estética, como `.glass`, continuam sendo CSS puro, então `@apply glass` e `md:glass` não funcionam; escreva a classe no markup. Veja [Tailwind CSS v4 → Construa seus próprios componentes com `@apply`](../integrating/tailwind.md#construa-seus-próprios-componentes-com-apply), e a página de [Predefinições](./presets.md) para saber quando usar isso.
+
+## Padrões dos componentes
+
+Sem nenhuma classe de apresentação nele ou em volta dele, cada componente tem o seu próprio visual. "Elevação em repouso" é quanta profundidade ele recebe quando uma [estética](./aesthetics.md) desenha profundidade; sem estética, nada tem sombra.
+
+| Componente                       | Preenchimento | Borda     | Elevação em repouso |
+| -------------------------------- | ------------- | --------- | ------------------- |
+| `.btn`                           | `.solid`      | sem borda | 1                   |
+| `.card`                          | `.ghost`      | com borda | 1                   |
+| `.panel`                         | `.soft`       | sem borda | 0                   |
+| `.alert`                         | `.soft`       | com borda | 0                   |
+| `.badge`                         | `.soft`       | sem borda | 0                   |
+| `.ipt`, `.textarea`, `.select`   | `.ghost`      | com borda | 0                   |
+| `.input-group`                   | `.ghost`      | com borda | 0                   |
+| `.checkbox`, `.radio`, `.switch` | `.soft`       | com borda | 0                   |
+| `.kbd`                           | `.soft`       | com borda | 0                   |
+| `.code`, `.pre`                  | `.soft`       | sem borda | 0                   |
+| `.data-table`                    | `.soft`       | sem borda | 0                   |
+| `.progress` (o trilho)           | `.soft`       | sem borda | 0                   |
+| `.tooltip-bubble`                | `.solid`      | com borda | 0                   |
+| `.quote`                         | `.ghost`      | com borda | 0                   |
+| `.skeleton`, `.divider`          | Só a intenção | Nenhuma   | 0                   |
+
+Um `.solid` neutro preenche só até 20%; veja [Temas → Tokens de intenção](./theming.md#tokens-de-intenção). As exceções neutras a esses preenchimentos estão em [Apresentação](#apresentação).
+
+## Apresentação
+
+A apresentação são duas escolhas separadas. `.solid`, `.soft` e `.ghost` definem quanto da cor da intenção preenche um componente. `.edged` e `.edgeless` definem se ele desenha uma borda. Elas definem [tokens de apresentação](./customizing.md#tokens-de-apresentação) e nada mais.
+
+| Classe      | Visual                                                             | `--ui-fill` | `--ui-fg-on-fill` | `--ui-border` |
+| ----------- | ------------------------------------------------------------------ | ----------- | ----------------- | ------------- |
+| `.solid`    | Preenchido com a cor da intenção, com texto em contraste.          | `100%`      | `100%`            |               |
+| `.soft`     | Um tom claro, com texto na cor da intenção.                        | `12%`       | `0%`              |               |
+| `.ghost`    | Sem preenchimento em repouso, com texto na cor da intenção.        | `0%`        | `0%`              |               |
+| `.edged`    | Uma borda na cor da intenção, tão grossa quanto a estética define. |             |                   | `100%`        |
+| `.edgeless` | Sem borda.                                                         |             |                   | `0%`          |
+
+```html
+<button class="btn primary">Solid, the button default</button>
+<button class="btn soft edged">Tinted, with a border</button>
+<button class="btn primary ghost edged">Outline</button>
+<button class="btn ghost">Ghost: picks up a tint on hover</button>
+<input class="ipt soft edgeless" aria-label="Search" />
+```
+
+Uma classe de preenchimento nunca define a borda, e uma classe de borda nunca define o preenchimento. `.solid.edged` tem o mesmo visual que `.solid.edgeless`, porque a borda some à medida que o preenchimento aumenta.
+
+A borda é o contorno do componente e nada mais. Linhas dentro de um componente, como as linhas divisórias entre as linhas de uma tabela, são um controle separado; veja [Conteúdo e layout → Linhas divisórias de tabela](./content-and-layout.md#linhas-divisórias-de-tabela).
+
+### Superfícies neutras ficam sem tom em repouso
+
+Um `.card.soft`, um `.panel` e um `.alert` neutros não mostram tom em repouso. Em vez disso, eles usam o tom de fundo discreto um passo distante da página (`--color-foreground`), porque um tom cinza em toda caixa neutra parece sujo, e não discreto.
+
+- Um `.card.soft` com `.interactive` ou `.hoverable` mostra o tom no hover. Um `.card.soft` simples e um `.panel` não têm estado de hover.
+- A apresentação pode vir do elemento ou de um contêiner: `<div class="soft"><div class="card">` fica em repouso como `.card.soft`, e um contêiner `.ghost` ou `.solid` dá a um `.panel` ou `.alert` a placa que a própria classe daria.
+- Com uma das seis intenções embutidas, os três mantêm o tom comum de 12%, e um card o aprofunda no hover. Uma intenção definida por você é tratada como neutra aqui; veja [Temas → Sua própria intenção](./theming.md#sua-própria-intenção).
+- Um `.badge` mantém o seu tom de 12% mesmo quando neutro. Ele não tem borda, então, sem o tom, sumiria no texto em volta.
+
+`.kbd`, `.code` e `.pre` funcionam de outro jeito. Eles ficam sobre o tom suave da sua intenção, `--intent-subtle`, que é `--color-surface` no neutro, e uma intenção embutida adiciona 12% da sua cor por cima. Uma intenção definida por você mostra o seu próprio tom `--intent-subtle`, sem esses 12% a mais.
+
+### Controles de texto e toggles
+
+- **Controles de texto** limitam o seu preenchimento para que o texto digitado continue legível: no máximo 6% vindo de um contêiner, 12% com o seu próprio `.soft` e 20% com o seu próprio `.solid`. Eles ignoram um `.edgeless` vindo de um contêiner e respeitam o seu próprio. Veja [Formulários → Preenchimento e borda em controles de texto](./forms.md#preenchimento-e-borda-em-controles-de-texto).
+- **Toggles** limitam o preenchimento desmarcado a 40% e preenchem até 100% quando marcados. `.checkbox` e `.radio` sempre desenham a sua borda, assim como `.switch.ghost`. Veja [Formulários → Cores de marcado e desmarcado](./forms.md#cores-de-marcado-e-desmarcado).
+
+### Balões de tooltip
+
+Um balão de tooltip é sempre preenchido e opaco, e desenha uma borda fina que só o seu próprio `.edgeless` remove. Sem intenção, ele usa `--color-tooltip`; uma intenção o preenche com a cor dela. [Tooltips → Como o balão aparece](./tooltips.md#como-o-balão-aparece) traz as cores.
+
+### Trilhos de progresso
+
+`.progress` lê as duas escolhas no seu trilho. A parte preenchida é sempre a cor da intenção com força total. `.solid` não é suportado no trilho, porque o trilho e a parte preenchida ficariam da mesma cor. `.ghost.edgeless` renderiza, mas deixa o trilho sem moldura visível; `.ghost.edged` desenha um contorno em volta dele.
+
+### Combinações não suportadas
+
+| Componente              | Classe      | O que acontece                                                                      |
+| ----------------------- | ----------- | ----------------------------------------------------------------------------------- |
+| `.kbd`, `.code`, `.pre` | `.ghost`    | O chip ainda desenha o seu fundo tingido, porque é esse fundo que faz dele um chip. |
+| `.progress`             | `.solid`    | O trilho e a parte preenchida ficam da mesma cor, então não dá para ver o valor.    |
+| `.checkbox`, `.radio`   | `.edgeless` | Ignorado: a borda é sempre desenhada.                                               |
+
+## Referência de eixos por componente
+
+Quais classes mudam cada componente. "Material" é o que uma [estética](./aesthetics.md) pode mudar nele: "Formato" significa canto, espessura da borda, sombra, hover e contorno; as entradas mais restritas listam o que se aplica.
+
+| Componentes                                                   | Intenção | Preenchimento | Borda | Material           |
+| ------------------------------------------------------------- | -------- | ------------- | ----- | ------------------ |
+| `.btn`, `.alert`, `.badge`, `.card`, `.panel`                 | Sim      | Sim           | Sim   | Formato            |
+| `.kbd`, `.data-table`                                         | Sim      | Sim           | Sim   | Canto e borda      |
+| `.quote`                                                      | Sim      | Sim           | Sim   | Espessura da borda |
+| `.divider`, `.skeleton`                                       | Sim      | Não           | Não   | Não                |
+| `.ipt`, `.textarea`, `.select`, `.text-control`               | Sim      | Sim           | Sim   | Formato            |
+| `.input-group`                                                | Sim      | Sim           | Sim   | Formato            |
+| `.surface`                                                    | Sim      | Sim           | Sim   | Formato            |
+| `.checkbox`, `.radio`                                         | Sim      | Sim           | Não   | Canto e borda      |
+| `.switch`                                                     | Sim      | Sim           | Sim   | Canto e borda      |
+| `.progress`                                                   | Sim      | Sim           | Sim   | Canto e borda      |
+| `.code`, `.pre`                                               | Sim      | Sim           | Sim   | Canto e contorno   |
+| `.tooltip-bubble`                                             | Sim      | Sim           | Sim   | Formato e desfoque |
+| `.table-wrap`, `.quote-inline`, utilitários de layout e texto | Não      | Não           | Não   | Não                |
+
+"Sim" significa que a classe muda o componente, e "Não" que não muda; os testes do pacote conferem os dois. O que cada componente faz com uma classe:
+
+| Componente                                      | Lê                                                                                                        |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `.btn`, `.alert`, `.badge`, `.card`, `.panel`   | Preenchimento, cor do texto, borda e espessura da borda.                                                  |
+| `.kbd`                                          | Preenchimento, cor do texto, borda e espessura da borda.                                                  |
+| `.data-table`                                   | Preenchimento e cor do texto do cabeçalho, borda e espessura da borda.                                    |
+| `.ipt`, `.textarea`, `.select`, `.text-control` | Borda, espessura da borda e um preenchimento limitado.                                                    |
+| `.input-group`                                  | Borda, espessura da borda e um preenchimento limitado.                                                    |
+| `.checkbox`, `.radio`                           | Um preenchimento limitado, marcado e desmarcado.                                                          |
+| `.switch`                                       | Borda, espessura da borda e um preenchimento limitado.                                                    |
+| `.quote`                                        | Preenchimento, cor do texto, borda e espessura da borda.                                                  |
+| `.code`, `.pre`, `.tooltip-bubble`              | Preenchimento, cor do texto, borda e material.                                                            |
+| `.progress`                                     | Preenchimento do trilho, borda e espessura da borda. A parte preenchida é sempre a cor cheia da intenção. |
+| `.skeleton`, `.divider`                         | Só a intenção.                                                                                            |
+
+Classes de estado e modificadoras, como `.interactive`, `.hoverable`, `.pressable`, `.p-sm` e `.vertical`, são documentadas junto com o seu componente. Cada uma tem efeito nos componentes que a leem, e no `/tw` são utilitários, então `@apply card interactive` funciona. Um controle inválido é marcado com `aria-invalid="true"`, e não com uma classe; veja [Formulários](./forms.md#mostre-um-erro-de-validação).
+
+## Elevação
+
+Elevação é quanta profundidade um componente recebe. Nada tem sombra até que uma [estética](./aesthetics.md) desenhe profundidade ou uma destas classes a peça.
+
+| Classe      | Profundidade                                                                                     |
+| ----------- | ------------------------------------------------------------------------------------------------ |
+| `.flat`     | Nenhuma. As superfícies de vidro mantêm a sua sombra, porque ela faz parte do material do glass. |
+| `.raised`   | Um passo da profundidade em vigor: cards e blocos que ficam perto da página.                     |
+| `.floating` | Dois passos: menus e popovers.                                                                   |
+
+```html
+<article class="card raised">Lifted</article>
+<div class="floating panel">A menu</div>
+<article class="card flat">Flat, whatever the aesthetic says</article>
+```
+
+Cada classe multiplica a sombra da estética em vigor. O mesmo `.raised` é um desfoque suave numa página simples e uma sombra dura deslocada sob `.neobrutalism`: a estética decide como a profundidade parece, e a classe decide quanto dela esse elemento recebe.
+
+A classe não é herdada. Ela eleva ou achata só o elemento em que está, e um elemento dentro dele não recebe profundidade dela. Dê a cada elemento que precisa de profundidade a sua própria classe. O espalhamento (spread) de uma sombra não é multiplicado, porque uma estética que desenha a borda como sombra interna usa o espalhamento para essa borda.
+
+Essas classes são separadas dos tokens de sombra `--elevation-*` em [Temas → Tokens fundamentais](./theming.md#tokens-fundamentais), que são sombras fixas para elementos que você mesmo estiliza.

package/docs/pt-BR/usage/content-and-layout.md

@@ -0,0 +1,219 @@
+---
+title: Conteúdo e layout
+description: Consulta de todos os helpers de layout com os seus espaçamentos, a escala tipográfica com os seus tamanhos, cards e painéis com o seu padding, tabelas, citações, código e teclas.
+order: 10
+source: 19c4b12f34054533e56cbc1edbefff908c48a1e7
+---
+
+# Conteúdo e layout
+
+Esta é uma página de consulta para as classes que organizam uma página e definem o seu conteúdo: helpers de layout, a escala tipográfica, cards e painéis, tabelas e os pequenos chips de conteúdo. [Montando uma tela](../concepts.md#organize-o-layout-da-página) mostra essas classes em uso.
+
+## Layout
+
+O espaçamento de todo helper de layout é `--layout-gap`, `1rem` por padrão. Definir `--layout-gap` num elemento muda o espaçamento de todos os layouts dentro dele. `.tight` e `.loose` mudam só o layout em que estão; um layout aninhado dentro dele mantém o seu próprio espaçamento.
+
+| Classe             | Layout                                                                                                                                  | Espaçamento                                      |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| `.stack`           | Uma coluna vertical.                                                                                                                    | `--layout-gap`, `.tight` 0.5rem, `.loose` 1.5rem |
+| `.cluster`         | Uma linha que quebra, com os itens centralizados na vertical. `.between` espalha os itens até as duas pontas.                           | Igual                                            |
+| `.view`            | Um contêiner flex. `.vertical` o transforma numa coluna; `.horizontal`, numa linha que quebra, com itens centralizados.                 | Igual                                            |
+| `.auto-grid`       | Um grid de colunas iguais, cada uma com pelo menos `--layout-grid-min` (16rem) de largura, quantas couberem.                            | Igual                                            |
+| `.section`         | Padding em volta de uma seção da página: `--layout-gutter` nas laterais, `--layout-section-block` em cima e embaixo.                    | Nenhum                                           |
+| `.section-content` | Centraliza o seu conteúdo numa largura de `--container-max` (80rem). `.narrow` usa 48rem, `.wide` 90rem.                                | Nenhum                                           |
+| `.divider`         | Uma linha horizontal, tão larga quanto o seu contêiner. `.vertical` a transforma numa linha vertical tão alta quanto a linha do layout. | Nenhum                                           |
+| `.visually-hidden` | Esconde o conteúdo na tela e o mantém para leitores de tela.                                                                            | Nenhum                                           |
+
+`.auto-grid` acomoda duas colunas de 16rem quando o seu contêiner tem 32rem mais o espaçamento de largura, três com 48rem mais dois espaçamentos, e assim por diante. Abaixo da largura de uma coluna, a coluna encolhe para caber. Defina `--layout-grid-min` no grid para mudar a largura das colunas.
+
+`--layout-gutter` é `clamp(1rem, 4vw, 2rem)` e `--layout-section-block` é `clamp(4rem, 9vw, 7rem)`: os dois crescem com a janela entre esses limites. A lista completa dos tokens fundamentais está em [Temas → Tokens fundamentais](./theming.md#tokens-fundamentais).
+
+Um `.divider` aceita uma intenção, que o colore, e ignora as classes de apresentação, então um contêiner `.ghost.edgeless` não esconde os divisores dentro dele. A espessura dele é a espessura de borda da estética.
+
+`.visually-hidden` não se chama `.sr-only` porque o Tailwind entrega um `.sr-only` próprio, e duas classes com o mesmo nome entrariam em conflito.
+
+## Tipografia
+
+| Classe           | Tamanho                                    | Peso        | Espaçamento entre letras |
+| ---------------- | ------------------------------------------ | ----------- | ------------------------ |
+| `.text-display`  | 3.75rem, 6rem a partir de 48rem de largura | Negrito     | Justo                    |
+| `.text-title-lg` | 3rem, 3.75rem a partir de 48rem de largura | Negrito     | Justo                    |
+| `.text-title`    | 1.875rem                                   | Negrito     | Justo                    |
+| `.text-title-sm` | 1.25rem                                    | Seminegrito | Justo                    |
+| `.text-label-lg` | 1.125rem                                   | Médio       | Largo                    |
+| `.text-label`    | 1rem                                       | Médio       | Largo                    |
+| `.text-body`     | 0.875rem                                   | Normal      | Mais largo               |
+
+Os dois maiores tamanhos crescem no breakpoint `md` do Tailwind, 48rem por padrão. Com os entrypoints de código-fonte do Tailwind, vale o seu próprio breakpoint `md`. O pacote não define tamanho para texto sem classe: o texto do corpo e os títulos sem classe recebem o tamanho do navegador, ou o tamanho do texto em volta sob o reset; veja [Configuração → HTML sem classes](../setup.md#html-sem-classes) para o mapeamento sem classes.
+
+`.text-body` tem 0.875rem, menor que o texto de 1rem da página; use-o para texto secundário ou denso, não para o texto principal da página. O `/native` é a exceção: ele aplica `.text-body` ao `body`, então lá ele é o texto da página, e parágrafos e itens de lista o herdam do elemento em que estiverem. Veja [HTML sem classes](../setup.md#html-sem-classes).
+
+`.selection-contrast` num elemento troca as cores do texto selecionado dentro dele para `--color-primary` sobre `--color-primary-contrast`. Use-o numa área `.solid.primary`, onde a cor de seleção padrão seria igual ao fundo.
+
+## Superfícies
+
+`.card` e `.panel` são os dois contêineres. Os dois aceitam intenção, [apresentação](./composing.md#apresentação) e [tokens de material](./customizing.md#tokens-de-material).
+
+| Classe   | Visual padrão                                                                       | Padding padrão |
+| -------- | ----------------------------------------------------------------------------------- | -------------- |
+| `.card`  | Sem preenchimento, com borda, o canto de superfície e uma elevação em repouso de 1. | 1.25rem        |
+| `.panel` | O tom de fundo discreto, sem borda, o canto de superfície e sem elevação.           | 1rem           |
+
+Uma elevação em repouso de 1 não mostra sombra sozinha. Um card só tem sombra sob uma [estética](./aesthetics.md) que desenha profundidade, ou com `.raised` ou `.floating`; veja [Composição → Elevação](./composing.md#elevação).
+
+Classes de padding:
+
+| Classe    | Num `.card` | Num `.panel` |
+| --------- | ----------- | ------------ |
+| `.p-xs`   | 0.5rem      | 0.25rem      |
+| `.p-sm`   | 0.75rem     | 0.5rem       |
+| _nenhuma_ | 1.25rem     | 1rem         |
+| `.p-lg`   | 2rem        | 1.5rem       |
+| `.flush`  | 0           | 0            |
+
+`.flush` é para conteúdo que vai de ponta a ponta, como uma imagem ou uma tabela dentro de um card.
+
+Uma classe de padding só se aplica ao card ou painel em que está. Um card ou painel aninhado dentro dele mantém o seu próprio padding, então um `.card.flush` que contém um `.panel` ainda aplica 1rem de padding ao painel.
+
+Um painel é para barras laterais, barras de ferramentas e áreas rebaixadas: áreas que fazem parte da página, e não objetos sobre ela. Um card é um objeto autocontido, como o card de perfil ou o card do plano na tela de configurações.
+
+### Cards e painéis neutros
+
+Um `.card.soft` neutro e um `.panel` neutro não mostram tom: eles ficam sobre o tom de fundo discreto um passo distante da página, então aparecem como uma área separada sem chamar atenção. Com uma intenção embutida, eles recebem o tom comum. [Composição → Superfícies neutras ficam sem tom em repouso](./composing.md#superfícies-neutras-ficam-sem-tom-em-repouso) traz os detalhes, incluindo o hover.
+
+### Cards clicáveis
+
+| Classe         | Efeito                                                                                                      |
+| -------------- | ----------------------------------------------------------------------------------------------------------- |
+| `.interactive` | Cursor de ponteiro, cor de hover, clique e um anel de foco. O mesmo que `.hoverable` e `.pressable` juntos. |
+| `.hoverable`   | Só a cor de hover, sem cursor de ponteiro.                                                                  |
+| `.pressable`   | Só o clique e o cursor de ponteiro.                                                                         |
+
+No visual padrão, um clique reduz levemente o card (`scale(0.97)`); uma estética pode substituir isso pelo seu próprio clique, e, com a preferência por movimento reduzido, ele ainda acontece, de imediato.
+
+Use uma das metades num card que responde a um só gesto. Um card que contém o seu próprio botão recebe `.hoverable`, para que clicar no botão não clique o card inteiro.
+
+```html
+<article class="card">Neutral card</article>
+<article class="card success solid">Filled success card</article>
+<article class="card primary ghost edged">Intent border, no fill</article>
+<a class="card success soft interactive" href="/settings/billing">Billing: tinted at rest, deeper on hover</a>
+<article class="card hoverable">Tinted on hover; the action is a nested button</article>
+<aside class="panel">A sidebar</aside>
+```
+
+Essas classes só estilizam. Coloque-as num link ou botão de verdade e dê a ele um nome acessível; um `<div class="card interactive">` não pode receber foco nem ser usado pelo teclado.
+
+Um card `.interactive` ou `.pressable` desabilitado mostra o cursor de não permitido em vez do ponteiro, seja um `<button>` com `disabled`, seja um elemento com `.disabled`, `aria-disabled="true"` ou `data-disabled`.
+
+## Tabelas
+
+A tela de configurações lista as chaves de API numa tabela:
+
+```html
+<div class="table-wrap">
+  <table class="data-table">
+    <caption class="visually-hidden">
+      API keys
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Created</th>
+        <th scope="col">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Deploy bot</td>
+        <td>3 March 2026</td>
+        <td>Active</td>
+      </tr>
+      <tr class="destructive">
+        <td>Old laptop</td>
+        <td>12 June 2024</td>
+        <td>Revoked</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+| Classe        | Efeito                                                                                                                                                               |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.data-table` | Estiliza uma `<table>`: largura total, texto `.text-body`, um fundo no cabeçalho, o canto de superfície, padding nas células e uma cor de hover nas linhas do corpo. |
+| `.table-wrap` | Rola a tabela para os lados quando ela é mais larga que o seu contêiner.                                                                                             |
+| `.ruled`      | Num `.data-table`. Desenha uma linha entre as linhas do corpo.                                                                                                       |
+| `.ruleless`   | Num `.data-table`. Não desenha nenhuma linha dentro da tabela.                                                                                                       |
+
+### Intenção das linhas
+
+As linhas de uma tabela recebem a intenção da tabela, então `.data-table.success` deixa o cabeçalho e as linhas divisórias verdes. Uma linha com a sua própria classe de intenção usa essa, como faz o `<tr class="destructive">` da chave revogada. `<tr class="neutral">` volta uma linha para neutro dentro de uma tabela colorida. Numa tabela `.solid`, uma linha com a sua própria intenção mantém a cor de texto da tabela, para continuar legível sobre o preenchimento da tabela, e mostra a sua intenção pela linha divisória e pelo hover. Este é o único lugar em que uma intenção é herdada, porque as linhas são partes da tabela, e não componentes separados.
+
+Só as seis intenções embutidas e `.neutral` mudam a cor de uma linha do corpo. Uma linha com uma intenção que você mesmo definiu, como `<tr class="beta">`, fica igual ao resto da tabela: o texto, a linha divisória e o hover vêm da intenção da tabela. Para marcar essa linha, escreva nela uma classe de intenção embutida e troque, na própria linha, a família de cores dessa intenção, como descreve [Temas → Sua própria intenção](./theming.md#sua-própria-intenção), ou pinte a linha com os seus próprios utilitários.
+
+### Linhas divisórias de tabela
+
+Uma tabela desenha linhas embaixo do cabeçalho e em cima do rodapé. `.ruled` e `.ruleless` as mudam junto com as linhas entre as linhas do corpo:
+
+| Classe      | Embaixo do cabeçalho e em cima do rodapé | Entre as linhas do corpo |
+| ----------- | ---------------------------------------- | ------------------------ |
+| `.ruleless` | Não                                      | Não                      |
+| _nenhuma_   | Sim                                      | Não                      |
+| `.ruled`    | Sim                                      | Sim                      |
+
+`--ui-rule` é o token por trás das duas classes, então um contêiner pode adicionar linhas divisórias a todas as tabelas dentro dele: `style="--ui-rule: 100%"` funciona como `.ruled`, e `0%` como `.ruleless`.
+
+A moldura em volta da tabela é separada: uma tabela não tem borda por padrão, e `.edged` adiciona uma. As três escolhas não afetam umas às outras, então `.data-table.ruleless.edged` é uma tabela com moldura e sem linhas dentro, e `.data-table.ruled` tem todas as linhas separadas e nenhuma moldura.
+
+### Apresentação em tabelas
+
+Uma tabela lê a [apresentação](./composing.md#apresentação) no seu cabeçalho, nas suas linhas divisórias e na sua borda:
+
+```html
+<table class="data-table success soft edged">
+  …
+</table>
+<table class="data-table ghost">
+  <!-- No header background: only lines and text -->
+</table>
+```
+
+- `.soft`, o padrão, dá ao cabeçalho o tom de fundo discreto, `--color-foreground`, em todas as intenções. Uma tabela não tem estado de hover para um tom, então um `.data-table.success.soft` não fica verde; as linhas divisórias e a borda dele ficam.
+- `.ghost` remove o fundo do cabeçalho, deixando as linhas divisórias e o texto.
+- `.solid` preenche o cabeçalho com a cor da intenção.
+
+### Cantos e rolagem
+
+Uma tabela recebe o canto de superfície, como um card ao lado dela. As células dos cantos carregam os cantos, então uma `<caption>` acima da tabela não é cortada em nenhum navegador. Uma célula que ocupa várias linhas até um canto inferior deixa esse canto reto.
+
+`.table-wrap` rola, e um elemento com rolagem corta o que é desenhado fora dele, incluindo um tooltip numa célula; veja [Tooltips → Onde um tooltip é cortado](./tooltips.md#onde-um-tooltip-é-cortado).
+
+- Sob uma estética que desenha um brilho em volta dos componentes, como `.cyber`, o wrapper abre espaço para o brilho, para que ele não seja cortado. O wrapper então se estende até essa distância além do seu pai, o que só aparece quando o pai encosta na borda da janela.
+- O wrapper só consegue abrir espaço para o brilho de uma estética em volta dele. Coloque a classe de estética no `.table-wrap` ou num elemento acima dele, e não só na tabela.
+- Sombras, como a de uma tabela `.raised`, não ganham espaço e são cortadas.
+
+Mantenha o wrapper em qualquer tabela que possa ficar mais larga que o seu contêiner; sem ele, uma tabela larga alarga a página inteira.
+
+## Citações, código e teclas
+
+| Classe          | Uso                                                                                    | Visual padrão                          | Cores da intenção   |
+| --------------- | -------------------------------------------------------------------------------------- | -------------------------------------- | ------------------- |
+| `.quote`        | Um `<blockquote>`. Um `<cite>` dentro dele fica sem itálico e recebe a cor da citação. | Uma barra no início, sem preenchimento | Barra, fundo, texto |
+| `.quote-inline` | Uma citação `<q>` inline.                                                              | Só o estilo de citação                 | Nada                |
+| `.kbd`          | Uma tecla que o usuário pressiona, como <kbd>Ctrl</kbd>.                               | Um chip tingido com borda              | Fundo, borda, texto |
+| `.code`         | Código inline.                                                                         | Um chip tingido sem borda              | Fundo, texto        |
+| `.pre`          | Um bloco de código. Ele rola para os lados quando uma linha é longa demais.            | Um bloco tingido sem borda             | Fundo, texto        |
+
+```html
+<p>Press <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd> to search members.</p>
+<p>Use the <code class="code">Authorization</code> header with your API key.</p>
+<kbd class="kbd primary solid">Ctrl</kbd>
+<kbd class="kbd primary soft edged">Shift</kbd>
+```
+
+Um `.kbd`, `.code` ou `.pre` fica sobre o tom suave da sua intenção, `--color-surface` no neutro, e uma classe de intenção embutida adiciona 12% da sua cor por cima. `.ghost` não é suportado nesses três: o fundo tingido é o que faz deles chips, então eles o mantêm e `.ghost` não muda nada. A fonte deles é `--font-mono`; veja [Temas → Fontes](./theming.md#fontes).
+
+## A seguir
+
+A página de [Predefinições](./presets.md) mostra como definir um visual uma única vez, em vez de em cada elemento. [Acessibilidade](../accessibility.md) lista o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.