@codenhub/styles 0.7.0 → 0.9.0

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: ed6b271ec9d3eb83dfc5f098f587d8fc0d5e2ad3
 ---
 
 # 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 a menos que tenha o atributo `disabled`, `.disabled`, `aria-disabled="true"` ou `data-disabled`. Só o atributo desabilita um botão; o clique ignora os outros três também, já que uma página os usa para marcar um botão que ela trata como 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: b54ac4e817f35fb4f5f32b7f7022061f9658147a
 ---
 
 # 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:
@@ -58,7 +67,7 @@ Com os entrypoints de código-fonte do Tailwind (`/tw`), o pacote substitui a va
 
 Ela difere dos tokens em um caso: um tema explícito aninhado dentro do tema oposto. Um elemento `.light` dentro de um `.dark` tem tokens claros, porque o `color-scheme` mais próximo vence. Mas `dark:` casa por seletor, e `.dark *` casa com todo elemento dentro de `.dark`, então um utilitário `dark:` dentro daquele elemento `.light` ainda se aplica. Se uma página usa tanto tokens quanto utilitários `dark:`, não aninhe temas opostos.
 
-Os entrypoints compilados não definem uma variante `dark:`; eles não têm um build do Tailwind em que defini-la.
+Os entrypoints compilados não definem uma variante `dark:`; eles não têm um build do Tailwind em que defini-la. O [comando `chs build`](../integrating/without-a-bundler.md#variantes) oferece `dark:`, sim, com os mesmos seletores, só nas classes de intenção, apresentação e modificador.
 
 ## Mude a cor da marca
 
@@ -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:
 

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

@@ -2,7 +2,7 @@
 title: Tooltips
 description: Ajuda de campo que abre no hover e no foco, como ligá-la a leitores de tela e à tecla Escape, e onde um tooltip é cortado.
 order: 4
-source: ea0dd81935063e3e02f0b4d84e51fafab0511cc3
+source: ac236b423d466ebd014b7738dd076ace2cfc50a3
 ---
 
 # Tooltips
@@ -76,7 +76,7 @@ O WCAG 1.4.13 pede três coisas de um conteúdo que aparece no hover ou no foco.
 - **Persistente.** Ele continua aberto até o ponteiro e o foco saírem.
 - **Dispensável.** O usuário precisa conseguir fechá-lo sem mover o ponteiro nem o foco, normalmente com Escape. O CSS não consegue escutar uma tecla, então essa parte é sua.
 
-Para mudar o tempo de permanência, defina `--tooltip-linger` no elemento `.tooltip`, por exemplo `style="--tooltip-linger: 500ms"`. O wrapper declara o seu próprio padrão, então um valor definido num elemento pai do `.tooltip` não tem efeito. Deixe o tempo longo o bastante para o ponteiro alcançar o balão. Ela é uma das seis [variáveis públicas de componente](./customizing.md#variáveis-de-componente).
+Para mudar o tempo de permanência, defina `--tooltip-linger` no elemento `.tooltip` ou em qualquer elemento em volta dele, por exemplo `style="--tooltip-linger: 500ms"`. Deixe o tempo longo o bastante para o ponteiro alcançar o balão. `--tooltip-gap` define o espaço entre o gatilho e o balão da mesma forma. As duas são [variáveis públicas de componente](./customizing.md#variáveis-de-componente).
 
 Para o Escape, escreva `data-state="closed"` no `.tooltip`: isso esconde o balão mesmo enquanto ele está com hover ou com foco. Remova o atributo só quando o ponteiro e o foco tiverem saído do tooltip, para que o próximo hover ou foco o abra de novo. Removê-lo antes, enquanto o gatilho ainda tem foco, faz a mensagem reaparecer sem que o usuário faça nada.
 

package/docs/setup.md

@@ -43,9 +43,11 @@ The complete stylesheet includes the reset, the tokens, the layout and type help
 
 Pick one:
 
-- **Compiled CSS** (`@codenhub/styles`, shown above). Use it unless you have a reason not to. Any bundler that resolves CSS imports from packages works, such as Vite, webpack, or the Tailwind CLI.
+- **Compiled CSS** (`@codenhub/styles`, shown above). Use it unless you have a reason not to. Any bundler that resolves CSS imports from packages works, such as Vite, webpack, or the Tailwind CLI. It ships every class, whether your pages use it or not.
 - **Tailwind CSS v4 source** (`@codenhub/styles/tw`). Use it when your project already runs Tailwind v4. Your build compiles the package with your own utilities, so you get one stylesheet and Tailwind's `dark:` variant matches the package's theme. It needs Tailwind 4.3.2 or newer, below 5.
-- **No bundler.** Link the compiled file from `node_modules` or a CDN with a `<link>` tag.
+- **No bundler.** Link the compiled file from `node_modules` or a CDN with a `<link>` tag; see [Without a bundler](./integrating/without-a-bundler.md).
+
+To ship only the classes your pages use in a project that does not run Tailwind, with a bundler or without one, the package's `chs build` command reads your files and writes a stylesheet with only those classes, which you import or link in place of the compiled one; see [Build only the classes you use](./integrating/without-a-bundler.md#build-only-the-classes-you-use).
 
 Your framework may need its own wiring, such as where the global stylesheet goes in Next.js or Astro. Each of these guides covers one setup and then sends you back here:
 
@@ -70,16 +72,18 @@ The order of the two imports does not matter, because every entrypoint declares
 ## Requirements
 
 - **Browsers:** Chrome 123, Safari 17.5, or Firefox 128 and newer. Colors use `light-dark()` and `color-scheme` (Firefox 120). `.input-group` reads a nested control's invalid and disabled state with `:has()` (Firefox 121). The elevation classes register a non-inheriting property with `@property` (Firefox 128); without it, an elevation class would also reach the unclassed elements inside it.
-- **Tooling:** an `@import` of a package name needs a tool that resolves CSS imports from packages. Without one, link the compiled file by its path or from a CDN; see [Without a bundler](./integrating/without-a-bundler.md).
-- **Tailwind:** 4.3.2 or newer, below 5, only for the `/tw` source entrypoints. It is an optional peer dependency, so the compiled entrypoints do not install it.
+- **Tooling:** an `@import` of a package name needs a tool that resolves CSS imports from packages through their `exports` map. Without one, link the compiled file by its path or from a CDN; see [Without a bundler](./integrating/without-a-bundler.md). Two common tools need a nudge, described in [Integrating → Bundlers that need a nudge](./integrating/index.md#bundlers-that-need-a-nudge): Parcel, and PostCSS with `postcss-import`.
+- **Tailwind:** 4.3.2 or newer, below 5, only for the `/tw` source entrypoints. It is an optional peer dependency, so the compiled entrypoints and the `chs build` command do not install it.
+- **Node.js:** 24 or newer on the machine that runs the `chs build` command. The stylesheets need none, but the package declares it as its engine, so Yarn 1, and npm with `engine-strict`, refuse the install on an older Node.js.
 - **Your application:** the package has no JavaScript. Semantic HTML, ARIA, keyboard behavior, focus management, validation, and announcements are yours; see [Accessibility](./accessibility.md).
 
 ## When nothing is styled
 
 - **The import is missing or not loaded globally.** The classes do nothing until the stylesheet is on the page. Import it once in a stylesheet every page loads, not in a component that may not render.
-- **The package name does not resolve.** A plain `<link>` or a tool without CSS package resolution cannot read `@import "@codenhub/styles"`. Link `node_modules/@codenhub/styles/dist/index.css`, or follow [Without a bundler](./integrating/without-a-bundler.md).
+- **The package name does not resolve.** A plain `<link>` or a tool without CSS package resolution cannot read `@import "@codenhub/styles"`. Link `node_modules/@codenhub/styles/dist/index.css`, or follow [Without a bundler](./integrating/without-a-bundler.md). Parcel and `postcss-import` resolve it with a small change; see [Integrating → Bundlers that need a nudge](./integrating/index.md#bundlers-that-need-a-nudge).
 - **A `/tw` path is loaded without Tailwind.** The `/tw` files are Tailwind source: they contain `@theme`, `@utility`, and `@apply`, which browsers do not understand. Your Tailwind build has to compile them; see [Tailwind CSS v4](./integrating/tailwind.md).
-- **A class built at runtime is missing (Tailwind source only).** Tailwind generates a class only when it finds the name in your source files. A name assembled from strings, such as `` `btn ${tone}` ``, is invisible to that scan. Write full class names, or list them as described in [Tailwind CSS v4](./integrating/tailwind.md).
+- **A focused `/tw` entrypoint is imported without Tailwind before it.** `@codenhub/styles/tw/button` and the other focused component files do not import Tailwind themselves. Imported alone, they compile without an error but produce no component rules. Put `@import "tailwindcss";` before them; see [Tailwind CSS v4 → Using a focused entrypoint](./integrating/tailwind.md#using-a-focused-entrypoint).
+- **A class built at runtime is missing (Tailwind source only).** Tailwind generates a utility class, the package's components such as `.btn` included, only when it finds the name in your source files. A name assembled from strings, such as `` `btn ${tone}` ``, is invisible to that scan. Write full class names, or list them as described in [Tailwind CSS v4](./integrating/tailwind.md).
 
 ### Inlining critical CSS
 
@@ -89,9 +93,9 @@ That does not apply to the `/tw` files. They are Tailwind source, not finished C
 
 ## All entrypoints
 
-Compiled entrypoints are finished CSS. `/tw` entrypoints publish the uncompiled source from `dist/tw`, which a Tailwind v4 build must process. A focused `/tw` component entrypoint includes the theme tokens, so its classes work on their own.
+Compiled entrypoints are finished CSS. `/tw` entrypoints publish the uncompiled source from `tw/`, beside `dist/`, which a Tailwind v4 build must process. A focused `/tw` component entrypoint includes the theme tokens, so its classes need nothing else from the package, but it needs `@import "tailwindcss";` before it; see [Tailwind CSS v4 → Using a focused entrypoint](./integrating/tailwind.md#using-a-focused-entrypoint).
 
-Each import path resolves the same file under the `style`, `import`, and `default` export conditions. A CSS import is a side effect, so make sure your bundler does not drop it as unused.
+Each import path resolves the same file under the `style`, `import`, and `default` export conditions. A `types` condition comes first and names an empty declaration, so TypeScript accepts a side-effect import such as `import "@codenhub/styles";` with `noUncheckedSideEffectImports`, which TypeScript 6 turns on by default. A CSS import is a side effect, so make sure your bundler does not drop it as unused.
 
 | Import path                      | What it contains and what it changes                                                                                                                                                                                                                                                                                 |
 | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -99,7 +103,7 @@ Each import path resolves the same file under the `style`, `import`, and `defaul
 | `@codenhub/styles/theme`         | Compiled tokens and the intent, presentation, elevation, and corner-pattern classes. Sets root theme properties and the light and dark selectors. No reset and no components.                                                                                                                                        |
 | `@codenhub/styles/palette`       | Generated `--palette-*` custom properties: every intent and presentation combination's fill, text, and border color as a flat value, plus flat `border`, `surface`, and `text` colors. For code that cannot use the package itself; see [Customizing → Generated palette](./usage/customizing.md#generated-palette). |
 | `@codenhub/styles/components`    | Compiled tokens, typography helpers, and every component class. Each component carries its own reduced-motion rule, and the closed-`<dialog>` fix comes with `.card`. No reset, no layout or content helpers, no classless mappings.                                                                                 |
-| `@codenhub/styles/native`        | The complete compiled stylesheet plus [classless mappings](#classless-html) for plain HTML elements. Applies the reset and broad element selectors.                                                                                                                                                                  |
+| `@codenhub/styles/native`        | Compiled tokens, typography, layout and content helpers, components, and the package reset, plus [classless mappings](#classless-html) for plain HTML elements. Not Tailwind's Preflight. Applies the reset and broad element selectors.                                                                             |
 | `@codenhub/styles/aesthetics`    | All six compiled aesthetics, `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber`, and `.sketch`, each with its `-solo` class. No tokens or components of its own; import it in any order.                                                                                                                  |
 | `@codenhub/styles/aesthetics/*`  | One compiled aesthetic and its solo class: `/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber`, or `/sketch`.                                                                                                                                                                                              |
 | `@codenhub/styles/tw`            | Source version of the complete stylesheet. Imports Tailwind itself, then the theme, typography, helpers, components, and reset. Same global rules.                                                                                                                                                                   |
@@ -111,9 +115,9 @@ Each import path resolves the same file under the `style`, `import`, and `defaul
 | `@codenhub/styles/tw/feedback`   | Source theme plus `.alert`, `.badge`, `.skeleton`, and `.progress`, with their animations.                                                                                                                                                                                                                           |
 | `@codenhub/styles/tw/tooltip`    | Source theme plus the tooltip classes.                                                                                                                                                                                                                                                                               |
 | `@codenhub/styles/tw/reset`      | Source theme, typography helpers, and the global reset. Changes the root, body, and elements, and sets selection, motion, focus, scrollbar, and forced-colors rules.                                                                                                                                                 |
-| `@codenhub/styles/tw/native`     | Source version of `/native`: everything plus the reset and the classless mappings. The broadest global effect.                                                                                                                                                                                                       |
+| `@codenhub/styles/tw/native`     | Source version of `/native`: everything but Tailwind's Preflight, plus the package reset and the classless mappings. The broadest global effect.                                                                                                                                                                     |
 | `@codenhub/styles/tw/typography` | Source theme plus the typography helpers. Sets the theme selectors; no reset, no classless mappings.                                                                                                                                                                                                                 |
-| `@codenhub/styles/tw/utilities`  | Source theme and typography plus the layout and content helpers. Lists the package's class names so Tailwind always generates them.                                                                                                                                                                                  |
+| `@codenhub/styles/tw/utilities`  | Source theme and typography plus the layout and content helpers.                                                                                                                                                                                                                                                     |
 | `@codenhub/styles/tw/aesthetics` | All six aesthetics as source. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber`, and `/sketch` publish one each. Plain CSS with no theme or reset side effects.                                                                                                                            |
 | `@codenhub/styles/package.json`  | The package manifest, as JSON. For tools that read the installed version or export map; it is not a stylesheet.                                                                                                                                                                                                      |
 
@@ -121,12 +125,12 @@ Do not import two entrypoints that overlap, such as `@codenhub/styles` and `@cod
 
 ## Classless HTML
 
-`@codenhub/styles/native` styles plain HTML elements without any classes, for content you cannot add classes to, such as Markdown output or a CMS body. It is the complete stylesheet plus these mappings:
+`@codenhub/styles/native` styles plain HTML elements without any classes, for content you cannot add classes to, such as Markdown output or a CMS body. It holds everything the complete stylesheet does except Tailwind's Preflight, the browser-default reset that `@codenhub/styles` brings with Tailwind. The package's own reset is in it: box sizing, the root background, text color and font, the margin reset on headings, paragraphs, and lists, selection colors, focus rings, and the reduced-motion rule. Then it adds these mappings:
 
 | Element                                                                                                                                        | Styled as                                                                          |
 | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `h1`, `h2`, `h3`, `h4`, `h5` and `h6`                                                                                                          | `.text-title-lg`, `.text-title`, `.text-title-sm`, `.text-label-lg`, `.text-label` |
-| `p`, `li`                                                                                                                                      | `.text-body`                                                                       |
+| `body`                                                                                                                                         | `.text-body`, inherited by paragraphs, list items, and other text                  |
 | `table`                                                                                                                                        | `.data-table`                                                                      |
 | `kbd`, `blockquote`, `q`, `code`, `pre`                                                                                                        | `.kbd`, `.quote`, `.quote-inline`, `.code`, `.pre`                                 |
 | `hr`                                                                                                                                           | `.divider`                                                                         |
@@ -134,6 +138,8 @@ Do not import two entrypoints that overlap, such as `@codenhub/styles` and `@cod
 | `textarea`, `select`                                                                                                                           | `.textarea`, `.select`                                                             |
 | `input type="checkbox"`, `input type="radio"`                                                                                                  | `.checkbox`, `.radio`                                                              |
 | `button`, `input type="button"`, `type="submit"`, `type="reset"`                                                                               | `.btn`                                                                             |
+| `dialog`                                                                                                                                       | `.card.floating`: hidden until opened, then a centered floating card               |
+| `progress`                                                                                                                                     | `.progress`, filled to its `value`; with no `value` it is the indeterminate sweep  |
 
 ```html
 <article>
@@ -151,7 +157,9 @@ What it does not do:
 - **Some input types are left alone:** `file`, `range`, `color`, and `hidden` keep the browser's own look.
 - **No switch.** A checkbox with `role="switch"` is still painted as a checkbox; the mapping does not read roles. A page that needs switches is better served by the class-based stylesheet.
 - **Links keep the text around them.** A link inside a heading stays heading-sized; a link is never styled as a button.
-- **`pre code` is not double-styled.** Code inside a `pre` drops its own background and padding.
+- **Body text is set once.** `p` and `li` take their type from the element they sit in, so a container that sets its own size, weight, or tracking applies it to the Markdown inside it. Controls keep their own tracking: a button, a badge, and a text field print `normal`, whatever the page or the container sets.
+- **Native behavior stays native.** A `<dialog>` opens with `show()` or `showModal()` as usual; the mapping only paints it. A `<progress>` sweep stops under a reduced-motion preference, and in forced colors the bar uses the system colors.
+- **`pre code` is not double-styled.** Code inside a `pre` drops the chip it would draw on its own: background, padding, border, shadow, glow, and clip.
 
 The mappings are global: every matching element on the page is styled, including elements inside third-party widgets. They sit in the `base` [cascade layer](#cascade-layers), so any class beats them. Add an intent or presentation class to a mapped element, such as `<button class="destructive">`, and it applies as it would on `.btn`.
 
@@ -159,18 +167,19 @@ The mappings are global: every matching element on the page is styled, including
 
 Every entrypoint puts its CSS into Tailwind's four cascade layers and declares their order before using one, so the result does not depend on which file loads first:
 
-| Layer        | Holds                                                                                               |
-| ------------ | --------------------------------------------------------------------------------------------------- |
-| `theme`      | Tailwind's theme, the foundation tokens, the theme selectors, and `/palette`.                       |
-| `base`       | The reset and the classless element styles.                                                         |
-| `components` | The intent, presentation, elevation, and aesthetic classes.                                         |
-| `utilities`  | Every component (`.btn`, `.card`, `.ipt`, and so on), next to your own Tailwind utilities.          |
-| _unlayered_  | The forced-colors and reduced-motion overrides, the closed-`<dialog>` fix, and the `-solo` classes. |
+| Layer        | Holds                                                                                                                                                                                                                                                 |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`      | Tailwind's theme, the foundation tokens, the theme selectors, and `/palette`.                                                                                                                                                                         |
+| `base`       | The reset and the classless element styles.                                                                                                                                                                                                           |
+| `components` | The aesthetic classes and the neutral intent values every component starts from.                                                                                                                                                                      |
+| `utilities`  | Every component (`.btn`, `.card`, `.ipt`, and so on), next to your own Tailwind utilities. The intent, presentation, edge, elevation, corner, and size classes sit in `utilities.families`, a sublayer that loses to every other rule in `utilities`. |
+| _unlayered_  | The forced-colors and reduced-motion overrides, the closed-`<dialog>` fix, and the `-solo` classes.                                                                                                                                                   |
 
 What that means when you write your own CSS:
 
-- **Your utility or unlayered CSS beats an intent, presentation, elevation, or aesthetic class** on the same element. `[--ui-fill:50%]` on a `.solid` button, `font-serif` on a `.pixel` region, or `.my-card { --ui-radius: 0 }` in your own stylesheet all apply.
+- **Your utility or unlayered CSS beats an intent, presentation, elevation, or aesthetic class** on the same element. `[--ui-fill:50%]` on a `.solid` button, `font-serif` on a `.pixel` region, or `.my-card { --ui-radius-surface: 0 }` in your own stylesheet all apply.
 - **A component and your utility share the `utilities` layer.** Specificity decides between them, then source order, as between any two utilities. Your unlayered CSS always beats a component.
+- **Your utility beats a component's inner defaults.** `p-0 text-center` on a table cell, `text-sm` on a `.label`, or `px-8` on a `.btn.sm` applies, because the component writes those defaults so that a class on the element wins.
 - **State beats your intent.** A field with `aria-invalid="true"` stays destructive even with an intent utility on it.
 - **The `-solo` classes are unlayered on purpose**, so they beat a third-party component's layered or zero-specificity styles. A more specific unlayered rule, or an equally specific one that loads later, still beats them; see [Solo classes](./usage/solo.md).
 

package/docs/usage/aesthetics.md

@@ -70,8 +70,10 @@ The shadow is cast in the component's own intent, so a success button throws a g
 
 - Content chips take the aesthetic too. A `.kbd` key cap's border changes from the quiet border gray to the ink, and from 1px to 2px, like every other border. A `.code` or `.pre` has no border by default, so it gets none; add `.edged` to give one an ink border.
 - Only `.btn` and an opted-in `.card` respond to hover and press. A card opts in with `.interactive`, or with one of its halves — `.hoverable` for the hover response alone, `.pressable` for the press alone; a plain card, an alert, or a panel is a container and stays put.
-- An alert sits on the offset shadow under this aesthetic, and under no other. An alert is otherwise flat, but here the shadow is a second outline rather than depth, and an alert without it looks unfinished next to everything else. This includes an alert inside a nested `.neobrutalism` region. `.flat` still removes it and `.floating` still doubles it.
+- An alert sits on the offset shadow under this aesthetic, and under no other. An alert is otherwise flat, but here the shadow is a second outline rather than depth, and an alert without it looks unfinished next to everything else. This includes an alert inside a nested `.neobrutalism` region, and an alert that carries the class itself, `.alert.neobrutalism`. `.flat` still removes it and `.floating` still doubles it.
 - The tooltip trigger takes the zero corner like everything else and draws square; `.radio` keeps its circle.
+- Under `prefers-reduced-motion: reduce` the press still happens, but at once: the element lands in its shadow without travelling there. The press is the feedback that a click registered, so only its motion goes.
+- It has no font of its own and sets the theme's, `--font-default`, on the region, so a neobrutalist region nested inside pixel, cyber, sketch, or chunky tile does not take their face. A font you set with `font-family` alone, on `body` or a container, does not reach inside the region; set it in `--font-default` too, as [Theming → Fonts](./theming.md#fonts) describes.
 
 ## Glass
 
@@ -90,8 +92,9 @@ The shadow is cast in the component's own intent, so a success button throws a g
 - Every surface in a glass region is glass, a neutral `.card.soft`, `.panel`, and `.alert` included.
 - The glass is the ground, not the fill. A presentation keeps its whole fill, so a `.solid` button, a checked toggle, and a `.solid` card or table are opaque; the default, `.soft`, and `.ghost` panes are the frosted ones.
 - The blur applies to `.card`, `.panel`, `.alert`, the tooltip bubble, and a default or `.soft` `.data-table` only. Controls stay solid and sit on the glass: a blur under every control of a dense cluster costs a composited layer apiece and reads as noise. Controls still take the aesthetic's radius, border, and shadow.
-- Under `prefers-reduced-transparency: reduce`, glass surfaces drop the blur and become opaque.
-- Buttons and an opted-in `.card` press with the plain `scale(0.97)`; reduced motion turns it off.
+- Under `prefers-reduced-transparency: reduce`, and in forced colors, glass surfaces drop the blur and become opaque. Forced colors replace the colors but keep their transparency, so without this a pane would show the page through the system's background.
+- Buttons and an opted-in `.card` press with the plain `scale(0.97)`; under reduced motion the press still happens, at once.
+- It has no font of its own and sets the theme's, `--font-default`, on the region, as neobrutalism does.
 - Text controls and toggles draw their line in the page's ink at 55% rather than the white hairline, which would erase an unchecked checkbox on a light page. It is `--ui-control-ink`; set it on the region to choose another.
 - A table's frame and rules draw the page's ink at 20%, because the hairline vanishes on the table's plate. It is `--ui-rule-ink`.
 - A table with a `<caption>` blurs behind the caption as well as its rows in Chromium and Safari, whose table box includes the caption, and under `.glass-liquid` the rim and sheen frame the caption too. Firefox keeps the caption off the pane. Label the table from a heading outside it with `aria-labelledby` where that matters.
@@ -110,13 +113,13 @@ The lens is drawn by an SVG filter in `backdrop-filter`, which Chromium renders
 
 **Exceptions:**
 
-- It reaches `.card`, `.panel`, `.alert`, the tooltip bubble, and a default or `.soft` `.data-table`. Controls stay solid, as they do under glass, except a button that asks: see [Liquid buttons](#liquid-buttons).
+- It reaches `.card`, `.panel`, `.alert`, `.surface`, the tooltip bubble, a component of your own built with `@apply surface`, and a default or `.soft` `.data-table`. Controls stay solid, as they do under glass, except a button that asks: see [Liquid buttons](#liquid-buttons).
 - It draws its blur and lens on each surface's `::before` and `::after`, so a surface inside a liquid region cannot carry a `::before` or `::after` of your own. Each surface also becomes a positioned stacking context; a surface you position yourself keeps your placement.
-- Anything else that frosts under glass keeps liquid's light blur and its clearer ground, without the lens or the rim: a bare `<table>` under `/native`, or a component of your own built with `@apply surface`.
+- Anything else that frosts under glass keeps liquid's light blur and its clearer ground, without the lens or the rim: a bare `<table>` under `/native`.
 - The lens is 8px of erosion blurred over 10px on every surface, and 3px blurred over 3.5px on a button; its strength is fixed. A filter cannot read a custom property, so neither is a knob. The corners are, through `--glass-radius` and `--glass-radius-surface`, with larger defaults: a continuous corner reads smaller than a round one of the same radius.
-- A region of another aesthetic nested inside a liquid region, or of plain `.glass`, keeps its own material and takes no layers.
+- The nearest region decides. A region of another aesthetic nested inside a liquid region, or of plain `.glass`, keeps its own material and takes no layers, and a liquid region nested again inside that takes them back.
 - Without `.glass` in scope it changes the corners and nothing else.
-- Under `prefers-reduced-transparency: reduce` the blur and the lens go and the surface is opaque, as under glass. In forced colors the layers draw nothing.
+- Under `prefers-reduced-transparency: reduce`, and in forced colors, the blur and the lens go and the surface is opaque, as under glass.
 - Text sits over a clearer pane than under glass. Over busy content, check that your text still reads: the ground is 30% of the page color, where glass's is 45%.
 
 #### Liquid buttons
@@ -151,8 +154,9 @@ A button is a liquid pane when it carries `.glass-liquid` itself, inside a glass
 **Exceptions:**
 
 - Corners are one unit or nothing. Small chips are square instead of stepped: badges, key caps, inline code, checkboxes, and switches. One unit off each corner of a 24px badge would look like a bite, not a corner.
+- Surfaces are square too: a `.card`, `.panel`, or `.alert` keeps the inset ring but takes no cut and clips nothing. A clip would cut everything inside it, so a tooltip in a card, a shadow, or a focus ring there would be trimmed.
 - Tables, progress bars, and skeletons are square too. A table takes no cut because in Chromium and WebKit its box includes its caption, and the cut would land on the caption instead of the rows. Progress bars and skeletons take only the square corner.
-- A `.pre` code block is stepped like a card. It has no border by default, so the cut shows with no outline around it.
+- A `.pre` code block is stepped like a button. It has no border by default, so the cut shows with no outline around it.
 - The outline is an inset ring, because a clip removes a real border — and the focus ring, for the same reason, is a second inset layer rather than an outline. Both are the element's own edge rather than a shadow, so the border answers `.edged` and `.edgeless` the way a border does: a `.edgeless` badge and a `.solid` button draw none, a `.edged` card draws one, and a field keeps one whatever a container asks for.
 - The inset focus ring carries a 2px line of the page color inside it. The ring is the primary color, so on a `.solid.primary` button it would be drawn over its own color; the line is what shows there.
 - In forced colors the ring and the cut both go, because the system removes every box shadow: components draw a real 2px border and square corners, and `.pixel-solo` an inward outline.
@@ -176,7 +180,7 @@ The bar is a darker shade of the element's own color rather than a shadow under
 
 **Exceptions:**
 
-- Only what the registry rests above zero sits on a bar — buttons and cards. A badge, chip, field, or tooltip is flat until it asks for depth with `.raised`, and `.flat` takes the bar off anything:
+- Only buttons and cards sit on a bar, because they are the components resting above zero elevation. A badge, chip, field, or tooltip is flat until it asks for depth with `.raised`, and `.flat` takes the bar off anything:
 
   ```html
   <div class="card soft edgeless info flat">Promo panel, deliberately flat</div>
@@ -186,7 +190,8 @@ The bar is a darker shade of the element's own color rather than a shadow under
 - Labels are drawn heavier and slightly tracked, through `--ui-label-weight` and `--ui-label-tracking`, so your own `font-*` or `tracking-*` utility still wins. It reaches `.btn` and `.badge`, and a bare `<button>` only where `/native` styles it. Casing is left alone: how a label is worded is the application's decision, so if you want uppercase buttons, write that rule in your own stylesheet.
 - `.card.interactive` presses like a `.btn`, so a chunky answer tile drops onto its bar on click; `.card.pressable` gets the same press on its own. A plain `.card` stays put.
 - The shipped `.primary` is near-black on a light page and near-white on a dark one, and the bar is always mixed toward black. On a light page, a primary button's bar is almost invisible against its near-black face (measured `1.04:1`). On a dark page, the near-white face against the same bar reads well (`2.48:1`). Give `.primary` a hue of its own if it is the call to action and needs the depth cue in both themes.
-- Depth in this aesthetic is the bar, never a blurred drop shadow. Anything the registry rests flat sits flush on the page.
+- Under `prefers-reduced-motion: reduce` the press still happens, but at once, as under neobrutalism.
+- Depth in this aesthetic is the bar, never a blurred drop shadow. Anything that rests flat sits flush on the page.
 - Controls draw a heavier gray than the tiles around them, `neutral-600` in light and `neutral-400` in dark, through `--ui-control-ink`, so a field reads as a field inside a tile.
 
 ## Cyber
@@ -236,7 +241,7 @@ Hand-drawn outlines: controls take long, uneven elliptical corners, and cards, p
 
 The 1px ink line is solid; checkboxes, dividers, and table rules are dashed. `--ui-line-style: dashed` dashes any other component, and `--ui-rule-style: solid` puts a divider or table back to solid. The 2px hard shadow is a small neutral depth cue.
 
-`--sketch-radius`, `--sketch-radius-surface`, and `--sketch-radius-pill` replace the control, surface, and pill-button outlines. Set one and every position takes that one outline. To shape a single component instead, set `--ui-radius` (`--ui-radius-surface` on a surface) on it.
+`--sketch-radius`, `--sketch-radius-surface`, and `--sketch-radius-pill` replace the control, surface, and pill-button outlines. Set one on the region or on any element inside it, and every position below takes that one outline, on the components that rotate: `.btn`, `.ipt`, `.textarea`, `.select`, `.input-group`, `.pre`, and `.tooltip-bubble` for the control outline, and `.card`, `.panel`, `.alert`, and `.data-table` for the surface one. Any other element that takes a control or surface outline, such as a `.skeleton` or a bare control under `/native`, takes the outline the region itself resolved, so a knob set between the region and that element does not reach it; set the knob on the region instead. Chips, such as `.badge` and `.checkbox`, take small outlines of their own that no knob changes. To shape a single component instead, set `--ui-radius` (`--ui-radius-surface` on a surface) on it.
 
 ```html
 <section class="sketch" style='--font-sketch: "Comic Sans MS", cursive'>
@@ -259,11 +264,12 @@ The dashed button is `ghost edged` because a filled button has no separate line
 
 **Exceptions:**
 
-- Sketch names components to rotate their outlines, so its outlines reach only this package's components; a region of another aesthetic nested inside a sketch region keeps that aesthetic's corners.
+- Sketch names components to rotate their outlines, so its outlines reach only this package's components; a region of another aesthetic nested inside a sketch region keeps that aesthetic's corners. The nearest region decides, so a sketch region nested again inside that one rotates.
 - Chips, such as checkboxes, key caps, code, badges, switches, and progress bars, rotate through small uneven outlines set in `--ui-radius-tight`. Set that token on a chip to choose its shape.
 - A `.btn.pill` takes a rounded pill bounded to its own height, so a wide one does not become an oval. Badges, progress bars, and switches take their chip outline. Radios and the tooltip icon stay circles, slightly uneven, so a radio is never mistaken for a checkbox. An explicit `--ui-radius-pill` on an element still wins.
 - `--font-sketch` is yours to supply. The package ships no handwriting font and falls back to the platform `cursive` family.
-- Buttons press with the plain `scale(0.97)`; reduced motion turns it off.
+- Buttons press with the plain `scale(0.97)`; under reduced motion the press still happens, at once.
+- With [`/native`](../setup.md#classless-html), a plain `<hr>`, `<table>`, and checkbox take the dashed accents of `.divider`, `.data-table`, and `.checkbox`.
 - Forced-colors mode draws the dashed accents solid, like every other material line.
 
 ## Solo classes

package/docs/usage/buttons.md

@@ -39,7 +39,11 @@ A button accepts one intent, one fill class, and one edge class, all optional. W
 
 A **neutral** button never fills completely. Its color is the page's own text color, so a full fill would be a black or white block, the loudest thing on the page for the intent that means nothing in particular. A neutral `.solid` button stops at a 20% fill instead, a quiet gray a step darker than `.soft`. Every named intent fills to 100%.
 
-On hover, a button's fill deepens by `--hover-step` (14%), so a `.ghost` button picks up a tint and a `.solid` one changes to its intent's hover color. On press it scales down slightly (`scale(0.97)`); an [aesthetic](./aesthetics.md) can replace that with its own press, and a user's reduced-motion preference turns it off.
+On hover, a button's fill deepens by `--hover-step` (14%), so a `.ghost` button picks up a tint and a `.solid` one changes to its intent's hover color. On press it scales down slightly (`scale(0.97)`); an [aesthetic](./aesthetics.md) can replace that with its own press, and under a user's reduced-motion preference it still happens, at once.
+
+A neutral `.soft` or `.ghost` button inside a filled surface, such as a Cancel button in a `.card.solid.primary` or an `.alert.solid.destructive`, prints its label and its line in that surface's text color, so it stays readable on the fill. A text field does the same. A button with an intent keeps its own color, and so does a neutral `.solid` one, which rests on a fill of its own.
+
+When a filled button has keyboard focus, a 2px line of the page color runs inside the focus ring, so the ring stays visible on a button filled with the same color, such as `.solid.primary`.
 
 ## Sizes and shapes
 

package/docs/usage/composing.md

@@ -22,6 +22,9 @@ This is a lookup page. [Building a screen](../concepts.md) introduces intent, pr
 - **Aesthetics and [material tokens](./customizing.md#material-tokens) pass down** the same way.
 - **Intent does not pass down.** `.primary` and the other intent classes color only the element they are on. A container that silently recolored everything inside it would turn a red danger-zone card's neutral Cancel button red. `.neutral` names the default; use it where an element would otherwise take an intent, such as a table row inside a `.success` table. See [Theming → Intent tokens](./theming.md#intent-tokens).
 - **Elevation does not pass down.** `.raised` lifts only the element it is on; see [Elevation](#elevation).
+- **Size does not pass down.** `.sm` and `.lg` resize only the button or control they are on, so a `.sm` form does not shrink the fields inside it. See [Buttons → Sizes and shapes](./buttons.md#sizes-and-shapes) and [Forms → Sizes](./forms.md#sizes).
+
+With the Tailwind source entrypoints, every class above except the aesthetic classes is also a Tailwind utility, so variants such as `md:lg` and `dark:solid` work and `@apply btn primary soft sm` gives one class of yours the whole combination. The modifiers documented with each component, such as `.tight` or `.interactive`, are utilities too, so `@apply stack tight` works. The aesthetic classes, such as `.glass`, stay plain CSS, so `@apply glass` and `md:glass` do not work; write the class in the markup. See [Tailwind CSS v4 → Build your own components with `@apply`](../integrating/tailwind.md#build-your-own-components-with-apply), and [Presets](./presets.md) for when to reach for it.
 
 ## Component defaults
 
@@ -77,6 +80,7 @@ A neutral `.card.soft`, `.panel`, and `.alert` show no tint at rest. They use th
 
 - A `.card.soft` with `.interactive` or `.hoverable` shows the tint on hover. A plain `.card.soft` and a `.panel` have no hover state.
 - With one of the six built-in intents, all three keep the ordinary 12% tint, and a card deepens it on hover. An intent you defined yourself is treated as neutral here; see [Theming → Your own intent](./theming.md#your-own-intent).
+- The presentation can come from the element or from a container: `<div class="soft"><div class="card">` rests like `.card.soft`, and a `.ghost` or `.solid` container gives a `.panel` or `.alert` the plate its own class would.
 - A `.badge` keeps its 12% tint even when neutral. It has no border, so without the tint it would disappear into the text around it.
 
 `.kbd`, `.code`, and `.pre` work differently. They rest on their intent's subtle tone, `--intent-subtle`, which is `--color-surface` for neutral, and a built-in intent adds 12% of its color over it. An intent you defined yourself shows its own `--intent-subtle` tint without that extra 12%.
@@ -138,7 +142,7 @@ Which classes change each component. "Material" is what an [aesthetic](./aesthet
 | `.progress`                                     | Track fill, border, and border width. The filled part is always the full intent color. |
 | `.skeleton`, `.divider`                         | Intent only.                                                                           |
 
-State and modifier classes such as `.interactive`, `.hoverable`, `.pressable`, `.p-sm`, and `.vertical` are documented with their component. An invalid control is marked with `aria-invalid="true"`, not a class; see [Forms](./forms.md#show-a-validation-error).
+State and modifier classes such as `.interactive`, `.hoverable`, `.pressable`, `.p-sm`, and `.vertical` are documented with their component. Each takes effect on the components that read it, and on `/tw` they are utilities, so `@apply card interactive` works. An invalid control is marked with `aria-invalid="true"`, not a class; see [Forms](./forms.md#show-a-validation-error).
 
 ## Elevation