@codenhub/styles 0.7.0 → 0.8.0

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

@@ -2,7 +2,7 @@
 title: Personalização
 description: Consulta sobre tokens de apresentação e de material, ajustes das estéticas, as seis variáveis públicas de componente, a paleta gerada e os helpers para criar os seus próprios componentes.
 order: 9
-source: aa87391c5599ddfda913abcce9d17d9686345906
+source: 790dec3b1fcf41af4b38aca7c5b8a93135827c1e
 ---
 
 # Personalização
@@ -76,7 +76,7 @@ A geometria da sombra é dividida em partes sem cor, então elas são herdadas c
 | `--ui-hover-shadow-y`     | Deslocamento vertical da sombra durante o hover.                                                                                                                            | `--ui-shadow-y`                                         |
 | `--ui-active-shadow-x`    | Deslocamento horizontal da sombra durante o clique.                                                                                                                         | `--ui-shadow-x`                                         |
 | `--ui-active-shadow-y`    | Deslocamento vertical da sombra durante o clique.                                                                                                                           | `--ui-shadow-y`                                         |
-| `--ui-active-transform`   | Transformação durante o clique. `none` sob `prefers-reduced-motion`.                                                                                                        | `scale(0.97)`                                           |
+| `--ui-active-transform`   | Transformação durante o clique. Mantida sob `prefers-reduced-motion`, que tira só a transição dela.                                                                         | `scale(0.97)`                                           |
 | `--ui-active-translate-x` | Distância que um clique percorre na profundidade do elemento; `-y` ao lado. Escalado como a sombra.                                                                         | `0px`                                                   |
 | `--ui-shadow-ink`         | Porcentagem da cor da sombra tirada da tinta da intenção.                                                                                                                   | `0%`                                                    |
 | `--ui-halo-blur`          | Desfoque de um halo em volta do elemento; `--ui-halo-spread` ao lado. A elevação não o escala.                                                                              | `0px`                                                   |
@@ -93,7 +93,7 @@ A geometria da sombra é dividida em partes sem cor, então elas são herdadas c
 | `--ui-clip-tight`         | Silhueta compacta do componente.                                                                                                                                            | `--ui-clip`                                             |
 | `--ui-focus-inset`        | Espessura da camada interna de foco.                                                                                                                                        | Sem valor                                               |
 | `--ui-label-weight`       | Peso do rótulo de `.btn` (e, com `/native`, de um `<button>` sem classe) e de `.badge`.                                                                                     | Seminegrito num botão, negrito num badge                |
-| `--ui-label-tracking`     | Espaçamento entre as letras do rótulo. Sem valor, o rótulo o herda.                                                                                                         | Sem valor                                               |
+| `--ui-label-tracking`     | Espaçamento entre as letras do rótulo. Sem valor, é `normal`, então nem o espaçamento da página nem o de um contêiner chega ao rótulo.                                      | `normal`                                                |
 | `--ui-label-case`         | `text-transform` do rótulo.                                                                                                                                                 | `none` num botão; herdado num badge                     |
 | `--ui-label-shadow`       | `text-shadow` do rótulo, escrito sem cor para receber a do próprio rótulo.                                                                                                  | `none` num botão; herdado num badge                     |
 
@@ -120,7 +120,7 @@ Quais cantos recebem o canto é uma escolha à parte. `.cut-diagonal` mantém o
 
 `--ui-surface-image` coloca qualquer `background-image` sobre a placa de uma superfície: cards, painéis, alertas e tooltips, não controles. Quem o define é responsável pelo contraste do texto sobre ele, e o seu próprio `background-image` numa superfície ainda vence.
 
-`--ui-label-*` trata o rótulo de um botão ou de um badge: peso, espaçamento entre letras, caixa e uma sombra de texto. Escreva a sombra sem cor, como `0 0 6px`, para que ela receba a cor do próprio rótulo e não possa reduzir o seu contraste. Os seus próprios utilitários `font-*`, `tracking-*` e de caixa ainda vencem.
+`--ui-label-*` trata o rótulo de um botão ou de um badge: peso, espaçamento entre letras, caixa e uma sombra de texto. Escreva a sombra sem cor, como `0 0 6px`, para que ela receba a cor do próprio rótulo e não possa reduzir o seu contraste. Os seus próprios utilitários `font-*`, `tracking-*` e de caixa ainda vencem. Um rótulo não herda o espaçamento entre letras, então um utilitário `tracking-*` em um contêiner deixa os seus botões e badges em `normal`; para espaçar todos os rótulos de uma região, defina `--ui-label-tracking` nela, que eles herdam.
 
 Em cores forçadas, cada um deles desenha a sua versão simples: uma linha sólida, sem halo, sem camada pintada e sem sombra no rótulo. A silhueta e o anel abaixo também somem. As cores forçadas removem todas as box shadows, então `--ui-clip`, `--ui-clip-tight`, `--ui-border-max` e `--ui-shadow-edge` são limpos e um componente desenha a sua borda real com `--ui-border-width`.
 
@@ -198,7 +198,7 @@ Os ajustes de todas as estéticas alcançam os elementos da mesma forma: cada aj
 
 Ajustes e tokens de material alcançam os elementos em direções opostas. Um ajuste é lido uma vez, no elemento com a classe de estética, e o resultado é herdado. Então defina um ajuste nesse elemento ou num acima dele; definido num elemento dentro da estética, ele não muda nada, porque o valor já foi lido.
 
-`--ui-radius` e os outros tokens de material são lidos por cada componente no momento em que ele é desenhado. Eles funcionam no elemento em que são definidos e em tudo dentro dele, e é assim que você arredonda um card de forma diferente dos vizinhos sem mexer no ajuste.
+`--ui-radius`, `--ui-radius-surface` e os outros tokens de material são lidos por cada componente no momento em que ele é desenhado. Eles funcionam no elemento em que são definidos e em tudo dentro dele, e é assim que você arredonda um card de forma diferente dos vizinhos sem mexer no ajuste. Repare em qual token cada componente lê: uma superfície (`.card`, `.panel`, `.alert`) usa `--ui-radius-surface`, e um controle como `.btn` ou `.ipt` usa `--ui-radius`. `style="--ui-radius-surface: 0"` deixa um card quadrado; `--ui-radius` nesse card deixa quadrados os botões dentro dele, e o card continua arredondado.
 
 As estéticas entregues definem os tokens de material compartilhados acima. Toda estética entregue define `--ui-ink` para a sua linha neutra. Toda estética entregue também define `--ui-control-ink`: `.glass` e `.chunky-tile` com uma linha própria, mais pesada que a das suas superfícies, e as outras com `--color-control-border`, já que a tinta delas é quase preta ou quase branca e um checkbox em repouso contornado com ela pareceria marcado. `.glass` também define `--ui-rule-ink`, para que as linhas de uma tabela apareçam sobre a sua placa; as outras o limpam. As classes de intenção ainda substituem os slots de intenção de cada componente.
 
@@ -216,9 +216,9 @@ Os mesmos ajustes controlam a [classe solo](./solo.md) de cada estética, que os
 
 ```css
 .my-badge {
-  background: var(--palette-success-soft-page-bg);
+  background: var(--palette-success-soft-bg);
   color: var(--palette-success-soft-fg);
-  border-color: var(--palette-success-soft-page-edge);
+  border-color: var(--palette-success-soft-edge);
 }
 ```
 
@@ -227,10 +227,13 @@ Todo valor é uma cor final, nunca uma referência a outra variável, então o a
 Nomenclatura: `--palette-<intent>-<presentation>-<slot>`, em que `<intent>` é uma das sete intenções publicadas (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`) e `<presentation>` é `solid`, `soft` ou `ghost`. `<slot>` é `bg`, `fg` ou `edge`. Dois qualificadores se somam só onde se aplicam:
 
 - Um qualificador de chão, `page` ou `subtle`, antes do slot. Ele só aparece no `bg` e no `edge` de `.soft` e `.ghost`, porque um preenchimento `.solid` cobre o seu chão e a cor do texto nunca depende dele.
-  - Sem qualificador é o chão transparente de `.badge` e `.btn`: `--palette-success-soft-bg`.
-  - `page` é o chão de `.alert`, `--color-background`: `--palette-success-soft-page-bg`.
-  - `subtle` é o chão de `.pre`, `.code`, `.kbd` e `.tooltip-bubble`, o próprio `--intent-subtle` da intenção: `--palette-success-soft-subtle-bg`.
-- Um sufixo `-hover`, só em `bg` e `edge`, porque a cor do texto não muda no hover: `--palette-success-soft-page-bg-hover`.
+  - Sem qualificador é o que `.badge` e `.btn` desenham, sobre um chão transparente: `--palette-success-soft-bg`.
+  - `page` é o que `.alert` desenha, sobre a página: `--palette-success-soft-page-bg`.
+  - `subtle` é o que `.kbd`, `.code` e `.pre` desenham, sobre o tom subtle da própria intenção: `--palette-success-soft-subtle-bg`.
+
+  Cada valor é lido do próprio componente, então inclui o que o componente faz por conta própria. Um `.alert`, `.kbd`, `.code` ou `.pre` neutro mantém um preenchimento mais discreto que um `.badge` neutro, e os seus valores `neutral-soft-page` e `neutral-soft-subtle` refletem isso. `.tooltip-bubble` não corresponde a nenhum dos três: sem intenção, ele é preenchido com o seu próprio tom de tooltip, e a sua borda é sólida em vez de esmaecida.
+
+- Um sufixo `-hover`, só em `bg` e `edge`, porque a cor do texto não muda no hover: `--palette-success-soft-page-bg-hover`. `.alert`, `.kbd`, `.code` e `.pre` não têm hover próprio, então os seus valores de hover são o que o componente desenha quando você adiciona `box-hover` a ele.
 
 Os valores claros são definidos em `:root`. Os valores escuros se aplicam sob `.dark`, `.theme-dark` ou `[data-theme="dark"]` no elemento ou num elemento acima dele, os mesmos seletores que o tema do pacote usa. Os valores claros também se aplicam sob `.light`, `.theme-light` e `[data-theme="light"]`, então o tema explícito mais próximo vence: uma área clara dentro de uma escura lê os valores claros.
 
@@ -264,7 +267,7 @@ Os exemplos em contexto estão em [Feedback → Mostre o progresso](./feedback.m
 
 ## Helpers de composição
 
-Para criar um componente que o pacote não entrega, como um controle segmentado ou um chip de filtro, monte-o com as mesmas classes a partir das quais os componentes do pacote são construídos. Com o CSS compilado, escreva-as como classes; com o código-fonte do Tailwind, você também pode aplicá-las com `@apply`.
+Para criar um componente que o pacote não entrega, como um controle segmentado ou um chip de filtro, monte-o com as mesmas classes a partir das quais os componentes do pacote são construídos. Com o CSS compilado, escreva-as como classes; com o código-fonte do Tailwind, você também pode aplicá-las com `@apply`, junto com as classes de intenção, apresentação, elevação e canto, que no `/tw` também são utilitários: `@apply box box-hover neutral soft edgeless`. Para dar uma receita fixa a um componente do pacote, como um botão primário pequeno e suave, veja [Tailwind CSS v4 → Construa seus próprios componentes com `@apply`](../integrating/tailwind.md#construa-seus-próprios-componentes-com-apply).
 
 | Classe         | O que dá a um elemento                                                                                                                                                                                      |
 | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -287,7 +290,10 @@ Chips de filtro para a lista de membros, um pressionado e outro não:
 O que dar a cada um:
 
 - **`box` precisa de uma classe de preenchimento e de uma de borda.** Ele não tem padrões próprios, então, sem `.solid`, `.soft` ou `.ghost` e sem `.edged` ou `.edgeless`, no elemento ou num contêiner, ele não desenha nada. `surface` e `text-control` têm padrões e funcionam sozinhos.
-- **Dê nome à intenção.** Um elemento `box` recebe a intenção do elemento mais próximo em volta dele que tenha uma, diferente dos componentes do pacote. Coloque `.neutral` ou uma classe de intenção nele.
+- **Dê nome à intenção no `box`.** Um elemento `box` recebe a intenção do elemento mais próximo em volta dele que tenha uma, diferente dos componentes do pacote. Coloque `.neutral` ou uma classe de intenção nele. `surface` e `text-control` são neutros, a menos que o elemento tenha uma classe de intenção, como os componentes.
+- **`@apply` leva o helper inteiro.** `@utility my-field { @apply text-control; }` recebe o mesmo que `class="text-control"`: a intenção neutra e a borda de campo, `.soft`, `.solid` e `.edgeless` no elemento, e o visual inválido com `aria-invalid="true"`. `@apply surface` é neutro da mesma forma. Para colorir um elemento assim, uma classe de intenção que você mesmo definiu precisa ser CSS simples ou um utilitário, e não uma regra em `@layer components`.
+- **Escreva como utilitário a classe que aplica um helper.** O que `@apply` copia cai na [camada de cascata](../setup.md#camadas-de-cascata) da regra em que está escrito. Os helpers são utilitários, e `@utility my-field` mantém a sua classe em `utilities` ao lado deles, então os seus outros utilitários continuam a alcançá-la. Escrita como CSS simples, `.my-field { @apply text-control; }` fica sem camada, e tudo o que o helper declara vence qualquer utilitário no elemento: uma classe de intenção que você escreveu como utilitário deixa o campo neutro, e `mt-8` não move um dialog. O seu próprio CSS sem camada ainda disputa com ele, por especificidade e depois por ordem no código, como quaisquer duas regras sem camada.
+- **Um dialog funciona com `@apply surface`.** Um `<dialog>` fechado com uma classe sua que faz `@apply surface` fica escondido, e um aberto fica centralizado, como com `.card`. Esconder um fechado vence um utilitário de display como `flex`; uma margem que você define ainda posiciona um aberto, e um utilitário de margem também posiciona quando a sua classe é um utilitário.
 - **Tamanho e espaçamento ficam por sua conta.** Nenhum dos helpers define padding, largura ou altura; `text-control` não define a altura de 2.5rem que `.ipt` adiciona.
 - **Comportamento e semântica também.** Use um `<button>`, `<input>` ou `<a href>` de verdade, ou adicione você mesmo o role e o tratamento de teclado, e defina estados como `aria-pressed` ou `aria-invalid`. `box` desenha o visual desabilitado para `disabled`, `.disabled`, `aria-disabled="true"` e `data-disabled`, mas só o atributo `disabled` bloqueia a interação.
 

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

@@ -2,7 +2,7 @@
 title: Feedback
 description: Um botão de salvando, alertas, badges, placeholders de carregamento e barras de progresso, e o que o seu código precisa manter em sincronia com eles.
 order: 3
-source: e2a4c2af517dd286e22e762e4ba1997ebdb3c8c6
+source: ce1defb7385bc009988d903fd895bcb7edb5ab3b
 ---
 
 # Feedback
@@ -80,6 +80,8 @@ Um badge é uma pílula pequena para um status ou uma contagem:
 
 Um badge é soft e sem borda por padrão, e aceita as mesmas classes de intenção e de apresentação de um botão: `.badge.warning` para "Payment due", `.badge.info.solid` para um "New" preenchido. Diferente de um alerta, um badge sem intenção mantém o tom claro, porque ele não tem borda e, sem o tom, sumiria no texto ao redor.
 
+Um badge neutro que não é `.solid`, como um contador dentro de um `.btn.primary`, imprime na cor de texto do componente preenchido em que está, então continua legível sobre esse preenchimento. Um badge com intenção mantém a própria cor.
+
 ## Mostre um placeholder durante o carregamento
 
 Enquanto o card de perfil espera os dados, mostre blocos cinza onde o texto vai ficar:
@@ -134,6 +136,8 @@ Quando você não sabe quanto do trabalho já foi feito, como enquanto a exporta
 
 `.active` acrescenta um brilho sobre o trilho de uma barra determinada, para mostrar que o trabalho continua acontecendo entre uma atualização e outra. As duas animações param quando o usuário pede movimento reduzido; uma barra indeterminada fica então parada, com o preenchimento no início.
 
+Com a [folha de estilos sem classes](../setup.md#html-sem-classes), um elemento `<progress>` puro é desenhado como `.progress`: preenchido até o seu `value`, ou com a varredura indeterminada quando não tem `value`. Ele anuncia o próprio valor, então não precisa de `aria-valuenow`.
+
 ### Como as barras de progresso aparecem
 
 O preenchimento é a cor da intenção com força total, ou `currentColor` sem intenção. O trilho é soft e sem borda por padrão: um tom claro, sem borda.

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

@@ -2,7 +2,7 @@
 title: Formulários
 description: Campos com rótulo, dicas e erros, ícones e prefixos fixos, selects e toggles de checkbox, radio e switch.
 order: 2
-source: 58972b8573a07a3336b5765a725eb99abb2f907a
+source: 00e6a57cfd62f524fde5a550af721786edd7a5dd
 ---
 
 # Formulários
@@ -28,6 +28,25 @@ Um campo é um rótulo, um controle e uma dica opcional, empilhados:
 
 Um controle de texto tem pelo menos 2.5rem de altura (`--control-height`), a mesma altura de um botão padrão, então um campo e um botão ficam alinhados numa linha. O visual padrão dele é sem preenchimento e com borda. Um `.textarea` tem pelo menos 7rem de altura e pode ser redimensionado na vertical.
 
+### Tamanhos
+
+`.ipt`, `.select`, `.textarea` e `.input-group` aceitam as classes de tamanho do botão, então um campo pequeno e um botão pequeno ficam alinhados numa linha:
+
+| Classe | Altura | Padding lateral | Texto     |
+| ------ | ------ | --------------- | --------- |
+| `.sm`  | 2rem   | 0.625rem        | 0.875rem  |
+| padrão | 2.5rem | 0.75rem         | herdado   |
+| `.lg`  | 3rem   | 1rem            | 1.0625rem |
+
+Os cantos acompanham o tamanho, como num botão. Um `.textarea` mantém a altura mínima de 7rem em todos os tamanhos; a classe muda o texto, o padding e os cantos dele. Defina o tamanho de um `.input-group` no grupo, não no controle dentro dele: o controle e os adornos recebem o tamanho de texto do grupo.
+
+```html
+<div class="cluster tight">
+  <input class="ipt sm" aria-label="Coupon code" />
+  <button class="btn sm" type="button">Apply</button>
+</div>
+```
+
 ## Mostre um erro de validação
 
 Marque o controle como inválido com `aria-invalid="true"` e dê à mensagem de erro `.hint.destructive`:
@@ -40,7 +59,13 @@ Marque o controle como inválido com `aria-invalid="true"` e dê à mensagem de
 </div>
 ```
 
-Um controle inválido desenha a borda, o anel de foco e o texto digitado na cor destrutiva, seja qual for a classe de intenção dele. O texto usa o tom legível dessa cor, `--intent-strong`, para continuar legível na página. O pacote só pinta o estado: decidir que o valor é inválido, definir e remover o `aria-invalid` e escrever a mensagem ficam por conta do seu código. Remova o `aria-invalid` assim que o valor voltar a ser válido; se ele continuar definido, o campo continua vermelho.
+Um controle inválido desenha a borda, o anel de foco e o texto digitado na cor destrutiva, seja qual for a classe de intenção dele. O texto usa o tom legível dessa cor, `--intent-strong`, para continuar legível na página. O pacote só pinta o estado: decidir que o valor é inválido, definir e remover o `aria-invalid` e escrever a mensagem ficam por conta do seu código. Remova o `aria-invalid` assim que o valor voltar a ser válido; se ele continuar definido, o campo continua vermelho. Num checkbox, radio ou switch, `aria-invalid="true"` desenha o toggle exatamente como `.destructive` desenha, marca de seleção incluída.
+
+Um hint aceita qualquer uma das seis intenções embutidas, não só `.destructive`: `.hint.success` confirma que um valor foi aceito, e `.hint.warning` sinaliza um valor permitido, mas incomum. Cada um aparece no tom legível da sua intenção, `--intent-strong`, que mantém 4.5:1 em relação à página nos dois temas. Um hint sem intenção, com `.neutral` ou com uma [intenção que você mesmo definiu](./theming.md#sua-própria-intenção) continua na cor secundária. Só uma classe no próprio hint o colore; uma intenção no campo ou num contêiner em volta dele não.
+
+```html
+<input class="ipt success" id="username" value="ada" aria-describedby="username-hint" /> <span class="hint success" id="username-hint">That username is available.</span>
+```
 
 ## Monte o formulário de perfil
 
@@ -84,7 +109,7 @@ Um `.select` desenha a sua própria seta. Com `multiple` ou com `size` maior que
 
 ## Adicione um ícone ou um prefixo fixo
 
-`.input-group` coloca um ícone ou um trecho de texto dentro da borda de um campo. O grupo desenha a borda, o fundo, o anel de foco e os estados inválido e desabilitado; o controle dentro dele abre mão dos seus, para que a borda seja desenhada uma vez só. Coloque o adorno antes do controle para que ele fique no início, ou depois para que fique no fim.
+`.input-group` coloca um ícone ou um trecho de texto dentro da borda de um campo. O grupo desenha a borda, o fundo, o anel de foco e os estados inválido e desabilitado; o controle dentro dele abre mão dos seus, para que a borda seja desenhada uma vez só. Coloque o adorno antes do controle para que ele fique no início, ou depois para que fique no fim. Um grupo tem a altura de um campo sozinho, então fica alinhado com os campos e botões ao lado dele.
 
 O endereço do perfil sempre começa com o mesmo host, então ele é um prefixo fixo:
 
@@ -116,7 +141,7 @@ Um `.select` também funciona num grupo. O grupo remove o padding lateral do con
 
 Qualquer elemento serve de adorno: uma classe de ícone, um `<svg>` inline, um `<img>` ou texto. O pacote não entrega ícones para campos, porque uma imagem embutida não conseguiria acompanhar a cor do seu texto, o seu tema ou a sua estética.
 
-O grupo lê intenção e apresentação do mesmo jeito que um `.ipt` sozinho: `.input-group.primary` colore a borda, e `.input-group.soft.edgeless` é um campo afundado na página. `aria-invalid="true"` ou `disabled` no controle de dentro se aplica ao grupo inteiro, e o mesmo vale para qualquer um dos dois no próprio grupo. O anel de foco aparece quando qualquer coisa dentro do grupo tem foco, então, diferente de um campo sozinho, ele também aparece depois de um clique do mouse.
+O grupo lê intenção e apresentação do mesmo jeito que um `.ipt` sozinho: `.input-group.primary` colore a borda e o texto digitado, e `.input-group.soft.edgeless` é um campo afundado na página. Coloque a intenção no grupo, não no controle de dentro: o grupo desenha o campo, então o texto do controle recebe a intenção do grupo, e uma classe de intenção no controle não tem efeito. `aria-invalid="true"` ou `disabled` no controle de dentro se aplica ao grupo inteiro, e o mesmo vale para qualquer um dos dois no próprio grupo. O anel de foco do grupo aparece quando o campo dele tem foco, então, diferente de um campo sozinho, ele também aparece depois de um clique do mouse. Um botão dentro do grupo, como um botão de limpar, desenha o seu próprio anel quando tem foco, e o grupo não desenha nenhum: um único anel sempre marca o único controle que tem foco.
 
 ## Decorações do navegador
 

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

@@ -3,12 +3,12 @@ title: Visão geral
 description: Os guias que terminam a tela de configurações e, depois, as páginas de consulta com cada classe, token e padrão.
 group: Uso
 order: 4
-source: cd4fa5f3fc9bc6e1ca74206616c5f58edfa6abf7
+source: ccdf1949cd4f7688574d6f4fae9ad2cf34465fb3
 ---
 
 # Uso
 
-Estes guias terminam a tela de configurações começada em [Montando uma tela](../concepts.md). Leia os sete primeiros em ordem: cada um acrescenta uma parte da tela e pressupõe os anteriores. As três últimas são páginas de consulta; os guias mandam você para elas quando precisam da tabela completa, e você pode voltar sempre que precisar de um padrão ou de uma regra.
+Estes guias terminam a tela de configurações começada em [Montando uma tela](../concepts.md). Leia os sete primeiros em ordem: cada um acrescenta uma parte da tela e pressupõe os anteriores. As três seguintes são páginas de consulta; os guias mandam você para elas quando precisam da tabela completa, e você pode voltar sempre que precisar de um padrão ou de uma regra. A última, Predefinições, é para quando a tela já funciona e você cansou de digitar as mesmas classes.
 
 Guias, em ordem:
 
@@ -26,4 +26,8 @@ Páginas de consulta:
 - [Personalização](./customizing.md): tokens de apresentação e de material, ajustes de estética, as seis variáveis públicas de componente, a paleta gerada e os helpers de composição para montar os seus próprios componentes.
 - [Conteúdo e layout](./content-and-layout.md): todos os utilitários de layout, a escala tipográfica, cards e painéis, tabelas, citações, código e teclas de teclado.
 
+Quando a tela estiver funcionando:
+
+- [Predefinições](./presets.md): defina um visual uma única vez, com classes de eixo em um contêiner, tokens de tema e de material, ou as suas próprias classes de componente feitas com `@apply`.
+
 Quando terminar, a página de [Acessibilidade](../accessibility.md) reúne o que o CSS faz por você e o que a sua aplicação ainda deve aos usuários.

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

@@ -0,0 +1,92 @@
+---
+title: Predefinições
+description: Três formas de definir um visual uma única vez em vez de em cada elemento, e quando usar cada uma.
+order: 11
+source: 308b21076223635a3323bcfecb70abe3a9e6d1c7
+---
+
+# Predefinições
+
+A esta altura, a tela de configurações diz `btn primary soft sm` em uma dúzia de lugares, e mudar de ideia significa mudar uma dúzia de lugares. Esta página trata das três formas de definir um visual uma única vez: classes de eixo em um contêiner, tokens de tema e de material, e as suas próprias classes de componente feitas com `@apply`. Cada uma serve para um tipo diferente de "uma única vez".
+
+## Qual usar
+
+| Você quer                                                                                      | Use                                                                         |
+| ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Que todos os componentes de uma região compartilhem um preenchimento, uma borda ou um material | [Classes de eixo em um contêiner](#classes-de-eixo-em-um-contêiner)         |
+| Outras cores, cantos, bordas ou profundidade para uma página ou uma região                     | [Tokens de tema e de material](#tokens-de-tema-e-de-material)               |
+| Um nome para uma receita que você repete, como "o botão de salvar"                             | [Suas próprias classes de componente](#suas-próprias-classes-de-componente) |
+
+Elas se combinam. Uma região pode definir um token de material, ficar sob uma estética e conter a sua própria classe de botão, e cada elemento ainda pode sobrescrever o que herda.
+
+## Classes de eixo em um contêiner
+
+Algumas classes funcionam num contêiner além de num componente, e tudo dentro dele as recebe:
+
+- As classes de apresentação: `.solid`, `.soft`, `.ghost`, `.edged` e `.edgeless`.
+- Os padrões de canto: `.cut-diagonal` e `.cut-diagonal-reverse`.
+- As [estéticas](./aesthetics.md), como `.glass` ou `.pixel`.
+
+```html
+<div class="cluster soft edged">
+  <button class="btn primary" type="button">Negrito</button>
+  <button class="btn" type="button">Itálico</button>
+  <button class="btn destructive solid" type="button">Limpar formatação</button>
+</div>
+```
+
+Os botões da barra são soft e com borda, e o último pede o próprio preenchimento. Uma classe no elemento sempre vence a de um contêiner.
+
+Os outros eixos não são herdados. A intenção, a elevação (`.flat`, `.raised`, `.floating`) e o tamanho (`.sm`, `.lg`) mudam só o elemento em que estão, então uma barra `.sm` não encolhe os seus botões; [Composição → Combinando classes](./composing.md#combinando-classes) explica por quê. Uma classe de estética também define o próprio padrão de canto na sua região, então um `.cut-diagonal` acima de uma região `.pixel` não chega dentro dela.
+
+Use uma classe de contêiner quando o visual pertence à região, como uma barra lateral discreta, e não aos componentes dentro dela.
+
+## Tokens de tema e de material
+
+Tokens são propriedades personalizadas de CSS. Defina um no `:root` e a página inteira segue; defina num elemento e só o que está dentro segue. Eles vão mais longe que as classes, porque os componentes os leem enquanto são desenhados:
+
+```css
+.admin {
+  --radius-control: 0.25rem;
+  --radius-surface: 0.5rem;
+  --border-width: 2px;
+}
+```
+
+Todo botão, campo, balão de tooltip e superfície dentro de `.admin` recebe os cantos mais fechados e a borda mais grossa, sem classe em nenhum deles. Checkboxes, `.kbd` e `.code` mantêm o próprio canto menor, `--radius-small`.
+
+As tabelas ficam onde os tokens são explicados, então esta página não as repete:
+
+- [Temas → Tokens de cor](./theming.md#tokens-de-cor): cores de marca e de status, nos dois temas.
+- [Temas → Tokens fundamentais](./theming.md#tokens-fundamentais): cantos, largura da borda, altura dos controles, anel de foco, profundidade e movimento.
+- [Personalização → Tokens de apresentação](./customizing.md#tokens-de-apresentação): quanto um preenchimento, uma borda ou um hover acrescenta.
+- [Personalização → Tokens de material](./customizing.md#tokens-de-material): o que uma estética define, e que você mesmo pode definir, como `--ui-radius`.
+- [Personalização → Tokens de estética](./customizing.md#tokens-de-estética): os ajustes de cada estética, como `--neo-offset`.
+
+Use tokens quando a mudança é um valor, como uma cor ou um canto, e não uma escolha entre classes.
+
+## Suas próprias classes de componente
+
+Com os entrypoints de código-fonte do Tailwind, todo componente, helper e classe de eixo é um utilitário do Tailwind, então uma classe sua pode carregar a receita inteira:
+
+```css
+@import "@codenhub/styles/tw";
+
+@utility btn-save {
+  @apply btn primary soft sm;
+}
+```
+
+```html
+<button class="btn-save" type="submit">Salvar alterações</button>
+```
+
+`btn-save` se comporta como `btn primary soft sm` escrito por extenso, com estéticas e hover incluídos, e mudar a receita muda todos os botões de salvar. Modificadores que pertencem a um componente, como `.tight` no `.stack` ou `.icon` no `.btn`, também são utilitários, então `@apply btn icon` dá a você um botão de ícone próprio. [Tailwind CSS v4 → Construa seus próprios componentes com `@apply`](../integrating/tailwind.md#construa-seus-próprios-componentes-com-apply) tem as regras, inclusive por que `@utility` é melhor que uma regra simples.
+
+Com o CSS compilado não existe `@apply`. Mantenha a receita num único lugar do outro lado: um partial de template, um componente do seu framework ou uma constante como `const saveButton = "btn primary soft sm"`.
+
+Use a sua própria classe quando a mesma combinação nomeia uma única coisa no seu design, como o botão de salvar ou o card de plano.
+
+## A seguir
+
+A página de [Acessibilidade](../accessibility.md) lista o que o CSS faz pelos seus usuários e o que a sua aplicação ainda deve a eles.

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

@@ -2,7 +2,7 @@
 title: Classes solo
 description: Como aplicar uma estética a um único elemento de outra biblioteca, como um toast ou um dialog, e o que uma classe solo lê e ignora.
 order: 7
-source: 245473b119daf480163d69d38527a11b536fb5a0
+source: c44308a8768737292529d4f93b703b3fa200255a
 ---
 
 # Classes solo
@@ -77,7 +77,9 @@ Sem nenhuma dessas classes, uma classe solo desenha só o material (borda, canto
 ## Como ela vence e quando ela se move
 
 - **Ela vence os estilos da outra biblioteca.** As regras são sem camada e têm uma classe de profundidade, então vencem as regras com camada de um componente, e as de especificidade zero, onde quer que as duas carreguem. Uma regra externa sem camada que seja mais específica, ou igualmente específica e posterior na página, ainda vence. O outro lado disso é que um utilitário do Tailwind no mesmo elemento, como `rounded-none`, perde para a classe solo: use os ajustes dela em vez disso.
-- **Ela só faz clicar uma ação.** Neobrutalism, chunky tile e cyber afundam ao clicar um `button`, um `a[href]`, um `[role="button"]`, um `summary` ou um `input` do tipo botão que não esteja desabilitado. Todo o resto fica parado, então um toast não afunda ao ser clicado. O movimento reduzido remove o deslocamento. O rótulo mais pesado do chunky tile segue a mesma regra.
+- **Ela só faz clicar uma ação.** Neobrutalism, chunky tile e cyber afundam ao clicar um `button`, um `a[href]`, um `[role="button"]`, um `summary` ou um `input` do tipo botão que não esteja desabilitado. Todo o resto fica parado, então um toast não afunda ao ser clicado. O rótulo mais pesado do chunky tile segue a mesma regra.
+- **Ela não mexe no movimento de um contêiner.** Só uma ação recebe a `transition` do clique, e o clique move o elemento pelas propriedades `translate` e `scale`, não por `transform`. Um toast mantém as suas próprias transições e o seu próprio `transform`. Numa ação, a `transition` do clique substitui qualquer uma que o elemento tivesse.
+- **O movimento reduzido mantém o clique e tira o movimento dele.** Com `prefers-reduced-motion: reduce`, neobrutalism, chunky tile e cyber ainda respondem ao clique, mas de imediato: o elemento pousa na sua sombra ou barra, ou encolhe, sem se deslocar até lá.
 
 ## A seguir
 

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

@@ -2,7 +2,7 @@
 title: Temas
 description: Modo claro e escuro, como trocar a paleta pelas cores da marca, como definir uma intenção própria, e cada token de cor, de intenção, fundamental e de fonte com o seu padrão.
 order: 5
-source: ef2e6095c03e7765cb650f720aca10403a70930c
+source: faefe01e9a435bd2630c846cc365f3c8783107df
 ---
 
 # Temas
@@ -30,17 +30,26 @@ Uma tela de configurações com a escolha "Sistema / Claro / Escuro" remove o at
 
 Como isso é resolvido:
 
-- Um seletor de tema define a propriedade CSS `color-scheme` e mais nada. Cada token de cor guarda o seu valor claro e o seu valor escuro ao mesmo tempo, por meio de `light-dark()`, e o `color-scheme` do elemento escolhe um deles.
-- `color-scheme` é herdado, então um seletor aplica o tema a tudo o que está dentro dele. Um seletor em qualquer elemento aplica o tema àquela parte da página: uma barra lateral escura numa página clara é `<aside class="dark">`.
+- Um seletor de tema define a propriedade CSS `color-scheme` e a cor do texto do elemento como `--color-text`. Cada token de cor guarda o seu valor claro e o seu valor escuro ao mesmo tempo, por meio de `light-dark()`, e o `color-scheme` do elemento escolhe um deles.
+- `color-scheme` é herdado, então um seletor aplica o tema a tudo o que está dentro dele. Um seletor em qualquer elemento aplica o tema àquela parte da página: uma barra lateral escura numa página clara é `<aside class="dark">`, e o texto dentro dela recebe a cor de texto do tema escuro.
+- Um seletor não define fundo. Dê você mesmo o fundo da região, como `background: var(--color-background)`. Qualquer classe utilitária ou de componente no mesmo elemento substitui a cor de texto do seletor.
 - O seletor mais próximo vence, em qualquer profundidade. Um card `.light` dentro de uma página `.dark` é claro.
 - Sem seletor, a raiz tem `color-scheme: light dark`, que segue o sistema.
 - Coloque um único tema por elemento. Se um elemento tiver um seletor claro e um escuro, o escuro vence, mas não conte com isso.
-- Definir você mesmo o `color-scheme` num elemento funciona do mesmo jeito, porque ele é a única coisa que a paleta lê. Isso também aplica o tema a partes nativas, como barras de rolagem e o interior de controles de formulário.
+- Definir você mesmo o `color-scheme` num elemento aplica o tema aos tokens do mesmo jeito, porque ele é a única coisa que a paleta lê. Isso também aplica o tema a partes nativas, como barras de rolagem e o interior de controles de formulário. O texto simples dentro dele mantém a cor que herdou até você definir também `color: var(--color-text)`.
 
 Toda cor de componente vem de um token ou de `currentColor`, então os componentes seguem o tema sem regras próprias de modo escuro. As marcas que o pacote desenha, como o visto do checkbox e a seta do select, também usam `currentColor`. Ícones e imagens que você adiciona ficam por sua conta.
 
 `light-dark()` funciona a partir do Chrome 123, Safari 17.5 e Firefox 120. O pacote como um todo exige Firefox 128; veja [Configuração → Requisitos](../setup.md#requisitos).
 
+### Impressão
+
+Uma página é impressa no tema claro, seja qual for o tema que ela mostra na tela. Dentro de `@media print`, a raiz e todo seletor escuro definem `color-scheme: light`, então todo token é resolvido para o seu valor claro, inclusive o de uma barra lateral forçada para o escuro. O papel é claro, e texto escuro sobre ele gasta menos tinta do que uma página escura impressa.
+
+Componentes preenchidos imprimem o seu fundo. Por padrão, o navegador tira os fundos de uma página impressa, o que deixa o texto de contraste de um botão sólido sobre o nada, então todo componente define `print-color-adjust: exact`. A propriedade é herdada, de modo que o conteúdo de um componente também mantém as suas cores.
+
+Um limite: um utilitário `dark:` continua valendo na impressão. Ele casa pelo seletor, não pelo `color-scheme`, então com `<html class="dark">` e `dark:bg-black` num elemento, esse fundo sai preto no papel. Escreva um utilitário `print:` ao lado dele se a página impressa importar.
+
 ### A variante `dark:`
 
 Com os entrypoints de código-fonte do Tailwind (`/tw`), o pacote substitui a variante `dark:` do Tailwind para que os seus próprios utilitários sigam o mesmo tema que os tokens. Um utilitário `dark:` se aplica sob um seletor escuro explícito no elemento ou num ancestral, ou sob uma preferência de sistema escura quando nenhum ancestral define um tema:
@@ -92,6 +101,8 @@ O mesmo padrão funciona para todas as famílias em [Tokens de cor](#tokens-de-c
 
 Os valores precisam ser cores completas: hex, `rgb()`, `oklch()` ou uma variável que você mesmo declarou. Variáveis da paleta do Tailwind, como `--color-teal-700`, existem num build `/tw`, vindas do seu tema do Tailwind, mas o CSS compilado declara só as cores da paleta que o próprio pacote usa. Com CSS compilado, uma referência a qualquer outra variável da paleta fica vazia, e a cor que ela alimenta se perde.
 
+Com `/tw`, você pode descartar os tons do Tailwind que o seu design não usa, para que `bg-red-500` e companhia deixem de ser classes. Mantenha os que o tema lê, `neutral`, `emerald`, `amber`, `rose`, `indigo` e `white`: apagados, as cores construídas a partir deles se perdem sem nenhum erro. [Tailwind CSS v4 → Descarte a paleta do Tailwind](../integrating/tailwind.md#descarte-a-paleta-do-tailwind) tem o bloco para copiar.
+
 ## Sua própria intenção
 
 O pacote entrega seis intenções, `.primary`, `.secondary`, `.success`, `.warning`, `.destructive` e `.info`, mais o padrão, `.neutral`. Para adicionar uma, como uma cor "Beta" para funcionalidades em prévia, escreva uma classe que define os sete slots de intenção. Use cores completas, com `light-dark()` para tudo o que muda entre os temas:
@@ -121,6 +132,8 @@ A classe funciona em tudo o que aceita intenção: botões, badges, campos e tog
 - **Um repouso discreto, sem tom.** Um `.card.soft`, um `.panel` e um `.alert` neutros ficam sobre o tom de fundo discreto, e só reconhecem uma intenção pelas seis classes embutidas. `.card.soft.beta`, `.panel.beta` e `.alert.beta` são desenhados como o neutro: o tom de fundo discreto em vez de um tom violeta. A sua intenção ainda colore o texto e a borda deles.
 - **O tom dos chips.** Uma tecla `.kbd` ou um bloco de código `.beta` mostra o seu tom `--intent-subtle`, mas não os 12% extras de `--intent-color` que uma intenção embutida acrescenta por cima.
 - **Classes solo.** Uma [classe solo](./solo.md) como `.neobrutalism-solo` só aceita intenção das seis classes embutidas, então `.neobrutalism-solo.beta` é desenhado como neutro.
+- **O texto do hint.** Um [`.hint`](./forms.md#mostre-um-erro-de-validação) só aparece no tom legível de uma intenção com as seis classes embutidas, então `.hint.beta` continua na cor secundária.
+- **Linhas de tabela.** Uma linha do corpo muda a cor do texto, da linha divisória e do hover só com as classes de intenção embutidas. `<tr class="beta">` fica igual ao resto da sua tabela.
 
 Se você precisa disso, há dois caminhos:
 
@@ -233,7 +246,7 @@ As quatro sombras `--elevation-*` são para elementos que você mesmo estiliza.
 | `--elevation-sm`           | `0 1px 2px`, `0 1px 3px`                                       | Uma sombra leve para as suas próprias superfícies, como um card.                                                           |
 | `--elevation-md`           | `0 4px 6px -1px`, `0 2px 4px -2px`                             | Uma sombra para os seus próprios elementos elevados, como um menu dropdown.                                                |
 | `--elevation-lg`           | `0 20px 25px -5px`, `0 8px 10px -6px`                          | Uma sombra para as suas próprias sobreposições, como um dialog modal.                                                      |
-| `--focus-ring`             | `--color-primary` com 64% de opacidade                         | Cor do anel de foco do teclado.                                                                                            |
+| `--focus-ring`             | Não definido                                                   | Cor do anel de foco do teclado. Quando não está definido, `--color-primary` com 64% de opacidade, no elemento focado.      |
 | `--focus-ring-offset`      | Não definido                                                   | Distância entre o anel e o elemento. Quando não está definido, o anel fica sobre a borda do elemento em qualquer estética. |
 | `--focus-ring-width`       | `3px`                                                          | Espessura do anel de foco do teclado.                                                                                      |
 | `--motion-duration-fast`   | `120ms`                                                        | O hover de uma linha de tabela.                                                                                            |
@@ -243,7 +256,7 @@ As quatro sombras `--elevation-*` são para elementos que você mesmo estiliza.
 | `--z-popover`              | `40`                                                           | Ordem de empilhamento dos balões de tooltip. Use nos seus próprios popovers para que eles empilhem do mesmo jeito.         |
 | `--breakpoint-xs`          | `30rem`                                                        | O breakpoint responsivo `xs:`. Só num build `/tw`; os entrypoints compilados não o declaram.                               |
 
-Cada sombra `--elevation-*` é composta das partes listadas, cada uma em `--elevation-color`. O passo de hover que intensifica um preenchimento sob o ponteiro é um token de apresentação, `--hover-step`; veja [Personalização](./customizing.md#tokens-de-apresentação).
+Cada sombra `--elevation-*` é composta das partes listadas, cada uma em `--elevation-color`. As quatro sombras são compostas uma única vez, na raiz, então um `--elevation-color` que você define num contêiner não chega até elas: defina-o em `:root`, ou defina o próprio token `--elevation-*` no contêiner. As classes de elevação, como `.card.raised`, leem `--elevation-color` no elemento e seguem o valor de um contêiner, com uma exceção: toda classe de estética define o seu próprio `--elevation-color` na sua região. Um valor definido acima de uma região `.glass` ou `.pixel` não chega dentro dela. Defina-o no próprio elemento da estética, onde o seu utilitário ou CSS sem camada vence a classe, ou num elemento dentro da região. No glass, a sombra de uma superfície é montada no elemento `.glass`, então só um valor definido ali a muda. No `.neobrutalism` a sombra é desenhada na intenção ou na tinta, e o `.cyber` não desenha profundidade, então nenhum dos dois lê o token. O passo de hover que intensifica um preenchimento sob o ponteiro é um token de apresentação, `--hover-step`; veja [Personalização](./customizing.md#tokens-de-apresentação).
 
 ## Fontes
 
@@ -251,14 +264,14 @@ O pacote não entrega arquivos de fonte e não faz requisições de rede. Cada t
 
 | Token            | Lido por                                                                                      | Sem o seu valor                                                                                                                                   |
 | ---------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--font-default` | O reset, em `html` e `body`. Botões e controles de formulário o herdam.                       | `"Segoe UI", system-ui, sans-serif`                                                                                                               |
+| `--font-default` | O reset, em `html` e `body`, e as regiões `.glass` e `.neobrutalism`. Os controles o herdam.  | `"Segoe UI", system-ui, sans-serif`                                                                                                               |
 | `--font-mono`    | Os utilitários de conteúdo `kbd`, `code` e `pre`, e `<kbd>`, `<code>` e `<pre>` com `/native` | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`. Com `/tw`, o valor do seu tema do Tailwind. |
 | `--font-pixel`   | [`.pixel`](./aesthetics.md#pixel) e `.pixel-solo`                                             | Não declarado. Cai numa pilha monoespaçada.                                                                                                       |
 | `--font-rounded` | [`.chunky-tile`](./aesthetics.md#chunky-tile) e `.chunky-tile-solo`                           | Não declarado. Cai em `--font-default` e, depois, numa pilha sans-serif.                                                                          |
 | `--font-cyber`   | [`.cyber`](./aesthetics.md#cyber) e `.cyber-solo`                                             | Não declarado. Cai numa pilha monoespaçada.                                                                                                       |
 | `--font-sketch`  | [`.sketch`](./aesthetics.md#sketch) e `.sketch-solo`                                          | Não declarado. Cai na família `cursive` da plataforma.                                                                                            |
 
-`--font-default` só chega à página pelo reset, que `@codenhub/styles`, `/native`, `/tw`, `/tw/native` e `/tw/reset` incluem. Usando só `/theme` ou `/components`, defina você mesmo o `font-family` no `body`. Os tokens das estéticas são lidos pela classe da própria estética, então funcionam com qualquer entrypoint.
+`--font-default` só chega à página pelo reset, que `@codenhub/styles`, `/native`, `/tw`, `/tw/native` e `/tw/reset` incluem. Usando só `/theme` ou `/components`, defina você mesmo o `font-family` no `body` e defina `--font-default` com a mesma fonte: as regiões `.glass` e `.neobrutalism` definem o próprio `font-family` a partir do token, então uma fonte definida só no `body` não chega dentro delas. Ou defina só o token e escreva `font-family: var(--font-default)` no `body`. Os tokens das estéticas são lidos pela classe da própria estética, então funcionam com qualquer entrypoint.
 
 Para usar uma web font, carregue-a como você carrega qualquer fonte e depois nomeie-a no token. Defina o token no `:root` para a página inteira, ou em qualquer elemento para aquela parte dela: