@codenhub/styles 0.8.0 → 0.9.0

package/docs/pt-BR/setup.md

@@ -2,7 +2,7 @@
 title: Configuração
 description: Instale o pacote, escolha entre CSS compilado ou código-fonte do Tailwind e renderize a estrutura da página de configurações.
 order: 1
-source: 23de7d85d2257d30e13330c7a2e185ca0c642010
+source: 01adaabea85fb4d04139c86d9ad693e23c321d04
 ---
 
 # Configuração
@@ -48,7 +48,7 @@ Escolha um:
 - **Código-fonte do Tailwind CSS v4** (`@codenhub/styles/tw`). Use quando o seu projeto já roda Tailwind v4. O seu build compila o pacote junto com os seus próprios utilitários, então você fica com uma única folha de estilos e a variante `dark:` do Tailwind acompanha o tema do pacote. Exige Tailwind 4.3.2 ou mais recente, abaixo da 5.
 - **Sem bundler.** Referencie o arquivo compilado a partir do `node_modules` ou de uma CDN com uma tag `<link>`; veja [Sem bundler](./integrating/without-a-bundler.md).
 
-Para entregar só as classes que as suas páginas usam num projeto que não usa Tailwind, com bundler ou sem, o comando `build` do pacote lê os seus arquivos e escreve uma folha de estilos com só essas classes, que você importa ou referencia no lugar da compilada; veja [Gere só as classes que você usa](./integrating/without-a-bundler.md#gere-só-as-classes-que-você-usa).
+Para entregar só as classes que as suas páginas usam num projeto que não usa Tailwind, com bundler ou sem, o comando `chs build` do pacote lê os seus arquivos e escreve uma folha de estilos com só essas classes, que você importa ou referencia no lugar da compilada; veja [Gere só as classes que você usa](./integrating/without-a-bundler.md#gere-só-as-classes-que-você-usa).
 
 O seu framework pode precisar de uma configuração própria, como onde fica a folha de estilos global no Next.js ou no Astro. Cada um destes guias cobre uma configuração e depois traz você de volta para cá:
 
@@ -74,7 +74,8 @@ A ordem dos dois imports não importa, porque todo entrypoint declara as [camada
 
 - **Navegadores:** Chrome 123, Safari 17.5 ou Firefox 128 e mais recentes. As cores usam `light-dark()` e `color-scheme` (Firefox 120). O `.input-group` lê o estado inválido e desabilitado de um controle aninhado com `:has()` (Firefox 121). As classes de elevação registram uma propriedade sem herança com `@property` (Firefox 128); sem isso, uma classe de elevação também atingiria os elementos sem classe dentro dela.
 - **Ferramental:** um `@import` com nome de pacote precisa de uma ferramenta que resolva imports de CSS de pacotes pelo mapa `exports` deles. Sem ela, referencie o arquivo compilado pelo caminho ou a partir de uma CDN; veja [Sem bundler](./integrating/without-a-bundler.md). Duas ferramentas comuns precisam de um ajuste, descrito em [Integração → Bundlers que precisam de um empurrão](./integrating/index.md#bundlers-que-precisam-de-um-empurrão): o Parcel e o PostCSS com `postcss-import`.
-- **Tailwind:** 4.3.2 ou mais recente, abaixo da 5, só para os entrypoints de código-fonte `/tw` e o comando `build`, que também precisa do `@tailwindcss/cli`. Os dois são peer dependencies opcionais, então os entrypoints compilados não os instalam.
+- **Tailwind:** 4.3.2 ou mais recente, abaixo da 5, só para os entrypoints de código-fonte `/tw`. É uma peer dependency opcional, então os entrypoints compilados e o comando `chs build` não o instalam.
+- **Node.js:** 24 ou mais recente na máquina que roda o comando `chs build`. As folhas de estilos não precisam dele, mas o pacote o declara como sua engine, então o Yarn 1, e o npm com `engine-strict`, recusam a instalação num Node.js mais antigo.
 - **Sua aplicação:** o pacote não tem JavaScript. HTML semântico, ARIA, comportamento de teclado, gerenciamento de foco, validação e anúncios ficam com você; veja [Acessibilidade](./accessibility.md).
 
 ## Quando nada é estilizado

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: adc344b555d4477cdc37adb6abb4cc07620c6486
+source: 52678f7a4588460f836ce64909526d77e73aa4c6
 ---
 
 # Estéticas
@@ -242,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'>

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: 19c4b12f34054533e56cbc1edbefff908c48a1e7
+source: 160ae54be3321154eca2f1ce22b843aa6b87314c
 ---
 
 # Conteúdo e layout
@@ -164,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

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: 790dec3b1fcf41af4b38aca7c5b8a93135827c1e
+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.
 
@@ -196,7 +196,7 @@ 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`, `--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.
 
@@ -229,9 +229,9 @@ Nomenclatura: `--palette-<intent>-<presentation>-<slot>`, em que `<intent>` é u
 - 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 que `.badge` e `.btn` desenham, sobre um chão transparente: `--palette-success-soft-bg`.
   - `page` é o que `.alert` desenha, sobre a página: `--palette-success-soft-page-bg`.
-  - `subtle` é o que `.kbd`, `.code` e `.pre` desenham, sobre o tom subtle da própria intenção: `--palette-success-soft-subtle-bg`.
+  - `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. `.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.
+  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.
 
@@ -239,20 +239,34 @@ Os valores claros são definidos em `:root`. Os valores escuros se aplicam sob `
 
 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>

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: 00e6a57cfd62f524fde5a550af721786edd7a5dd
+source: 6f92be07a240da16dfa5dc835b36a6981985bea9
 ---
 
 # Formulários
@@ -123,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)):
 

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

@@ -3,7 +3,7 @@ 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: ccdf1949cd4f7688574d6f4fae9ad2cf34465fb3
+source: 07b651854dab2e401235175521adae9360b33df2
 ---
 
 # Uso
@@ -23,7 +23,7 @@ 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:

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: c44308a8768737292529d4f93b703b3fa200255a
+source: ed6b271ec9d3eb83dfc5f098f587d8fc0d5e2ad3
 ---
 
 # Classes solo
@@ -77,7 +77,7 @@ 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 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á.
 

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: faefe01e9a435bd2630c846cc365f3c8783107df
+source: b54ac4e817f35fb4f5f32b7f7022061f9658147a
 ---
 
 # Temas
@@ -67,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
 

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

@@ -47,7 +47,7 @@ Pick one:
 - **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; 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 `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).
+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:
 
@@ -73,7 +73,8 @@ The order of the two imports does not matter, because every entrypoint declares
 
 - **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 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 and the `build` command, which also needs `@tailwindcss/cli`. Both are optional peer dependencies, so the compiled entrypoints do not install them.
+- **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

package/docs/usage/aesthetics.md

@@ -241,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'>

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

@@ -163,6 +163,8 @@ A table draws lines under its header and above its footer. `.ruled` and `.rulele
 
 `--ui-rule` is the token behind both classes, so a container can rule every table inside it: `style="--ui-rule: 100%"` acts like `.ruled`, and `0%` like `.ruleless`.
 
+Two variables and a token tune the rest, on the table or on any element around it. `--table-cell-padding` sets the padding of every cell, so `--table-cell-padding: 0.375rem 0.75rem` makes a dense table. `--table-hover` sets the color of a hovered body row, and `transparent` turns the hover off. `--ui-rule-ink` sets the color of a neutral table's lines; a table with an intent draws them in the intent's color. See [Customizing → Component variables](./customizing.md#component-variables) for the two variables and [Material tokens](./customizing.md#material-tokens) for `--ui-rule-ink`.
+
 The frame around the table is separate: a table has no border by default, and `.edged` adds one. The three choices do not affect each other, so `.data-table.ruleless.edged` is a framed table with no lines inside, and `.data-table.ruled` has every row separated and no frame.
 
 ### Presentation on tables

package/docs/usage/customizing.md

@@ -1,6 +1,6 @@
 ---
 title: Customizing
-description: Lookup for presentation and material tokens, aesthetic knobs, the six public component variables, the generated palette, and the helpers for building your own components.
+description: Lookup for presentation and material tokens, aesthetic knobs, the public component variables, the generated palette, and the helpers for building your own components.
 order: 9
 ---
 
@@ -11,7 +11,7 @@ This is a lookup page for changing the package beyond its classes. [Theming](./t
 - [Presentation tokens](#presentation-tokens): how much of an intent a component shows.
 - [Material tokens](#material-tokens): what a component is made of.
 - [Aesthetic tokens](#aesthetic-tokens): the knobs each aesthetic exposes.
-- [Component variables](#component-variables): the six variables a single component reads.
+- [Component variables](#component-variables): the public variables a single component reads.
 - [Generated palette](#generated-palette): fixed color values for code that cannot load the package.
 - [Composition helpers](#composition-helpers): the classes to build a component of your own from.
 
@@ -195,7 +195,7 @@ Every aesthetic's knobs reach the same way: each knob is _read_ with its default
 </html>
 ```
 
-Knobs and material tokens reach in opposite directions. A knob is read once, at the element with the aesthetic class, and the result passes down. So set a knob on that element or on one above it; set on an element inside the aesthetic, it changes nothing, because the value has already been read.
+Knobs and material tokens reach in opposite directions. A knob is read once, at the element with the aesthetic class, and the result passes down. So set a knob on that element or on one above it; set on an element inside the aesthetic, it changes nothing, because the value has already been read. The sketch outlines are the exception: `--sketch-radius` and its siblings are read again at each position, so they work on any element inside the region too, as [Aesthetics → Sketch](./aesthetics.md#sketch) describes.
 
 `--ui-radius`, `--ui-radius-surface`, and the other material tokens are read by each component as it draws. They work on the element they are set on and everything inside it, which is how you round one card differently from its neighbors without touching the knob. Mind which one a component reads: a surface (`.card`, `.panel`, `.alert`) takes `--ui-radius-surface`, and a control such as `.btn` or `.ipt` takes `--ui-radius`. `style="--ui-radius-surface: 0"` squares one card; `--ui-radius` on that card squares the buttons inside it and leaves the card round.
 
@@ -228,9 +228,9 @@ Naming: `--palette-<intent>-<presentation>-<slot>`, where `<intent>` is one of t
 - A ground qualifier, `page` or `subtle`, before the slot. It appears only on the `bg` and `edge` of `.soft` and `.ghost`, because a `.solid` fill covers its ground and the text color never depends on it.
   - No qualifier is what `.badge` and `.btn` draw, on a transparent ground: `--palette-success-soft-bg`.
   - `page` is what `.alert` draws, on the page: `--palette-success-soft-page-bg`.
-  - `subtle` is what `.kbd`, `.code`, and `.pre` draw, on the intent's own subtle tone: `--palette-success-soft-subtle-bg`.
+  - `subtle` is what `.kbd`, `.code`, `.pre`, and `.tooltip-icon` draw, on the intent's own subtle tone: `--palette-success-soft-subtle-bg`.
 
-  Each value is read from the component itself, so it includes what the component does on its own. A neutral `.alert`, `.kbd`, `.code`, or `.pre` keeps a quieter fill than a neutral `.badge`, and its `neutral-soft-page` and `neutral-soft-subtle` values say so. `.tooltip-bubble` matches none of the three: with no intent it fills with its own tooltip tone, and its edge is solid rather than faded.
+  Each value is read from the component itself, so it includes what the component does on its own. A neutral `.alert`, `.kbd`, `.code`, or `.pre` keeps a quieter fill than a neutral `.badge`, and its `neutral-soft-page` and `neutral-soft-subtle` values say so. A neutral `.tooltip-icon.soft` keeps the badge's fill, so its plate stands further from the page than `neutral-soft-subtle` says. `.tooltip-bubble` matches none of the three: with no intent it fills with its own tooltip tone, and its edge is solid rather than faded.
 
 - A `-hover` suffix, on `bg` and `edge` only, because the text color does not change on hover: `--palette-success-soft-page-bg-hover`. `.alert`, `.kbd`, `.code`, and `.pre` have no hover of their own, so their hover values are what the component draws when you add `box-hover` to it.
 
@@ -238,20 +238,34 @@ Light values are set on `:root`. Dark values apply under `.dark`, `.theme-dark`,
 
 The file does not follow `prefers-color-scheme`. Code that uses the palette on its own already switches themes itself, so it sets one of those classes or attributes.
 
+Nor does it follow `prefers-contrast: more`. Under that setting the package draws each intent's border in its strong tone, so a `-edge` value is fainter than the border the component draws. Code that has to honor the setting picks a stronger color itself.
+
 Three more tokens have no intent, presentation, ground, or hover: `--palette-border`, `--palette-surface`, and `--palette-text`, fixed values of `--color-border`, `--color-surface`, and `--color-text`. They are for things that are not intent-colored, such as a container's border, a dialog's background, and its text.
 
 ## Component variables
 
-Six variables are read by a single component and are supported inputs. Every other variable a component declares, such as `--surface-padding`, `--field-gap`, `--switch-*`, `--table-*`, or `--quote-*`, is internal and may change in any release.
-
-| Variable             | Element        | Value                        | Default                                                                 | Effect                                                                                                | Where to set it                                                                               |
-| -------------------- | -------------- | ---------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| `--progress-value`   | `.progress`    | A percentage, `0%` to `100%` | `0%`                                                                    | Width of the filled part. Not clamped; a value without `%` is invalid and shows empty.                | The bar, or any element around it.                                                            |
-| `--progress-color`   | `.progress`    | A color                      | The intent color                                                        | Color of the filled part and of the `.active` shimmer.                                                | The bar, or any element around it.                                                            |
-| `--progress-surface` | `.progress`    | A color                      | The intent color at the presentation's fill: 12% by default             | Color of the track.                                                                                   | The bar, or any element around it.                                                            |
-| `--progress-edge`    | `.progress`    | A color                      | The intent's border color at the presentation's border: none by default | Color of the track's border. It shows only where the track has a border width, such as with `.edged`. | The bar, or any element around it.                                                            |
-| `--input-group-gap`  | `.input-group` | A length                     | `0.5rem`                                                                | Space between the control and its icon or text.                                                       | The `.input-group` itself. The group declares the default, so a value on a parent is ignored. |
-| `--tooltip-linger`   | `.tooltip`     | A time                       | `300ms`                                                                 | How long the bubble stays after the pointer leaves the trigger.                                       | The `.tooltip` itself. The wrapper declares the default, so a value on a parent is ignored.   |
+Eighteen variables are read by a single component and are supported inputs. A component reads each one where it is drawn, so a value set on the component or on any element around it reaches it, and the nearest value wins: set `--switch-width` on a form and every switch in it takes it. Every other variable a component declares, such as `--surface-padding` or any name that starts with `--_`, is internal and may change in any release.
+
+| Variable                | Element                       | Value                        | Default                                                                 | Effect                                                                                                                    |
+| ----------------------- | ----------------------------- | ---------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `--progress-value`      | `.progress`                   | A percentage, `0%` to `100%` | `0%`                                                                    | Width of the filled part. Not clamped; a value without `%` is invalid and shows empty.                                    |
+| `--progress-color`      | `.progress`                   | A color                      | The intent color                                                        | Color of the filled part and of the `.active` shimmer.                                                                    |
+| `--progress-surface`    | `.progress`                   | A color                      | The intent color at the presentation's fill: 12% by default             | Color of the track.                                                                                                       |
+| `--progress-edge`       | `.progress`                   | A color                      | The intent's border color at the presentation's border: none by default | Color of the track's border. It shows only where the track has a border width, such as with `.edged`.                     |
+| `--input-group-gap`     | `.input-group`                | A length                     | `0.5rem`                                                                | Space between the control and its icon or text.                                                                           |
+| `--input-group-padding` | `.input-group`                | A length                     | `0.75rem`; `0.625rem` with `.sm` and `1rem` with `.lg`                  | Space between the group's edge and its content, on both sides. A value you set replaces the `.sm` and `.lg` steps too.    |
+| `--field-gap`           | `.field`                      | A length                     | `0.35rem`                                                               | Space between a field's label, control, and hint.                                                                         |
+| `--switch-width`        | `.switch`                     | A length                     | `2.5rem`                                                                | Width of the track. The knob keeps its size and travels further.                                                          |
+| `--switch-height`       | `.switch`                     | A length                     | `1.25rem`                                                               | Height of the track. The knob grows with it.                                                                              |
+| `--tooltip-gap`         | `.tooltip`                    | A length                     | `0.5rem`                                                                | Space between the trigger and the bubble.                                                                                 |
+| `--tooltip-linger`      | `.tooltip`, `.tooltip-bubble` | A time                       | `300ms`                                                                 | How long the bubble stays after the pointer leaves the trigger.                                                           |
+| `--divider-color`       | `.divider`                    | A color                      | The intent color                                                        | Color of the line. It wins over an intent class on the divider.                                                           |
+| `--divider-width`       | `.divider`                    | A length                     | The border width: `1px` by default                                      | Thickness of the line.                                                                                                    |
+| `--skeleton-base`       | `.skeleton`                   | A color                      | A faint tint of the intent color                                        | Color the placeholder rests on.                                                                                           |
+| `--skeleton-sheen`      | `.skeleton`                   | A color                      | A stronger tint of the intent color                                     | Color of the highlight that sweeps across it.                                                                             |
+| `--quote-width`         | `.quote`                      | A length                     | Twice the border width plus `1px`: `3px` by default                     | Thickness of the bar on the quotation's starting edge.                                                                    |
+| `--table-cell-padding`  | `.data-table`                 | A `padding` value            | `0.75rem 1rem`                                                          | Padding of every header, body, and footer cell. A padding utility on a cell still wins.                                   |
+| `--table-hover`         | `.data-table`                 | A color                      | A 12% step toward the intent's hover color                              | Background of a body row under the pointer. `transparent` turns it off. Set on a `tbody` or a row, it applies there only. |
 
 ```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>

package/docs/usage/forms.md

@@ -122,7 +122,7 @@ The profile address always starts with the same host, so it is a fixed prefix:
 </div>
 ```
 
-The gap between the control and its adornment is `--input-group-gap`, 0.5rem by default. That suits an icon, but text meant to read as part of the value looks broken with a space after it, so the example sets it to `0`. Set it on the `.input-group` itself: the group declares its own default, so a value set on a parent element has no effect. It is one of six [public component variables](./customizing.md#component-variables).
+The gap between the control and its adornment is `--input-group-gap`, 0.5rem by default. That suits an icon, but text meant to read as part of the value looks broken with a space after it, so the example sets it to `0`. Set it on the group, or once on a form for every group in it. It is one of the [public component variables](./customizing.md#component-variables).
 
 A members search, with an icon at the start (the `ic-lucide-*` classes need `@codenhub/icons` loaded; see [Buttons → Loading icons](./buttons.md#loading-icons)):
 

package/docs/usage/index.md

@@ -22,7 +22,7 @@ Guides, in order:
 Lookup pages:
 
 - [Composing](./composing.md): the complete rules for combining intent, presentation, and elevation, every component's defaults, and which axes each component reads.
-- [Customizing](./customizing.md): presentation and material tokens, aesthetic knobs, the six public component variables, the generated palette, and the composition helpers for building your own components.
+- [Customizing](./customizing.md): presentation and material tokens, aesthetic knobs, the public component variables, the generated palette, and the composition helpers for building your own components.
 - [Content and layout](./content-and-layout.md): every layout helper, the type scale, cards and panels, tables, quotes, code, and keyboard keys.
 
 Once the screen works:

package/docs/usage/solo.md

@@ -76,7 +76,7 @@ With none of those classes, a solo class paints the material alone (edge, corner
 ## How it wins and when it moves
 
 - **It beats the other library's styles.** The rules are unlayered and one class deep, so they win over a component's layered rules, and over its zero-specificity ones, wherever the two load. An unlayered foreign rule that is more specific, or as specific and later in the page, still wins. The other side of this is that a Tailwind utility on the same element, such as `rounded-none`, loses to the solo class: tune it through its knobs instead.
-- **It presses only an action.** Neobrutalism, chunky tile, and cyber press a `button`, `a[href]`, `[role="button"]`, `summary`, or button-type `input` that is not disabled. Anything else stays put, so a toast does not sink when clicked. Chunky tile's heavier label follows the same rule.
+- **It presses only an action.** Neobrutalism, chunky tile, and cyber press a `button`, `a[href]`, `[role="button"]`, `summary`, or button-type `input` unless it carries the `disabled` attribute, `.disabled`, `aria-disabled="true"`, or `data-disabled`. Only the attribute disables a button; the press ignores the other three too, since a page uses them to mark one it handles as disabled. Anything else stays put, so a toast does not sink when clicked. Chunky tile's heavier label follows the same rule.
 - **It leaves a container's motion alone.** Only an action takes the press's `transition`, and the press moves the element through the `translate` and `scale` properties, not `transform`. A toast keeps its own transitions and its own `transform`. On an action, the press's `transition` replaces any the element had.
 - **Reduced motion keeps the press and drops its motion.** Under `prefers-reduced-motion: reduce`, neobrutalism, chunky tile, and cyber still press, but at once: the element lands in its shadow or bar, or shrinks, without travelling there.
 

package/docs/usage/theming.md

@@ -66,7 +66,7 @@ With the Tailwind source entrypoints (`/tw`), the package replaces Tailwind's `d
 
 It differs from the tokens in one case: an explicit theme nested inside the opposite one. A `.light` element inside a `.dark` one has light tokens, because the nearest `color-scheme` wins. But `dark:` matches by selector, and `.dark *` matches every element inside `.dark`, so a `dark:` utility inside that `.light` element still applies. If a page uses both tokens and `dark:` utilities, do not nest opposite themes.
 
-The compiled entrypoints do not define a `dark:` variant; they have no Tailwind build to define it in.
+The compiled entrypoints do not define a `dark:` variant; they have no Tailwind build to define it in. The [`chs build` command](../integrating/without-a-bundler.md#variants) does offer `dark:`, with the same selectors, on the intent, presentation, and modifier classes only.
 
 ## Change the brand color
 

package/docs/usage/tooltips.md

@@ -75,7 +75,7 @@ WCAG 1.4.13 asks three things of content that appears on hover or focus. The pac
 - **Persistent.** It stays open until the pointer and focus leave.
 - **Dismissible.** The user must be able to close it without moving the pointer or focus, usually with Escape. CSS cannot listen for a key, so this part is yours.
 
-To change the linger time, set `--tooltip-linger` on the `.tooltip` element, for example `style="--tooltip-linger: 500ms"`. The wrapper declares its own default, so a value set on a parent of `.tooltip` has no effect. Keep it long enough for the pointer to reach the bubble. It is one of six [public component variables](./customizing.md#component-variables).
+To change the linger time, set `--tooltip-linger` on the `.tooltip` element or on any element around it, for example `style="--tooltip-linger: 500ms"`. Keep it long enough for the pointer to reach the bubble. `--tooltip-gap` sets the space between the trigger and the bubble the same way. Both are [public component variables](./customizing.md#component-variables).
 
 For Escape, write `data-state="closed"` on `.tooltip`: it hides the bubble even while it is hovered or focused. Remove the attribute only when both the pointer and focus have left the tooltip, so the next hover or focus opens it again. Removing it earlier, while the trigger still has focus, makes the message reappear without the user doing anything.