@codenhub/styles 0.7.0 → 0.9.0

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: 52678f7a4588460f836ce64909526d77e73aa4c6
 ---
 
 # 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
@@ -237,7 +242,7 @@ Contornos dibujados a mano: los controles toman esquinas elípticas largas e irr
 
 La línea de tinta de 1px es continua; los checkboxes, los divisores y las líneas divisorias de las tablas son discontinuos. `--ui-line-style: dashed` hace discontinuo cualquier otro componente, y `--ui-rule-style: solid` devuelve un divisor o una tabla a continuo. La sombra dura de 2px es una pequeña señal neutra de profundidad.
 
-`--sketch-radius`, `--sketch-radius-surface` y `--sketch-radius-pill` reemplazan los contornos de control, de superficie y de botón pill. Define uno y todas las posiciones toman ese único contorno. Para dar forma a un solo componente, define en él `--ui-radius` (`--ui-radius-surface` en una superficie).
+`--sketch-radius`, `--sketch-radius-surface` y `--sketch-radius-pill` reemplazan los contornos de control, de superficie y de botón pill. Define uno en la región o en cualquier elemento dentro de ella, y todas las posiciones por debajo toman ese único contorno, en los componentes que rotan: `.btn`, `.ipt`, `.textarea`, `.select`, `.input-group`, `.pre` y `.tooltip-bubble` para el contorno de control, y `.card`, `.panel`, `.alert` y `.data-table` para el de superficie. Cualquier otro elemento que toma un contorno de control o de superficie, como un `.skeleton` o un control sin clase bajo `/native`, toma el contorno que resolvió la propia región, así que un control definido entre la región y ese elemento no lo alcanza; defínelo en la región. Los chips, como `.badge` y `.checkbox`, toman contornos pequeños propios que ningún control cambia. Para dar forma a un solo componente, define en él `--ui-radius` (`--ui-radius-surface` en una superficie).
 
 ```html
 <section class="sketch" style='--font-sketch: "Comic Sans MS", cursive'>
@@ -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: 160ae54be3321154eca2f1ce22b843aa6b87314c
 ---
 
 # 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:
@@ -160,6 +164,8 @@ Una tabla dibuja líneas debajo de su encabezado y encima de su pie. `.ruled` y
 
 `--ui-rule` es el token detrás de las dos clases, así que un contenedor puede poner líneas en todas las tablas que contiene: `style="--ui-rule: 100%"` actúa como `.ruled`, y `0%` como `.ruleless`.
 
+Dos variables y un token ajustan el resto, en la tabla o en cualquier elemento que la rodee. `--table-cell-padding` define el padding de cada celda, así que `--table-cell-padding: 0.375rem 0.75rem` hace una tabla densa. `--table-hover` define el color de una fila del cuerpo bajo el puntero, y `transparent` desactiva el hover. `--ui-rule-ink` define el color de las líneas de una tabla neutra; una tabla con intención las dibuja en el color de la intención. Consulta [Personalización → Variables de componente](./customizing.md#variables-de-componente) para las dos variables y [Tokens de material](./customizing.md#tokens-de-material) para `--ui-rule-ink`.
+
 El marco alrededor de la tabla es aparte: una tabla no tiene borde por defecto, y `.edged` le añade uno. Las tres elecciones no se afectan entre sí, así que `.data-table.ruleless.edged` es una tabla con marco y sin líneas dentro, y `.data-table.ruled` tiene todas las filas separadas y ningún marco.
 
 ### Presentación en las tablas
@@ -212,4 +218,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

@@ -1,8 +1,8 @@
 ---
 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.
+description: Consulta de los tokens de presentación y de material, los controles de las estéticas, las variables públicas de componente, la paleta generada y los helpers para construir tus propios componentes.
 order: 9
-source: aa87391c5599ddfda913abcce9d17d9686345906
+source: bbbce0739bf5070955b0e2a96bdda84090c37195
 ---
 
 # Personalización
@@ -12,7 +12,7 @@ Esta es una página de consulta para cambiar el paquete más allá de sus clases
 - [Tokens de presentación](#tokens-de-presentación): cuánto de una intención muestra un componente.
 - [Tokens de material](#tokens-de-material): de qué está hecho un componente.
 - [Tokens de estética](#tokens-de-estética): los controles que expone cada estética.
-- [Variables de componente](#variables-de-componente): las seis variables que lee un único componente.
+- [Variables de componente](#variables-de-componente): las variables públicas que lee un único componente.
 - [Paleta generada](#paleta-generada): valores de color fijos para el código que no puede cargar el paquete.
 - [Helpers de composición](#helpers-de-composición): las clases con las que construir un componente propio.
 
@@ -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`.
 
@@ -196,9 +196,9 @@ Los controles de todas las estéticas llegan de la misma forma: cada control se
 </html>
 ```
 
-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.
+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. Los contornos de sketch son la excepción: `--sketch-radius` y sus hermanos se leen de nuevo en cada posición, así que funcionan también en cualquier elemento dentro de la región, como describe [Estéticas → Sketch](./aesthetics.md#sketch).
 
-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,29 +227,46 @@ 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`, `.pre` y `.tooltip-icon`, 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. Un `.tooltip-icon.soft` neutral conserva el relleno del badge, así que su placa se aleja más de la página de lo que indica `neutral-soft-subtle`. `.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.
 
 El archivo no sigue `prefers-color-scheme`. El código que usa la paleta por sí sola ya cambia de tema por su cuenta, así que define una de esas clases o atributos.
 
+Tampoco sigue `prefers-contrast: more`. Con esa preferencia, el paquete dibuja el borde de cada intención en su tono fuerte, así que un valor `-edge` es más tenue que el borde que dibuja el componente. El código que tiene que respetar la preferencia elige un color más fuerte por su cuenta.
+
 Otros tres tokens no tienen intención, presentación, fondo ni hover: `--palette-border`, `--palette-surface` y `--palette-text`, valores fijos de `--color-border`, `--color-surface` y `--color-text`. Son para lo que no tiene color de intención, como el borde de un contenedor, el fondo de un diálogo y su texto.
 
 ## Variables de componente
 
-Seis variables las lee un único componente y son entradas soportadas. Cualquier otra variable que declare un componente, como `--surface-padding`, `--field-gap`, `--switch-*`, `--table-*` o `--quote-*`, es interna y puede cambiar en cualquier versión.
-
-| Variable             | Elemento       | Valor                           | Valor por defecto                                                                      | Efecto                                                                                           | Dónde definirla                                                                                              |
-| -------------------- | -------------- | ------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `--progress-value`   | `.progress`    | Un porcentaje, de `0%` a `100%` | `0%`                                                                                   | Ancho de la parte rellena. No se limita; un valor sin `%` no es válido y se muestra vacío.       | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-color`   | `.progress`    | Un color                        | El color de la intención                                                               | Color de la parte rellena y del brillo de `.active`.                                             | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-surface` | `.progress`    | Un color                        | El color de la intención con el relleno de la presentación: 12% por defecto            | Color del carril.                                                                                | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-edge`    | `.progress`    | Un color                        | El color de borde de la intención con el borde de la presentación: ninguno por defecto | Color del borde del carril. Solo se ve donde el carril tiene grosor de borde, como con `.edged`. | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--input-group-gap`  | `.input-group` | Una longitud                    | `0.5rem`                                                                               | Espacio entre el control y su icono o texto.                                                     | En el propio `.input-group`. El grupo declara el valor por defecto, así que un valor en un padre se ignora.  |
-| `--tooltip-linger`   | `.tooltip`     | Un tiempo                       | `300ms`                                                                                | Cuánto tiempo se queda la burbuja después de que el puntero sale del disparador.                 | En el propio `.tooltip`. El contenedor declara el valor por defecto, así que un valor en un padre se ignora. |
+Dieciocho variables las lee un único componente y son entradas soportadas. Un componente lee cada una donde se dibuja, así que un valor definido en el componente o en cualquier elemento que lo rodee le llega, y gana el valor más cercano: define `--switch-width` en un formulario y todos los switches que contiene lo toman. Cualquier otra variable que declare un componente, como `--surface-padding` o cualquier nombre que empiece por `--_`, es interna y puede cambiar en cualquier versión.
+
+| Variable                | Elemento                      | Valor                           | Valor por defecto                                                                      | Efecto                                                                                                                              |
+| ----------------------- | ----------------------------- | ------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `--progress-value`      | `.progress`                   | Un porcentaje, de `0%` a `100%` | `0%`                                                                                   | Ancho de la parte rellena. No se limita; un valor sin `%` no es válido y se muestra vacío.                                          |
+| `--progress-color`      | `.progress`                   | Un color                        | El color de la intención                                                               | Color de la parte rellena y del brillo de `.active`.                                                                                |
+| `--progress-surface`    | `.progress`                   | Un color                        | El color de la intención con el relleno de la presentación: 12% por defecto            | Color del carril.                                                                                                                   |
+| `--progress-edge`       | `.progress`                   | Un color                        | El color de borde de la intención con el borde de la presentación: ninguno por defecto | Color del borde del carril. Solo se ve donde el carril tiene grosor de borde, como con `.edged`.                                    |
+| `--input-group-gap`     | `.input-group`                | Una longitud                    | `0.5rem`                                                                               | Espacio entre el control y su icono o texto.                                                                                        |
+| `--input-group-padding` | `.input-group`                | Una longitud                    | `0.75rem`; `0.625rem` con `.sm` y `1rem` con `.lg`                                     | Espacio entre el borde del grupo y su contenido, a ambos lados. Un valor que definas reemplaza también los pasos de `.sm` y `.lg`.  |
+| `--field-gap`           | `.field`                      | Una longitud                    | `0.35rem`                                                                              | Espacio entre la etiqueta, el control y la pista de un campo.                                                                       |
+| `--switch-width`        | `.switch`                     | Una longitud                    | `2.5rem`                                                                               | Ancho del carril. La perilla conserva su tamaño y recorre más distancia.                                                            |
+| `--switch-height`       | `.switch`                     | Una longitud                    | `1.25rem`                                                                              | Alto del carril. La perilla crece con él.                                                                                           |
+| `--tooltip-gap`         | `.tooltip`                    | Una longitud                    | `0.5rem`                                                                               | Espacio entre el disparador y la burbuja.                                                                                           |
+| `--tooltip-linger`      | `.tooltip`, `.tooltip-bubble` | Un tiempo                       | `300ms`                                                                                | Cuánto tiempo se queda la burbuja después de que el puntero sale del disparador.                                                    |
+| `--divider-color`       | `.divider`                    | Un color                        | El color de la intención                                                               | Color de la línea. Gana sobre una clase de intención en el divisor.                                                                 |
+| `--divider-width`       | `.divider`                    | Una longitud                    | El grosor de borde: `1px` por defecto                                                  | Grosor de la línea.                                                                                                                 |
+| `--skeleton-base`       | `.skeleton`                   | Un color                        | Un tinte tenue del color de la intención                                               | Color sobre el que descansa el placeholder.                                                                                         |
+| `--skeleton-sheen`      | `.skeleton`                   | Un color                        | Un tinte más intenso del color de la intención                                         | Color del brillo que lo recorre.                                                                                                    |
+| `--quote-width`         | `.quote`                      | Una longitud                    | El doble del grosor de borde más `1px`: `3px` por defecto                              | Grosor de la barra en el borde inicial de la cita.                                                                                  |
+| `--table-cell-padding`  | `.data-table`                 | Un valor de `padding`           | `0.75rem 1rem`                                                                         | Padding de cada celda de la cabecera, el cuerpo y el pie. Una utilidad de padding en una celda sigue ganando.                       |
+| `--table-hover`         | `.data-table`                 | Un color                        | Un paso del 12% hacia el color de hover de la intención                                | Fondo de una fila del cuerpo bajo el puntero. `transparent` lo desactiva. Definido en un `tbody` o en una fila, se aplica solo ahí. |
 
 ```html
 <div class="progress" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" style="--progress-value: 92%; --progress-color: var(--color-warning)"></div>
@@ -264,7 +281,7 @@ 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 +304,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.

package/docs/es/usage/forms.md

@@ -2,7 +2,7 @@
 title: Formularios
 description: Campos con etiqueta, pistas y errores, iconos y prefijos fijos, selects y toggles de checkbox, radio y switch.
 order: 2
-source: 58972b8573a07a3336b5765a725eb99abb2f907a
+source: 6f92be07a240da16dfa5dc835b36a6981985bea9
 ---
 
 # Formularios
@@ -28,6 +28,25 @@ Un campo es una etiqueta, un control y una pista opcional, apilados:
 
 Un control de texto mide al menos 2.5rem de alto (`--control-height`), la misma altura que un botón por defecto, así que un campo y un botón quedan alineados en una fila. Su aspecto por defecto es sin relleno y con borde. Un `.textarea` mide al menos 7rem de alto y se puede redimensionar en vertical.
 
+### Tamaños
+
+`.ipt`, `.select`, `.textarea` e `.input-group` aceptan las clases de tamaño del botón, así que un campo pequeño y un botón pequeño quedan alineados en una fila:
+
+| Clase       | Altura | Relleno lateral | Texto     |
+| ----------- | ------ | --------------- | --------- |
+| `.sm`       | 2rem   | 0.625rem        | 0.875rem  |
+| por defecto | 2.5rem | 0.75rem         | heredado  |
+| `.lg`       | 3rem   | 1rem            | 1.0625rem |
+
+Las esquinas escalan con el tamaño, como las de un botón. Un `.textarea` conserva su altura mínima de 7rem en todos los tamaños; la clase cambia su texto, su relleno y sus esquinas. Define el tamaño de un `.input-group` en el grupo, no en el control de dentro: el control y sus adornos toman el tamaño de texto del grupo.
+
+```html
+<div class="cluster tight">
+  <input class="ipt sm" aria-label="Coupon code" />
+  <button class="btn sm" type="button">Apply</button>
+</div>
+```
+
 ## Mostrar un error de validación
 
 Marca el control como inválido con `aria-invalid="true"` y dale al mensaje de error `.hint.destructive`:
@@ -40,7 +59,13 @@ Marca el control como inválido con `aria-invalid="true"` y dale al mensaje de e
 </div>
 ```
 
-Un control inválido dibuja su borde, su anillo de foco y el texto escrito en el color destructivo, tenga la clase de intención que tenga. El texto usa el tono legible de ese color, `--intent-strong`, para que siga siendo legible sobre la página. El paquete solo pinta el estado: decidir que el valor es inválido, poner y quitar `aria-invalid` y escribir el mensaje es cosa de tu código. Quita `aria-invalid` en cuanto el valor vuelva a ser válido; si lo dejas puesto, el campo sigue en rojo.
+Un control inválido dibuja su borde, su anillo de foco y el texto escrito en el color destructivo, tenga la clase de intención que tenga. El texto usa el tono legible de ese color, `--intent-strong`, para que siga siendo legible sobre la página. El paquete solo pinta el estado: decidir que el valor es inválido, poner y quitar `aria-invalid` y escribir el mensaje es cosa de tu código. Quita `aria-invalid` en cuanto el valor vuelva a ser válido; si lo dejas puesto, el campo sigue en rojo. En un checkbox, un radio o un switch, `aria-invalid="true"` dibuja el toggle exactamente igual que `.destructive`, marca de activado incluida.
+
+Un `.hint` acepta cualquiera de las seis intenciones incorporadas, no solo `.destructive`: `.hint.success` confirma que se aceptó un valor, y `.hint.warning` señala uno que está permitido pero es inusual. Cada uno se muestra en el tono legible de su intención, `--intent-strong`, que mantiene 4.5:1 frente a la página en los dos temas. Un `.hint` sin intención, con `.neutral` o con una [intención que definiste tú](./theming.md#tu-propia-intención), se queda en el color secundario. Solo lo colorea una clase en el propio `.hint`; una intención en el campo o en un contenedor que lo rodee no lo hace.
+
+```html
+<input class="ipt success" id="username" value="ada" aria-describedby="username-hint" /> <span class="hint success" id="username-hint">That username is available.</span>
+```
 
 ## Montar el formulario de perfil
 
@@ -84,7 +109,7 @@ Un `.select` dibuja su propia flecha. Con `multiple` o con un `size` mayor que 1
 
 ## Añadir un icono o un prefijo fijo
 
-`.input-group` pone un icono o un fragmento de texto dentro del borde de un campo. El grupo dibuja el borde, el fondo, el anillo de foco y los estados inválido y deshabilitado; el control de dentro renuncia a los suyos, así que el borde se dibuja una sola vez. Coloca el adorno antes del control para ponerlo al principio, o después para ponerlo al final.
+`.input-group` pone un icono o un fragmento de texto dentro del borde de un campo. El grupo dibuja el borde, el fondo, el anillo de foco y los estados inválido y deshabilitado; el control de dentro renuncia a los suyos, así que el borde se dibuja una sola vez. Coloca el adorno antes del control para ponerlo al principio, o después para ponerlo al final. Un grupo mide lo mismo que un campo solo, así que queda alineado con los campos y los botones que tiene al lado.
 
 La dirección del perfil siempre empieza con el mismo host, así que es un prefijo fijo:
 
@@ -98,7 +123,7 @@ La dirección del perfil siempre empieza con el mismo host, así que es un prefi
 </div>
 ```
 
-La separación entre el control y su adorno es `--input-group-gap`, 0.5rem por defecto. Eso le va bien a un icono, pero un texto que debe leerse como parte del valor parece roto con un espacio detrás, así que el ejemplo la pone a `0`. Defínela en el propio `.input-group`: el grupo declara su propio valor por defecto, así que un valor definido en un elemento padre no tiene efecto. Es una de las seis [variables públicas de componente](./customizing.md#variables-de-componente).
+La separación entre el control y su adorno es `--input-group-gap`, 0.5rem por defecto. Eso le va bien a un icono, pero un texto que debe leerse como parte del valor parece roto con un espacio detrás, así que el ejemplo la pone a `0`. Defínela en el grupo, o una sola vez en un formulario para todos los grupos que contiene. Es una de las [variables públicas de componente](./customizing.md#variables-de-componente).
 
 Una búsqueda de miembros, con un icono al principio (las clases `ic-lucide-*` necesitan `@codenhub/icons` cargado; consulta [Botones → Cargar los iconos](./buttons.md#cargar-los-iconos)):
 
@@ -116,7 +141,7 @@ Un `.select` también funciona en un grupo. El grupo quita el relleno lateral de
 
 Cualquier elemento sirve como adorno: una clase de icono, un `<svg>` en línea, un `<img>` o texto. El paquete no incluye iconos para los campos, porque una imagen incorporada no podría seguir tu color de texto, tu tema ni tu estética.
 
-El grupo lee la intención y la presentación igual que un `.ipt` solo: `.input-group.primary` colorea el borde, y `.input-group.soft.edgeless` es un campo hundido en la página. `aria-invalid="true"` o `disabled` en el control de dentro se aplica a todo el grupo, y lo mismo si cualquiera de los dos está en el propio grupo. El anillo de foco aparece cuando cualquier elemento dentro del grupo tiene el foco, así que, a diferencia de un campo solo, también se muestra después de un clic con el ratón.
+El grupo lee la intención y la presentación igual que un `.ipt` solo: `.input-group.primary` colorea el borde y el texto escrito, y `.input-group.soft.edgeless` es un campo hundido en la página. Pon la intención en el grupo, no en el control de dentro: el grupo dibuja el campo, así que el texto del control toma la intención del grupo y una clase de intención en el control no tiene efecto. `aria-invalid="true"` o `disabled` en el control de dentro se aplica a todo el grupo, y lo mismo si cualquiera de los dos está en el propio grupo. El anillo de foco del grupo aparece cuando su campo tiene el foco, así que, a diferencia de un campo solo, también se muestra después de un clic con el ratón. Un botón dentro del grupo, como un botón para borrar, dibuja su propio anillo cuando tiene el foco, y el grupo no dibuja ninguno: un solo anillo marca siempre el único control que tiene el foco.
 
 ## Decoraciones del navegador
 

package/docs/es/usage/index.md

@@ -3,12 +3,12 @@ title: Visión general
 description: Las guías que terminan la pantalla de ajustes y, después, las páginas de consulta con cada clase, token y valor por defecto.
 group: Uso
 order: 4
-source: cd4fa5f3fc9bc6e1ca74206616c5f58edfa6abf7
+source: 07b651854dab2e401235175521adae9360b33df2
 ---
 
 # Uso
 
-Estas guías terminan la pantalla de ajustes que empezó en [Construir una pantalla](../concepts.md). Lee las siete primeras en orden: cada una añade una parte de la pantalla y da por hechas las anteriores. Las tres últimas son páginas de consulta; las guías te enviarán a ellas cuando necesiten la tabla completa, y puedes volver siempre que necesites un valor por defecto o una regla.
+Estas guías terminan la pantalla de ajustes que empezó en [Construir una pantalla](../concepts.md). Lee las siete primeras en orden: cada una añade una parte de la pantalla y da por hechas las anteriores. Las tres siguientes son páginas de consulta; las guías te enviarán a ellas cuando necesiten la tabla completa, y puedes volver siempre que necesites un valor por defecto o una regla. La última, Preajustes, es para cuando la pantalla ya funciona y te has cansado de escribir las mismas clases.
 
 Guías, en orden:
 
@@ -23,7 +23,11 @@ Guías, en orden:
 Páginas de consulta:
 
 - [Composición](./composing.md): las reglas completas para combinar intención, presentación y elevación, los valores por defecto de cada componente y qué ejes lee cada uno.
-- [Personalización](./customizing.md): tokens de presentación y de material, controles de las estéticas, las seis variables públicas de componente, la paleta generada y los helpers de composición para construir tus propios componentes.
+- [Personalización](./customizing.md): tokens de presentación y de material, controles de las estéticas, las variables públicas de componente, la paleta generada y los helpers de composición para construir tus propios componentes.
 - [Contenido y layout](./content-and-layout.md): todos los helpers de layout, la escala tipográfica, tarjetas y paneles, tablas, citas, código y teclas.
 
+Cuando la pantalla funcione:
+
+- [Preajustes](./presets.md): define un aspecto una sola vez, con clases de eje en un contenedor, tokens de tema y de material, o tus propias clases de componente hechas con `@apply`.
+
 Cuando termines, [Accesibilidad](../accessibility.md) reúne lo que el CSS hace por ti y lo que tu aplicación todavía les debe a sus usuarios.