@codenhub/styles 0.7.0 → 0.9.0

package/docs/pt-BR/integrating/tailwind.md

@@ -2,16 +2,16 @@
 title: Tailwind CSS v4
 description: Como usar os entrypoints de código-fonte /tw num projeto com Tailwind CSS v4.
 order: 1
-source: 7988dc023c91950991a720ea7da7edfe3378d4d7
+source: 4866b77d4cfb1655499f633fff8bf61dde2aa4bb
 ---
 
 # Tailwind CSS v4
 
-Um projeto que já roda Tailwind CSS v4 pode compilar o código-fonte deste pacote em vez de carregar a saída compilada. Os utilitários da sua aplicação e as classes do pacote saem então de um único build, compartilham um único tema e usam uma única variante `dark:`. Esta página trata do import, das estéticas, dos entrypoints específicos e dos problemas de build que você provavelmente vai encontrar.
+Um projeto que já roda Tailwind CSS v4 pode compilar o código-fonte deste pacote em vez de carregar a saída compilada. Os utilitários da sua aplicação e as classes do pacote saem então de um único build, compartilham um único tema e usam uma única variante `dark:`. Esta página trata do import, das estéticas, dos entrypoints específicos, de como construir seus próprios componentes com `@apply`, de como descartar a paleta do Tailwind e dos problemas de build que você provavelmente vai encontrar.
 
 ## Por que código-fonte em vez de compilado
 
-Os entrypoints `/tw` publicam uma cópia do código-fonte não compilado de `dist/tw`; o seu próprio build do Tailwind o compila junto com a sua aplicação, então as diretivas `@theme`, `@utility` e `@apply` dele são resolvidas junto com as suas. Os entrypoints compilados (`@codenhub/styles`) continuam funcionando num projeto com Tailwind, mas aí dois pipelines de CSS separados rodam lado a lado em vez de um — use `/tw`, a menos que um motivo específico o descarte.
+Os entrypoints `/tw` publicam uma cópia do código-fonte não compilado da pasta `tw/` do pacote; o seu próprio build do Tailwind o compila junto com a sua aplicação, então as diretivas `@theme`, `@utility` e `@apply` dele são resolvidas junto com as suas. Os entrypoints compilados (`@codenhub/styles`) continuam funcionando num projeto com Tailwind, mas aí dois pipelines de CSS separados rodam lado a lado em vez de um — use `/tw`, a menos que um motivo específico o descarte.
 
 ## Importe o entrypoint de código-fonte
 
@@ -23,7 +23,7 @@ Os entrypoints `/tw` publicam uma cópia do código-fonte não compilado de `dis
 
 O `/tw` importa o próprio Tailwind, então ele substitui o seu `@import "tailwindcss"` em vez de se somar a ele: com os dois, o Preflight do Tailwind é emitido duas vezes. Todos os outros entrypoints `/tw/*` esperam que o seu import venha antes; veja [Usando um entrypoint específico](#usando-um-entrypoint-específico).
 
-O Tailwind CSS v4 varre o seu projeto automaticamente — a maioria dos projetos não precisa de nada além do import acima. Os caminhos de `@source` são resolvidos a partir do arquivo CSS que os declara, não da raiz do projeto, então `./src` aqui significa "o `src/` ao lado desta folha de estilos"; ajuste para onde a sua folha de estilos global realmente está. Adicione `@source` só para markup que a varredura automática do Tailwind não alcança sozinha: um caminho excluído por padrão (listado no `.gitignore`, ou dentro de `node_modules` — uma biblioteca de componentes externa, por exemplo) ou, num monorepo, um caminho fora da árvore de diretórios deste arquivo. Aponte para o markup da sua aplicação, não para este pacote — o `/tw` já entrega a definição de todas as classes que publica, então varrê-lo também só deixa o build mais lento, sem acrescentar classes.
+O Tailwind CSS v4 varre o seu projeto automaticamente — a maioria dos projetos não precisa de nada além do import acima. Os caminhos de `@source` são resolvidos a partir do arquivo CSS que os declara, não da raiz do projeto, então `./src` aqui significa "o `src/` ao lado desta folha de estilos"; ajuste para onde a sua folha de estilos global realmente está. Adicione `@source` só para markup que a varredura automática do Tailwind não alcança sozinha: um caminho excluído por padrão (listado no `.gitignore`, ou dentro de `node_modules` — uma biblioteca de componentes externa, por exemplo) ou, num monorepo, um caminho fora da árvore de diretórios deste arquivo. Aponte para o markup da sua aplicação, não para este pacote: o código-fonte do pacote nomeia todas as classes que ele define, então varrê-lo emite todas elas, quer as suas páginas as usem ou não.
 
 ## Adicione estéticas
 
@@ -47,6 +47,71 @@ Diferente do `/tw`, os entrypoints específicos e o `/tw/native` não importam o
 @import "@codenhub/styles/tw/button";
 ```
 
+## Construa seus próprios componentes com `@apply`
+
+No `/tw`, todo componente, helper e classe de eixo é um utilitário do Tailwind. Isso inclui as intenções (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`), a apresentação (`solid`, `soft`, `ghost`, `edged`, `edgeless`), a elevação (`flat`, `raised`, `floating`), os padrões de canto (`cut-diagonal`, `cut-diagonal-reverse`) e os tamanhos (`sm`, `lg`). Assim, uma classe sua pode carregar uma receita inteira:
+
+```css
+@import "@codenhub/styles/tw";
+
+@utility btn-save {
+  @apply btn primary soft sm;
+}
+
+@utility btn-danger {
+  @apply btn destructive md:lg dark:solid;
+}
+```
+
+```html
+<button class="btn-save" type="submit">Salvar</button>
+```
+
+- **Um componente aplicado se comporta como a classe.** `btn-save` reage ao hover, é pressionado, recebe foco e segue uma estética do mesmo jeito que `class="btn primary soft sm"`.
+- **Variantes funcionam.** `hover:primary`, `md:lg` e `dark:solid` aplicam uma classe de eixo sob essa condição, no seu markup ou dentro do `@apply`.
+- **Escreva a sua classe como `@utility`.** Assim ela fica na camada `utilities`, e os seus outros utilitários no mesmo elemento continuam vencendo. Uma regra simples `.btn-save { @apply … }` também funciona, mas fica sem camada, então o que ela aplica vence todos os utilitários do elemento; [Personalização → Helpers de composição](../usage/customizing.md#helpers-de-composição) tem os detalhes.
+- **Modificadores também se aplicam.** Os modificadores de um componente, como `.tight` no `.stack`, `.icon` no `.btn` ou `.interactive` no `.card`, também são utilitários, então `@apply stack tight`, `@apply btn icon pill` e `md:tight` funcionam. O estado desabilitado é a exceção: continua sendo um atributo ou a classe `.disabled` no markup.
+- **O seu utilitário vence os padrões internos de um componente.** `p-0 text-center` numa célula de `.data-table`, `text-sm` num `.label` e `px-8` num `.btn.sm` são todos aplicados.
+
+A página de [Predefinições](../usage/presets.md) compara isso com as outras formas de definir um visual uma única vez.
+
+## Descarte a paleta do Tailwind
+
+O `/tw` é construído sobre o tema padrão do Tailwind, então os utilitários da paleta do Tailwind, como `bg-red-500`, continuam disponíveis. Se o seu design usa só os tokens do pacote, limpe os tons que você não usa:
+
+```css
+@import "@codenhub/styles/tw";
+
+@theme {
+  --color-red-*: initial;
+  --color-orange-*: initial;
+  --color-yellow-*: initial;
+  --color-lime-*: initial;
+  --color-green-*: initial;
+  --color-teal-*: initial;
+  --color-cyan-*: initial;
+  --color-sky-*: initial;
+  --color-blue-*: initial;
+  --color-violet-*: initial;
+  --color-purple-*: initial;
+  --color-fuchsia-*: initial;
+  --color-pink-*: initial;
+  --color-slate-*: initial;
+  --color-gray-*: initial;
+  --color-zinc-*: initial;
+  --color-stone-*: initial;
+  --color-black: initial;
+}
+```
+
+As cores do próprio pacote não mudam, e você ainda pode acrescentar cores suas no mesmo bloco.
+
+O bloco deixa de fora `neutral`, `emerald`, `amber`, `rose`, `indigo` e `white` de propósito: o tema constrói as cores dele a partir deles.
+
+- **Não limpe o namespace inteiro.** `--color-*: initial` também remove as cores semânticas do pacote, e o build para com um erro como `Cannot apply unknown utility class`.
+- **Não limpe uma escala que o tema lê.** Limpar `--color-emerald-*` compila sem erro, mas as cores de sucesso feitas com ela se perdem.
+- **Não limpe os namespaces de tipo, fonte ou espaçamento.** Os componentes aplicam os utilitários `text-*` e `font-*` do Tailwind e a função `--spacing()` dele, então `--text-*: initial`, `--font-*: initial`, `--spacing: initial` ou `--*: initial` interrompe a compilação com `Cannot apply unknown utility class` ou `The --spacing(…) function requires that the --spacing theme variable exists`. Sobrescreva valores isolados, como `--text-sm`. Limpar `--radius-*` é seguro.
+
 ## Solução de problemas
 
 **As classes não resultam em nenhum estilo**
@@ -63,11 +128,17 @@ Diferente do `/tw`, os entrypoints específicos e o `/tw/native` não importam o
 
 **Uma classe montada em tempo de execução fica sem estilo**
 
-- **O que aconteceu:** `<button class="btn primary">` é estilizado, mas um botão cuja intenção vem de uma variável, como `` `btn ${tone}` ``, não é.
-- **Por quê:** o Tailwind só gera uma classe quando encontra o nome completo nos seus arquivos de código. As classes de componente e de eixo do próprio pacote são sempre geradas, mas os seus próprios utilitários não, e um nome montado a partir de strings é invisível para a varredura.
-- **Como resolver:** escreva os nomes de classe completos no seu código, por exemplo num objeto de consulta (`{ save: "btn primary", remove: "btn destructive" }`), ou liste os nomes que o seu código pode produzir com `@source inline("...")` na sua folha de estilos.
+- **O que aconteceu:** `<button class="btn primary">` é estilizado, mas um botão cuja classe vem de uma variável, como `"btn " + variant`, ou de conteúdo de um CMS, não é.
+- **Por quê:** o Tailwind emite só as classes que encontra escritas por extenso nos arquivos que varre. Isso vale também para as classes de componente do pacote: um build com `/tw` emite `.alert` só se `alert` aparecer em algum lugar que ele varre, o que mantém a folha de estilos restrita ao que as suas páginas usam. As classes de intenção, de apresentação, de elevação, de canto e de tamanho, como `.primary`, `.soft` e `.sm`, também são utilitários, então o mesmo vale para elas. As classes de estética, como `.glass`, são CSS comum e sempre emitidas. Um nome montado em tempo de execução nunca aparece inteiro num arquivo, então a varredura não o encontra.
+- **Como resolver:** escreva cada nome de classe completo em algum lugar que o Tailwind varre, por exemplo num objeto de consulta (`{ save: "btn primary", remove: "btn destructive" }`), ou liste na sua folha de estilos os nomes que o seu código ou o seu conteúdo podem produzir:
+
+```css
+@import "@codenhub/styles/tw";
+
+@source inline("btn alert badge primary destructive soft");
+```
 
-Todo entrypoint `/tw` exige Tailwind CSS 4.3.2 ou mais recente, abaixo da 5: o código-fonte usa `@source not` e `@source inline()`, que chegaram na 4.1, e é testado com a 4.3.2.
+Todo entrypoint `/tw` exige Tailwind CSS 4.3.2 ou mais recente, abaixo da 5 (`>=4.3.2 <5`).
 
 ## A variante `dark:`
 

package/docs/pt-BR/integrating/without-a-bundler.md

@@ -1,8 +1,8 @@
 ---
 title: Sem bundler
-description: Como referenciar as folhas de estilos compiladas a partir de HTML puro, Rails, Django ou qualquer aplicação renderizada no servidor.
+description: Como referenciar as folhas de estilos compiladas a partir de HTML puro, Rails, Laravel, Django ou qualquer aplicação renderizada no servidor, e o build por linha de comando.
 order: 6
-source: 3b29f40d4ca6413f4c0ee8e3a69eb1f8394e2ba6
+source: ca6e2fe1c1b8c2404b90d9a1bd77b25b7e124f82
 ---
 
 # Sem bundler
@@ -11,7 +11,10 @@ As folhas de estilos compiladas são CSS pronto: cada uma é um único arquivo,
 
 O que precisa de uma ferramenta de build é o _nome_ do import. `@import "@codenhub/styles"` nomeia um pacote, e encontrar o arquivo por trás desse nome — `node_modules/@codenhub/styles/dist/index.css` — é trabalho de ferramentas que conhecem o Node, como Vite, webpack ou a CLI do Tailwind, que leem o mapa `exports` do pacote. Um navegador não faz isso: ele resolve a URL de um `@import` em relação à folha de estilos que o contém, e um `<link href>` em relação à página, então um nome de pacote solto vira uma requisição para um caminho que não existe. Sem bundler, referencie o arquivo pelo caminho.
 
-Os entrypoints `/tw` são código-fonte do Tailwind e precisam de um build do Tailwind. O `/tw/aesthetics` é a exceção, CSS puro sem nada para o Tailwind processar, mas sem bundler referencie os arquivos compilados de `dist/aesthetics/`, como abaixo. Esta página trata só dos entrypoints compilados, para uma página que não tem nenhum build de CSS: HTML puro, Rails, Django ou qualquer aplicação renderizada no servidor.
+Os entrypoints `/tw` são código-fonte do Tailwind e precisam de um build do Tailwind. O `/tw/aesthetics` é a exceção, CSS puro sem nada para o Tailwind processar, mas sem bundler referencie os arquivos compilados de `dist/aesthetics/`, como abaixo. Esta página é para uma página que não tem um build de CSS com Node.js: HTML puro, Rails, Laravel, Django ou qualquer aplicação renderizada no servidor. Há dois caminhos:
+
+1. **Referencie a folha de estilos compilada.** Não precisa de nada além de arquivos estáticos. Você entrega todas as classes, usadas ou não pelas suas páginas.
+2. **Gere uma folha de estilos com o comando `chs build` do pacote.** Ela varre os seus templates e escreve uma folha de estilos com só as classes que eles usam. Veja [Gere só as classes que você usa](#gere-só-as-classes-que-você-usa).
 
 ## Qual arquivo referenciar
 
@@ -27,14 +30,17 @@ Cada caminho de import compilado é um arquivo na pasta `dist/` do pacote:
 | `@codenhub/styles/aesthetics`   | `dist/aesthetics/index.css`                                    |
 | `@codenhub/styles/aesthetics/*` | `dist/aesthetics/<name>.css`, como `dist/aesthetics/pixel.css` |
 
-Referencie primeiro o arquivo base e depois uma estética. [Configuração → Todos os entrypoints](../setup.md#todos-os-entrypoints) explica o que cada um contém; referencie um arquivo base só, não vários, porque eles se sobrepõem.
+Referencie um arquivo base só, não vários, porque eles se sobrepõem, e as estéticas que você usar. A ordem entre eles não importa, porque todo arquivo declara as [camadas de cascata](../setup.md#camadas-de-cascata) antes de usar qualquer uma. [Configuração → Todos os entrypoints](../setup.md#todos-os-entrypoints) explica o que cada um contém.
 
 ## A partir de uma CDN
 
 O jsDelivr e o unpkg servem todos os arquivos de todas as versões publicadas no npm, então uma página pode referenciar um deles sem instalar nada:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.7.0/dist/index.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.7.0/dist/aesthetics/pixel.css" />
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/index.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/aesthetics/pixel.css" />
+</head>
 ```
 
 Coloque a versão exata na URL. Sem ela, a CDN serve a versão mais recente, e abaixo da 1.0 uma versão minor pode renomear ou remover uma classe; veja [Versionamento](../index.md#versionamento).
@@ -80,6 +86,8 @@ Depois referencie o arquivo no layout, pelo caminho dele dentro dessa pasta:
 
 Aponte o caminho para `node_modules/@codenhub`, e não para o próprio `dist/`. O Propshaft serve os arquivos pelo caminho dentro de cada pasta de assets, então adicionar `dist/` diretamente publicaria um `index.css` solto, que colide com qualquer `index.css` seu.
 
+Os arquivos que você referencia ficam em `dist/`, que guarda CSS pronto sem `@import` a resolver, mais um `index.d.ts` vazio para o TypeScript e o comando `chs build` com os arquivos que ele lê. O código-fonte do Tailwind fica em `tw/`, fora de `dist/`, então um pipeline estático que serve `dist/` ou aplica fingerprint aos arquivos dele não encontra nenhum `@import` que não consiga resolver.
+
 ### Django
 
 Adicione a pasta a `STATICFILES_DIRS` com um prefixo, o que mantém os nomes dos arquivos dela separados dos seus próprios arquivos estáticos:
@@ -96,10 +104,154 @@ STATICFILES_DIRS = [
 <link rel="stylesheet" href="{% static 'codenhub-styles/index.css' %}" />
 ```
 
+Aponte o prefixo para `dist`, não para a pasta do pacote. `dist/` contém CSS pronto sem `@import` a resolver, mais um `index.d.ts` vazio para o TypeScript e o comando `chs build` com os arquivos que ele lê, que o storage copia como estão, então o `collectstatic` também funciona com `ManifestStaticFilesStorage`, que coloca uma impressão digital (hash) no nome de cada arquivo e reescreve as referências dentro dele. A pasta do pacote também contém o código-fonte do Tailwind em `tw/`, com linhas `@import "tailwindcss/..."` que esse storage não consegue resolver.
+
 ### Laravel
 
 Uma aplicação Laravel roda Vite por padrão, então ela tem um bundler: importe o pacote a partir de `resources/css/app.css`, como em [Configuração → Importe a folha de estilos](../setup.md#importe-a-folha-de-estilos), e carregue esse arquivo com a diretiva `@vite`, como de costume.
 
+## Gere só as classes que você usa
+
+O pacote traz um comando, `chs`, que lê os seus templates atrás de nomes de classe e escreve uma única folha de estilos minificada com só as classes do StyleKit que eles usam. Uma página que usa um botão recebe cerca de um oitavo da folha de estilos completa; o tamanho exato depende das classes que você usa, porque cada componente traz as regras compartilhadas de que depende.
+
+O comando também serve com um bundler. Um projeto cujo bundler não roda o Tailwind, como um build simples com Vite ou webpack, pode escrever a folha de estilos entre os seus fontes, `--output src/stylekit.css`, e importar esse arquivo onde importaria `@codenhub/styles`. Um projeto que usa o Tailwind CSS v4 tem a mesma redução pelo [entrypoint de código-fonte](./tailwind.md) e não precisa do comando.
+
+Ele precisa do Node.js 24 ou mais recente na máquina que gera o CSS, seja o seu notebook, um job de CI ou uma etapa do deploy, e de nada mais: o pacote é toda a instalação, sem Tailwind e sem configuração. Instale-o como dependência de desenvolvimento a partir da raiz do projeto; o npm cria um `package.json` se você não tiver um:
+
+```sh
+npm install --save-dev @codenhub/styles
+```
+
+A folha de estilos que o comando escreve é CSS puro, então os servidores que servem o seu site não precisam nem do Node.js nem do pacote. Acrescente o build aos scripts do seu `package.json`, onde o comando instalado está no path pelo nome dele:
+
+```json
+{
+  "scripts": {
+    "build:css": "chs build --content \"app/views/**/*.erb\" --output public/stylekit.css"
+  }
+}
+```
+
+Depois rode a partir da raiz do projeto:
+
+```sh
+npm run build:css
+```
+
+Para rodá-lo uma vez sem script, chame-o pelo nome do pacote:
+
+```sh
+npx @codenhub/styles build --content "app/views/**/*.erb" --output public/stylekit.css
+```
+
+Não digite `npx chs`. `chs` é o nome do comando dentro deste pacote, mas o npm também tem um pacote sem relação chamado `chs`, e `npx chs` roda esse outro em qualquer pasta onde este pacote não esteja instalado.
+
+Quando dá certo, o comando imprime uma linha: o caminho absoluto que escreveu e o tamanho do arquivo em bytes:
+
+```text
+/home/you/shop/public/stylekit.css 24497 bytes
+```
+
+Referencie esse arquivo no seu layout como qualquer folha de estilos estática.
+
+### Views do Rails
+
+```json
+"build:css": "chs build --content \"app/views/**/*.erb\" --content \"app/helpers/**/*.rb\" --output public/stylekit.css"
+```
+
+```erb
+<%# app/views/layouts/application.html.erb %>
+<link rel="stylesheet" href="/stylekit.css" />
+```
+
+### Views Blade do Laravel
+
+```json
+"build:css": "chs build --content \"resources/views/**/*.blade.php\" --output public/css/stylekit.css"
+```
+
+```blade
+{{-- resources/views/layouts/app.blade.php --}}
+<link rel="stylesheet" href="{{ asset('css/stylekit.css') }}" />
+```
+
+### Templates do Django
+
+Um projeto Django guarda os templates numa pasta `templates/` do projeto, na pasta `templates/` de cada app, ou nas duas. Passe um `--content` para cada lugar onde ficam os seus, e deixe de fora os que você não usa, porque um glob que não casa com nada faz o build falhar:
+
+```json
+"build:css": "chs build --content \"templates/**/*.html\" --content \"shop/templates/**/*.html\" --output static/stylekit.css"
+```
+
+```django
+{% load static %}
+<link rel="stylesheet" href="{% static 'stylekit.css' %}" />
+```
+
+Escreva a saída numa pasta listada em `STATICFILES_DIRS`, aqui `static/`, para que o `collectstatic` a recolha. A configuração acima lista só a pasta do pacote, então adicione `BASE_DIR / "static"` a essa lista se o seu projeto ainda não a tiver.
+
+### Opções
+
+- `--content <glob>`, ou `-c <glob>`, indica os arquivos onde procurar nomes de classe. É obrigatório e pode ser repetido: passe uma vez por glob, e o build lê todo arquivo que casar com algum deles. Um glob relativo é resolvido em relação à pasta de onde você roda o comando, então rode a partir da raiz do projeto; um glob absoluto é usado como está. `**` casa com qualquer número de pastas, e `{rb,erb}` com qualquer uma das duas extensões. Qualquer arquivo de texto serve, seja qual for a extensão. Cada glob precisa casar com pelo menos um arquivo, senão o build falha e o nomeia, então um erro de digitação não consegue publicar uma folha de estilos vazia. Arquivos que o seu `.gitignore` exclui são lidos mesmo assim quando um glob casa com eles, e nada fora dos seus globs é lido.
+- Coloque cada glob entre aspas, com `\"` dentro de um script do `package.json`. Sem aspas, o seu shell pode expandir o glob numa lista de arquivos antes de o comando vê-lo, e só o primeiro arquivo conta como valor do `--content`. Quando isso deixa nomes de arquivo sobrando, o build os rejeita em vez de ler em silêncio menos do que você queria; quando o glob casou com um único arquivo, o build lê só esse arquivo e nada que os seus templates ganharem depois.
+- `--output <file>`, ou `-o <file>`, é a folha de estilos a escrever. É obrigatório. Um caminho relativo é resolvido em relação à pasta de onde você roda o comando, pastas-pai que faltam são criadas, e um arquivo existente é substituído.
+- `--aesthetic <name>` acrescenta uma das [estéticas](../usage/aesthetics.md): `neobrutalism`, `glass`, `pixel`, `chunky-tile`, `cyber` ou `sketch`. Repita para mais de uma; nomear uma duas vezes a inclui uma vez só. As estéticas precisam ser pedidas porque o build não tem como saber pelos seus templates qual você quer: cada uma entra quando você a pede, menos as regras dela para classes que os seus templates não usam, e nenhuma entra quando você não pede.
+- `--no-minify` escreve CSS legível e indentado no lugar. Útil para ler o que o build gerou; em produção, sirva o arquivo minificado.
+- `--help` imprime o uso, com as estéticas que esta versão traz. `--version` imprime a versão do pacote. Nenhum dos dois gera nada, e os dois terminam com status 0.
+
+A saída sempre traz o tema, os design tokens dele como propriedades personalizadas de CSS, o reset, as regras base de que todo componente depende e as classes que uma página recebe em tempo de execução, e não de um template, como `.theme-dark`. Por cima vem cada classe do StyleKit que os seus templates usam. A saída é gerada a partir da folha de estilos completa, não da `/native`, então não inclui os mapeamentos sem classes. Um build cujos templates nomeiam todas as classes escreve a folha de estilos completa, byte por byte.
+
+### Como as classes são encontradas
+
+O build não executa os seus templates. Ele lê como texto puro cada arquivo que casa com os seus globs de `--content`, recolhe cada palavra que poderia ser um nome de classe e escreve as regras das palavras que são classes do StyleKit. É assim que o Tailwind CSS também lê o conteúdo.
+
+Uma classe precisa aparecer num arquivo como uma palavra inteira. `class="btn primary"`, `class: "btn primary"` e `classes = ["btn", "primary"]` funcionam, assim como uma classe escrita antes ou depois de dois-pontos, como no `class:primary={isPrimary}` do Svelte ou no `btn: true` de um hash Ruby. Uma palavra que só parece uma classe também conta: um comentário que diz "card" adiciona todas as regras do card à folha de estilos, o que aumenta o arquivo e não muda nada na página.
+
+Um nome de classe que o seu código monta na renderização nunca aparece inteiro em nenhum arquivo, então o build não consegue encontrá-lo. Em `class="btn <%= @order.priority %>"`, o `btn` é encontrado, mas a intenção é o que `priority` tiver na hora de renderizar; se for `destructive`, o botão aparece sem o vermelho dele. Há duas saídas:
+
+- **Escreva os nomes de classe inteiros.** Associe cada valor a um nome de classe completo num arquivo que o build leia, como `{ "urgent" => "destructive", "normal" => "neutral" }.fetch(@order.priority)` num helper.
+- **Liste-os num arquivo de safelist.** Um arquivo de texto puro com um nome de classe por linha, adicionado com o seu próprio `--content`, como `--content config/stylekit-classes.txt`. Guarde-o perto do código que monta os nomes de classe, para que quem mudar um veja o outro.
+
+### Variantes
+
+Uma classe de intenção, apresentação ou modificador pode receber um de dez prefixos, escritos como no Tailwind: `sm:`, `md:`, `lg:`, `xl:` e `2xl:` a aplicam a partir daquele breakpoint, `hover:`, `focus:`, `focus-visible:` e `active:` enquanto o elemento está naquele estado, e `dark:` onde quer que o tema escuro se aplique, como [Temas → A variante `dark:`](../usage/theming.md#a-variante-dark) descreve. `md:lg` deixa um botão grande a partir do breakpoint `md`, e `hover:primary` dá a ele a intenção primary no hover:
+
+```html
+<button class="btn sm md:lg ghost hover:soft">Save</button>
+```
+
+Isso cobre intenções como `primary` e `destructive`, as classes de preenchimento e borda como `soft` e `edged`, e modificadores como `sm`, `lg`, `raised`, `pill`, `tight` e `ruled`. `disabled` não recebe nenhum: é um estado em que o elemento está, então escreva-o como atributo ou como classe. Classes de componente como `btn` e `card`, e os helpers de texto e de layout, não recebem prefixo.
+
+Cada prefixo é uma cópia fixa dessas classes, embutida no pacote, então a lista traz os comuns, e não todos os do Tailwind. O comando não empilha prefixos, como em `md:hover:primary`, e não oferece outros, como `print:` ou `group-hover:`. Uma classe assim não recebe estilo, e o elemento aparece sem ela.
+
+### O que ele não faz
+
+- **Não tem utilitários do Tailwind.** `flex`, `mt-4`, `text-red-500` e o resto do Tailwind não são classes do StyleKit, então o build os deixa de fora. Para layout, os [helpers de layout](../usage/content-and-layout.md) do próprio StyleKit entram no build como qualquer outra classe. Um projeto que quer os utilitários do Tailwind, as outras variantes dele ou prefixos empilhados roda o próprio Tailwind e importa o [entrypoint de código-fonte](./tailwind.md), que dá os três.
+- **Não tem modo watch.** Ele gera uma vez e termina. Rode de novo depois de mudar um template, a partir de um script ou de um observador de arquivos que o seu framework ou editor já tenha. Uma classe que a folha de estilos ainda não tem deixa o elemento sem estilo até o próximo build.
+- **Não tem arquivo de configuração nem CSS próprio.** Você não consegue acrescentar os seus próprios valores de `@theme`, definições de `@utility` nem plugins. Para mudar o visual, sobrescreva as propriedades personalizadas numa folha de estilos sua carregada depois desta, como [Personalização](../usage/customizing.md) descreve.
+- **Não tem outros comandos.** `build` é o único; `--help` e `--version` são as únicas flags que funcionam sem ele.
+
+### Num deploy
+
+Gere a folha de estilos antes da etapa que recolhe ou aplica fingerprint aos seus assets, como `rails assets:precompile`, `php artisan optimize` ou `python manage.py collectstatic`. Você pode fazer commit da saída, e aí os servidores não precisam de Node.js nenhum, ao custo de um arquivo gerado que alguém precisa lembrar de regenerar; ou gerá-la no deploy, e aí a máquina de build precisa do Node.js 24 ou mais recente.
+
+Fixe a versão. Abaixo da 1.0 uma versão minor pode renomear ou remover uma classe, então o mesmo comando pode escrever outra folha de estilos com uma versão mais nova. A saída não depende de nada além da versão do pacote e dos seus templates, então faça commit do `package.json` e do lockfile que o npm escreve, e instale com `npm ci` na máquina de build, para que cada build use a versão que você testou.
+
+### Quando o build falha
+
+Toda falha imprime uma linha começando com `chs:` na saída de erro padrão e termina com status 1, sem escrever o arquivo de saída, então um script de deploy para em vez de publicar uma folha de estilos desatualizada ou vazia. A linha diz o que deu errado e o que fazer:
+
+- **`missing --content` ou `missing --output`.** Acrescente a que ela nomeia. Um `--output` vazio ou só com espaços conta como ausente.
+- **`--content "<glob>" matches no file in <folder>`.** Em geral é um erro de digitação no caminho, um comando rodado de outra pasta que não a raiz do projeto, ou um glob de um lugar que o seu projeto não usa. Gerar a partir de nada escreveria uma folha de estilos sem classes de componente, e o site perderia o estilo sem aviso.
+- **`unexpected argument "<file>"`.** Quase sempre é um glob de `--content` sem aspas, que o seu shell expandiu numa lista de arquivos. Coloque o glob entre aspas.
+- **`unknown option "<flag>"`.** Um erro de digitação, ou uma opção de outra ferramenta, como `--watch` ou `--config`. `--help` lista as opções.
+- **`option "<flag>" is missing its value or does not take one`.** Uma flag que leva valor foi a última coisa da linha, ou o `--no-minify` recebeu um valor, como em `--no-minify=true`.
+- **`unknown aesthetic "<name>"; choose from ...`.** Escolha um dos nomes listados. Eles são em minúsculas e com hífen, como `chunky-tile`.
+- **`missing command` ou `unknown command "<name>"`.** A primeira palavra depois de `chs` precisa ser `build`.
+- **`this command needs Node.js 24 or newer`.** Atualize o Node.js na máquina que gera o CSS.
+- **`cannot write the stylesheet: <reason>`.** `<reason>` é a própria mensagem do Node.js. `EISDIR` quer dizer que o `--output` nomeia uma pasta existente, então nomeie um arquivo dentro dela; `EACCES` ou `EPERM` quer dizer que você não pode escrever ali.
+
 ## Conferindo se funcionou
 
 Renderize um elemento estilizado, como em [Integração → Conferindo se funcionou](./index.md#conferindo-se-funcionou):

package/docs/pt-BR/setup.md

@@ -2,7 +2,7 @@
 title: Configuração
 description: Instale o pacote, escolha entre CSS compilado ou código-fonte do Tailwind e renderize a estrutura da página de configurações.
 order: 1
-source: 20ec2aeb0950fe5b8a045e9b0ac307ca97d0462e
+source: 01adaabea85fb4d04139c86d9ad693e23c321d04
 ---
 
 # Configuração
@@ -44,9 +44,11 @@ A folha de estilos completa inclui o reset, os tokens, os utilitários de layout
 
 Escolha um:
 
-- **CSS compilado** (`@codenhub/styles`, mostrado acima). Use este, a menos que tenha um motivo para não usar. Qualquer bundler que resolva imports de CSS de pacotes funciona, como Vite, webpack ou a CLI do Tailwind.
+- **CSS compilado** (`@codenhub/styles`, mostrado acima). Use este, a menos que tenha um motivo para não usar. Qualquer bundler que resolva imports de CSS de pacotes funciona, como Vite, webpack ou a CLI do Tailwind. Ele traz todas as classes, sejam usadas pelas suas páginas ou não.
 - **Código-fonte do Tailwind CSS v4** (`@codenhub/styles/tw`). Use quando o seu projeto já roda Tailwind v4. O seu build compila o pacote junto com os seus próprios utilitários, então você fica com uma única folha de estilos e a variante `dark:` do Tailwind acompanha o tema do pacote. Exige Tailwind 4.3.2 ou mais recente, abaixo da 5.
-- **Sem bundler.** Referencie o arquivo compilado a partir do `node_modules` ou de uma CDN com uma tag `<link>`.
+- **Sem bundler.** Referencie o arquivo compilado a partir do `node_modules` ou de uma CDN com uma tag `<link>`; veja [Sem bundler](./integrating/without-a-bundler.md).
+
+Para entregar só as classes que as suas páginas usam num projeto que não usa Tailwind, com bundler ou sem, o comando `chs build` do pacote lê os seus arquivos e escreve uma folha de estilos com só essas classes, que você importa ou referencia no lugar da compilada; veja [Gere só as classes que você usa](./integrating/without-a-bundler.md#gere-só-as-classes-que-você-usa).
 
 O seu framework pode precisar de uma configuração própria, como onde fica a folha de estilos global no Next.js ou no Astro. Cada um destes guias cobre uma configuração e depois traz você de volta para cá:
 
@@ -71,16 +73,18 @@ A ordem dos dois imports não importa, porque todo entrypoint declara as [camada
 ## Requisitos
 
 - **Navegadores:** Chrome 123, Safari 17.5 ou Firefox 128 e mais recentes. As cores usam `light-dark()` e `color-scheme` (Firefox 120). O `.input-group` lê o estado inválido e desabilitado de um controle aninhado com `:has()` (Firefox 121). As classes de elevação registram uma propriedade sem herança com `@property` (Firefox 128); sem isso, uma classe de elevação também atingiria os elementos sem classe dentro dela.
-- **Ferramental:** um `@import` com nome de pacote precisa de uma ferramenta que resolva imports de CSS de pacotes. Sem ela, referencie o arquivo compilado pelo caminho ou a partir de uma CDN; veja [Sem bundler](./integrating/without-a-bundler.md).
-- **Tailwind:** 4.3.2 ou mais recente, abaixo da 5, só para os entrypoints de código-fonte `/tw`. É uma peer dependency opcional, então os entrypoints compilados não o instalam.
+- **Ferramental:** um `@import` com nome de pacote precisa de uma ferramenta que resolva imports de CSS de pacotes pelo mapa `exports` deles. Sem ela, referencie o arquivo compilado pelo caminho ou a partir de uma CDN; veja [Sem bundler](./integrating/without-a-bundler.md). Duas ferramentas comuns precisam de um ajuste, descrito em [Integração → Bundlers que precisam de um empurrão](./integrating/index.md#bundlers-que-precisam-de-um-empurrão): o Parcel e o PostCSS com `postcss-import`.
+- **Tailwind:** 4.3.2 ou mais recente, abaixo da 5, só para os entrypoints de código-fonte `/tw`. É uma peer dependency opcional, então os entrypoints compilados e o comando `chs build` não o instalam.
+- **Node.js:** 24 ou mais recente na máquina que roda o comando `chs build`. As folhas de estilos não precisam dele, mas o pacote o declara como sua engine, então o Yarn 1, e o npm com `engine-strict`, recusam a instalação num Node.js mais antigo.
 - **Sua aplicação:** o pacote não tem JavaScript. HTML semântico, ARIA, comportamento de teclado, gerenciamento de foco, validação e anúncios ficam com você; veja [Acessibilidade](./accessibility.md).
 
 ## Quando nada é estilizado
 
 - **O import está faltando ou não é carregado globalmente.** As classes não fazem nada até a folha de estilos estar na página. Importe-a uma vez numa folha de estilos que toda página carrega, não num componente que pode não ser renderizado.
-- **O nome do pacote não é resolvido.** Um `<link>` simples ou uma ferramenta sem resolução de pacotes CSS não consegue ler `@import "@codenhub/styles"`. Referencie `node_modules/@codenhub/styles/dist/index.css` ou siga [Sem bundler](./integrating/without-a-bundler.md).
+- **O nome do pacote não é resolvido.** Um `<link>` simples ou uma ferramenta sem resolução de pacotes CSS não consegue ler `@import "@codenhub/styles"`. Referencie `node_modules/@codenhub/styles/dist/index.css` ou siga [Sem bundler](./integrating/without-a-bundler.md). O Parcel e o `postcss-import` resolvem o nome com uma pequena mudança; veja [Integração → Bundlers que precisam de um empurrão](./integrating/index.md#bundlers-que-precisam-de-um-empurrão).
 - **Um caminho `/tw` é carregado sem Tailwind.** Os arquivos `/tw` são código-fonte do Tailwind: eles contêm `@theme`, `@utility` e `@apply`, que os navegadores não entendem. O seu build do Tailwind precisa compilá-los; veja [Tailwind CSS v4](./integrating/tailwind.md).
-- **Falta uma classe montada em tempo de execução (só com código-fonte do Tailwind).** O Tailwind só gera uma classe quando encontra o nome nos seus arquivos de código. Um nome montado a partir de strings, como `` `btn ${tone}` ``, é invisível para essa varredura. Escreva os nomes de classe completos, ou liste-os como descrito em [Tailwind CSS v4](./integrating/tailwind.md).
+- **Um entrypoint `/tw` específico é importado sem o Tailwind antes.** `@codenhub/styles/tw/button` e os outros arquivos de um componente específico não importam o Tailwind. Importados sozinhos, eles compilam sem erro, mas não produzem nenhuma regra de componente. Coloque `@import "tailwindcss";` antes; veja [Tailwind CSS v4 → Usando um entrypoint específico](./integrating/tailwind.md#usando-um-entrypoint-específico).
+- **Falta uma classe montada em tempo de execução (só com código-fonte do Tailwind).** O Tailwind só gera uma classe utilitária, incluindo os componentes do pacote como `.btn`, quando encontra o nome nos seus arquivos de código. Um nome montado a partir de strings, como `` `btn ${tone}` ``, é invisível para essa varredura. Escreva os nomes de classe completos, ou liste-os como descrito em [Tailwind CSS v4](./integrating/tailwind.md).
 
 ### CSS crítico inline
 
@@ -90,9 +94,9 @@ Isso não vale para os arquivos `/tw`. Eles são código-fonte do Tailwind, não
 
 ## Todos os entrypoints
 
-Os entrypoints compilados são CSS pronto. Os entrypoints `/tw` publicam o código-fonte não compilado de `dist/tw`, que um build do Tailwind v4 precisa processar. Um entrypoint `/tw` de um componente específico inclui os tokens do tema, então as classes dele funcionam sozinhas.
+Os entrypoints compilados são CSS pronto. Os entrypoints `/tw` publicam o código-fonte não compilado de `tw/`, ao lado de `dist/`, que um build do Tailwind v4 precisa processar. Um entrypoint `/tw` de um componente específico inclui os tokens do tema, então as classes dele não precisam de mais nada do pacote, mas ele precisa de `@import "tailwindcss";` antes; veja [Tailwind CSS v4 → Usando um entrypoint específico](./integrating/tailwind.md#usando-um-entrypoint-específico).
 
-Cada caminho de import resolve para o mesmo arquivo nas condições de export `style`, `import` e `default`. Um import de CSS é um efeito colateral, então garanta que o seu bundler não o descarte como não usado.
+Cada caminho de import resolve para o mesmo arquivo nas condições de export `style`, `import` e `default`. Uma condição `types` vem primeiro e aponta para uma declaração vazia, para que o TypeScript aceite um import de efeito colateral como `import "@codenhub/styles";` com `noUncheckedSideEffectImports`, que o TypeScript 6 ativa por padrão. Um import de CSS é um efeito colateral, então garanta que o seu bundler não o descarte como não usado.
 
 | Caminho de import                | O que contém e o que altera                                                                                                                                                                                                                                                                                                        |
 | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -100,7 +104,7 @@ Cada caminho de import resolve para o mesmo arquivo nas condições de export `s
 | `@codenhub/styles/theme`         | Tokens compilados e as classes de intenção, apresentação, elevação e padrão de cantos. Define as propriedades do tema na raiz e os seletores de claro e escuro. Sem reset e sem componentes.                                                                                                                                       |
 | `@codenhub/styles/palette`       | Custom properties `--palette-*` geradas: a cor de preenchimento, de texto e de borda de cada combinação de intenção e apresentação como valor plano, mais as cores planas `border`, `surface` e `text`. Para código que não pode usar o pacote em si; veja [Personalização → Paleta gerada](./usage/customizing.md#paleta-gerada). |
 | `@codenhub/styles/components`    | Tokens compilados, utilitários de tipografia e todas as classes de componente. Cada componente traz a sua própria regra de movimento reduzido, e a correção do `<dialog>` fechado vem com o `.card`. Sem reset, sem utilitários de layout ou de conteúdo, sem mapeamentos sem classes.                                             |
-| `@codenhub/styles/native`        | A folha de estilos completa compilada mais os [mapeamentos sem classes](#html-sem-classes) para elementos HTML puros. Aplica o reset e seletores amplos de elementos.                                                                                                                                                              |
+| `@codenhub/styles/native`        | Tokens, tipografia, utilitários de layout e de conteúdo, componentes e o reset do pacote, compilados, mais os [mapeamentos sem classes](#html-sem-classes) para elementos HTML puros. Sem o Preflight do Tailwind. Aplica o reset e seletores amplos de elementos.                                                                 |
 | `@codenhub/styles/aesthetics`    | As seis estéticas compiladas, `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber` e `.sketch`, cada uma com a sua classe `-solo`. Sem tokens nem componentes próprios; importe em qualquer ordem.                                                                                                                        |
 | `@codenhub/styles/aesthetics/*`  | Uma estética compilada e a sua classe solo: `/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber` ou `/sketch`.                                                                                                                                                                                                            |
 | `@codenhub/styles/tw`            | Versão em código-fonte da folha de estilos completa. Importa o próprio Tailwind e depois o tema, a tipografia, os utilitários, os componentes e o reset. Mesmas regras globais.                                                                                                                                                    |
@@ -112,9 +116,9 @@ Cada caminho de import resolve para o mesmo arquivo nas condições de export `s
 | `@codenhub/styles/tw/feedback`   | Tema em código-fonte mais `.alert`, `.badge`, `.skeleton` e `.progress`, com as suas animações.                                                                                                                                                                                                                                    |
 | `@codenhub/styles/tw/tooltip`    | Tema em código-fonte mais as classes de tooltip.                                                                                                                                                                                                                                                                                   |
 | `@codenhub/styles/tw/reset`      | Tema, utilitários de tipografia e o reset global em código-fonte. Altera a raiz, o body e os elementos, e define regras de seleção, movimento, foco, barra de rolagem e cores forçadas.                                                                                                                                            |
-| `@codenhub/styles/tw/native`     | Versão em código-fonte da `/native`: tudo, mais o reset e os mapeamentos sem classes. O efeito global mais amplo.                                                                                                                                                                                                                  |
+| `@codenhub/styles/tw/native`     | Versão em código-fonte da `/native`: tudo menos o Preflight do Tailwind, mais o reset do pacote e os mapeamentos sem classes. O efeito global mais amplo.                                                                                                                                                                          |
 | `@codenhub/styles/tw/typography` | Tema em código-fonte mais os utilitários de tipografia. Define os seletores de tema; sem reset, sem mapeamentos sem classes.                                                                                                                                                                                                       |
-| `@codenhub/styles/tw/utilities`  | Tema e tipografia em código-fonte mais os utilitários de layout e de conteúdo. Lista os nomes de classe do pacote para que o Tailwind sempre os gere.                                                                                                                                                                              |
+| `@codenhub/styles/tw/utilities`  | Tema e tipografia em código-fonte mais os utilitários de layout e de conteúdo.                                                                                                                                                                                                                                                     |
 | `@codenhub/styles/tw/aesthetics` | As seis estéticas em código-fonte. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber` e `/sketch` publicam uma cada. CSS puro, sem efeitos colaterais de tema ou de reset.                                                                                                                                |
 | `@codenhub/styles/package.json`  | O manifesto do pacote, em JSON. Para ferramentas que leem a versão instalada ou o mapa de exports; não é uma folha de estilos.                                                                                                                                                                                                     |
 
@@ -122,19 +126,21 @@ Não importe dois entrypoints que se sobrepõem, como `@codenhub/styles` e `@cod
 
 ## HTML sem classes
 
-`@codenhub/styles/native` estiliza elementos HTML puros sem nenhuma classe, para conteúdo em que você não consegue colocar classes, como a saída de um Markdown ou o corpo de um CMS. É a folha de estilos completa mais estes mapeamentos:
-
-| Elemento                                                                                                                                       | Estilizado como                                                                    |
-| ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `h1`, `h2`, `h3`, `h4`, `h5` e `h6`                                                                                                            | `.text-title-lg`, `.text-title`, `.text-title-sm`, `.text-label-lg`, `.text-label` |
-| `p`, `li`                                                                                                                                      | `.text-body`                                                                       |
-| `table`                                                                                                                                        | `.data-table`                                                                      |
-| `kbd`, `blockquote`, `q`, `code`, `pre`                                                                                                        | `.kbd`, `.quote`, `.quote-inline`, `.code`, `.pre`                                 |
-| `hr`                                                                                                                                           | `.divider`                                                                         |
-| `input` sem type, ou com type `text`, `number`, `email`, `password`, `url`, `tel`, `search`, `month`, `week`, `time`, `date`, `datetime-local` | `.ipt`                                                                             |
-| `textarea`, `select`                                                                                                                           | `.textarea`, `.select`                                                             |
-| `input type="checkbox"`, `input type="radio"`                                                                                                  | `.checkbox`, `.radio`                                                              |
-| `button`, `input type="button"`, `type="submit"`, `type="reset"`                                                                               | `.btn`                                                                             |
+`@codenhub/styles/native` estiliza elementos HTML puros sem nenhuma classe, para conteúdo em que você não consegue colocar classes, como a saída de um Markdown ou o corpo de um CMS. Ela traz tudo o que a folha de estilos completa traz, menos o Preflight do Tailwind, o reset dos padrões do navegador que o `@codenhub/styles` traz junto com o Tailwind. O reset do próprio pacote está nela: o box sizing, o fundo, a cor do texto e a fonte da raiz, o reset de margens de títulos, parágrafos e listas, as cores de seleção, os anéis de foco e a regra de movimento reduzido. Depois ela acrescenta estes mapeamentos:
+
+| Elemento                                                                                                                                       | Estilizado como                                                                     |
+| ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `h1`, `h2`, `h3`, `h4`, `h5` e `h6`                                                                                                            | `.text-title-lg`, `.text-title`, `.text-title-sm`, `.text-label-lg`, `.text-label`  |
+| `body`                                                                                                                                         | `.text-body`, herdado por parágrafos, itens de lista e outros textos                |
+| `table`                                                                                                                                        | `.data-table`                                                                       |
+| `kbd`, `blockquote`, `q`, `code`, `pre`                                                                                                        | `.kbd`, `.quote`, `.quote-inline`, `.code`, `.pre`                                  |
+| `hr`                                                                                                                                           | `.divider`                                                                          |
+| `input` sem type, ou com type `text`, `number`, `email`, `password`, `url`, `tel`, `search`, `month`, `week`, `time`, `date`, `datetime-local` | `.ipt`                                                                              |
+| `textarea`, `select`                                                                                                                           | `.textarea`, `.select`                                                              |
+| `input type="checkbox"`, `input type="radio"`                                                                                                  | `.checkbox`, `.radio`                                                               |
+| `button`, `input type="button"`, `type="submit"`, `type="reset"`                                                                               | `.btn`                                                                              |
+| `dialog`                                                                                                                                       | `.card.floating`: escondido até ser aberto, e então um card flutuante centralizado  |
+| `progress`                                                                                                                                     | `.progress`, preenchido até o seu `value`; sem `value`, é a varredura indeterminada |
 
 ```html
 <article>
@@ -152,7 +158,9 @@ O que ele não faz:
 - **Alguns tipos de input ficam de fora:** `file`, `range`, `color` e `hidden` mantêm a aparência do próprio navegador.
 - **Nada de switch.** Um checkbox com `role="switch"` continua pintado como checkbox; o mapeamento não lê roles. Uma página que precisa de switches fica mais bem servida pela folha de estilos baseada em classes.
 - **Links acompanham o texto ao redor.** Um link dentro de um título mantém o tamanho do título; um link nunca é estilizado como botão.
-- **`pre code` não recebe estilo duplicado.** O código dentro de um `pre` perde o seu próprio fundo e padding.
+- **O texto do corpo é definido uma vez.** `p` e `li` herdam a tipografia do elemento em que estão, então um contêiner que define o seu próprio tamanho, peso ou espaçamento entre letras o aplica ao Markdown dentro dele. Os controles mantêm o próprio espaçamento entre letras: um botão, um badge e um campo de texto ficam em `normal`, seja o que for que a página ou o contêiner definam.
+- **O comportamento nativo continua nativo.** Um `<dialog>` abre com `show()` ou `showModal()` como sempre; o mapeamento só o pinta. A varredura de um `<progress>` para com a preferência de movimento reduzido, e em cores forçadas a barra usa as cores do sistema.
+- **`pre code` não recebe estilo duplicado.** O código dentro de um `pre` perde o chip que desenharia sozinho: fundo, padding, borda, sombra, brilho e recorte.
 
 Os mapeamentos são globais: todo elemento correspondente na página é estilizado, inclusive elementos dentro de widgets de terceiros. Eles ficam na [camada de cascata](#camadas-de-cascata) `base`, então qualquer classe vence. Adicione uma classe de intenção ou de apresentação a um elemento mapeado, como `<button class="destructive">`, e ela funciona como funcionaria num `.btn`.
 
@@ -160,18 +168,19 @@ Os mapeamentos são globais: todo elemento correspondente na página é estiliza
 
 Todo entrypoint coloca o seu CSS nas quatro camadas de cascata (cascade layers) do Tailwind e declara a ordem delas antes de usar qualquer uma, então o resultado não depende de qual arquivo carrega primeiro:
 
-| Camada       | Contém                                                                                                                |
-| ------------ | --------------------------------------------------------------------------------------------------------------------- |
-| `theme`      | O tema do Tailwind, os tokens fundamentais, os seletores de tema e a `/palette`.                                      |
-| `base`       | O reset e os estilos de elemento sem classes.                                                                         |
-| `components` | As classes de intenção, apresentação, elevação e estética.                                                            |
-| `utilities`  | Todos os componentes (`.btn`, `.card`, `.ipt` e assim por diante), ao lado dos seus próprios utilitários do Tailwind. |
-| _sem camada_ | As sobrescritas de cores forçadas e de movimento reduzido, a correção do `<dialog>` fechado e as classes `-solo`.     |
+| Camada       | Contém                                                                                                                                                                                                                                                                                        |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`      | O tema do Tailwind, os tokens fundamentais, os seletores de tema e a `/palette`.                                                                                                                                                                                                              |
+| `base`       | O reset e os estilos de elemento sem classes.                                                                                                                                                                                                                                                 |
+| `components` | As classes de estética e os valores de intenção neutros de que todo componente parte.                                                                                                                                                                                                         |
+| `utilities`  | Todos os componentes (`.btn`, `.card`, `.ipt` e assim por diante), ao lado dos seus próprios utilitários do Tailwind. As classes de intenção, apresentação, borda, elevação, canto e tamanho ficam em `utilities.families`, uma subcamada que perde para qualquer outra regra de `utilities`. |
+| _sem camada_ | As sobrescritas de cores forçadas e de movimento reduzido, a correção do `<dialog>` fechado e as classes `-solo`.                                                                                                                                                                             |
 
 O que isso significa quando você escreve o seu próprio CSS:
 
-- **O seu utilitário ou CSS sem camada vence uma classe de intenção, apresentação, elevação ou estética** no mesmo elemento. `[--ui-fill:50%]` num botão `.solid`, `font-serif` numa região `.pixel` ou `.my-card { --ui-radius: 0 }` na sua própria folha de estilos, todos se aplicam.
+- **O seu utilitário ou CSS sem camada vence uma classe de intenção, apresentação, elevação ou estética** no mesmo elemento. `[--ui-fill:50%]` num botão `.solid`, `font-serif` numa região `.pixel` ou `.my-card { --ui-radius-surface: 0 }` na sua própria folha de estilos, todos se aplicam.
 - **Um componente e o seu utilitário dividem a camada `utilities`.** A especificidade decide entre eles e depois a ordem no código, como entre dois utilitários quaisquer. O seu CSS sem camada sempre vence um componente.
+- **O seu utilitário vence os padrões internos de um componente.** `p-0 text-center` numa célula de tabela, `text-sm` numa `.label` ou `px-8` num `.btn.sm` se aplicam, porque o componente escreve esses padrões de modo que uma classe no elemento vença.
 - **O estado vence a sua intenção.** Um campo com `aria-invalid="true"` continua destrutivo mesmo com um utilitário de intenção aplicado.
 - **As classes `-solo` ficam fora das camadas de propósito**, para vencer os estilos em camadas ou de especificidade zero de um componente de terceiros. Uma regra sem camada mais específica, ou uma igualmente específica que carrega depois, ainda vence essas classes; veja [Classes solo](./usage/solo.md).