@codenhub/styles 0.7.0 → 0.9.0

package/docs/es/integrating/index.md

@@ -3,7 +3,7 @@ title: Visión general
 description: Cómo se carga la hoja de estilos en el build de un framework, y qué guía seguir.
 group: Integración
 order: 2
-source: f2ccb27bbdbe15278726278864c01a586505eb16
+source: 2028acef66a8ab3659cef35e08ecc0db1de7bdeb
 ---
 
 # Integración
@@ -21,16 +21,44 @@ Importar desde un solo lugar importa por dos motivos. Algunos frameworks solo _p
 
 ## Qué guía seguir
 
-| Stack                                                                      | Guía                                  |
-| -------------------------------------------------------------------------- | ------------------------------------- |
-| Un proyecto con Tailwind CSS v4 en cualquier bundler                       | [Tailwind CSS v4](./tailwind.md)      |
-| Next.js / React                                                            | [Next.js](./nextjs.md)                |
-| Vue                                                                        | [Vue](./vue.md)                       |
-| Svelte / SvelteKit                                                         | [Svelte](./svelte.md)                 |
-| Astro                                                                      | [Astro](./astro.md)                   |
-| HTML simple, Rails, Django o cualquier aplicación sin paso de build de CSS | [Sin bundler](./without-a-bundler.md) |
+| Stack                                                                                           | Guía                                  |
+| ----------------------------------------------------------------------------------------------- | ------------------------------------- |
+| Un proyecto con Tailwind CSS v4 en cualquier bundler                                            | [Tailwind CSS v4](./tailwind.md)      |
+| Next.js / React                                                                                 | [Next.js](./nextjs.md)                |
+| Vue                                                                                             | [Vue](./vue.md)                       |
+| Svelte / SvelteKit                                                                              | [Svelte](./svelte.md)                 |
+| Astro                                                                                           | [Astro](./astro.md)                   |
+| HTML simple, Rails, Laravel, Django o cualquier aplicación sin paso de build de CSS con Node.js | [Sin bundler](./without-a-bundler.md) |
 
-Un proyecto sin framework, un build simple con Vite, webpack o Parcel, no necesita nada más allá de [Configuración inicial → Importar la hoja de estilos](../setup.md#importar-la-hoja-de-estilos): importa la hoja de estilos compilada desde la entrada CSS global que el proyecto ya tiene.
+Un proyecto sin framework, un build simple con Vite, webpack o Parcel, importa la hoja de estilos compilada desde la entrada CSS global que el proyecto ya tiene, como muestra [Configuración inicial → Importar la hoja de estilos](../setup.md#importar-la-hoja-de-estilos). Vite y webpack resuelven el nombre del paquete tal cual; Parcel y PostCSS con `postcss-import` necesitan el cambio de abajo. La hoja de estilos compilada contiene todas las clases; para incluir solo las que usan tus páginas sin adoptar Tailwind, escribe una hoja de estilos reducida con el [comando `build`](./without-a-bundler.md#generar-solo-las-clases-que-usas) del paquete e impórtala en su lugar.
+
+### Bundlers que necesitan un empujón
+
+Ambas herramientas encuentran la hoja de estilos en cuanto se les dice cómo; ninguna necesita otro punto de entrada.
+
+**Parcel.** Activa su soporte del mapa `exports` de un paquete en tu `package.json`:
+
+```json
+{
+  "@parcel/resolver-default": {
+    "packageExports": true
+  }
+}
+```
+
+Luego importa el paquete con el prefijo `npm:` de Parcel, que le indica que el nombre es un paquete y no un archivo junto a la hoja de estilos:
+
+```css
+@import "npm:@codenhub/styles";
+```
+
+**PostCSS con `postcss-import`.** El plugin no lee el mapa `exports` de un paquete, así que el nombre del paquete por sí solo no se resuelve. Importa en su lugar el archivo compilado por su ruta en disco, relativa a tu propia hoja de estilos, el mismo archivo que nombraría un `<link>`:
+
+```css
+@import "../node_modules/@codenhub/styles/dist/index.css";
+```
+
+Los demás puntos de entrada compilados funcionan igual, como `@codenhub/styles/dist/aesthetics/neobrutalism.css`.
 
 ## Comprobar que funciona
 

package/docs/es/integrating/tailwind.md

@@ -2,16 +2,16 @@
 title: Tailwind CSS v4
 description: Usar los puntos de entrada de código fuente /tw en un proyecto con Tailwind CSS v4.
 order: 1
-source: 7988dc023c91950991a720ea7da7edfe3378d4d7
+source: 4866b77d4cfb1655499f633fff8bf61dde2aa4bb
 ---
 
 # Tailwind CSS v4
 
-Un proyecto que ya usa Tailwind CSS v4 puede compilar el código fuente de este paquete en lugar de cargar su salida compilada. Así, las utilidades de tu aplicación y las clases del paquete salen de un solo build, comparten un tema y usan una sola variante `dark:`. Esta página cubre el import, las estéticas, los puntos de entrada específicos y los problemas de build con los que probablemente te encuentres.
+Un proyecto que ya usa Tailwind CSS v4 puede compilar el código fuente de este paquete en lugar de cargar su salida compilada. Así, las utilidades de tu aplicación y las clases del paquete salen de un solo build, comparten un tema y usan una sola variante `dark:`. Esta página cubre el import, las estéticas, los puntos de entrada específicos, cómo construir tus propios componentes con `@apply`, cómo prescindir de la paleta de Tailwind y los problemas de build con los que probablemente te encuentres.
 
 ## Por qué código fuente en lugar de compilado
 
-Los puntos de entrada `/tw` publican código fuente copiado y sin compilar desde `dist/tw`; tu propio build de Tailwind lo compila junto con tu aplicación, así que sus directivas `@theme`, `@utility` y `@apply` se resuelven junto con las tuyas. Los puntos de entrada compilados (`@codenhub/styles`) siguen funcionando en un proyecto con Tailwind, pero entonces se ejecutan dos pipelines de CSS separados en paralelo en lugar de uno: usa `/tw` salvo que un motivo concreto lo descarte.
+Los puntos de entrada `/tw` publican código fuente copiado y sin compilar desde la carpeta `tw/` del paquete; tu propio build de Tailwind lo compila junto con tu aplicación, así que sus directivas `@theme`, `@utility` y `@apply` se resuelven junto con las tuyas. Los puntos de entrada compilados (`@codenhub/styles`) siguen funcionando en un proyecto con Tailwind, pero entonces se ejecutan dos pipelines de CSS separados en paralelo en lugar de uno: usa `/tw` salvo que un motivo concreto lo descarte.
 
 ## Importar el punto de entrada de código fuente
 
@@ -23,7 +23,7 @@ Los puntos de entrada `/tw` publican código fuente copiado y sin compilar desde
 
 `/tw` importa el propio Tailwind, así que sustituye a tu `@import "tailwindcss"` en lugar de sumarse a él: con los dos, el Preflight de Tailwind se emite dos veces. Todos los demás puntos de entrada `/tw/*` esperan que tu import vaya primero; consulta [Usar un punto de entrada específico](#usar-un-punto-de-entrada-específico).
 
-Tailwind CSS v4 escanea tu proyecto automáticamente: la mayoría de los proyectos no necesita nada más que el import anterior. Las rutas de `@source` se resuelven respecto al archivo CSS que las declara, no respecto a la raíz de tu proyecto, así que aquí `./src` significa "el `src/` que está junto a esta hoja de estilos"; ajústalo según dónde esté realmente tu hoja de estilos global. Añade `@source` solo para el markup al que el escaneo automático de Tailwind no llega por sí solo: una ruta excluida por defecto (incluida en `.gitignore`, o dentro de `node_modules`, por ejemplo una librería de componentes externa) o, en un monorepo, una que está fuera del árbol de directorios de este archivo. Apúntalo al markup de tu aplicación, no a este paquete: `/tw` ya incluye todas las definiciones de clase que publica, así que escanearlo también solo ralentiza el build sin añadir clases.
+Tailwind CSS v4 escanea tu proyecto automáticamente: la mayoría de los proyectos no necesita nada más que el import anterior. Las rutas de `@source` se resuelven respecto al archivo CSS que las declara, no respecto a la raíz de tu proyecto, así que aquí `./src` significa "el `src/` que está junto a esta hoja de estilos"; ajústalo según dónde esté realmente tu hoja de estilos global. Añade `@source` solo para el markup al que el escaneo automático de Tailwind no llega por sí solo: una ruta excluida por defecto (incluida en `.gitignore`, o dentro de `node_modules`, por ejemplo una librería de componentes externa) o, en un monorepo, una que está fuera del árbol de directorios de este archivo. Apúntalo al markup de tu aplicación, no a este paquete: el código fuente del paquete nombra cada clase que define, así que escanearlo las emite todas, las usen tus páginas o no.
 
 ## Añadir estéticas
 
@@ -47,6 +47,71 @@ A diferencia de `/tw`, los puntos de entrada específicos y `/tw/native` no impo
 @import "@codenhub/styles/tw/button";
 ```
 
+## Construir tus propios componentes con `@apply`
+
+En `/tw`, cada componente, helper y clase de eje es una utilidad de Tailwind. Eso incluye las intenciones (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`), la presentación (`solid`, `soft`, `ghost`, `edged`, `edgeless`), la elevación (`flat`, `raised`, `floating`), los patrones de esquina (`cut-diagonal`, `cut-diagonal-reverse`) y los tamaños (`sm`, `lg`). Así, una clase tuya puede llevar una receta completa:
+
+```css
+@import "@codenhub/styles/tw";
+
+@utility btn-save {
+  @apply btn primary soft sm;
+}
+
+@utility btn-danger {
+  @apply btn destructive md:lg dark:solid;
+}
+```
+
+```html
+<button class="btn-save" type="submit">Guardar</button>
+```
+
+- **Un componente aplicado se comporta como la clase.** `btn-save` reacciona al hover, se presiona, recibe el foco y sigue a una estética igual que `class="btn primary soft sm"`.
+- **Las variantes funcionan.** `hover:primary`, `md:lg` y `dark:solid` aplican una clase de eje bajo esa condición, en tu marcado o dentro de `@apply`.
+- **Escribe tu clase como `@utility`.** Así se queda en la capa `utilities`, y tus demás utilidades en el mismo elemento le siguen ganando. Una regla simple `.btn-save { @apply … }` también funciona, pero queda sin capa, así que lo que aplica gana a todas las utilidades del elemento; [Personalización → Helpers de composición](../usage/customizing.md#helpers-de-composición) tiene los detalles.
+- **Los modificadores también se aplican.** Los modificadores de un componente, como `.tight` en `.stack`, `.icon` en `.btn` o `.interactive` en `.card`, también son utilidades, así que `@apply stack tight`, `@apply btn icon pill` y `md:tight` funcionan. El estado deshabilitado es la excepción: sigue siendo un atributo o la clase `.disabled` en el marcado.
+- **Tu utilidad gana a los valores internos de un componente.** `p-0 text-center` en una celda de `.data-table`, `text-sm` en un `.label` y `px-8` en un `.btn.sm` se aplican todos.
+
+[Preajustes](../usage/presets.md) compara esto con las demás formas de definir un aspecto una sola vez.
+
+## Prescindir de la paleta de Tailwind
+
+`/tw` se construye sobre el tema por defecto de Tailwind, así que las utilidades de su paleta, como `bg-red-500`, siguen disponibles. Si tu diseño usa solo los tokens del paquete, borra los tonos que no usas:
+
+```css
+@import "@codenhub/styles/tw";
+
+@theme {
+  --color-red-*: initial;
+  --color-orange-*: initial;
+  --color-yellow-*: initial;
+  --color-lime-*: initial;
+  --color-green-*: initial;
+  --color-teal-*: initial;
+  --color-cyan-*: initial;
+  --color-sky-*: initial;
+  --color-blue-*: initial;
+  --color-violet-*: initial;
+  --color-purple-*: initial;
+  --color-fuchsia-*: initial;
+  --color-pink-*: initial;
+  --color-slate-*: initial;
+  --color-gray-*: initial;
+  --color-zinc-*: initial;
+  --color-stone-*: initial;
+  --color-black: initial;
+}
+```
+
+Los colores propios del paquete no cambian, y puedes seguir añadiendo colores tuyos en el mismo bloque.
+
+El bloque deja fuera `neutral`, `emerald`, `amber`, `rose`, `indigo` y `white` a propósito: el tema construye sus colores a partir de ellos.
+
+- **No borres todo el espacio de nombres.** `--color-*: initial` quita también los colores semánticos del paquete, y el build se detiene con un error como `Cannot apply unknown utility class`.
+- **No borres una escala que lee el tema.** Borrar `--color-emerald-*` compila sin error, pero los colores de éxito construidos con ella se pierden.
+- **No borres los espacios de nombres de tipo, fuente o espaciado.** Los componentes aplican las utilidades `text-*` y `font-*` de Tailwind y su función `--spacing()`, así que `--text-*: initial`, `--font-*: initial`, `--spacing: initial` o `--*: initial` detiene la compilación con `Cannot apply unknown utility class` o `The --spacing(…) function requires that the --spacing theme variable exists`. Sobrescribe valores sueltos, como `--text-sm`. Borrar `--radius-*` es seguro.
+
 ## Solución de problemas
 
 **Las clases no producen ningún estilo**
@@ -63,11 +128,17 @@ A diferencia de `/tw`, los puntos de entrada específicos y `/tw/native` no impo
 
 **Una clase construida en tiempo de ejecución no tiene estilo**
 
-- **Qué ha pasado:** `<button class="btn primary">` tiene estilo, pero un botón cuya intención viene de una variable, como `` `btn ${tone}` ``, no.
-- **Por qué:** Tailwind genera una clase solo cuando encuentra el nombre completo en tus archivos fuente. Las clases de componente y de eje del propio paquete se generan siempre, pero tus propias utilidades no, y un nombre armado a partir de strings es invisible para el escaneo.
-- **Solución:** escribe nombres de clase completos en tu código, por ejemplo en un objeto de consulta (`{ save: "btn primary", remove: "btn destructive" }`), o enumera los nombres que tu código puede producir con `@source inline("...")` en tu hoja de estilos.
+- **Qué ha pasado:** `<button class="btn primary">` tiene estilo, pero un botón cuya clase viene de una variable, como `"btn " + variant`, o de contenido de un CMS, no.
+- **Por qué:** Tailwind emite solo las clases que encuentra escritas completas en los archivos que escanea. Eso vale también para las clases de componente del paquete: un build con `/tw` emite `.alert` solo si `alert` aparece en algún lugar que escanea, lo que limita la hoja de estilos a lo que usan tus páginas. Las clases de intención, de presentación, de elevación, de esquina y de tamaño, como `.primary`, `.soft` y `.sm`, también son utilidades, así que les pasa lo mismo. Las clases de estética, como `.glass`, son CSS plano y se emiten siempre. Un nombre armado en tiempo de ejecución nunca aparece completo en un archivo, así que el escaneo no lo ve.
+- **Solución:** escribe cada nombre de clase completo en algún lugar que Tailwind escanee, por ejemplo en un objeto de consulta (`{ save: "btn primary", remove: "btn destructive" }`), o enumera en tu hoja de estilos los nombres que tu código o tu contenido pueden producir:
+
+```css
+@import "@codenhub/styles/tw";
+
+@source inline("btn alert badge primary destructive soft");
+```
 
-Todos los puntos de entrada `/tw` requieren Tailwind CSS 4.3.2 o posterior, por debajo de 5: el código fuente usa `@source not` y `@source inline()`, que llegaron en la 4.1, y se prueba con la 4.3.2.
+Todos los puntos de entrada `/tw` requieren Tailwind CSS 4.3.2 o posterior, por debajo de 5 (`>=4.3.2 <5`).
 
 ## La variante `dark:`
 

package/docs/es/integrating/without-a-bundler.md

@@ -1,8 +1,8 @@
 ---
 title: Sin bundler
-description: Enlazar las hojas de estilos compiladas desde HTML simple, Rails, Django o cualquier aplicación renderizada en el servidor.
+description: Enlazar las hojas de estilos compiladas desde HTML simple, Rails, Laravel, Django o cualquier aplicación renderizada en el servidor, y el build por línea de comandos.
 order: 6
-source: 3b29f40d4ca6413f4c0ee8e3a69eb1f8394e2ba6
+source: ca6e2fe1c1b8c2404b90d9a1bd77b25b7e124f82
 ---
 
 # Sin bundler
@@ -11,7 +11,10 @@ Las hojas de estilos compiladas son CSS terminado: cada una es un único archivo
 
 Lo que necesita una herramienta de build es el _nombre_ del import. `@import "@codenhub/styles"` nombra un paquete, y encontrar el archivo que hay detrás de ese nombre, `node_modules/@codenhub/styles/dist/index.css`, lo hacen herramientas que conocen Node, como Vite, webpack o la CLI de Tailwind, que leen el mapa `exports` del paquete. Un navegador no: resuelve la URL de un `@import` respecto a la hoja de estilos que lo contiene y un `<link href>` respecto a la página, así que un nombre de paquete sin más se convierte en una petición a una ruta que no existe. Sin bundler, enlaza el archivo por su ruta.
 
-Los puntos de entrada `/tw` son código fuente de Tailwind y necesitan un build de Tailwind. `/tw/aesthetics` es la excepción, CSS simple sin nada que Tailwind tenga que procesar, pero sin bundler enlaza en su lugar los archivos compilados de `dist/aesthetics/`, como se muestra abajo. Esta página cubre solo los puntos de entrada compilados, para una página que no tiene ningún build de CSS: HTML simple, Rails, Django o cualquier aplicación renderizada en el servidor.
+Los puntos de entrada `/tw` son código fuente de Tailwind y necesitan un build de Tailwind. `/tw/aesthetics` es la excepción, CSS simple sin nada que Tailwind tenga que procesar, pero sin bundler enlaza en su lugar los archivos compilados de `dist/aesthetics/`, como se muestra abajo. Esta página es para una página que no tiene un build de CSS con Node.js: HTML simple, Rails, Laravel, Django o cualquier aplicación renderizada en el servidor. Hay dos caminos:
+
+1. **Enlazar la hoja de estilos compilada.** No necesita más que archivos estáticos. Envías todas las clases, las usen tus páginas o no.
+2. **Generar una hoja de estilos con el comando `chs build` del paquete.** Escanea tus plantillas y escribe una hoja de estilos con solo las clases que usan. Consulta [Generar solo las clases que usas](#generar-solo-las-clases-que-usas).
 
 ## Qué archivo enlazar
 
@@ -27,14 +30,17 @@ Cada ruta de import compilada es un archivo en la carpeta `dist/` del paquete:
 | `@codenhub/styles/aesthetics`   | `dist/aesthetics/index.css`                                    |
 | `@codenhub/styles/aesthetics/*` | `dist/aesthetics/<name>.css`, como `dist/aesthetics/pixel.css` |
 
-Enlaza primero el archivo base y después una estética. [Configuración inicial → Todos los puntos de entrada](../setup.md#todos-los-puntos-de-entrada) explica qué contiene cada uno; enlaza un solo archivo base, no varios, porque se solapan.
+Enlaza un solo archivo base, no varios, porque se solapan, y las estéticas que uses. Su orden no importa, porque cada archivo declara las [capas de cascada](../setup.md#capas-de-cascada) antes de usar alguna. [Configuración inicial → Todos los puntos de entrada](../setup.md#todos-los-puntos-de-entrada) explica qué contiene cada uno.
 
 ## Desde un CDN
 
 jsDelivr y unpkg sirven todos los archivos de cada versión publicada en npm, así que una página puede enlazar uno sin instalar nada:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.7.0/dist/index.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.7.0/dist/aesthetics/pixel.css" />
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/index.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/aesthetics/pixel.css" />
+</head>
 ```
 
 Pon la versión exacta en la URL. Sin ella, el CDN sirve la última versión, y por debajo de 1.0 una versión menor puede renombrar o eliminar una clase; consulta [Versionado](../index.md#versionado).
@@ -80,6 +86,8 @@ Después enlázala desde el layout, por su ruta dentro de esa carpeta:
 
 Apunta la ruta a `node_modules/@codenhub` y no directamente a `dist/`. Propshaft sirve los archivos por su ruta dentro de cada carpeta de assets, así que añadir `dist/` directamente publicaría un `index.css` suelto que choca con cualquier `index.css` tuyo.
 
+Los archivos que enlazas están en `dist/`, que contiene CSS terminado sin `@import` que resolver, más un `index.d.ts` vacío para TypeScript y el comando `chs build` con los archivos que lee. El código fuente de Tailwind vive en `tw/`, fuera de `dist/`, así que un pipeline estático que sirve `dist/` o le añade huellas no encuentra ningún `@import` que no pueda resolver.
+
 ### Django
 
 Añade la carpeta a `STATICFILES_DIRS` con un prefijo, que mantiene sus nombres de archivo separados de tus propios archivos estáticos:
@@ -96,10 +104,154 @@ STATICFILES_DIRS = [
 <link rel="stylesheet" href="{% static 'codenhub-styles/index.css' %}" />
 ```
 
+Apunta el prefijo a `dist`, no a la carpeta del paquete. `dist/` contiene CSS terminado sin `@import` que resolver, más un `index.d.ts` vacío para TypeScript y el comando `chs build` con los archivos que lee, que el almacenamiento copia tal cual, así que `collectstatic` también funciona con `ManifestStaticFilesStorage`, que añade una huella a cada archivo y reescribe las referencias que contiene. La carpeta del paquete también contiene el código fuente de Tailwind en `tw/`, cuyas líneas `@import "tailwindcss/..."` ese almacenamiento no puede resolver.
+
 ### Laravel
 
 Una aplicación Laravel usa Vite por defecto, así que tiene un bundler: importa el paquete desde `resources/css/app.css` como en [Configuración inicial → Importar la hoja de estilos](../setup.md#importar-la-hoja-de-estilos), y carga ese archivo con la directiva `@vite` como de costumbre.
 
+## Generar solo las clases que usas
+
+El paquete trae un comando, `chs`, que lee tus plantillas en busca de nombres de clase y escribe una sola hoja de estilos minificada con solo las clases de StyleKit que usan. Una página que usa un botón recibe alrededor de una octava parte de la hoja de estilos completa; el tamaño exacto depende de las clases que uses, porque cada componente trae las reglas compartidas de las que depende.
+
+El comando también sirve con un bundler. Un proyecto cuyo bundler no ejecuta Tailwind, como un build simple con Vite o webpack, puede escribir la hoja de estilos entre sus fuentes, `--output src/stylekit.css`, e importar ese archivo donde importaría `@codenhub/styles`. Un proyecto que usa Tailwind CSS v4 obtiene la misma reducción con el [punto de entrada de código fuente](./tailwind.md) y no necesita el comando.
+
+Necesita Node.js 24 o posterior en la máquina que genera el CSS, sea tu portátil, un job de CI o un paso del despliegue, y nada más: el paquete es toda la instalación, sin Tailwind y sin configuración. Instálalo como dependencia de desarrollo desde la raíz de tu proyecto; npm crea un `package.json` si no tienes uno:
+
+```sh
+npm install --save-dev @codenhub/styles
+```
+
+La hoja de estilos que escribe el comando es CSS simple, así que los servidores que sirven tu sitio no necesitan ni Node.js ni el paquete. Añade el build a los scripts de tu `package.json`, donde el comando instalado está en el path con su nombre:
+
+```json
+{
+  "scripts": {
+    "build:css": "chs build --content \"app/views/**/*.erb\" --output public/stylekit.css"
+  }
+}
+```
+
+Después ejecútalo desde la raíz de tu proyecto:
+
+```sh
+npm run build:css
+```
+
+Para ejecutarlo una sola vez sin un script, llámalo por el nombre del paquete:
+
+```sh
+npx @codenhub/styles build --content "app/views/**/*.erb" --output public/stylekit.css
+```
+
+No escribas `npx chs`. `chs` es el nombre del comando dentro de este paquete, pero npm también tiene un paquete sin relación llamado `chs`, y `npx chs` ejecuta ese en cualquier carpeta donde este paquete no esté instalado.
+
+Si todo va bien, el comando imprime una línea: la ruta absoluta que escribió y el tamaño del archivo en bytes:
+
+```text
+/home/you/shop/public/stylekit.css 24497 bytes
+```
+
+Enlaza ese archivo desde tu layout como cualquier hoja de estilos estática.
+
+### Vistas de Rails
+
+```json
+"build:css": "chs build --content \"app/views/**/*.erb\" --content \"app/helpers/**/*.rb\" --output public/stylekit.css"
+```
+
+```erb
+<%# app/views/layouts/application.html.erb %>
+<link rel="stylesheet" href="/stylekit.css" />
+```
+
+### Vistas Blade de Laravel
+
+```json
+"build:css": "chs build --content \"resources/views/**/*.blade.php\" --output public/css/stylekit.css"
+```
+
+```blade
+{{-- resources/views/layouts/app.blade.php --}}
+<link rel="stylesheet" href="{{ asset('css/stylekit.css') }}" />
+```
+
+### Plantillas de Django
+
+Un proyecto Django guarda las plantillas en una carpeta `templates/` del proyecto, en la carpeta `templates/` de cada app, o en ambas. Pasa un `--content` por cada lugar donde estén las tuyas, y deja fuera los que no uses, porque un glob que no coincide con nada hace fallar el build:
+
+```json
+"build:css": "chs build --content \"templates/**/*.html\" --content \"shop/templates/**/*.html\" --output static/stylekit.css"
+```
+
+```django
+{% load static %}
+<link rel="stylesheet" href="{% static 'stylekit.css' %}" />
+```
+
+Escribe la salida en una carpeta incluida en `STATICFILES_DIRS`, aquí `static/`, para que `collectstatic` la recoja. La configuración de arriba solo incluye la carpeta del paquete, así que añade `BASE_DIR / "static"` a esa lista si tu proyecto aún no la tiene.
+
+### Opciones
+
+- `--content <glob>`, o `-c <glob>`, indica los archivos en los que buscar nombres de clase. Es obligatorio y se puede repetir: pásalo una vez por glob, y el build lee todos los archivos que coincidan con alguno. Un glob relativo se resuelve respecto a la carpeta desde la que ejecutas el comando, así que ejecútalo desde la raíz de tu proyecto; un glob absoluto se usa tal cual. `**` coincide con cualquier número de carpetas, y `{rb,erb}` con cualquiera de las dos extensiones. Sirve cualquier archivo de texto, tenga la extensión que tenga. Cada glob tiene que coincidir con al menos un archivo, o el build falla y lo nombra, así que una errata no puede publicar una hoja de estilos vacía. Los archivos que excluye tu `.gitignore` se leen igualmente cuando un glob coincide con ellos, y no se lee nada fuera de tus globs.
+- Pon cada glob entre comillas, con `\"` dentro de un script de `package.json`. Sin comillas, tu shell puede expandir el glob a una lista de archivos antes de que el comando lo vea, y solo el primer archivo cuenta como valor de `--content`. Cuando eso deja nombres de archivo sobrantes, el build los rechaza en lugar de leer en silencio menos de lo que querías; cuando el glob coincidió con un solo archivo, el build lee solo ese archivo y nada de lo que tus plantillas añadan más adelante.
+- `--output <file>`, o `-o <file>`, es la hoja de estilos que se escribe. Es obligatorio. Una ruta relativa se resuelve respecto a la carpeta desde la que ejecutas el comando, las carpetas padre que falten se crean, y un archivo existente se reemplaza.
+- `--aesthetic <name>` añade una de las [estéticas](../usage/aesthetics.md): `neobrutalism`, `glass`, `pixel`, `chunky-tile`, `cyber` o `sketch`. Repítelo para más de una; nombrar una dos veces la incluye una sola vez. Las estéticas se piden explícitamente porque el build no puede saber por tus plantillas cuál quieres: cada una se añade cuando la pides, sin sus reglas para las clases que tus plantillas no usan, y no se incluye ninguna cuando no lo haces.
+- `--no-minify` escribe en su lugar CSS legible e indentado. Sirve para leer lo que generó el build; en producción sirve el archivo minificado.
+- `--help` imprime el uso, con las estéticas que trae esta versión. `--version` imprime la versión del paquete. Ninguno de los dos genera nada, y ambos terminan con estado 0.
+
+La salida siempre contiene el tema, sus design tokens como propiedades personalizadas de CSS, el reset, las reglas base de las que dependen todos los componentes y las clases que una página recibe en tiempo de ejecución en lugar de desde una plantilla, como `.theme-dark`. Encima va cada clase de StyleKit que usan tus plantillas. La salida se construye a partir de la hoja de estilos completa, no de `/native`, así que no incluye los mapeos sin clases. Un build cuyas plantillas nombran todas las clases escribe la hoja de estilos completa, byte a byte.
+
+### Cómo se encuentran las clases
+
+El build no ejecuta tus plantillas. Lee como texto simple cada archivo que coincide con tus globs de `--content`, recoge cada palabra que podría ser un nombre de clase y escribe las reglas de las palabras que son clases de StyleKit. Tailwind CSS también lee el contenido así.
+
+Una clase tiene que aparecer en un archivo como una palabra completa. `class="btn primary"`, `class: "btn primary"` y `classes = ["btn", "primary"]` funcionan, y también una clase escrita antes o después de dos puntos, como en `class:primary={isPrimary}` de Svelte o en `btn: true` de un hash de Ruby. Una palabra que solo parece una clase también cuenta: un comentario que dice "card" añade todas las reglas de la tarjeta a la hoja de estilos, lo que agranda el archivo y no cambia nada en la página.
+
+Un nombre de clase que tu código arma al renderizar nunca aparece completo en ningún archivo, así que el build no puede encontrarlo. En `class="btn <%= @order.priority %>"`, `btn` se encuentra, pero la intención es lo que contenga `priority` al renderizar; si es `destructive`, el botón se renderiza sin su rojo. Hay dos salidas:
+
+- **Escribe los nombres de clase completos.** Asigna cada valor a un nombre de clase completo en un archivo que el build lea, como `{ "urgent" => "destructive", "normal" => "neutral" }.fetch(@order.priority)` en un helper.
+- **Enuméralos en un archivo de safelist.** Un archivo de texto simple con un nombre de clase por línea, añadido con su propio `--content`, como `--content config/stylekit-classes.txt`. Guárdalo junto al código que arma los nombres de clase, para que quien cambie uno vea el otro.
+
+### Variantes
+
+Una clase de intención, presentación o modificador puede llevar uno de diez prefijos, escritos como en Tailwind: `sm:`, `md:`, `lg:`, `xl:` y `2xl:` la aplican a partir de ese breakpoint, `hover:`, `focus:`, `focus-visible:` y `active:` mientras el elemento está en ese estado, y `dark:` allí donde se aplica el tema oscuro, como describe [Temas → La variante dark:](../usage/theming.md#la-variante-dark). `md:lg` hace grande un botón a partir del breakpoint `md`, y `hover:primary` le da la intención primary al pasar el cursor:
+
+```html
+<button class="btn sm md:lg ghost hover:soft">Save</button>
+```
+
+Eso abarca las intenciones como `primary` y `destructive`, las clases de relleno y de borde como `soft` y `edged`, y los modificadores como `sm`, `lg`, `raised`, `pill`, `tight` y `ruled`. `disabled` no lleva ninguno: es un estado en el que está el elemento, así que escríbelo como atributo o como clase. Las clases de componente como `btn` y `card`, y los helpers de texto y de layout, no llevan prefijo.
+
+Cada prefijo es una copia fija de esas clases, incluida en el paquete, así que la lista recoge los más comunes y no todos los de Tailwind. El comando no apila prefijos, como en `md:hover:primary`, ni ofrece otros, como `print:` o `group-hover:`. Una clase así no recibe estilo, y el elemento se renderiza sin ella.
+
+### Lo que no hace
+
+- **No incluye utilidades de Tailwind.** `flex`, `mt-4`, `text-red-500` y el resto de Tailwind no son clases de StyleKit, así que el build las deja fuera. Para el layout, los propios [helpers de layout](../usage/content-and-layout.md) de StyleKit están en el build como cualquier otra clase. Un proyecto que quiere las utilidades de Tailwind, sus demás variantes o prefijos apilados ejecuta Tailwind por su cuenta e importa el [punto de entrada de código fuente](./tailwind.md), que da las tres cosas.
+- **No tiene modo watch.** Genera una vez y termina. Vuelve a ejecutarlo después de cambiar una plantilla, desde un script o desde un observador de archivos que ya tengan tu framework o tu editor. Una clase que la hoja de estilos todavía no tiene deja su elemento sin estilo hasta el siguiente build.
+- **No tiene archivo de configuración ni CSS propio.** No puedes añadir tus propios valores de `@theme`, definiciones de `@utility` ni plugins. Para cambiar el aspecto, sobrescribe las propiedades personalizadas en una hoja de estilos tuya cargada después de esta, como describe [Personalización](../usage/customizing.md).
+- **No tiene otros comandos.** `build` es el único; `--help` y `--version` son los únicos flags que funcionan sin él.
+
+### En un despliegue
+
+Genera la hoja de estilos antes del paso que recoge o añade huella a tus assets, como `rails assets:precompile`, `php artisan optimize` o `python manage.py collectstatic`. Puedes hacer commit de la salida, de modo que los servidores no necesitan Node.js en absoluto, a cambio de un archivo generado que alguien tiene que acordarse de regenerar; o generarla en el despliegue, de modo que la máquina de build necesita Node.js 24 o posterior.
+
+Fija la versión. Por debajo de 1.0 una versión menor puede renombrar o eliminar una clase, así que el mismo comando puede escribir otra hoja de estilos con una versión más nueva. La salida no depende de nada más que de la versión del paquete y de tus plantillas, así que haz commit de `package.json` y del lockfile que escribe npm, e instala con `npm ci` en la máquina de build, para que cada build use la versión que probaste.
+
+### Cuando el build falla
+
+Cada fallo imprime una línea que empieza por `chs:` en la salida de error estándar y termina con estado 1, sin escribir el archivo de salida, así que un script de despliegue se detiene en lugar de publicar una hoja de estilos desactualizada o vacía. La línea dice qué salió mal y qué hacer:
+
+- **`missing --content` o `missing --output`.** Añade la que nombra. Un `--output` vacío o con solo espacios cuenta como ausente.
+- **`--content "<glob>" matches no file in <folder>`.** Suele ser una errata en la ruta, un comando ejecutado desde una carpeta distinta de la raíz de tu proyecto, o un glob de un lugar que tu proyecto no usa. Generar a partir de nada escribiría una hoja de estilos sin clases de componente, y el sitio perdería sus estilos sin avisar.
+- **`unexpected argument "<file>"`.** Casi siempre es un glob de `--content` sin comillas, que tu shell expandió a una lista de archivos. Pon el glob entre comillas.
+- **`unknown option "<flag>"`.** Una errata, o una opción de otra herramienta, como `--watch` o `--config`. `--help` enumera las opciones.
+- **`option "<flag>" is missing its value or does not take one`.** Un flag que lleva valor fue lo último de la línea, o se le dio un valor a `--no-minify`, como en `--no-minify=true`.
+- **`unknown aesthetic "<name>"; choose from ...`.** Elige uno de los nombres de la lista. Van en minúsculas y con guion, como `chunky-tile`.
+- **`missing command` o `unknown command "<name>"`.** La primera palabra después de `chs` tiene que ser `build`.
+- **`this command needs Node.js 24 or newer`.** Actualiza Node.js en la máquina que genera el CSS.
+- **`cannot write the stylesheet: <reason>`.** `<reason>` es el propio mensaje de Node.js. `EISDIR` significa que `--output` nombra una carpeta existente, así que nombra un archivo dentro de ella; `EACCES` o `EPERM` significa que no puedes escribir ahí.
+
 ## Comprobar que funciona
 
 Renderiza un elemento con estilo, como en [Integración → Comprobar que funciona](./index.md#comprobar-que-funciona):

package/docs/es/setup.md

@@ -2,7 +2,7 @@
 title: Configuración inicial
 description: Instala el paquete, elige entre CSS compilado o código fuente de Tailwind y renderiza la estructura base de la página de ajustes.
 order: 1
-source: 20ec2aeb0950fe5b8a045e9b0ac307ca97d0462e
+source: 01adaabea85fb4d04139c86d9ad693e23c321d04
 ---
 
 # Configuración inicial
@@ -44,9 +44,11 @@ La hoja de estilos completa incluye el reset, los tokens, los helpers de layout
 
 Elige uno:
 
-- **CSS compilado** (`@codenhub/styles`, el del ejemplo anterior). Úsalo salvo que tengas un motivo para no hacerlo. Funciona cualquier bundler que resuelva imports de CSS desde paquetes, como Vite, webpack o la CLI de Tailwind.
+- **CSS compilado** (`@codenhub/styles`, el del ejemplo anterior). Úsalo salvo que tengas un motivo para no hacerlo. Funciona cualquier bundler que resuelva imports de CSS desde paquetes, como Vite, webpack o la CLI de Tailwind. Incluye todas las clases, las usen tus páginas o no.
 - **Código fuente de Tailwind CSS v4** (`@codenhub/styles/tw`). Úsalo cuando tu proyecto ya usa Tailwind v4. Tu build compila el paquete junto con tus propias utilidades, así que obtienes una sola hoja de estilos y la variante `dark:` de Tailwind coincide con el tema del paquete. Necesita Tailwind 4.3.2 o posterior, por debajo de 5.
-- **Sin bundler.** Enlaza el archivo compilado desde `node_modules` o desde un CDN con una etiqueta `<link>`.
+- **Sin bundler.** Enlaza el archivo compilado desde `node_modules` o desde un CDN con una etiqueta `<link>`; consulta [Sin bundler](./integrating/without-a-bundler.md).
+
+Para incluir solo las clases que usan tus páginas en un proyecto que no usa Tailwind, con bundler o sin él, el comando `chs build` del paquete lee tus archivos y escribe una hoja de estilos con solo esas clases, que importas o enlazas en lugar de la compilada; consulta [Generar solo las clases que usas](./integrating/without-a-bundler.md#generar-solo-las-clases-que-usas).
 
 Tu framework puede necesitar su propia configuración, como dónde va la hoja de estilos global en Next.js o en Astro. Cada una de estas guías cubre una configuración y después te devuelve aquí:
 
@@ -71,16 +73,18 @@ El orden de los dos imports no importa, porque cada punto de entrada declara las
 ## Requisitos
 
 - **Navegadores:** Chrome 123, Safari 17.5 o Firefox 128 y posteriores. Los colores usan `light-dark()` y `color-scheme` (Firefox 120). `.input-group` lee el estado inválido y deshabilitado de un control anidado con `:has()` (Firefox 121). Las clases de elevación registran una propiedad que no se hereda con `@property` (Firefox 128); sin ella, una clase de elevación también llegaría a los elementos sin clase que contiene.
-- **Herramientas:** un `@import` con un nombre de paquete necesita una herramienta que resuelva imports de CSS desde paquetes. Si no tienes una, enlaza el archivo compilado por su ruta o desde un CDN; consulta [Sin bundler](./integrating/without-a-bundler.md).
-- **Tailwind:** 4.3.2 o posterior, por debajo de 5, solo para los puntos de entrada de código fuente `/tw`. Es una peer dependency opcional, así que los puntos de entrada compilados no lo instalan.
+- **Herramientas:** un `@import` con un nombre de paquete necesita una herramienta que resuelva imports de CSS desde paquetes a través de su mapa `exports`. Si no tienes una, enlaza el archivo compilado por su ruta o desde un CDN; consulta [Sin bundler](./integrating/without-a-bundler.md). Dos herramientas habituales necesitan un pequeño ajuste, descrito en [Integración → Bundlers que necesitan un empujón](./integrating/index.md#bundlers-que-necesitan-un-empujón): Parcel, y PostCSS con `postcss-import`.
+- **Tailwind:** 4.3.2 o posterior, por debajo de 5, solo para los puntos de entrada de código fuente `/tw`. Es una peer dependency opcional, así que ni los puntos de entrada compilados ni el comando `chs build` la instalan.
+- **Node.js:** 24 o posterior en la máquina que ejecuta el comando `chs build`. Las hojas de estilos no lo necesitan, pero el paquete lo declara como su engine, así que Yarn 1, y npm con `engine-strict`, rechazan la instalación en un Node.js anterior.
 - **Tu aplicación:** el paquete no tiene JavaScript. El HTML semántico, ARIA, el comportamiento de teclado, la gestión del foco, la validación y los anuncios son cosa tuya; consulta [Accesibilidad](./accessibility.md).
 
 ## Cuando nada tiene estilo
 
 - **Falta el import o no se carga de forma global.** Las clases no hacen nada hasta que la hoja de estilos está en la página. Impórtala una vez en una hoja de estilos que cargue cada página, no en un componente que puede no renderizarse.
-- **El nombre del paquete no se resuelve.** Un `<link>` simple o una herramienta sin resolución de paquetes CSS no puede leer `@import "@codenhub/styles"`. Enlaza `node_modules/@codenhub/styles/dist/index.css`, o sigue [Sin bundler](./integrating/without-a-bundler.md).
+- **El nombre del paquete no se resuelve.** Un `<link>` simple o una herramienta sin resolución de paquetes CSS no puede leer `@import "@codenhub/styles"`. Enlaza `node_modules/@codenhub/styles/dist/index.css`, o sigue [Sin bundler](./integrating/without-a-bundler.md). Parcel y `postcss-import` lo resuelven con un pequeño cambio; consulta [Integración → Bundlers que necesitan un empujón](./integrating/index.md#bundlers-que-necesitan-un-empujón).
 - **Se carga una ruta `/tw` sin Tailwind.** Los archivos `/tw` son código fuente de Tailwind: contienen `@theme`, `@utility` y `@apply`, que los navegadores no entienden. Tu build de Tailwind tiene que compilarlos; consulta [Tailwind CSS v4](./integrating/tailwind.md).
-- **Falta una clase construida en tiempo de ejecución (solo con código fuente de Tailwind).** Tailwind genera una clase solo cuando encuentra su nombre en tus archivos fuente. Un nombre armado a partir de strings, como `` `btn ${tone}` ``, es invisible para ese escaneo. Escribe los nombres de clase completos, o enuméralos como se describe en [Tailwind CSS v4](./integrating/tailwind.md).
+- **Un punto de entrada `/tw` específico se importa sin Tailwind antes.** `@codenhub/styles/tw/button` y los demás archivos de un solo componente no importan Tailwind. Importados solos, compilan sin error pero no producen ninguna regla de componente. Pon `@import "tailwindcss";` antes; consulta [Tailwind CSS v4 → Usar un punto de entrada específico](./integrating/tailwind.md#usar-un-punto-de-entrada-específico).
+- **Falta una clase construida en tiempo de ejecución (solo con código fuente de Tailwind).** Tailwind genera una clase de utilidad, también los componentes del paquete como `.btn`, solo cuando encuentra su nombre en tus archivos fuente. Un nombre armado a partir de strings, como `` `btn ${tone}` ``, es invisible para ese escaneo. Escribe los nombres de clase completos, o enuméralos como se describe en [Tailwind CSS v4](./integrating/tailwind.md).
 
 ### CSS crítico en línea
 
@@ -90,9 +94,9 @@ Eso no se aplica a los archivos `/tw`. Son código fuente de Tailwind, no CSS te
 
 ## Todos los puntos de entrada
 
-Los puntos de entrada compilados son CSS terminado. Los puntos de entrada `/tw` publican el código fuente sin compilar desde `dist/tw`, que un build de Tailwind v4 tiene que procesar. Un punto de entrada `/tw` de un solo componente incluye los tokens del tema, así que sus clases funcionan por sí solas.
+Los puntos de entrada compilados son CSS terminado. Los puntos de entrada `/tw` publican el código fuente sin compilar desde `tw/`, junto a `dist/`, que un build de Tailwind v4 tiene que procesar. Un punto de entrada `/tw` de un solo componente incluye los tokens del tema, así que sus clases no necesitan nada más del paquete, pero necesita `@import "tailwindcss";` antes; consulta [Tailwind CSS v4 → Usar un punto de entrada específico](./integrating/tailwind.md#usar-un-punto-de-entrada-específico).
 
-Cada ruta de import resuelve el mismo archivo con las condiciones de exportación `style`, `import` y `default`. Un import de CSS es un efecto secundario, así que asegúrate de que tu bundler no lo descarte como no usado.
+Cada ruta de import resuelve el mismo archivo con las condiciones de exportación `style`, `import` y `default`. Antes va una condición `types` que apunta a una declaración vacía, así que TypeScript acepta un import por efecto secundario como `import "@codenhub/styles";` con `noUncheckedSideEffectImports`, que TypeScript 6 activa por defecto. Un import de CSS es un efecto secundario, así que asegúrate de que tu bundler no lo descarte como no usado.
 
 | Ruta de import                   | Qué contiene y qué cambia                                                                                                                                                                                                                                                                                                                         |
 | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -100,7 +104,7 @@ Cada ruta de import resuelve el mismo archivo con las condiciones de exportació
 | `@codenhub/styles/theme`         | Tokens compilados y las clases de intención, presentación, elevación y patrón de esquinas. Define las propiedades del tema raíz y los selectores claro y oscuro. Sin reset ni componentes.                                                                                                                                                        |
 | `@codenhub/styles/palette`       | Custom properties `--palette-*` generadas: el color de relleno, de texto y de borde de cada combinación de intención y presentación como valor plano, más los colores planos `border`, `surface` y `text`. Para código que no puede usar el propio paquete; consulta [Personalización → Paleta generada](./usage/customizing.md#paleta-generada). |
 | `@codenhub/styles/components`    | Tokens compilados, helpers de tipografía y todas las clases de componentes. Cada componente lleva su propia regla de movimiento reducido, y la corrección para `<dialog>` cerrado viene con `.card`. Sin reset, sin helpers de layout ni de contenido, sin mapeo sin clases.                                                                      |
-| `@codenhub/styles/native`        | La hoja de estilos compilada completa más el [mapeo sin clases](#html-sin-clases) para elementos HTML simples. Aplica el reset y selectores de elemento amplios.                                                                                                                                                                                  |
+| `@codenhub/styles/native`        | Tokens, tipografía, helpers de layout y de contenido, componentes y el reset del paquete compilados, más el [mapeo sin clases](#html-sin-clases) para elementos HTML simples. Sin el Preflight de Tailwind. Aplica el reset y selectores de elemento amplios.                                                                                     |
 | `@codenhub/styles/aesthetics`    | Las seis estéticas compiladas, `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber` y `.sketch`, cada una con su clase `-solo`. No trae tokens ni componentes propios; impórtalo en cualquier orden.                                                                                                                                     |
 | `@codenhub/styles/aesthetics/*`  | Una estética compilada y su clase solo: `/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber` o `/sketch`.                                                                                                                                                                                                                                |
 | `@codenhub/styles/tw`            | Versión en código fuente de la hoja de estilos completa. Importa el propio Tailwind y después el tema, la tipografía, los helpers, los componentes y el reset. Las mismas reglas globales.                                                                                                                                                        |
@@ -112,9 +116,9 @@ Cada ruta de import resuelve el mismo archivo con las condiciones de exportació
 | `@codenhub/styles/tw/feedback`   | Tema en código fuente más `.alert`, `.badge`, `.skeleton` y `.progress`, con sus animaciones.                                                                                                                                                                                                                                                     |
 | `@codenhub/styles/tw/tooltip`    | Tema en código fuente más las clases de tooltip.                                                                                                                                                                                                                                                                                                  |
 | `@codenhub/styles/tw/reset`      | Tema, helpers de tipografía y el reset global en código fuente. Cambia la raíz, el body y los elementos, y define reglas de selección, movimiento, foco, barras de desplazamiento y colores forzados.                                                                                                                                             |
-| `@codenhub/styles/tw/native`     | Versión en código fuente de `/native`: todo, más el reset y el mapeo sin clases. El efecto global más amplio.                                                                                                                                                                                                                                     |
+| `@codenhub/styles/tw/native`     | Versión en código fuente de `/native`: todo salvo el Preflight de Tailwind, más el reset del paquete y el mapeo sin clases. El efecto global más amplio.                                                                                                                                                                                          |
 | `@codenhub/styles/tw/typography` | Tema en código fuente más los helpers de tipografía. Define los selectores de tema; sin reset, sin mapeo sin clases.                                                                                                                                                                                                                              |
-| `@codenhub/styles/tw/utilities`  | Tema y tipografía en código fuente más los helpers de layout y de contenido. Enumera los nombres de clase del paquete para que Tailwind los genere siempre.                                                                                                                                                                                       |
+| `@codenhub/styles/tw/utilities`  | Tema y tipografía en código fuente más los helpers de layout y de contenido.                                                                                                                                                                                                                                                                      |
 | `@codenhub/styles/tw/aesthetics` | Las seis estéticas en código fuente. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, `/cyber` y `/sketch` publican una cada uno. CSS simple, sin efectos secundarios de tema ni de reset.                                                                                                                                      |
 | `@codenhub/styles/package.json`  | El manifiesto del paquete, como JSON. Para herramientas que leen la versión instalada o el mapa de exportaciones; no es una hoja de estilos.                                                                                                                                                                                                      |
 
@@ -122,19 +126,21 @@ No importes en un mismo build dos puntos de entrada que se solapan, como `@coden
 
 ## HTML sin clases
 
-`@codenhub/styles/native` da estilo a elementos HTML simples sin ninguna clase, para contenido al que no puedes añadir clases, como la salida de Markdown o el cuerpo de un CMS. Es la hoja de estilos completa más este mapeo:
-
-| Elemento                                                                                                                                      | Con el estilo de                                                                   |
-| --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `h1`, `h2`, `h3`, `h4`, `h5` y `h6`                                                                                                           | `.text-title-lg`, `.text-title`, `.text-title-sm`, `.text-label-lg`, `.text-label` |
-| `p`, `li`                                                                                                                                     | `.text-body`                                                                       |
-| `table`                                                                                                                                       | `.data-table`                                                                      |
-| `kbd`, `blockquote`, `q`, `code`, `pre`                                                                                                       | `.kbd`, `.quote`, `.quote-inline`, `.code`, `.pre`                                 |
-| `hr`                                                                                                                                          | `.divider`                                                                         |
-| `input` sin tipo, o con tipo `text`, `number`, `email`, `password`, `url`, `tel`, `search`, `month`, `week`, `time`, `date`, `datetime-local` | `.ipt`                                                                             |
-| `textarea`, `select`                                                                                                                          | `.textarea`, `.select`                                                             |
-| `input type="checkbox"`, `input type="radio"`                                                                                                 | `.checkbox`, `.radio`                                                              |
-| `button`, `input type="button"`, `type="submit"`, `type="reset"`                                                                              | `.btn`                                                                             |
+`@codenhub/styles/native` da estilo a elementos HTML simples sin ninguna clase, para contenido al que no puedes añadir clases, como la salida de Markdown o el cuerpo de un CMS. Contiene todo lo que contiene la hoja de estilos completa salvo el Preflight de Tailwind, el reset de los valores por defecto del navegador que `@codenhub/styles` trae con Tailwind. El reset propio del paquete sí está: el box sizing, el fondo, el color del texto y la fuente de la raíz, el reset de márgenes de títulos, párrafos y listas, los colores de selección, los anillos de foco y la regla de movimiento reducido. Después añade este mapeo:
+
+| Elemento                                                                                                                                      | Con el estilo de                                                                     |
+| --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `h1`, `h2`, `h3`, `h4`, `h5` y `h6`                                                                                                           | `.text-title-lg`, `.text-title`, `.text-title-sm`, `.text-label-lg`, `.text-label`   |
+| `body`                                                                                                                                        | `.text-body`, heredado por los párrafos, los elementos de lista y el resto del texto |
+| `table`                                                                                                                                       | `.data-table`                                                                        |
+| `kbd`, `blockquote`, `q`, `code`, `pre`                                                                                                       | `.kbd`, `.quote`, `.quote-inline`, `.code`, `.pre`                                   |
+| `hr`                                                                                                                                          | `.divider`                                                                           |
+| `input` sin tipo, o con tipo `text`, `number`, `email`, `password`, `url`, `tel`, `search`, `month`, `week`, `time`, `date`, `datetime-local` | `.ipt`                                                                               |
+| `textarea`, `select`                                                                                                                          | `.textarea`, `.select`                                                               |
+| `input type="checkbox"`, `input type="radio"`                                                                                                 | `.checkbox`, `.radio`                                                                |
+| `button`, `input type="button"`, `type="submit"`, `type="reset"`                                                                              | `.btn`                                                                               |
+| `dialog`                                                                                                                                      | `.card.floating`: oculto hasta que se abre, y entonces una tarjeta flotante centrada |
+| `progress`                                                                                                                                    | `.progress`, lleno hasta su `value`; sin `value` es el barrido indeterminado         |
 
 ```html
 <article>
@@ -152,7 +158,9 @@ Lo que no hace:
 - **Algunos tipos de input se quedan como están:** `file`, `range`, `color` y `hidden` conservan el aspecto propio del navegador.
 - **Sin switch.** Un checkbox con `role="switch"` se sigue pintando como checkbox; el mapeo no lee roles. A una página que necesita switches le conviene más la hoja de estilos basada en clases.
 - **Los enlaces mantienen el texto que los rodea.** Un enlace dentro de un encabezado conserva el tamaño del encabezado; un enlace nunca recibe estilo de botón.
-- **`pre code` no recibe estilo doble.** El código dentro de un `pre` pierde su propio fondo y su relleno.
+- **El texto de cuerpo se define una sola vez.** `p` y `li` toman su tipografía del elemento en el que están, así que un contenedor que define su propio tamaño, peso o espaciado entre letras lo aplica al Markdown que contiene. Los controles conservan su propio espaciado entre letras: un botón, un badge y un campo de texto quedan en `normal`, sea lo que sea que definan la página o el contenedor.
+- **El comportamiento nativo sigue siendo nativo.** Un `<dialog>` se abre con `show()` o `showModal()` como siempre; el mapeo solo lo pinta. El barrido de un `<progress>` se detiene con la preferencia de movimiento reducido, y en colores forzados la barra usa los colores del sistema.
+- **`pre code` no recibe estilo doble.** El código dentro de un `pre` pierde el chip que dibujaría por sí solo: fondo, relleno, borde, sombra, brillo y recorte.
 
 El mapeo es global: se da estilo a cada elemento de la página que coincida, incluidos los elementos dentro de widgets de terceros. Está en la [capa de cascada](#capas-de-cascada) `base`, así que cualquier clase lo supera. Añade una clase de intención o de presentación a un elemento mapeado, como `<button class="destructive">`, y se aplica igual que en `.btn`.
 
@@ -160,18 +168,19 @@ El mapeo es global: se da estilo a cada elemento de la página que coincida, inc
 
 Cada punto de entrada pone su CSS en las cuatro capas de cascada de Tailwind y declara su orden antes de usar alguna, así que el resultado no depende de qué archivo se carga primero:
 
-| Capa         | Contiene                                                                                                                     |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| `theme`      | El tema de Tailwind, los tokens base, los selectores de tema y `/palette`.                                                   |
-| `base`       | El reset y los estilos de elementos sin clases.                                                                              |
-| `components` | Las clases de intención, presentación, elevación y estética.                                                                 |
-| `utilities`  | Todos los componentes (`.btn`, `.card`, `.ipt`, etc.), junto a tus propias utilidades de Tailwind.                           |
-| _sin capa_   | Las sobrescrituras de colores forzados y de movimiento reducido, la corrección para `<dialog>` cerrado y las clases `-solo`. |
+| Capa         | Contiene                                                                                                                                                                                                                                                                         |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`      | El tema de Tailwind, los tokens base, los selectores de tema y `/palette`.                                                                                                                                                                                                       |
+| `base`       | El reset y los estilos de elementos sin clases.                                                                                                                                                                                                                                  |
+| `components` | Las clases de estética y los valores de intención neutros de los que parte cada componente.                                                                                                                                                                                      |
+| `utilities`  | Todos los componentes (`.btn`, `.card`, `.ipt`, etc.), junto a tus propias utilidades de Tailwind. Las clases de intención, presentación, borde, elevación, esquina y tamaño están en `utilities.families`, una subcapa que pierde frente a cualquier otra regla de `utilities`. |
+| _sin capa_   | Las sobrescrituras de colores forzados y de movimiento reducido, la corrección para `<dialog>` cerrado y las clases `-solo`.                                                                                                                                                     |
 
 Lo que eso significa cuando escribes tu propio CSS:
 
-- **Tu utilidad o tu CSS sin capa supera a una clase de intención, presentación, elevación o estética** en el mismo elemento. `[--ui-fill:50%]` en un botón `.solid`, `font-serif` en una región `.pixel` o `.my-card { --ui-radius: 0 }` en tu propia hoja de estilos se aplican.
+- **Tu utilidad o tu CSS sin capa supera a una clase de intención, presentación, elevación o estética** en el mismo elemento. `[--ui-fill:50%]` en un botón `.solid`, `font-serif` en una región `.pixel` o `.my-card { --ui-radius-surface: 0 }` en tu propia hoja de estilos se aplican.
 - **Un componente y tu utilidad comparten la capa `utilities`.** Entre ellos decide la especificidad y después el orden en el código, como entre dos utilidades cualesquiera. Tu CSS sin capa siempre supera a un componente.
+- **Tu utilidad supera los valores por defecto internos de un componente.** `p-0 text-center` en una celda de tabla, `text-sm` en una `.label` o `px-8` en un `.btn.sm` se aplican, porque el componente escribe esos valores por defecto de modo que gane una clase en el elemento.
 - **El estado supera a tu intención.** Un campo con `aria-invalid="true"` sigue siendo destructivo aunque lleve una utilidad de intención.
 - **Las clases `-solo` no tienen capa a propósito**, para que superen los estilos con capa o de especificidad cero de un componente de terceros. Una regla sin capa más específica, o una igual de específica que se cargue después, sigue superándolas; consulta [Clases solo](./usage/solo.md).