@codenhub/styles 0.7.0 → 0.9.0

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: 52678f7a4588460f836ce64909526d77e73aa4c6
 ---
 
 # 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
@@ -237,7 +242,7 @@ Contornos desenhados à mão: os controles recebem cantos elípticos longos e ir
 
 A linha de tinta de 1px é sólida; checkboxes, divisores e linhas divisórias de tabela são tracejados. `--ui-line-style: dashed` deixa tracejado qualquer outro componente, e `--ui-rule-style: solid` volta um divisor ou uma tabela para sólido. A sombra dura de 2px é uma indicação de profundidade pequena e neutra.
 
-`--sketch-radius`, `--sketch-radius-surface` e `--sketch-radius-pill` substituem os contornos de controle, de superfície e de botão pill. Defina um deles e todas as posições recebem aquele contorno. Para dar forma a um único componente, defina `--ui-radius` (`--ui-radius-surface` numa superfície) nele.
+`--sketch-radius`, `--sketch-radius-surface` e `--sketch-radius-pill` substituem os contornos de controle, de superfície e de botão pill. Defina um deles na região ou em qualquer elemento dentro dela, e todas as posições abaixo recebem aquele contorno, nos componentes que rotacionam: `.btn`, `.ipt`, `.textarea`, `.select`, `.input-group`, `.pre` e `.tooltip-bubble` para o contorno de controle, e `.card`, `.panel`, `.alert` e `.data-table` para o de superfície. Qualquer outro elemento que recebe um contorno de controle ou de superfície, como um `.skeleton` ou um controle sem classe sob `/native`, recebe o contorno que a própria região resolveu, então um ajuste definido entre a região e esse elemento não o alcança; defina-o na região. Os chips, como `.badge` e `.checkbox`, recebem contornos pequenos próprios que nenhum ajuste muda. Para dar forma a um único componente, defina `--ui-radius` (`--ui-radius-surface` numa superfície) nele.
 
 ```html
 <section class="sketch" style='--font-sketch: "Comic Sans MS", cursive'>
@@ -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: 160ae54be3321154eca2f1ce22b843aa6b87314c
 ---
 
 # 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:
@@ -160,6 +164,8 @@ Uma tabela desenha linhas embaixo do cabeçalho e em cima do rodapé. `.ruled` e
 
 `--ui-rule` é o token por trás das duas classes, então um contêiner pode adicionar linhas divisórias a todas as tabelas dentro dele: `style="--ui-rule: 100%"` funciona como `.ruled`, e `0%` como `.ruleless`.
 
+Duas variáveis e um token ajustam o resto, na tabela ou em qualquer elemento em volta dela. `--table-cell-padding` define o padding de cada célula, então `--table-cell-padding: 0.375rem 0.75rem` deixa a tabela densa. `--table-hover` define a cor de uma linha do corpo sob o ponteiro, e `transparent` desliga o hover. `--ui-rule-ink` define a cor das linhas de uma tabela neutra; uma tabela com intenção as desenha na cor da intenção. Veja [Personalização → Variáveis de componente](./customizing.md#variáveis-de-componente) para as duas variáveis e [Tokens de material](./customizing.md#tokens-de-material) para `--ui-rule-ink`.
+
 A moldura em volta da tabela é separada: uma tabela não tem borda por padrão, e `.edged` adiciona uma. As três escolhas não afetam umas às outras, então `.data-table.ruleless.edged` é uma tabela com moldura e sem linhas dentro, e `.data-table.ruled` tem todas as linhas separadas e nenhuma moldura.
 
 ### Apresentação em tabelas
@@ -212,4 +218,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.

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

@@ -1,8 +1,8 @@
 ---
 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.
+description: Consulta sobre tokens de apresentação e de material, ajustes das estéticas, as variáveis públicas de componente, a paleta gerada e os helpers para criar os seus próprios componentes.
 order: 9
-source: aa87391c5599ddfda913abcce9d17d9686345906
+source: bbbce0739bf5070955b0e2a96bdda84090c37195
 ---
 
 # Personalização
@@ -12,7 +12,7 @@ Esta é uma página de consulta para mudar o pacote além das suas classes. [Tem
 - [Tokens de apresentação](#tokens-de-apresentação): quanto de uma intenção um componente mostra.
 - [Tokens de material](#tokens-de-material): do que um componente é feito.
 - [Tokens de estética](#tokens-de-estética): os ajustes que cada estética expõe.
-- [Variáveis de componente](#variáveis-de-componente): as seis variáveis que um único componente lê.
+- [Variáveis de componente](#variáveis-de-componente): as variáveis públicas que um único componente lê.
 - [Paleta gerada](#paleta-gerada): valores de cor fixos para código que não pode carregar o pacote.
 - [Helpers de composição](#helpers-de-composição): as classes a partir das quais você monta um componente seu.
 
@@ -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`.
 
@@ -196,9 +196,9 @@ Os ajustes de todas as estéticas alcançam os elementos da mesma forma: cada aj
 </html>
 ```
 
-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.
+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. Os contornos do sketch são a exceção: `--sketch-radius` e os seus irmãos são lidos de novo em cada posição, então funcionam também em qualquer elemento dentro da região, como [Estéticas → Sketch](./aesthetics.md#sketch) descreve.
 
-`--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,29 +227,46 @@ 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`, `.pre` e `.tooltip-icon` 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. Um `.tooltip-icon.soft` neutro mantém o preenchimento do badge, então a sua placa se afasta mais da página do que `neutral-soft-subtle` indica. `.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.
 
 O arquivo não segue `prefers-color-scheme`. Código que usa a paleta sozinha já troca de tema por conta própria, então ele define uma dessas classes ou atributos.
 
+Ele também não segue `prefers-contrast: more`. Com essa preferência, o pacote desenha a borda de cada intenção no seu tom forte, então um valor `-edge` fica mais fraco que a borda que o componente desenha. Código que precisa respeitar a preferência escolhe uma cor mais forte por conta própria.
+
 Mais três tokens não têm intenção, apresentação, chão nem hover: `--palette-border`, `--palette-surface` e `--palette-text`, valores fixos de `--color-border`, `--color-surface` e `--color-text`. Eles servem para o que não é colorido por intenção, como a borda de um contêiner, o fundo de um dialog e o seu texto.
 
 ## Variáveis de componente
 
-Seis variáveis são lidas por um único componente e são entradas suportadas. Todas as outras variáveis que um componente declara, como `--surface-padding`, `--field-gap`, `--switch-*`, `--table-*` ou `--quote-*`, são internas e podem mudar em qualquer versão.
-
-| Variável             | Elemento       | Valor                             | Padrão                                                                  | Efeito                                                                                          | Onde definir                                                                                     |
-| -------------------- | -------------- | --------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `--progress-value`   | `.progress`    | Uma porcentagem, de `0%` a `100%` | `0%`                                                                    | Largura da parte preenchida. Não é limitada; um valor sem `%` é inválido e aparece vazio.       | Na barra ou em qualquer elemento em volta dela.                                                  |
-| `--progress-color`   | `.progress`    | Uma cor                           | A cor da intenção                                                       | Cor da parte preenchida e do brilho de `.active`.                                               | Na barra ou em qualquer elemento em volta dela.                                                  |
-| `--progress-surface` | `.progress`    | Uma cor                           | A cor da intenção no preenchimento da apresentação: 12% por padrão      | Cor do trilho.                                                                                  | Na barra ou em qualquer elemento em volta dela.                                                  |
-| `--progress-edge`    | `.progress`    | Uma cor                           | A cor de borda da intenção na borda da apresentação: nenhuma por padrão | Cor da borda do trilho. Ela só aparece onde o trilho tem espessura de borda, como com `.edged`. | Na barra ou em qualquer elemento em volta dela.                                                  |
-| `--input-group-gap`  | `.input-group` | Um comprimento                    | `0.5rem`                                                                | Espaço entre o controle e o seu ícone ou texto.                                                 | No próprio `.input-group`. O grupo declara o padrão, então um valor num elemento pai é ignorado. |
-| `--tooltip-linger`   | `.tooltip`     | Um tempo                          | `300ms`                                                                 | Quanto tempo o balão fica depois que o ponteiro sai do gatilho.                                 | No próprio `.tooltip`. O wrapper declara o padrão, então um valor num elemento pai é ignorado.   |
+Dezoito variáveis são lidas por um único componente e são entradas suportadas. Um componente lê cada uma onde é desenhado, então um valor definido no componente ou em qualquer elemento em volta dele chega até ele, e o valor mais próximo vence: defina `--switch-width` num formulário e todos os switches dentro dele o recebem. Todas as outras variáveis que um componente declara, como `--surface-padding` ou qualquer nome que comece com `--_`, são internas e podem mudar em qualquer versão.
+
+| Variável                | Elemento                      | Valor                             | Padrão                                                                  | Efeito                                                                                                                                 |
+| ----------------------- | ----------------------------- | --------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `--progress-value`      | `.progress`                   | Uma porcentagem, de `0%` a `100%` | `0%`                                                                    | Largura da parte preenchida. Não é limitada; um valor sem `%` é inválido e aparece vazio.                                              |
+| `--progress-color`      | `.progress`                   | Uma cor                           | A cor da intenção                                                       | Cor da parte preenchida e do brilho de `.active`.                                                                                      |
+| `--progress-surface`    | `.progress`                   | Uma cor                           | A cor da intenção no preenchimento da apresentação: 12% por padrão      | Cor do trilho.                                                                                                                         |
+| `--progress-edge`       | `.progress`                   | Uma cor                           | A cor de borda da intenção na borda da apresentação: nenhuma por padrão | Cor da borda do trilho. Ela só aparece onde o trilho tem espessura de borda, como com `.edged`.                                        |
+| `--input-group-gap`     | `.input-group`                | Um comprimento                    | `0.5rem`                                                                | Espaço entre o controle e o seu ícone ou texto.                                                                                        |
+| `--input-group-padding` | `.input-group`                | Um comprimento                    | `0.75rem`; `0.625rem` com `.sm` e `1rem` com `.lg`                      | Espaço entre a borda do grupo e o seu conteúdo, dos dois lados. Um valor que você definir substitui também os passos de `.sm` e `.lg`. |
+| `--field-gap`           | `.field`                      | Um comprimento                    | `0.35rem`                                                               | Espaço entre o rótulo, o controle e a dica de um campo.                                                                                |
+| `--switch-width`        | `.switch`                     | Um comprimento                    | `2.5rem`                                                                | Largura do trilho. O botão mantém o seu tamanho e percorre uma distância maior.                                                        |
+| `--switch-height`       | `.switch`                     | Um comprimento                    | `1.25rem`                                                               | Altura do trilho. O botão cresce junto com ele.                                                                                        |
+| `--tooltip-gap`         | `.tooltip`                    | Um comprimento                    | `0.5rem`                                                                | Espaço entre o gatilho e o balão.                                                                                                      |
+| `--tooltip-linger`      | `.tooltip`, `.tooltip-bubble` | Um tempo                          | `300ms`                                                                 | Quanto tempo o balão fica depois que o ponteiro sai do gatilho.                                                                        |
+| `--divider-color`       | `.divider`                    | Uma cor                           | A cor da intenção                                                       | Cor da linha. Ela prevalece sobre uma classe de intenção no divisor.                                                                   |
+| `--divider-width`       | `.divider`                    | Um comprimento                    | A espessura de borda: `1px` por padrão                                  | Espessura da linha.                                                                                                                    |
+| `--skeleton-base`       | `.skeleton`                   | Uma cor                           | Um tom suave da cor da intenção                                         | Cor sobre a qual o placeholder repousa.                                                                                                |
+| `--skeleton-sheen`      | `.skeleton`                   | Uma cor                           | Um tom mais forte da cor da intenção                                    | Cor do brilho que passa por cima dele.                                                                                                 |
+| `--quote-width`         | `.quote`                      | Um comprimento                    | O dobro da espessura de borda mais `1px`: `3px` por padrão              | Espessura da barra na borda inicial da citação.                                                                                        |
+| `--table-cell-padding`  | `.data-table`                 | Um valor de `padding`             | `0.75rem 1rem`                                                          | Padding de cada célula do cabeçalho, do corpo e do rodapé. Um utilitário de padding numa célula ainda vence.                           |
+| `--table-hover`         | `.data-table`                 | Uma cor                           | Um passo de 12% em direção à cor de hover da intenção                   | Fundo de uma linha do corpo sob o ponteiro. `transparent` o desliga. Definido num `tbody` ou numa linha, vale só ali.                  |
 
 ```html
 <div class="progress" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" style="--progress-value: 92%; --progress-color: var(--color-warning)"></div>
@@ -264,7 +281,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 +304,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: 6f92be07a240da16dfa5dc835b36a6981985bea9
 ---
 
 # 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:
 
@@ -98,7 +123,7 @@ O endereço do perfil sempre começa com o mesmo host, então ele é um prefixo
 </div>
 ```
 
-O espaçamento entre o controle e o adorno é `--input-group-gap`, 0.5rem por padrão. Isso funciona bem para um ícone, mas um texto que deve parecer parte do valor fica estranho com um espaço depois dele, então o exemplo define o valor como `0`. Defina-o no próprio `.input-group`: o grupo declara o seu próprio padrão, então um valor definido num elemento pai não tem efeito. Ela é uma das seis [variáveis públicas de componente](./customizing.md#variáveis-de-componente).
+O espaçamento entre o controle e o adorno é `--input-group-gap`, 0.5rem por padrão. Isso funciona bem para um ícone, mas um texto que deve parecer parte do valor fica estranho com um espaço depois dele, então o exemplo define o valor como `0`. Defina-o no grupo, ou uma única vez num formulário para todos os grupos dentro dele. Ela é uma das [variáveis públicas de componente](./customizing.md#variáveis-de-componente).
 
 Uma busca de membros, com um ícone no início (as classes `ic-lucide-*` precisam do `@codenhub/icons` carregado; veja [Botões → Carregando ícones](./buttons.md#carregando-ícones)):
 
@@ -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: 07b651854dab2e401235175521adae9360b33df2
 ---
 
 # 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:
 
@@ -23,7 +23,11 @@ Guias, em ordem:
 Páginas de consulta:
 
 - [Composição](./composing.md): as regras completas para combinar intenção, apresentação e elevação, os padrões de cada componente e quais eixos cada componente lê.
-- [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.
+- [Personalização](./customizing.md): tokens de apresentação e de material, ajustes de estética, as 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.