@codenhub/styles 0.7.0 → 0.8.0

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: 23de7d85d2257d30e13330c7a2e185ca0c642010
 ---
 
 # 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 `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,17 @@ 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` y el comando `build`, que además necesita `@tailwindcss/cli`. Ambos son peer dependencies opcionales, así que los puntos de entrada compilados no los instalan.
 - **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 +93,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 +103,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 +115,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 +125,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 +157,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 +167,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).
 

package/docs/es/usage/aesthetics.md

@@ -2,7 +2,7 @@
 title: Estéticas
 description: Los seis aspectos opcionales, lo que cada uno cambia en un componente, sus controles y sus límites.
 order: 6
-source: 13c01d45553a89f9aeda36d0726b01e7f7879ac9
+source: adc344b555d4477cdc37adb6abb4cc07620c6486
 ---
 
 # Estéticas
@@ -71,8 +71,10 @@ La sombra se proyecta en la propia intención del componente, así que un botón
 
 - Los chips de contenido también toman la estética. El borde de una tecla `.kbd` pasa del gris discreto de los bordes a la tinta, y de 1px a 2px, como cualquier otro borde. Un `.code` o un `.pre` no tiene borde por defecto, así que no recibe ninguno; añade `.edged` para darle un borde de tinta.
 - Solo `.btn` y una `.card` que lo active responden al hover y a la pulsación. Una tarjeta lo activa con `.interactive`, o con una de sus dos mitades: `.hoverable` solo para la respuesta al hover, `.pressable` solo para la pulsación; una tarjeta simple, una alerta o un panel es un contenedor y se queda quieto.
-- Una alerta se apoya sobre la sombra desplazada con esta estética, y con ninguna otra. Por lo demás una alerta es plana, pero aquí la sombra es un segundo contorno más que profundidad, y una alerta sin ella parece inacabada junto a todo lo demás. Esto incluye una alerta dentro de una región `.neobrutalism` anidada. `.flat` sigue quitándola y `.floating` sigue duplicándola.
+- Una alerta se apoya sobre la sombra desplazada con esta estética, y con ninguna otra. Por lo demás una alerta es plana, pero aquí la sombra es un segundo contorno más que profundidad, y una alerta sin ella parece inacabada junto a todo lo demás. Esto incluye una alerta dentro de una región `.neobrutalism` anidada, y una alerta que lleva la clase ella misma, `.alert.neobrutalism`. `.flat` sigue quitándola y `.floating` sigue duplicándola.
 - El disparador del tooltip toma la esquina cero como todo lo demás y se dibuja cuadrado; `.radio` conserva su círculo.
+- Con `prefers-reduced-motion: reduce` la pulsación sigue ocurriendo, pero al instante: el elemento cae en su sombra sin recorrer la distancia. La pulsación es la señal de que un clic se registró, así que solo se quita su movimiento.
+- No tiene fuente propia y define en la región la del tema, `--font-default`, así que una región neobrutalista anidada dentro de pixel, cyber, sketch o chunky tile no toma su tipografía. Una fuente que defines solo con `font-family`, en `body` o en un contenedor, no llega dentro de la región; defínela también en `--font-default`, como describe [Temas → Fuentes](./theming.md#fuentes).
 
 ## Glass
 
@@ -91,8 +93,9 @@ La sombra se proyecta en la propia intención del componente, así que un botón
 - Toda superficie en una región glass es de vidrio, incluidas una `.card.soft`, un `.panel` y una `.alert` neutros.
 - El vidrio es el fondo, no el relleno. Una presentación conserva todo su relleno, así que un botón `.solid`, un toggle marcado y una tarjeta o tabla `.solid` son opacos; los cristales esmerilados son los de por defecto, `.soft` y `.ghost`.
 - El desenfoque solo se aplica a `.card`, `.panel`, `.alert`, la burbuja del tooltip y una `.data-table` por defecto o `.soft`. Los controles se quedan sólidos y se apoyan sobre el vidrio: un desenfoque bajo cada control de un grupo denso cuesta una capa compuesta por cada uno y se percibe como ruido. Los controles siguen tomando el radio, el borde y la sombra de la estética.
-- Con `prefers-reduced-transparency: reduce`, las superficies de vidrio pierden el desenfoque y se vuelven opacas.
-- Los botones y una `.card` que lo active se pulsan con el `scale(0.97)` simple; el movimiento reducido lo desactiva.
+- Con `prefers-reduced-transparency: reduce`, y con colores forzados, las superficies de vidrio pierden el desenfoque y se vuelven opacas. Los colores forzados reemplazan los colores pero conservan su transparencia, así que sin esto un panel dejaría ver la página a través del fondo del sistema.
+- Los botones y una `.card` que lo active se pulsan con el `scale(0.97)` simple; con movimiento reducido la pulsación sigue ocurriendo, al instante.
+- No tiene fuente propia y define en la región la del tema, `--font-default`, como hace neobrutalism.
 - Los controles de texto y los toggles dibujan su línea con la tinta de la página al 55% en lugar del fino borde blanco, que borraría un checkbox sin marcar en una página clara. Es `--ui-control-ink`; defínelo en la región para elegir otro.
 - El marco y las líneas divisorias de una tabla dibujan la tinta de la página al 20%, porque el borde fino desaparece sobre la placa de la tabla. Es `--ui-rule-ink`.
 - Una tabla con un `<caption>` desenfoca detrás del caption además de detrás de sus filas en Chromium y Safari, cuya caja de tabla incluye el caption, y con `.glass-liquid` el borde y el reflejo también enmarcan el caption. Firefox deja el caption fuera del cristal. Donde importe, etiqueta la tabla desde un encabezado exterior con `aria-labelledby`.
@@ -111,13 +114,13 @@ La lente la dibuja un filtro SVG en `backdrop-filter`, que Chromium renderiza y
 
 **Excepciones:**
 
-- Llega a `.card`, `.panel`, `.alert`, la burbuja del tooltip y una `.data-table` por defecto o `.soft`. Los controles se quedan sólidos, como con glass, excepto un botón que lo pida: consulta [Botones liquid](#botones-liquid).
+- Llega a `.card`, `.panel`, `.alert`, `.surface`, la burbuja del tooltip, un componente propio construido con `@apply surface` y una `.data-table` por defecto o `.soft`. Los controles se quedan sólidos, como con glass, excepto un botón que lo pida: consulta [Botones liquid](#botones-liquid).
 - Dibuja su desenfoque y su lente en el `::before` y el `::after` de cada superficie, así que una superficie dentro de una región liquid no puede llevar un `::before` o `::after` propio. Cada superficie se convierte también en un contexto de apilamiento posicionado; una superficie que posiciones tú conserva tu colocación.
-- Todo lo demás que se esmerila con glass conserva el desenfoque ligero y el fondo más claro de liquid, sin la lente ni el borde brillante: una `<table>` sin clase con `/native`, o un componente propio construido con `@apply surface`.
+- Todo lo demás que se esmerila con glass conserva el desenfoque ligero y el fondo más claro de liquid, sin la lente ni el borde brillante: una `<table>` sin clase con `/native`.
 - La lente es una erosión de 8px desenfocada sobre 10px en cada superficie, y de 3px desenfocada sobre 3.5px en un botón; su intensidad es fija. Un filtro no puede leer una custom property, así que ninguno de los dos es un control. Las esquinas sí lo son, mediante `--glass-radius` y `--glass-radius-surface`, con valores por defecto mayores: una esquina continua parece más pequeña que una redondeada del mismo radio.
-- Una región de otra estética anidada dentro de una región liquid, o de `.glass` simple, conserva su propio material y no toma capas.
+- Decide la región más cercana. Una región de otra estética anidada dentro de una región liquid, o de `.glass` simple, conserva su propio material y no toma capas, y una región liquid anidada a su vez dentro de esa vuelve a tomarlas.
 - Sin `.glass` en el ámbito, solo cambia las esquinas.
-- Con `prefers-reduced-transparency: reduce` desaparecen el desenfoque y la lente y la superficie es opaca, como con glass. Con colores forzados, las capas no dibujan nada.
+- Con `prefers-reduced-transparency: reduce`, y con colores forzados, desaparecen el desenfoque y la lente y la superficie es opaca, como con glass.
 - El texto queda sobre un cristal más claro que con glass. Sobre contenido recargado, comprueba que tu texto se sigue leyendo: el fondo es el 30% del color de la página, frente al 45% de glass.
 
 #### Botones liquid
@@ -152,8 +155,9 @@ Un botón es un cristal liquid cuando él mismo lleva `.glass-liquid`, dentro de
 **Excepciones:**
 
 - Las esquinas son una unidad o nada. Los chips pequeños son cuadrados en lugar de escalonados: badges, teclas, código en línea, checkboxes y switches. Una unidad menos en cada esquina de un badge de 24px parecería un mordisco, no una esquina.
+- Las superficies también son cuadradas: una `.card`, un `.panel` o una `.alert` conserva el anillo interior, pero no recibe recorte ni recorta nada. Un recorte cortaría todo lo que contiene, así que un tooltip dentro de una tarjeta, una sombra o un anillo de foco quedarían recortados.
 - Las tablas, las barras de progreso y los skeletons también son cuadrados. Una tabla no recibe recorte porque en Chromium y WebKit su caja incluye el caption, y el recorte caería en el caption en lugar de en las filas. Las barras de progreso y los skeletons solo toman la esquina cuadrada.
-- Un bloque de código `.pre` es escalonado como una tarjeta. No tiene borde por defecto, así que el recorte se ve sin contorno alrededor.
+- Un bloque de código `.pre` es escalonado como un botón. No tiene borde por defecto, así que el recorte se ve sin contorno alrededor.
 - El contorno es un anillo interior, porque un recorte elimina un borde real; por el mismo motivo, el anillo de foco es una segunda capa interior en lugar de un outline. Los dos son el propio borde del elemento y no una sombra, así que el borde responde a `.edged` y `.edgeless` como lo hace un borde: un badge `.edgeless` y un botón `.solid` no dibujan ninguno, una tarjeta `.edged` dibuja uno, y un campo conserva el suyo pida lo que pida un contenedor.
 - El anillo de foco interior lleva dentro una línea de 2px del color de la página. El anillo es del color principal, así que en un botón `.solid.primary` se dibujaría sobre su propio color; la línea es lo que se ve ahí.
 - Con colores forzados desaparecen tanto el anillo como el recorte, porque el sistema elimina todas las sombras de caja: los componentes dibujan un borde real de 2px y esquinas rectas, y `.pixel-solo` un outline hacia dentro.
@@ -177,7 +181,7 @@ La barra es un tono más oscuro del propio color del elemento y no una sombra de
 
 **Excepciones:**
 
-- Solo se apoya sobre una barra lo que el registro deja en reposo por encima de cero: botones y tarjetas. Un badge, un chip, un campo o un tooltip es plano hasta que pide profundidad con `.raised`, y `.flat` quita la barra a cualquier cosa:
+- Solo los botones y las tarjetas se apoyan sobre una barra, porque son los componentes que reposan por encima de la elevación cero. Un badge, un chip, un campo o un tooltip es plano hasta que pide profundidad con `.raised`, y `.flat` quita la barra a cualquier cosa:
 
   ```html
   <div class="card soft edgeless info flat">Promo panel, deliberately flat</div>
@@ -187,7 +191,8 @@ La barra es un tono más oscuro del propio color del elemento y no una sombra de
 - Las etiquetas se dibujan más gruesas y con algo más de espaciado entre letras, mediante `--ui-label-weight` y `--ui-label-tracking`, así que tu propia utilidad `font-*` o `tracking-*` sigue ganando. Llega a `.btn` y `.badge`, y a un `<button>` sin clase solo donde `/native` le da estilo. Las mayúsculas no se tocan: cómo se redacta una etiqueta es decisión de la aplicación, así que si quieres botones en mayúsculas, escribe esa regla en tu propia hoja de estilos.
 - `.card.interactive` se pulsa como un `.btn`, así que una baldosa de respuesta chunky cae sobre su barra al hacer clic; `.card.pressable` obtiene la misma pulsación por sí sola. Una `.card` simple se queda quieta.
 - El `.primary` incluido es casi negro en una página clara y casi blanco en una oscura, y la barra siempre se mezcla hacia el negro. En una página clara, la barra de un botón primario es casi invisible frente a su cara casi negra (medido `1.04:1`). En una página oscura, la cara casi blanca frente a la misma barra se distingue bien (`2.48:1`). Dale a `.primary` un matiz propio si es la llamada a la acción y necesita la señal de profundidad en los dos temas.
-- En esta estética la profundidad es la barra, nunca una sombra desenfocada. Todo lo que el registro deja plano queda a ras de la página.
+- Con `prefers-reduced-motion: reduce` la pulsación sigue ocurriendo, pero al instante, como con neobrutalism.
+- En esta estética la profundidad es la barra, nunca una sombra desenfocada. Todo lo que reposa plano queda a ras de la página.
 - Los controles dibujan un gris más intenso que las baldosas que los rodean, `neutral-600` en claro y `neutral-400` en oscuro, mediante `--ui-control-ink`, para que un campo se lea como campo dentro de una baldosa.
 
 ## Cyber
@@ -260,11 +265,12 @@ El botón discontinuo es `ghost edged` porque un botón relleno no tiene una lí
 
 **Excepciones:**
 
-- Sketch nombra los componentes para rotar sus contornos, así que sus contornos solo llegan a los componentes de este paquete; una región de otra estética anidada dentro de una región sketch conserva las esquinas de esa estética.
+- Sketch nombra los componentes para rotar sus contornos, así que sus contornos solo llegan a los componentes de este paquete; una región de otra estética anidada dentro de una región sketch conserva las esquinas de esa estética. Decide la región más cercana, así que una región sketch anidada a su vez dentro de esa rota.
 - Los chips, como checkboxes, teclas, código, badges, switches y barras de progreso, rotan entre pequeños contornos irregulares definidos en `--ui-radius-tight`. Define ese token en un chip para elegir su forma.
 - Un `.btn.pill` toma una píldora redondeada acotada a su propia altura, para que uno ancho no se convierta en un óvalo. Los badges, las barras de progreso y los switches toman su contorno de chip. Los radios y el icono del tooltip siguen siendo círculos, ligeramente irregulares, para que un radio nunca se confunda con un checkbox. Un `--ui-radius-pill` explícito en un elemento sigue ganando.
 - La `--font-sketch` la aportas tú. El paquete no incluye ninguna fuente manuscrita y recurre a la familia `cursive` de la plataforma.
-- Los botones se pulsan con el `scale(0.97)` simple; el movimiento reducido lo desactiva.
+- Los botones se pulsan con el `scale(0.97)` simple; con movimiento reducido la pulsación sigue ocurriendo, al instante.
+- Con [`/native`](../setup.md#html-sin-clases), un `<hr>`, una `<table>` y un checkbox simples toman los detalles discontinuos de `.divider`, `.data-table` y `.checkbox`.
 - El modo de colores forzados dibuja continuos los detalles discontinuos, como cualquier otra línea del material.
 
 ## Clases solo

package/docs/es/usage/buttons.md

@@ -2,7 +2,7 @@
 title: Botones
 description: Acciones destructivas y secundarias, botones de icono, tamaños, enlaces con aspecto de botón, estados deshabilitados e iconos de carga.
 order: 1
-source: 191dd268b7da59fd3b3bf82c23aa192207c89381
+source: 54f7c8a1eee5a0f696dc60b9f60f42026d49c5d5
 ---
 
 # Botones
@@ -40,7 +40,11 @@ Un botón acepta una intención, una clase de relleno y una clase de borde, toda
 
 Un botón **neutro** nunca se rellena del todo. Su color es el propio color de texto de la página, así que un relleno completo sería un bloque negro o blanco, lo más llamativo de la página para la intención que no significa nada en particular. Un botón neutro `.solid` se queda en un relleno del 20%, un gris discreto un paso más oscuro que `.soft`. Todas las intenciones con nombre se rellenan al 100%.
 
-Con hover, el relleno de un botón se intensifica en `--hover-step` (14%), así que un botón `.ghost` toma un tinte y uno `.solid` cambia al color de hover de su intención. Al pulsarlo se encoge un poco (`scale(0.97)`); una [estética](./aesthetics.md) puede reemplazarlo por su propia pulsación, y la preferencia de movimiento reducido del usuario lo desactiva.
+Con hover, el relleno de un botón se intensifica en `--hover-step` (14%), así que un botón `.ghost` toma un tinte y uno `.solid` cambia al color de hover de su intención. Al pulsarlo se encoge un poco (`scale(0.97)`); una [estética](./aesthetics.md) puede reemplazarlo por su propia pulsación, y con la preferencia de movimiento reducido del usuario sigue ocurriendo, al instante.
+
+Un botón neutro `.soft` o `.ghost` dentro de una superficie con relleno, como un botón Cancelar en una `.card.solid.primary` o en una `.alert.solid.destructive`, imprime su etiqueta y su línea en el color de texto de esa superficie, así que sigue siendo legible sobre el relleno. Un campo de texto hace lo mismo. Un botón con intención conserva su propio color, y también uno neutro `.solid`, que se apoya en un relleno propio.
+
+Cuando un botón con relleno tiene el foco del teclado, una línea de 2px del color de la página recorre el interior del anillo de foco, así que el anillo sigue visible sobre un botón relleno del mismo color, como `.solid.primary`.
 
 ## Tamaños y formas
 

package/docs/es/usage/composing.md

@@ -2,7 +2,7 @@
 title: Composición
 description: Consulta de cómo se combinan la intención, la presentación, la estética y la elevación, el aspecto por defecto de cada componente y qué clases lee cada uno.
 order: 8
-source: 8aa84776103ce27781f924220cc7c621231e5734
+source: 2493c7c14124565b565b1226e99d4b3de3b087b2
 ---
 
 # Composición
@@ -23,6 +23,9 @@ Esta es una página de consulta. [Construir una pantalla](../concepts.md) presen
 - **Las estéticas y los [tokens de material](./customizing.md#tokens-de-material) se heredan** de la misma forma.
 - **La intención no se hereda.** `.primary` y las demás clases de intención colorean solo el elemento en el que están. Un contenedor que recoloreara en silencio todo lo que contiene volvería rojo el botón neutro Cancelar de una tarjeta roja de zona de peligro. `.neutral` nombra el valor por defecto; úsalo donde un elemento tomaría si no una intención, como una fila de tabla dentro de una tabla `.success`. Consulta [Temas → Tokens de intención](./theming.md#tokens-de-intención).
 - **La elevación no se hereda.** `.raised` eleva solo el elemento en el que está; consulta [Elevación](#elevación).
+- **El tamaño no se hereda.** `.sm` y `.lg` cambian el tamaño solo del botón o del control en el que están, así que un formulario `.sm` no encoge los campos que contiene. Consulta [Botones → Tamaños y formas](./buttons.md#tamaños-y-formas) y [Formularios → Tamaños](./forms.md#tamaños).
+
+Con los puntos de entrada de código fuente de Tailwind, cada clase anterior, salvo las clases de estética, es también una utilidad de Tailwind, así que variantes como `md:lg` y `dark:solid` funcionan y `@apply btn primary soft sm` le da a una clase tuya la combinación completa. Los modificadores documentados con cada componente, como `.tight` o `.interactive`, también son utilidades, así que `@apply stack tight` funciona. Las clases de estética, como `.glass`, siguen siendo CSS simple, así que `@apply glass` y `md:glass` no funcionan; escribe la clase en el marcado. Consulta [Tailwind CSS v4 → Construir tus propios componentes con `@apply`](../integrating/tailwind.md#construir-tus-propios-componentes-con-apply), y [Preajustes](./presets.md) para saber cuándo recurrir a ello.
 
 ## Valores por defecto de los componentes
 
@@ -78,6 +81,7 @@ Una `.card.soft`, un `.panel` y una `.alert` neutros no muestran tinte en reposo
 
 - Una `.card.soft` con `.interactive` o `.hoverable` muestra el tinte con hover. Una `.card.soft` simple y un `.panel` no tienen estado de hover.
 - Con una de las seis intenciones incluidas, los tres conservan el tinte normal del 12%, y una tarjeta lo intensifica con hover. Una intención que hayas definido tú se trata aquí como neutra; consulta [Temas → Tu propia intención](./theming.md#tu-propia-intención).
+- La presentación puede venir del elemento o de un contenedor: `<div class="soft"><div class="card">` reposa como `.card.soft`, y un contenedor `.ghost` o `.solid` le da a un `.panel` o a una `.alert` la placa que le daría su propia clase.
 - Un `.badge` conserva su tinte del 12% incluso cuando es neutro. No tiene borde, así que sin el tinte se perdería en el texto que lo rodea.
 
 `.kbd`, `.code` y `.pre` funcionan de otra manera. Reposan sobre el tono subtle de su intención, `--intent-subtle`, que es `--color-surface` para la neutra, y una intención incluida añade encima un 12% de su color. Una intención que hayas definido tú muestra su propio tinte `--intent-subtle` sin ese 12% adicional.
@@ -139,7 +143,7 @@ Qué clases cambian cada componente. "Material" es lo que una [estética](./aest
 | `.progress`                                     | Relleno del carril, borde y grosor del borde. La parte rellena es siempre el color completo de la intención. |
 | `.skeleton`, `.divider`                         | Solo intención.                                                                                              |
 
-Las clases de estado y los modificadores como `.interactive`, `.hoverable`, `.pressable`, `.p-sm` y `.vertical` se documentan con su componente. Un control no válido se marca con `aria-invalid="true"`, no con una clase; consulta [Formularios](./forms.md#mostrar-un-error-de-validación).
+Las clases de estado y los modificadores como `.interactive`, `.hoverable`, `.pressable`, `.p-sm` y `.vertical` se documentan con su componente. Cada uno tiene efecto en los componentes que lo leen, y en `/tw` son utilidades, así que `@apply card interactive` funciona. Un control no válido se marca con `aria-invalid="true"`, no con una clase; consulta [Formularios](./forms.md#mostrar-un-error-de-validación).
 
 ## Elevación
 

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

@@ -2,7 +2,7 @@
 title: Contenido y layout
 description: Consulta de cada helper de layout con su espaciado, la escala tipográfica con sus tamaños, las tarjetas y los paneles con su relleno interior, las tablas, las citas, el código y las teclas.
 order: 10
-source: 6a638b6d6e735f1a7343bf9c6b2db131ca91fc30
+source: 19c4b12f34054533e56cbc1edbefff908c48a1e7
 ---
 
 # Contenido y layout
@@ -46,7 +46,7 @@ Un `.divider` acepta una intención, que lo colorea, e ignora las clases de pres
 
 Los dos tamaños mayores crecen en el breakpoint `md` de Tailwind, 48rem por defecto. Con los puntos de entrada de código fuente de Tailwind, se aplica tu propio breakpoint `md`. El paquete no define ningún tamaño en el texto sin clase: el texto del cuerpo y los encabezados sin clase toman el tamaño del navegador, o el tamaño del texto que los rodea con el reset; consulta [Configuración inicial → HTML sin clases](../setup.md#html-sin-clases) para el mapeo sin clases.
 
-`.text-body` mide 0.875rem, menos que el texto de la página de 1rem; úsalo para texto secundario o denso, no para el texto principal de la página.
+`.text-body` mide 0.875rem, menos que el texto de la página de 1rem; úsalo para texto secundario o denso, no para el texto principal de la página. `/native` es la excepción: define `.text-body` en `body`, así que ahí es el texto de la página, y los párrafos y los elementos de lista lo heredan del elemento en el que estén. Consulta [HTML sin clases](../setup.md#html-sin-clases).
 
 `.selection-contrast` en un elemento cambia los colores del texto seleccionado dentro de él a `--color-primary` sobre `--color-primary-contrast`. Úsalo en una zona `.solid.primary`, donde el color de selección por defecto coincidiría con el fondo.
 
@@ -89,7 +89,7 @@ Una `.card.soft` neutra y un `.panel` neutro no muestran tinte: reposan sobre el
 | `.hoverable`   | Solo el color de hover, sin cursor de puntero.                                                                  |
 | `.pressable`   | Solo la pulsación y el cursor de puntero.                                                                       |
 
-Con el aspecto por defecto, una pulsación reduce ligeramente la tarjeta (`scale(0.97)`); una estética puede reemplazarla con su propia pulsación, y la preferencia de movimiento reducido la desactiva.
+Con el aspecto por defecto, una pulsación reduce ligeramente la tarjeta (`scale(0.97)`); una estética puede reemplazarla con su propia pulsación, y con la preferencia de movimiento reducido sigue ocurriendo, al instante.
 
 Usa una de las dos mitades para una tarjeta que responde solo a un gesto. Una tarjeta que contiene su propio botón lleva `.hoverable`, para que pulsar el botón no pulse toda la tarjeta.
 
@@ -104,6 +104,8 @@ Usa una de las dos mitades para una tarjeta que responde solo a un gesto. Una ta
 
 Estas clases solo dan estilo. Ponlas en un enlace o un botón reales y dales un nombre accesible; un `<div class="card interactive">` no puede recibir el foco ni usarse con el teclado.
 
+Una tarjeta `.interactive` o `.pressable` deshabilitada muestra el cursor de no permitido en lugar del puntero, tanto si es un `<button>` con `disabled` como si lleva `.disabled`, `aria-disabled="true"` o `data-disabled`.
+
 ## Tablas
 
 La pantalla de ajustes enumera las claves de API en una tabla:
@@ -148,6 +150,8 @@ La pantalla de ajustes enumera las claves de API en una tabla:
 
 Las filas de una tabla toman la intención de la tabla, así que `.data-table.success` colorea de verde su encabezado y sus líneas. Una fila con su propia clase de intención usa esa en su lugar, como hace el `<tr class="destructive">` de la clave revocada. `<tr class="neutral">` devuelve una fila a neutra dentro de una tabla de color. En una tabla `.solid`, una fila con su propia intención conserva el color de texto de la tabla para seguir siendo legible sobre el relleno de la tabla, y muestra su intención con su línea divisoria y su hover. Es el único lugar en el que una intención se hereda, porque las filas son partes de la tabla, no componentes separados.
 
+Solo las seis intenciones incorporadas y `.neutral` cambian el color de una fila del cuerpo. Una fila con una intención que definiste tú, como `<tr class="beta">`, se ve como el resto de la tabla: su texto, su línea y su hover vienen de la intención de la tabla. Para marcar esa fila, escribe en ella una clase de intención incorporada y cambia en la fila la familia de colores de esa intención, como describe [Temas → Tu propia intención](./theming.md#tu-propia-intención), o pinta la fila con tus propias utilidades.
+
 ### Líneas divisorias de las tablas
 
 Una tabla dibuja líneas debajo de su encabezado y encima de su pie. `.ruled` y `.ruleless` las cambian junto con las líneas entre las filas del cuerpo:
@@ -212,4 +216,4 @@ Un `.kbd`, un `.code` o un `.pre` reposa sobre el tono subtle de su intención,
 
 ## Siguiente paso
 
-[Accesibilidad](../accessibility.md) enumera lo que el CSS hace por tus usuarios y lo que tu aplicación todavía les debe.
+[Preajustes](./presets.md) muestra cómo definir un aspecto una sola vez en lugar de en cada elemento. [Accesibilidad](../accessibility.md) enumera lo que el CSS hace por tus usuarios y lo que tu aplicación todavía les debe.

package/docs/es/usage/customizing.md

@@ -2,7 +2,7 @@
 title: Personalización
 description: Consulta de los tokens de presentación y de material, los controles de las estéticas, las seis variables públicas de componente, la paleta generada y los helpers para construir tus propios componentes.
 order: 9
-source: aa87391c5599ddfda913abcce9d17d9686345906
+source: 790dec3b1fcf41af4b38aca7c5b8a93135827c1e
 ---
 
 # Personalización
@@ -76,7 +76,7 @@ La geometría de la sombra se divide en partes sin color, así que se heredan si
 | `--ui-hover-shadow-y`     | Desplazamiento vertical de la sombra con hover.                                                                                                                                     | `--ui-shadow-y`                                         |
 | `--ui-active-shadow-x`    | Desplazamiento horizontal de la sombra al pulsar.                                                                                                                                   | `--ui-shadow-x`                                         |
 | `--ui-active-shadow-y`    | Desplazamiento vertical de la sombra al pulsar.                                                                                                                                     | `--ui-shadow-y`                                         |
-| `--ui-active-transform`   | Transformación al pulsar. `none` con `prefers-reduced-motion`.                                                                                                                      | `scale(0.97)`                                           |
+| `--ui-active-transform`   | Transformación al pulsar. Se conserva con `prefers-reduced-motion`, que solo quita su transición.                                                                                   | `scale(0.97)`                                           |
 | `--ui-active-translate-x` | Distancia que recorre una pulsación hacia la profundidad del elemento; `-y` a su lado. Se escala como la sombra.                                                                    | `0px`                                                   |
 | `--ui-shadow-ink`         | Porcentaje del color de la sombra tomado de la tinta de la intención.                                                                                                               | `0%`                                                    |
 | `--ui-halo-blur`          | Desenfoque de un halo alrededor del elemento; `--ui-halo-spread` a su lado. La elevación no lo escala.                                                                              | `0px`                                                   |
@@ -93,7 +93,7 @@ La geometría de la sombra se divide en partes sin color, así que se heredan si
 | `--ui-clip-tight`         | Silueta compacta del componente.                                                                                                                                                    | `--ui-clip`                                             |
 | `--ui-focus-inset`        | Grosor de la capa de foco interior.                                                                                                                                                 | Sin definir                                             |
 | `--ui-label-weight`       | Grosor de la etiqueta de `.btn` (y, con `/native`, de un `<button>` sin clase) y de `.badge`.                                                                                       | Semibold en un botón, bold en un badge                  |
-| `--ui-label-tracking`     | Espaciado entre letras de la etiqueta. Sin definir, la etiqueta lo hereda.                                                                                                          | Sin definir                                             |
+| `--ui-label-tracking`     | Espaciado entre letras de la etiqueta. Sin definir, es `normal`, así que ni el espaciado de la página ni el de un contenedor llega a la etiqueta.                                   | `normal`                                                |
 | `--ui-label-case`         | `text-transform` de la etiqueta.                                                                                                                                                    | `none` en un botón; heredado en un badge                |
 | `--ui-label-shadow`       | `text-shadow` de la etiqueta, escrito sin color para que tome el de la propia etiqueta.                                                                                             | `none` en un botón; heredado en un badge                |
 
@@ -120,7 +120,7 @@ Qué esquinas toman la esquina es una elección aparte. `.cut-diagonal` conserva
 
 `--ui-surface-image` pone cualquier `background-image` sobre la placa de una superficie: tarjetas, paneles, alertas y tooltips, no controles. Quien lo define es responsable del contraste del texto que queda encima, y tu propio `background-image` en una superficie sigue ganando.
 
-`--ui-label-*` trata la etiqueta de un botón o de un badge: grosor, espaciado entre letras, mayúsculas y una sombra de texto. Escribe la sombra sin color, como `0 0 6px`, para que tome el color de la propia etiqueta y no pueda reducir su contraste. Tus propias utilidades `font-*`, `tracking-*` y de mayúsculas siguen ganando.
+`--ui-label-*` trata la etiqueta de un botón o de un badge: grosor, espaciado entre letras, mayúsculas y una sombra de texto. Escribe la sombra sin color, como `0 0 6px`, para que tome el color de la propia etiqueta y no pueda reducir su contraste. Tus propias utilidades `font-*`, `tracking-*` y de mayúsculas siguen ganando. Una etiqueta no hereda el espaciado entre letras, así que una utilidad `tracking-*` en un contenedor deja sus botones y badges en `normal`; para espaciar todas las etiquetas de una región, define `--ui-label-tracking` en ella, que la heredan.
 
 Con colores forzados, cada uno de estos dibuja su versión simple: una línea continua, sin halo, sin capa pintada y sin sombra de etiqueta. La silueta y el anillo de abajo también desaparecen. Los colores forzados eliminan todas las sombras de caja, así que `--ui-clip`, `--ui-clip-tight`, `--ui-border-max` y `--ui-shadow-edge` se anulan y un componente dibuja su borde real con `--ui-border-width`.
 
@@ -198,7 +198,7 @@ Los controles de todas las estéticas llegan de la misma forma: cada control se
 
 Los controles y los tokens de material llegan en direcciones opuestas. Un control se lee una vez, en el elemento con la clase de estética, y el resultado se hereda. Así que define un control en ese elemento o en uno por encima; definido en un elemento dentro de la estética, no cambia nada, porque el valor ya se ha leído.
 
-Cada componente lee `--ui-radius` y los demás tokens de material al dibujarse. Funcionan en el elemento en el que se definen y en todo lo que contiene, que es como redondeas una tarjeta de forma distinta a sus vecinas sin tocar el control.
+Cada componente lee `--ui-radius`, `--ui-radius-surface` y los demás tokens de material al dibujarse. Funcionan en el elemento en el que se definen y en todo lo que contiene, que es como redondeas una tarjeta de forma distinta a sus vecinas sin tocar el control. Fíjate en cuál lee cada componente: una superficie (`.card`, `.panel`, `.alert`) toma `--ui-radius-surface`, y un control como `.btn` o `.ipt` toma `--ui-radius`. `style="--ui-radius-surface: 0"` deja cuadrada una tarjeta; `--ui-radius` en esa tarjeta deja cuadrados los botones que contiene y la tarjeta sigue redondeada.
 
 Las estéticas incluidas definen los tokens de material compartidos de arriba. Todas las estéticas incluidas definen `--ui-ink` para su línea neutra. Todas definen también `--ui-control-ink`: `.glass` y `.chunky-tile` con una línea propia, más intensa que la de sus superficies, y las demás con `--color-control-border`, ya que su tinta es casi negra o casi blanca y un checkbox en reposo con ese contorno parecería marcado. `.glass` define además `--ui-rule-ink`, para que las líneas de una tabla se lean sobre su placa; las demás lo anulan. Las clases de intención siguen sobrescribiendo los huecos de intención de cada componente.
 
@@ -216,9 +216,9 @@ Los mismos controles ajustan la [clase solo](./solo.md) de cada estética, que l
 
 ```css
 .my-badge {
-  background: var(--palette-success-soft-page-bg);
+  background: var(--palette-success-soft-bg);
   color: var(--palette-success-soft-fg);
-  border-color: var(--palette-success-soft-page-edge);
+  border-color: var(--palette-success-soft-edge);
 }
 ```
 
@@ -227,10 +227,13 @@ Cada valor es un color final, nunca una referencia a otra variable, así que el
 Nombres: `--palette-<intent>-<presentation>-<slot>`, donde `<intent>` es una de las siete intenciones publicadas (`neutral`, `primary`, `secondary`, `success`, `warning`, `destructive`, `info`) y `<presentation>` es `solid`, `soft` o `ghost`. `<slot>` es `bg`, `fg` o `edge`. Dos calificadores se añaden solo donde aplican:
 
 - Un calificador de fondo, `page` o `subtle`, antes del hueco. Solo aparece en el `bg` y el `edge` de `.soft` y `.ghost`, porque un relleno `.solid` cubre su fondo y el color del texto nunca depende de él.
-  - Sin calificador es el fondo transparente de `.badge` y `.btn`: `--palette-success-soft-bg`.
-  - `page` es el fondo de `.alert`, `--color-background`: `--palette-success-soft-page-bg`.
-  - `subtle` es el fondo de `.pre`, `.code`, `.kbd` y `.tooltip-bubble`, el propio `--intent-subtle` de la intención: `--palette-success-soft-subtle-bg`.
-- Un sufijo `-hover`, solo en `bg` y `edge`, porque el color del texto no cambia con hover: `--palette-success-soft-page-bg-hover`.
+  - Sin calificador es lo que dibujan `.badge` y `.btn`, sobre un fondo transparente: `--palette-success-soft-bg`.
+  - `page` es lo que dibuja `.alert`, sobre la página: `--palette-success-soft-page-bg`.
+  - `subtle` es lo que dibujan `.kbd`, `.code` y `.pre`, sobre el propio tono sutil de la intención: `--palette-success-soft-subtle-bg`.
+
+  Cada valor se lee del propio componente, así que incluye lo que el componente hace por su cuenta. Un `.alert`, `.kbd`, `.code` o `.pre` neutral conserva un relleno más discreto que un `.badge` neutral, y sus valores `neutral-soft-page` y `neutral-soft-subtle` lo reflejan. `.tooltip-bubble` no coincide con ninguno de los tres: sin intención se rellena con su propio tono de tooltip, y su borde es sólido en vez de atenuado.
+
+- Un sufijo `-hover`, solo en `bg` y `edge`, porque el color del texto no cambia con hover: `--palette-success-soft-page-bg-hover`. `.alert`, `.kbd`, `.code` y `.pre` no tienen hover propio, así que sus valores de hover son lo que dibuja el componente cuando le añades `box-hover`.
 
 Los valores claros se definen en `:root`. Los oscuros se aplican bajo `.dark`, `.theme-dark` o `[data-theme="dark"]` en el elemento o en uno por encima, los mismos selectores que usa el tema del paquete. Los valores claros también se aplican bajo `.light`, `.theme-light` y `[data-theme="light"]`, así que gana el tema explícito más cercano: una zona clara dentro de una oscura lee los valores claros.
 
@@ -264,7 +267,7 @@ Los ejemplos en contexto están en [Feedback → Mostrar el progreso](./feedback
 
 ## Helpers de composición
 
-Para construir un componente que el paquete no incluye, como un control segmentado o un chip de filtro, compónlo con las mismas clases con las que están construidos los componentes del paquete. Con CSS compilado, escríbelas como clases; con el código fuente de Tailwind, también puedes usarlas con `@apply`.
+Para construir un componente que el paquete no incluye, como un control segmentado o un chip de filtro, compónlo con las mismas clases con las que están construidos los componentes del paquete. Con CSS compilado, escríbelas como clases; con el código fuente de Tailwind, también puedes usarlas con `@apply`, junto con las clases de intención, presentación, elevación y esquina, que en `/tw` también son utilidades: `@apply box box-hover neutral soft edgeless`. Para darle en cambio una receta fija a un componente del paquete, como un botón primario pequeño y suave, consulta [Tailwind CSS v4 → Construir tus propios componentes con `@apply`](../integrating/tailwind.md#construir-tus-propios-componentes-con-apply).
 
 | Clase          | Lo que le da a un elemento                                                                                                                                                                                             |
 | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -287,7 +290,10 @@ Chips de filtro para la lista de miembros, uno pulsado y otro no:
 Qué darle a cada uno:
 
 - **`box` necesita una clase de relleno y una de borde.** No tiene valores por defecto propios, así que sin `.solid`, `.soft` o `.ghost` y sin `.edged` o `.edgeless`, en el elemento o en un contenedor, no dibuja nada. `surface` y `text-control` tienen valores por defecto y funcionan solos.
-- **Nombra la intención.** Un elemento `box` toma la intención del elemento más cercano a su alrededor que tenga una, a diferencia de los componentes del paquete. Ponle `.neutral` o una clase de intención.
+- **Nombra la intención en `box`.** Un elemento `box` toma la intención del elemento más cercano a su alrededor que tenga una, a diferencia de los componentes del paquete. Ponle `.neutral` o una clase de intención. `surface` y `text-control` son neutrales salvo que el elemento tenga una clase de intención, como los componentes.
+- **`@apply` lleva el helper completo.** `@utility my-field { @apply text-control; }` obtiene lo mismo que `class="text-control"`: la intención neutral y el borde del campo, `.soft`, `.solid` y `.edgeless` en el elemento, y el aspecto inválido con `aria-invalid="true"`. `@apply surface` es neutral de la misma forma. Una clase de intención que definas tú debe ser CSS plano o una utilidad para colorear un elemento así, no una regla en `@layer components`.
+- **Escribe como utilidad la clase que aplica un helper.** Lo que copia `@apply` cae en la [capa de cascada](../setup.md#capas-de-cascada) de la regla en la que está escrito. Los helpers son utilidades, y `@utility my-field` mantiene tu clase en `utilities` junto a ellos, así que tus otras utilidades siguen alcanzándola. Escrita como CSS plano, `.my-field { @apply text-control; }` queda sin capa, y todo lo que declara el helper gana sobre cualquier utilidad en el elemento: una clase de intención que escribiste como utilidad deja el campo neutral, y `mt-8` no mueve un diálogo. Tu propio CSS sin capa sigue compitiendo con él, por especificidad y después por orden en el código, como dos reglas sin capa cualesquiera.
+- **Un diálogo funciona con `@apply surface`.** Un `<dialog>` cerrado con tu propia clase que hace `@apply surface` permanece oculto, y uno abierto se centra, como con `.card`. Ocultar uno cerrado gana sobre una utilidad de display como `flex`; un margen que pongas sigue colocando uno abierto, y una utilidad de margen también lo hace cuando tu clase es una utilidad.
 - **El tamaño y el espaciado son cosa tuya.** Ninguno de los helpers define el relleno interior, el ancho ni el alto; `text-control` no define la altura de 2.5rem que añade `.ipt`.
 - **También el comportamiento y la semántica.** Usa un `<button>`, un `<input>` o un `<a href>` reales, o añade tú el rol y el manejo del teclado, y define estados como `aria-pressed` o `aria-invalid`. `box` dibuja el aspecto deshabilitado para `disabled`, `.disabled`, `aria-disabled="true"` y `data-disabled`, pero solo el atributo `disabled` impide la interacción.
 

package/docs/es/usage/feedback.md

@@ -2,7 +2,7 @@
 title: Feedback
 description: Un botón que indica que está guardando, alertas, badges, placeholders de carga y barras de progreso, y lo que tu código debe mantener sincronizado con ellos.
 order: 3
-source: e2a4c2af517dd286e22e762e4ba1997ebdb3c8c6
+source: ce1defb7385bc009988d903fd895bcb7edb5ab3b
 ---
 
 # Feedback
@@ -80,6 +80,8 @@ Un badge es una pequeña píldora para un estado o un recuento:
 
 Un badge es soft y sin borde por defecto, y acepta las mismas clases de intención y presentación que un botón: `.badge.warning` para "Pago pendiente", `.badge.info.solid` para un "Nuevo" relleno. A diferencia de una alerta, un badge sin intención conserva su tinte claro, porque no tiene borde, y sin el tinte se perdería en el texto que lo rodea.
 
+Un badge neutro que no es `.solid`, como un contador dentro de un `.btn.primary`, imprime en el color de texto del componente con relleno en el que está, así que sigue siendo legible sobre ese relleno. Un badge con intención conserva su propio color.
+
 ## Mostrar un placeholder mientras carga
 
 Mientras la tarjeta de perfil espera los datos, muestra bloques grises donde irá el texto:
@@ -134,6 +136,8 @@ Cuando no sabes cuánto ha avanzado el trabajo, como mientras se prepara la expo
 
 `.active` añade un brillo sobre el carril de una barra determinada, para mostrar que el trabajo sigue en marcha entre actualizaciones. Las dos animaciones se detienen cuando el usuario pide movimiento reducido; una barra indeterminada queda entonces en reposo con su relleno al principio.
 
+Con la [hoja de estilos sin clases](../setup.md#html-sin-clases), un elemento `<progress>` simple se dibuja como `.progress`: lleno hasta su `value`, o con el barrido indeterminado cuando no tiene `value`. Anuncia su valor por sí mismo, así que no necesita `aria-valuenow`.
+
 ### Cómo se ven las barras de progreso
 
 El relleno es el color de la intención con toda su intensidad, o `currentColor` sin intención. El carril es soft y sin borde por defecto: un tinte claro sin borde.