@codenhub/styles 0.7.0 → 0.8.0

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: 6289ea781c99dcda5c027a72fede9e2f1cab8414
 ---
 
 # 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.** Funciona hoje, só com 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 `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.8.0/dist/index.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.8.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 só CSS pronto, mais um `index.d.ts` vazio para o TypeScript. 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,125 @@ 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 só CSS pronto, mais um `index.d.ts` vazio para o TypeScript que o storage copia como está, 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, `codenhub-styles`, que o compila para você. Ele lê os seus templates atrás de nomes de classe e escreve uma única folha de estilos minificada com só as classes do StyleKit e os utilitários do Tailwind que eles usam. Uma página que usa um botão recebe uma pequena fração 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. Ele compila com o Tailwind CSS, que o pacote não instala por você, então um projeto que só linka a folha de estilos compilada nunca o baixa. Instale os três pacotes como dependências de desenvolvimento a partir da raiz do projeto; o npm cria um `package.json` se você não tiver um, e nenhuma configuração do Tailwind é necessária:
+
+```sh
+npm install --save-dev @codenhub/styles @tailwindcss/cli tailwindcss
+```
+
+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 de nenhum desses pacotes. Rode a partir da raiz do projeto:
+
+```sh
+npx codenhub-styles build --content "app/views/**/*.erb" --output public/stylekit.css
+```
+
+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 25782 bytes
+```
+
+Referencie esse arquivo no seu layout como qualquer folha de estilos estática.
+
+### Views do Rails
+
+```sh
+npx codenhub-styles 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
+
+```sh
+npx codenhub-styles 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:
+
+```sh
+npx codenhub-styles 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. 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, então cada uma é escrita inteira quando você a pede, 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 e as regras base de que todo componente depende. Por cima vêm cada classe do StyleKit que os seus templates usam, com as variantes com que você a combina, como `primary` ou `soft`, e cada utilitário do Tailwind que eles usam, como `flex` ou `mt-4`. A saída é gerada a partir da folha de estilos completa, não da `/native`, então não inclui os mapeamentos sem classes.
+
+### 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 ou utilitários do Tailwind. É 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. 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.
+
+### O que ele não faz
+
+- **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. Quando você precisar da configuração do próprio Tailwind, instale o Tailwind CSS e importe o entrypoint de código-fonte a partir da sua própria entrada do Tailwind, como [Tailwind CSS v4](./tailwind.md) mostra.
+- **Não tem outros comandos.** `build` é o único; `--help` e `--version` são as únicas flags que funcionam sem ele.
+- **Não traz uma versão do Tailwind própria.** Cada build usa os `@tailwindcss/cli` e `tailwindcss` instalados no seu projeto, dentro da faixa `>=4.3.2 <5` que o StyleKit suporta, então o seu lockfile os fixa.
+
+### 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. 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 as versões que você testou.
+
+### Quando o build falha
+
+Toda falha imprime uma linha começando com `codenhub-styles:` 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 `codenhub-styles` precisa ser `build`.
+- **`this command needs @tailwindcss/cli and tailwindcss, which are not installed`.** A linha nomeia o que estiver faltando dos dois e termina com o comando que o instala. Rode esse comando a partir da raiz do projeto.
+- **`this command needs Node.js 24 or newer`.** Atualize o Node.js na máquina que gera o CSS.
+- **`Tailwind failed to build the stylesheet: <reason>`.** `<reason>` é a própria mensagem do Tailwind. `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. Para qualquer outro motivo, rode o mesmo comando com `--no-minify` para descartar o minificador, e informe a mensagem junto com a versão que o `--version` imprime.
+
 ## 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: 23de7d85d2257d30e13330c7a2e185ca0c642010
 ---
 
 # 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 `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,17 @@ 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` e o comando `build`, que também precisa do `@tailwindcss/cli`. Os dois são peer dependencies opcionais, então os entrypoints compilados não os instalam.
 - **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 +93,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 +103,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 +115,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 +125,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 +157,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 +167,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).
 

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

@@ -2,7 +2,7 @@
 title: Estéticas
 description: Os seis visuais opcionais, o que cada um muda num componente, os seus ajustes e os seus limites.
 order: 6
-source: 13c01d45553a89f9aeda36d0726b01e7f7879ac9
+source: adc344b555d4477cdc37adb6abb4cc07620c6486
 ---
 
 # Estéticas
@@ -71,8 +71,10 @@ A sombra é projetada na intenção do próprio componente, então um botão de
 
 - Os chips de conteúdo também recebem a estética. A borda de uma tecla `.kbd` muda do cinza discreto de borda para a tinta, e de 1px para 2px, como todas as outras bordas. Um `.code` ou `.pre` não tem borda por padrão, então não ganha nenhuma; adicione `.edged` para dar a ele uma borda na cor da tinta.
 - Só o `.btn` e um `.card` que optou por isso respondem a hover e clique. Um card opta com `.interactive`, ou com uma das suas metades — `.hoverable` só para a resposta ao hover, `.pressable` só para o clique; um card simples, um alerta ou um painel é um contêiner e fica parado.
-- Um alerta fica sobre a sombra deslocada nesta estética, e em nenhuma outra. Fora daqui, um alerta é plano, mas aqui a sombra é um segundo contorno, e não profundidade, e um alerta sem ela parece inacabado ao lado de todo o resto. Isso inclui um alerta dentro de uma região `.neobrutalism` aninhada. `.flat` ainda a remove e `.floating` ainda a dobra.
+- Um alerta fica sobre a sombra deslocada nesta estética, e em nenhuma outra. Fora daqui, um alerta é plano, mas aqui a sombra é um segundo contorno, e não profundidade, e um alerta sem ela parece inacabado ao lado de todo o resto. Isso inclui um alerta dentro de uma região `.neobrutalism` aninhada, e um alerta que carrega a própria classe, `.alert.neobrutalism`. `.flat` ainda a remove e `.floating` ainda a dobra.
 - O gatilho de tooltip recebe o canto zero como todo o resto e fica quadrado; o `.radio` mantém o círculo.
+- Com `prefers-reduced-motion: reduce`, o clique ainda acontece, mas de imediato: o elemento pousa na sua sombra sem se deslocar até ela. O clique é o sinal de que ele foi registrado, então só o movimento some.
+- Ela não tem fonte própria e define a do tema, `--font-default`, na região, para que uma região neobrutalism aninhada dentro de pixel, cyber, sketch ou chunky tile não herde a fonte delas. Uma fonte que você define só com `font-family`, no `body` ou num contêiner, não chega dentro da região; defina-a também em `--font-default`, como descreve [Temas → Fontes](./theming.md#fontes).
 
 ## Glass
 
@@ -91,8 +93,9 @@ O `.glass` precisa de algo por trás para desfocar. Sobre um fundo de página pl
 - Toda superfície numa região glass é de vidro, incluindo um `.card.soft`, um `.panel` e um `.alert` neutros.
 - O vidro é o chão, não o preenchimento. Uma apresentação mantém o preenchimento inteiro, então um botão `.solid`, um toggle marcado e um card ou tabela `.solid` são opacos; as placas padrão, `.soft` e `.ghost` são as foscas.
 - O desfoque se aplica só a `.card`, `.panel`, `.alert`, ao balão de tooltip e a um `.data-table` padrão ou `.soft`. Os controles continuam sólidos e ficam sobre o vidro: um desfoque sob cada controle de um grupo denso custa uma camada de composição para cada um e vira ruído visual. Os controles ainda recebem o raio, a borda e a sombra da estética.
-- Com `prefers-reduced-transparency: reduce`, as superfícies de vidro perdem o desfoque e ficam opacas.
-- Botões e um `.card` que optou por isso usam o clique simples `scale(0.97)`; o movimento reduzido o desativa.
+- Com `prefers-reduced-transparency: reduce`, e em cores forçadas, as superfícies de vidro perdem o desfoque e ficam opacas. As cores forçadas substituem as cores mas mantêm a transparência delas, então sem isso um painel mostraria a página através do fundo do sistema.
+- Botões e um `.card` que optou por isso usam o clique simples `scale(0.97)`; com movimento reduzido, o clique ainda acontece, de imediato.
+- Ela não tem fonte própria e define a do tema, `--font-default`, na região, como o neobrutalism faz.
 - Controles de texto e toggles desenham a linha na tinta da página a 55%, e não com a borda fina branca, que apagaria um checkbox desmarcado numa página clara. Ela é o `--ui-control-ink`; defina-o na região para escolher outra.
 - A moldura e as linhas divisórias de uma tabela usam a tinta da página a 20%, porque a borda fina desaparece sobre a placa da tabela. Ela é o `--ui-rule-ink`.
 - Uma tabela com `<caption>` desfoca o fundo por trás da legenda, além das linhas, no Chromium e no Safari, cuja caixa da tabela inclui a legenda, e com `.glass-liquid` a borda de luz e o reflexo também emolduram a legenda. O Firefox deixa a legenda fora da placa. Onde isso importar, dê nome à tabela a partir de um título fora dela, com `aria-labelledby`.
@@ -111,13 +114,13 @@ A lente é desenhada por um filtro SVG em `backdrop-filter`, que o Chromium rend
 
 **Exceções:**
 
-- Ele alcança `.card`, `.panel`, `.alert`, o balão de tooltip e um `.data-table` padrão ou `.soft`. Os controles continuam sólidos, como no glass, exceto um botão que pede: veja [Botões líquidos](#botões-líquidos).
+- Ele alcança `.card`, `.panel`, `.alert`, `.surface`, o balão de tooltip, um componente seu criado com `@apply surface` e um `.data-table` padrão ou `.soft`. Os controles continuam sólidos, como no glass, exceto um botão que pede: veja [Botões líquidos](#botões-líquidos).
 - Ele desenha o desfoque e a lente no `::before` e no `::after` de cada superfície, então uma superfície dentro de uma região liquid não pode ter um `::before` ou `::after` seu. Cada superfície também vira um contexto de empilhamento posicionado; uma superfície que você mesmo posiciona mantém o seu posicionamento.
-- Todo o resto que fica fosco no glass mantém o desfoque leve e o chão mais transparente do liquid, sem a lente nem a borda de luz: uma `<table>` sem classe com `/native`, ou um componente seu criado com `@apply surface`.
+- Todo o resto que fica fosco no glass mantém o desfoque leve e o chão mais transparente do liquid, sem a lente nem a borda de luz: uma `<table>` sem classe com `/native`.
 - A lente é uma erosão de 8px desfocada em 10px em toda superfície, e de 3px desfocada em 3.5px num botão; a intensidade dela é fixa. Um filtro não consegue ler uma custom property, então nenhum desses valores é um ajuste. Os cantos são, por meio de `--glass-radius` e `--glass-radius-surface`, com padrões maiores: um canto contínuo parece menor que um arredondado com o mesmo raio.
-- Uma região de outra estética aninhada dentro de uma região liquid, ou de `.glass` simples, mantém o seu próprio material e não recebe camadas.
+- A região mais próxima decide. Uma região de outra estética aninhada dentro de uma região liquid, ou de `.glass` simples, mantém o seu próprio material e não recebe camadas, e uma região liquid aninhada de novo dentro dela volta a recebê-las.
 - Sem `.glass` em vigor, ele muda os cantos e mais nada.
-- Com `prefers-reduced-transparency: reduce`, o desfoque e a lente somem e a superfície fica opaca, como no glass. Em cores forçadas, as camadas não desenham nada.
+- Com `prefers-reduced-transparency: reduce`, e em cores forçadas, o desfoque e a lente somem e a superfície fica opaca, como no glass.
 - O texto fica sobre uma placa mais transparente que no glass. Sobre um conteúdo carregado, confira se o texto continua legível: o chão é 30% da cor da página, contra 45% no glass.
 
 #### Botões líquidos
@@ -152,8 +155,9 @@ Um botão é uma placa liquid quando ele mesmo tem `.glass-liquid`, dentro de um
 **Exceções:**
 
 - Os cantos são uma unidade ou nada. Chips pequenos ficam quadrados em vez de escalonados: badges, teclas, código inline, checkboxes e switches. Uma unidade a menos em cada canto de um badge de 24px pareceria uma mordida, não um canto.
+- As superfícies também são quadradas: um `.card`, `.panel` ou `.alert` mantém o anel interno, mas não recebe corte nem recorta nada. Um recorte cortaria tudo dentro dele, então um tooltip num card, uma sombra ou um anel de foco ali seriam aparados.
 - Tabelas, barras de progresso e skeletons também são quadrados. Uma tabela não recebe corte porque, no Chromium e no WebKit, a caixa dela inclui a legenda, e o corte cairia na legenda em vez de nas linhas. Barras de progresso e skeletons recebem só o canto quadrado.
-- Um bloco de código `.pre` é escalonado como um card. Ele não tem borda por padrão, então o corte aparece sem contorno em volta.
+- Um bloco de código `.pre` é escalonado como um botão. Ele não tem borda por padrão, então o corte aparece sem contorno em volta.
 - O contorno é um anel interno, porque um recorte remove uma borda de verdade — e o anel de foco, pelo mesmo motivo, é uma segunda camada interna, e não um outline. Os dois são a própria borda do elemento, e não uma sombra, então a borda responde a `.edged` e `.edgeless` como uma borda responde: um badge `.edgeless` e um botão `.solid` não desenham nenhuma, um card `.edged` desenha uma, e um campo mantém a sua, peça o contêiner o que pedir.
 - O anel de foco interno carrega uma linha de 2px na cor da página por dentro. O anel é da cor primária, então num botão `.solid.primary` ele seria desenhado sobre a sua própria cor; é a linha que aparece ali.
 - Em cores forçadas, o anel e o corte somem, porque o sistema remove todas as box shadows: os componentes desenham uma borda real de 2px e cantos quadrados, e o `.pixel-solo` um outline para dentro.
@@ -177,7 +181,7 @@ A barra é um tom mais escuro da própria cor do elemento, e não uma sombra emb
 
 **Exceções:**
 
-- Só fica sobre uma barra o que o registro deixa em repouso acima de zero — botões e cards. Um badge, chip, campo ou tooltip é plano até pedir profundidade com `.raised`, e `.flat` tira a barra de qualquer coisa:
+- Só botões e cards ficam sobre uma barra, porque são os componentes que repousam acima da elevação zero. Um badge, chip, campo ou tooltip é plano até pedir profundidade com `.raised`, e `.flat` tira a barra de qualquer coisa:
 
   ```html
   <div class="card soft edgeless info flat">Promo panel, deliberately flat</div>
@@ -187,7 +191,8 @@ A barra é um tom mais escuro da própria cor do elemento, e não uma sombra emb
 - Os rótulos são desenhados mais pesados e com um leve espaçamento entre letras, por meio de `--ui-label-weight` e `--ui-label-tracking`, então os seus utilitários `font-*` ou `tracking-*` ainda vencem. Isso alcança `.btn` e `.badge`, e um `<button>` sem classe só onde a `/native` o estiliza. A caixa das letras fica como está: como um rótulo é escrito é decisão da aplicação, então, se você quiser botões em maiúsculas, escreva essa regra na sua própria folha de estilos.
 - `.card.interactive` afunda ao clicar como um `.btn`, então um bloco de resposta chunky desce sobre a barra ao ser clicado; `.card.pressable` recebe o mesmo clique sozinho. Um `.card` simples fica parado.
 - O `.primary` padrão é quase preto numa página clara e quase branco numa escura, e a barra é sempre misturada em direção ao preto. Numa página clara, a barra de um botão primário é quase invisível contra a face quase preta (medido: `1.04:1`). Numa página escura, a face quase branca contra a mesma barra se lê bem (`2.48:1`). Dê ao `.primary` um matiz próprio se ele for a chamada para ação e precisar da indicação de profundidade nos dois temas.
-- A profundidade nesta estética é a barra, nunca uma sombra projetada com desfoque. Tudo o que o registro deixa em repouso plano fica rente à página.
+- Com `prefers-reduced-motion: reduce`, o clique ainda acontece, mas de imediato, como no neobrutalism.
+- A profundidade nesta estética é a barra, nunca uma sombra projetada com desfoque. Tudo o que repousa plano fica rente à página.
 - Os controles desenham um cinza mais pesado que os blocos em volta, `neutral-600` no claro e `neutral-400` no escuro, por meio de `--ui-control-ink`, para que um campo pareça um campo dentro de um bloco.
 
 ## Cyber
@@ -260,11 +265,12 @@ O botão tracejado é `ghost edged` porque um botão preenchido não tem uma lin
 
 **Exceções:**
 
-- O sketch identifica os componentes pelo nome para alternar os contornos, então os contornos dele só alcançam os componentes deste pacote; uma região de outra estética aninhada dentro de uma região sketch mantém os cantos daquela estética.
+- O sketch identifica os componentes pelo nome para alternar os contornos, então os contornos dele só alcançam os componentes deste pacote; uma região de outra estética aninhada dentro de uma região sketch mantém os cantos daquela estética. A região mais próxima decide, então uma região sketch aninhada de novo dentro dela volta a alternar os contornos.
 - Os chips, como checkboxes, teclas, código, badges, switches e barras de progresso, alternam entre contornos pequenos e irregulares definidos em `--ui-radius-tight`. Defina esse token num chip para escolher o formato dele.
 - Um `.btn.pill` recebe uma pílula arredondada limitada à sua própria altura, para que um botão largo não vire um oval. Badges, barras de progresso e switches recebem o contorno de chip. Radios e o ícone de tooltip continuam círculos, levemente irregulares, para que um radio nunca seja confundido com um checkbox. Um `--ui-radius-pill` explícito num elemento ainda vence.
 - A `--font-sketch` fica por sua conta. O pacote não entrega nenhuma fonte manuscrita e cai na família `cursive` da plataforma.
-- Os botões usam o clique simples `scale(0.97)`; o movimento reduzido o desativa.
+- Os botões usam o clique simples `scale(0.97)`; com movimento reduzido, o clique ainda acontece, de imediato.
+- Com a [`/native`](../setup.md#html-sem-classes), um `<hr>`, uma `<table>` e um checkbox puros recebem os detalhes tracejados de `.divider`, `.data-table` e `.checkbox`.
 - O modo de cores forçadas desenha os detalhes tracejados como sólidos, como todas as outras linhas de material.
 
 ## Classes solo

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

@@ -2,7 +2,7 @@
 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: 191dd268b7da59fd3b3bf82c23aa192207c89381
+source: 54f7c8a1eee5a0f696dc60b9f60f42026d49c5d5
 ---
 
 # Botões
@@ -40,7 +40,11 @@ Um botão aceita uma intenção, uma classe de preenchimento e uma classe de bor
 
 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 a preferência do usuário por movimento reduzido o desativa.
+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
 

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

@@ -2,7 +2,7 @@
 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: 8aa84776103ce27781f924220cc7c621231e5734
+source: 2493c7c14124565b565b1226e99d4b3de3b087b2
 ---
 
 # Composição
@@ -23,6 +23,9 @@ Esta é uma página de consulta. [Montando uma tela](../concepts.md) apresenta i
 - **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
 
@@ -77,6 +80,7 @@ A borda é o contorno do componente e nada mais. Linhas dentro de um componente,
 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.
 
@@ -139,7 +143,7 @@ Quais classes mudam cada componente. "Material" é o que uma [estética](./aesth
 | `.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. 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).
+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
 

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

@@ -2,7 +2,7 @@
 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: 6a638b6d6e735f1a7343bf9c6b2db131ca91fc30
+source: 19c4b12f34054533e56cbc1edbefff908c48a1e7
 ---
 
 # Conteúdo e layout
@@ -46,7 +46,7 @@ Um `.divider` aceita uma intenção, que o colore, e ignora as classes de aprese
 
 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.
+`.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.
 
@@ -89,7 +89,7 @@ Um `.card.soft` neutro e um `.panel` neutro não mostram tom: eles ficam sobre o
 | `.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 a preferência por movimento reduzido o desativa.
+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.
 
@@ -104,6 +104,8 @@ Use uma das metades num card que responde a um só gesto. Um card que contém o
 
 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:
@@ -148,6 +150,8 @@ A tela de configurações lista as chaves de API numa tabela:
 
 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:
@@ -212,4 +216,4 @@ Um `.kbd`, `.code` ou `.pre` fica sobre o tom suave da sua intenção, `--color-
 
 ## A seguir
 
-[Acessibilidade](../accessibility.md) lista o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.
+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.