@codenhub/styles 0.6.0 → 0.8.0

package/docs/es/usage/buttons.md

@@ -0,0 +1,135 @@
+---
+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: 54f7c8a1eee5a0f696dc60b9f60f42026d49c5d5
+---
+
+# Botones
+
+La pantalla de ajustes tiene un botón Guardar y un botón Cancelar. Esta página añade el resto de sus acciones: una zona de peligro con un botón Eliminar destructivo, un botón de icono que copia una clave de API y botones más pequeños para una fila densa. También cubre los botones deshabilitados y cómo cargar los iconos que se usan aquí y en páginas posteriores.
+
+## Añadir una zona de peligro
+
+Una acción destructiva va en su propia tarjeta al final de la pantalla. La tarjeta es soft y destructiva para que se lea como una advertencia; el botón es sólido para que sea lo más llamativo de esa tarjeta:
+
+```html
+<section class="card soft destructive stack" aria-labelledby="danger-title">
+  <h2 class="text-title-sm" id="danger-title">Delete account</h2>
+  <p>This removes your projects, invoices, and API keys. It cannot be undone.</p>
+  <div class="cluster">
+    <button class="btn destructive" type="button">Delete account</button>
+    <button class="btn ghost" type="button">Export data first</button>
+  </div>
+</section>
+```
+
+La tarjeta y el botón nombran cada uno `.destructive`, porque [la intención no se hereda](../concepts.md#intención-qué-color). Por el mismo motivo, el botón Exportar conserva su color neutro dentro de la tarjeta roja.
+
+## Elegir un relleno y un borde
+
+Un botón acepta una intención, una clase de relleno y una clase de borde, todas opcionales. Sin ninguna, un botón es sólido y sin borde:
+
+```html
+<button class="btn primary">Save changes</button>
+<button class="btn secondary">Preview</button>
+<button class="btn primary soft">Invite member</button>
+<button class="btn destructive ghost edged">Revoke key</button>
+<button class="btn ghost">Cancel</button>
+```
+
+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 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
+
+| Clase     | Efecto                                                                                                                                                                                      |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _ninguna_ | Al menos 2.5rem de alto (`--control-height`), 1rem de relleno lateral y el mismo tamaño de fuente que el texto que lo rodea.                                                                |
+| `.sm`     | Al menos 2rem de alto, 0.75rem de relleno lateral, texto de 0.875rem.                                                                                                                       |
+| `.lg`     | Al menos 3rem de alto, 1.25rem de relleno lateral, texto de 1.0625rem.                                                                                                                      |
+| `.pill`   | Extremos completamente redondeados.                                                                                                                                                         |
+| `.icon`   | Cuadrado. Al menos 2.5rem por lado, 2rem con `.sm`, 3rem con `.lg`.                                                                                                                         |
+| `.p-xs`   | El relleno más ajustado (0.5rem en los lados, 0.125rem arriba y abajo). También quita la altura mínima, para que un botón quepa en una celda de tabla o en una barra de herramientas densa. |
+| `.p-sm`   | Relleno compacto (0.625rem en los lados, 0.25rem arriba y abajo).                                                                                                                           |
+| `.p-lg`   | Relleno amplio (1.5rem en los lados, 0.75rem arriba y abajo).                                                                                                                               |
+
+Una clase de tamaño y una de relleno se pueden combinar. Solo `.p-xs` quita la altura mínima de un botón con texto; cualquier otra combinación la conserva. En un botón de icono, cualquier clase `.p-*` quita el tamaño mínimo y el botón toma el tamaño de su icono más ese relleno: 0.125rem, 0.25rem o 0.75rem alrededor.
+
+El aspecto base dibuja esquinas que escalan con el tamaño: un botón `.sm` o `.p-sm` tiene esquinas algo más pequeñas que uno por defecto, y `.lg` algo más grandes.
+
+## Botones de icono
+
+La lista de claves de API de la pantalla de ajustes tiene un botón de copiar junto a cada clave. Un botón que solo tiene un icono necesita un nombre accesible, porque el icono no tiene texto que un lector de pantalla pueda leer:
+
+```html
+<button class="btn icon ghost" type="button" aria-label="Copy API key">
+  <i class="ic-lucide-copy" aria-hidden="true"></i>
+</button>
+<button class="btn ghost sm" type="button">
+  <i class="ic-lucide-download" aria-hidden="true"></i>
+  Download invoice
+</button>
+```
+
+Un botón es una fila flex con una separación de 0.5rem, así que un icono junto a un texto queda espaciado sin markup adicional.
+
+### Cargar los iconos
+
+Este paquete no incluye iconos. Los ejemplos de esta documentación usan `@codenhub/icons` con la familia Lucide, y sus nombres de clase siempre se escriben con la familia, como `ic-lucide-copy`. Instálalo y cárgalo una vez, junto a este paquete:
+
+```sh
+pnpm add @codenhub/icons
+```
+
+Con CSS compilado, importa las reglas base y cada familia que uses:
+
+```css
+@import "@codenhub/styles";
+@import "@codenhub/icons";
+@import "@codenhub/icons/lucide";
+```
+
+Con código fuente de Tailwind, importa su punto de entrada de Tailwind después del de este paquete:
+
+```css
+@import "@codenhub/styles/tw";
+@import "@codenhub/icons/tw";
+```
+
+Cualquier otro icono también funciona: un `<svg>` en línea con `stroke="currentColor"` o `fill="currentColor"` toma el color de texto del botón de la misma forma.
+
+## Enlaces con aspecto de botón
+
+Un enlace que navega, como "Ver historial de facturación", sigue siendo un enlace. Escríbelo como `<a href>` con `.btn` y obtiene el mismo aspecto:
+
+```html
+<a class="btn secondary ghost edged" href="/settings/billing">View billing history</a>
+```
+
+No uses `<div class="btn">` ni `<span class="btn">`: parecen botones, pero no pueden recibir el foco ni activarse con el teclado. Usa `<button>` para acciones y `<a href>` para navegación.
+
+## Botones deshabilitados
+
+Cualquiera de estos hace que un botón parezca deshabilitado: el atributo `disabled`, `.disabled`, `aria-disabled="true"` o `data-disabled`. Un botón deshabilitado se dibuja al 58% de opacidad con un cursor de no permitido, y no cambia con hover ni al pulsarlo.
+
+```html
+<button class="btn primary" type="submit" disabled>Save changes</button>
+
+<a class="btn ghost" aria-disabled="true">Download invoice</a>
+```
+
+Solo el atributo `disabled` impide que el botón funcione. `.disabled`, `aria-disabled` y `data-disabled` solo cambian el aspecto: un clic o la tecla Enter siguen activándolo, así que tu código tiene que ignorarlo. `aria-disabled` es la opción correcta cuando el botón debe seguir pudiendo recibir el foco, por ejemplo para que un tooltip explique por qué está deshabilitado. Un enlace no tiene atributo `disabled`, así que quítale también el `href` cuando no deba navegar.
+
+## Estado de carga
+
+No hay una clase de carga. Un botón que está cargando es un botón deshabilitado con un icono de spinner que aportas tú, y [Feedback](./feedback.md#mostrar-que-el-formulario-se-está-guardando) lo construye para el botón Guardar. Deshabilítalo para que un segundo clic no envíe el formulario dos veces.
+
+## Siguiente paso
+
+Los botones están listos; la tarjeta que guardan todavía no tiene nada que guardar. [Formularios](./forms.md) añade los campos del perfil.

package/docs/es/usage/composing.md

@@ -0,0 +1,168 @@
+---
+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: 2493c7c14124565b565b1226e99d4b3de3b087b2
+---
+
+# Composición
+
+Esta es una página de consulta. [Construir una pantalla](../concepts.md) presenta la intención, la presentación y la estética; esta página tiene las reglas completas para combinarlas, el aspecto por defecto de cada componente, qué clases lee cada componente y la elevación.
+
+## Combinar clases
+
+```html
+<div class="soft">
+  <button class="btn primary">Soft primary button</button>
+  <span class="badge success">Soft success badge</span>
+  <button class="btn primary ghost edged">Outlined: the class on the element wins</button>
+</div>
+```
+
+- **La presentación se hereda.** `.solid`, `.soft`, `.ghost`, `.edged` y `.edgeless` funcionan en el componente o en cualquier contenedor, y una clase en el elemento gana a una heredada de un contenedor. Un contenedor define el aspecto de todo lo que contiene, y cualquier elemento puede elegir el suyo.
+- **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
+
+Sin ninguna clase de presentación en él ni a su alrededor, cada componente tiene su propio aspecto. La "elevación en reposo" es cuánta profundidad toma cuando una [estética](./aesthetics.md) dibuja profundidad; sin estética, nada tiene sombra.
+
+| Componente                       | Relleno        | Borde     | Elevación en reposo |
+| -------------------------------- | -------------- | --------- | ------------------- |
+| `.btn`                           | `.solid`       | sin borde | 1                   |
+| `.card`                          | `.ghost`       | con borde | 1                   |
+| `.panel`                         | `.soft`        | sin borde | 0                   |
+| `.alert`                         | `.soft`        | con borde | 0                   |
+| `.badge`                         | `.soft`        | sin borde | 0                   |
+| `.ipt`, `.textarea`, `.select`   | `.ghost`       | con borde | 0                   |
+| `.input-group`                   | `.ghost`       | con borde | 0                   |
+| `.checkbox`, `.radio`, `.switch` | `.soft`        | con borde | 0                   |
+| `.kbd`                           | `.soft`        | con borde | 0                   |
+| `.code`, `.pre`                  | `.soft`        | sin borde | 0                   |
+| `.data-table`                    | `.soft`        | sin borde | 0                   |
+| `.progress` (el carril)          | `.soft`        | sin borde | 0                   |
+| `.tooltip-bubble`                | `.solid`       | con borde | 0                   |
+| `.quote`                         | `.ghost`       | con borde | 0                   |
+| `.skeleton`, `.divider`          | Solo intención | Ninguno   | 0                   |
+
+Un `.solid` neutro solo rellena hasta el 20%; consulta [Temas → Tokens de intención](./theming.md#tokens-de-intención). Las excepciones neutras a estos rellenos están en [Presentación](#presentación).
+
+## Presentación
+
+La presentación son dos elecciones separadas. `.solid`, `.soft` y `.ghost` definen cuánto del color de la intención rellena un componente. `.edged` y `.edgeless` definen si dibuja un borde. Definen [tokens de presentación](./customizing.md#tokens-de-presentación) y nada más.
+
+| Clase       | Aspecto                                                                 | `--ui-fill` | `--ui-fg-on-fill` | `--ui-border` |
+| ----------- | ----------------------------------------------------------------------- | ----------- | ----------------- | ------------- |
+| `.solid`    | Relleno con el color de la intención, con texto de contraste.           | `100%`      | `100%`            |               |
+| `.soft`     | Un tinte claro, con texto del color de la intención.                    | `12%`       | `0%`              |               |
+| `.ghost`    | Sin relleno en reposo, con texto del color de la intención.             | `0%`        | `0%`              |               |
+| `.edged`    | Un borde del color de la intención, tan grueso como define la estética. |             |                   | `100%`        |
+| `.edgeless` | Sin borde.                                                              |             |                   | `0%`          |
+
+```html
+<button class="btn primary">Solid, the button default</button>
+<button class="btn soft edged">Tinted, with a border</button>
+<button class="btn primary ghost edged">Outline</button>
+<button class="btn ghost">Ghost: picks up a tint on hover</button>
+<input class="ipt soft edgeless" aria-label="Search" />
+```
+
+Una clase de relleno nunca define el borde, y una clase de borde nunca define el relleno. `.solid.edged` se ve igual que `.solid.edgeless`, porque el borde se desvanece a medida que el relleno se completa.
+
+El borde es el contorno del componente y nada más. Las líneas dentro de un componente, como las líneas divisorias entre las filas de una tabla, son un ajuste aparte; consulta [Contenido y layout → Líneas divisorias de las tablas](./content-and-layout.md#líneas-divisorias-de-las-tablas).
+
+### Las superficies neutras reposan sin tinte
+
+Una `.card.soft`, un `.panel` y una `.alert` neutros no muestran tinte en reposo. Usan en su lugar el tono de fondo discreto un paso por encima de la página (`--color-foreground`), porque un tinte gris en cada caja neutra se ve sucio en lugar de discreto.
+
+- 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.
+
+### Controles de texto y toggles
+
+- **Los controles de texto** limitan su relleno para que el texto escrito siga siendo legible: como máximo un 6% desde un contenedor, un 12% con su propio `.soft` y un 20% con su propio `.solid`. Ignoran un `.edgeless` de un contenedor y respetan el suyo. Consulta [Formularios → Relleno y borde en los controles de texto](./forms.md#relleno-y-borde-en-los-controles-de-texto).
+- **Los toggles** limitan su relleno sin marcar al 40% y rellenan hasta el 100% una vez marcados. `.checkbox` y `.radio` siempre dibujan su borde, y también `.switch.ghost`. Consulta [Formularios → Colores marcado y sin marcar](./forms.md#colores-marcado-y-sin-marcar).
+
+### Burbujas de tooltip
+
+Una burbuja de tooltip siempre está rellena y es opaca, y dibuja un borde fino que solo quita su propio `.edgeless`. Sin intención usa `--color-tooltip`; una intención la rellena con el color de esa intención. [Tooltips → Cómo se ve la burbuja](./tooltips.md#cómo-se-ve-la-burbuja) tiene los colores.
+
+### Carriles de progreso
+
+`.progress` lee las dos elecciones en su carril. La parte rellena es siempre el color de la intención con toda su intensidad. `.solid` no está soportado en el carril, porque el carril y la parte rellena serían del mismo color. `.ghost.edgeless` se renderiza, pero deja el carril sin un marco visible; `.ghost.edged` dibuja un contorno a su alrededor.
+
+### Combinaciones no soportadas
+
+| Componente              | Clase       | Qué pasa                                                                                     |
+| ----------------------- | ----------- | -------------------------------------------------------------------------------------------- |
+| `.kbd`, `.code`, `.pre` | `.ghost`    | El chip sigue dibujando su fondo teñido, porque ese fondo es lo que lo convierte en un chip. |
+| `.progress`             | `.solid`    | El carril y la parte rellena son del mismo color, así que el valor no se ve.                 |
+| `.checkbox`, `.radio`   | `.edgeless` | Se ignora: el borde siempre se dibuja.                                                       |
+
+## Referencia de ejes por componente
+
+Qué clases cambian cada componente. "Material" es lo que una [estética](./aesthetics.md) puede cambiar en él: "Forma" significa esquina, grosor del borde, sombra, hover y contorno; las entradas más limitadas enumeran lo que se aplica.
+
+| Componentes                                                     | Intención | Relleno | Borde | Material           |
+| --------------------------------------------------------------- | --------- | ------- | ----- | ------------------ |
+| `.btn`, `.alert`, `.badge`, `.card`, `.panel`                   | Sí        | Sí      | Sí    | Forma              |
+| `.kbd`, `.data-table`                                           | Sí        | Sí      | Sí    | Esquina y borde    |
+| `.quote`                                                        | Sí        | Sí      | Sí    | Grosor del borde   |
+| `.divider`, `.skeleton`                                         | Sí        | No      | No    | No                 |
+| `.ipt`, `.textarea`, `.select`, `.text-control`                 | Sí        | Sí      | Sí    | Forma              |
+| `.input-group`                                                  | Sí        | Sí      | Sí    | Forma              |
+| `.surface`                                                      | Sí        | Sí      | Sí    | Forma              |
+| `.checkbox`, `.radio`                                           | Sí        | Sí      | No    | Esquina y borde    |
+| `.switch`                                                       | Sí        | Sí      | Sí    | Esquina y borde    |
+| `.progress`                                                     | Sí        | Sí      | Sí    | Esquina y borde    |
+| `.code`, `.pre`                                                 | Sí        | Sí      | Sí    | Esquina y contorno |
+| `.tooltip-bubble`                                               | Sí        | Sí      | Sí    | Forma y desenfoque |
+| `.table-wrap`, `.quote-inline`, utilidades de layout y de texto | No        | No      | No    | No                 |
+
+"Sí" significa que la clase cambia el componente, y "No" que no lo cambia; las pruebas del paquete comprueban las dos cosas. Qué hace cada componente con una clase:
+
+| Componente                                      | Lee                                                                                                          |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `.btn`, `.alert`, `.badge`, `.card`, `.panel`   | Relleno, color de texto, borde y grosor del borde.                                                           |
+| `.kbd`                                          | Relleno, color de texto, borde y grosor del borde.                                                           |
+| `.data-table`                                   | Relleno y color de texto del encabezado, borde y grosor del borde.                                           |
+| `.ipt`, `.textarea`, `.select`, `.text-control` | Borde, grosor del borde y un relleno limitado.                                                               |
+| `.input-group`                                  | Borde, grosor del borde y un relleno limitado.                                                               |
+| `.checkbox`, `.radio`                           | Un relleno limitado, marcado y sin marcar.                                                                   |
+| `.switch`                                       | Borde, grosor del borde y un relleno limitado.                                                               |
+| `.quote`                                        | Relleno, color de texto, borde y grosor del borde.                                                           |
+| `.code`, `.pre`, `.tooltip-bubble`              | Relleno, color de texto, borde y material.                                                                   |
+| `.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. 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
+
+La elevación es cuánta profundidad toma un componente. Nada tiene sombra hasta que una [estética](./aesthetics.md) dibuja profundidad o una de estas clases la pide.
+
+| Clase       | Profundidad                                                                                                   |
+| ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `.flat`     | Ninguna. Las superficies glass conservan su sombra, porque forma parte de aquello de lo que está hecho glass. |
+| `.raised`   | Un escalón de la profundidad en el ámbito: tarjetas y baldosas que quedan cerca de la página.                 |
+| `.floating` | Dos escalones: menús y popovers.                                                                              |
+
+```html
+<article class="card raised">Lifted</article>
+<div class="floating panel">A menu</div>
+<article class="card flat">Flat, whatever the aesthetic says</article>
+```
+
+Cada clase multiplica la sombra de la estética en el ámbito. El mismo `.raised` es un desenfoque suave en una página simple y una sombra dura desplazada bajo `.neobrutalism`: la estética decide cómo se ve la profundidad, y la clase decide cuánta toma este elemento.
+
+La clase no se hereda. Eleva o aplana solo el elemento en el que está, y un elemento dentro de él no toma profundidad de él. Da a cada elemento que necesite profundidad su propia clase. La extensión (spread) de una sombra no se multiplica, porque una estética que dibuja su borde como una sombra interior usa la extensión para ese borde.
+
+Estas clases son independientes de los tokens de sombra `--elevation-*` de [Temas → Tokens base](./theming.md#tokens-base), que son sombras fijas para los elementos a los que das estilo tú.

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

@@ -0,0 +1,219 @@
+---
+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: 19c4b12f34054533e56cbc1edbefff908c48a1e7
+---
+
+# Contenido y layout
+
+Esta es una página de consulta de las clases que organizan una página y dan forma a su contenido: helpers de layout, la escala tipográfica, tarjetas y paneles, tablas y los pequeños chips de contenido. [Construir una pantalla](../concepts.md#maquetar-la-página) las muestra en uso.
+
+## Layout
+
+La separación de todos los helpers de layout es `--layout-gap`, `1rem` por defecto. Definir `--layout-gap` en un elemento cambia la separación de todos los layouts que contiene. `.tight` y `.loose` cambian solo el layout en el que están; un layout anidado dentro conserva su propia separación.
+
+| Clase              | Layout                                                                                                                                 | Separación                                       |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| `.stack`           | Una columna vertical.                                                                                                                  | `--layout-gap`, `.tight` 0.5rem, `.loose` 1.5rem |
+| `.cluster`         | Una fila que salta de línea, con los elementos centrados en vertical. `.between` reparte los elementos hacia los dos extremos.         | Igual                                            |
+| `.view`            | Un contenedor flex. `.vertical` lo convierte en una columna; `.horizontal` en una fila que salta de línea con los elementos centrados. | Igual                                            |
+| `.auto-grid`       | Una cuadrícula de columnas iguales, cada una de al menos `--layout-grid-min` (16rem) de ancho, tantas como quepan.                     | Igual                                            |
+| `.section`         | Relleno interior alrededor de una sección de la página: `--layout-gutter` a los lados, `--layout-section-block` arriba y abajo.        | Ninguna                                          |
+| `.section-content` | Centra su contenido con un ancho de `--container-max` (80rem). `.narrow` usa 48rem, `.wide` 90rem.                                     | Ninguna                                          |
+| `.divider`         | Una línea horizontal, tan ancha como su contenedor. `.vertical` la convierte en una línea vertical tan alta como la fila.              | Ninguna                                          |
+| `.visually-hidden` | Oculta contenido en pantalla y lo mantiene para los lectores de pantalla.                                                              | Ninguna                                          |
+
+`.auto-grid` coloca dos columnas de 16rem cuando su contenedor mide 32rem más la separación, tres a partir de 48rem más dos separaciones, y así sucesivamente. Por debajo del ancho de una columna, la columna se encoge para caber. Define `--layout-grid-min` en la cuadrícula para cambiar el ancho de columna.
+
+`--layout-gutter` es `clamp(1rem, 4vw, 2rem)` y `--layout-section-block` es `clamp(4rem, 9vw, 7rem)`: los dos crecen con la ventana entre esos límites. La lista completa de tokens base está en [Temas → Tokens base](./theming.md#tokens-base).
+
+Un `.divider` acepta una intención, que lo colorea, e ignora las clases de presentación, así que un contenedor `.ghost.edgeless` no oculta los divisores que contiene. Su grosor es el grosor de borde de la estética.
+
+`.visually-hidden` no se llama `.sr-only` porque Tailwind incluye su propio `.sr-only`, y dos clases con el mismo nombre entrarían en conflicto.
+
+## Tipografía
+
+| Clase            | Tamaño                                   | Grosor   | Espaciado entre letras |
+| ---------------- | ---------------------------------------- | -------- | ---------------------- |
+| `.text-display`  | 3.75rem, 6rem a partir de 48rem de ancho | Bold     | Ajustado               |
+| `.text-title-lg` | 3rem, 3.75rem a partir de 48rem de ancho | Bold     | Ajustado               |
+| `.text-title`    | 1.875rem                                 | Bold     | Ajustado               |
+| `.text-title-sm` | 1.25rem                                  | Semibold | Ajustado               |
+| `.text-label-lg` | 1.125rem                                 | Medium   | Amplio                 |
+| `.text-label`    | 1rem                                     | Medium   | Amplio                 |
+| `.text-body`     | 0.875rem                                 | Normal   | Más amplio             |
+
+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. `/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.
+
+## Superficies
+
+`.card` y `.panel` son los dos contenedores. Los dos aceptan intención, [presentación](./composing.md#presentación) y [tokens de material](./customizing.md#tokens-de-material).
+
+| Clase    | Aspecto por defecto                                                              | Relleno interior por defecto |
+| -------- | -------------------------------------------------------------------------------- | ---------------------------- |
+| `.card`  | Sin relleno, con borde, la esquina de superficie y una elevación en reposo de 1. | 1.25rem                      |
+| `.panel` | El tono de fondo discreto, sin borde, la esquina de superficie y sin elevación.  | 1rem                         |
+
+Una elevación en reposo de 1 no muestra ninguna sombra por sí sola. Una tarjeta solo tiene sombra bajo una [estética](./aesthetics.md) que dibuja profundidad, o con `.raised` o `.floating`; consulta [Composición → Elevación](./composing.md#elevación).
+
+Clases de relleno interior:
+
+| Clase     | En `.card` | En `.panel` |
+| --------- | ---------- | ----------- |
+| `.p-xs`   | 0.5rem     | 0.25rem     |
+| `.p-sm`   | 0.75rem    | 0.5rem      |
+| _ninguna_ | 1.25rem    | 1rem        |
+| `.p-lg`   | 2rem       | 1.5rem      |
+| `.flush`  | 0          | 0           |
+
+`.flush` es para contenido que va de borde a borde, como una imagen o una tabla dentro de una tarjeta.
+
+Una clase de relleno interior solo se aplica a la tarjeta o al panel en el que está. Una tarjeta o un panel anidado dentro conserva su propio relleno interior, así que una `.card.flush` que contiene un `.panel` sigue dando al panel 1rem de relleno interior.
+
+Un panel es para barras laterales, barras de herramientas y zonas hundidas: áreas que forman parte de la página, no objetos sobre ella. Una tarjeta es un objeto independiente, como la tarjeta de perfil o la tarjeta del plan de la pantalla de ajustes.
+
+### Tarjetas y paneles neutros
+
+Una `.card.soft` neutra y un `.panel` neutro no muestran tinte: reposan sobre el tono de fondo discreto un paso por encima de la página, así que se leen como un área aparte sin llamar la atención. Con una intención incluida toman el tinte normal. [Composición → Las superficies neutras reposan sin tinte](./composing.md#las-superficies-neutras-reposan-sin-tinte) tiene los detalles, incluido el hover.
+
+### Tarjetas clicables
+
+| Clase          | Efecto                                                                                                          |
+| -------------- | --------------------------------------------------------------------------------------------------------------- |
+| `.interactive` | Cursor de puntero, color de hover, pulsación y anillo de foco. Lo mismo que `.hoverable` y `.pressable` juntas. |
+| `.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 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.
+
+```html
+<article class="card">Neutral card</article>
+<article class="card success solid">Filled success card</article>
+<article class="card primary ghost edged">Intent border, no fill</article>
+<a class="card success soft interactive" href="/settings/billing">Billing: tinted at rest, deeper on hover</a>
+<article class="card hoverable">Tinted on hover; the action is a nested button</article>
+<aside class="panel">A sidebar</aside>
+```
+
+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:
+
+```html
+<div class="table-wrap">
+  <table class="data-table">
+    <caption class="visually-hidden">
+      API keys
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Created</th>
+        <th scope="col">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Deploy bot</td>
+        <td>3 March 2026</td>
+        <td>Active</td>
+      </tr>
+      <tr class="destructive">
+        <td>Old laptop</td>
+        <td>12 June 2024</td>
+        <td>Revoked</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+| Clase         | Efecto                                                                                                                                                                                       |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.data-table` | Da estilo a una `<table>`: ancho completo, texto `.text-body`, un fondo de encabezado, la esquina de superficie, relleno interior en las celdas y un color de hover en las filas del cuerpo. |
+| `.table-wrap` | Hace que una tabla tenga scroll horizontal cuando es más ancha que su contenedor.                                                                                                            |
+| `.ruled`      | En `.data-table`. Dibuja una línea entre las filas del cuerpo.                                                                                                                               |
+| `.ruleless`   | En `.data-table`. No dibuja ninguna línea dentro de la tabla.                                                                                                                                |
+
+### Intención de las filas
+
+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:
+
+| Clase       | Debajo del encabezado y encima del pie | Entre las filas del cuerpo |
+| ----------- | -------------------------------------- | -------------------------- |
+| `.ruleless` | No                                     | No                         |
+| _ninguna_   | Sí                                     | No                         |
+| `.ruled`    | Sí                                     | Sí                         |
+
+`--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`.
+
+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
+
+Una tabla lee la [presentación](./composing.md#presentación) en su encabezado, sus líneas y su borde:
+
+```html
+<table class="data-table success soft edged">
+  …
+</table>
+<table class="data-table ghost">
+  <!-- Sin fondo de encabezado: solo líneas y texto -->
+</table>
+```
+
+- `.soft`, el valor por defecto, da al encabezado el tono de fondo discreto, `--color-foreground`, con cualquier intención. Una tabla no tiene estado de hover para un tinte, así que una `.data-table.success.soft` no se vuelve verde; sus líneas y su borde sí.
+- `.ghost` quita el fondo del encabezado y deja las líneas y el texto.
+- `.solid` rellena el encabezado con el color de la intención.
+
+### Esquinas y scroll
+
+Una tabla toma la esquina de superficie, como una tarjeta a su lado. Las celdas de las esquinas llevan las esquinas, así que un `<caption>` encima de la tabla no queda recortado en ningún navegador. Una celda que ocupa varias filas hasta una esquina inferior deja esa esquina recta.
+
+`.table-wrap` tiene scroll, y un elemento con scroll recorta todo lo que se dibuja fuera de él, incluido un tooltip en una celda; consulta [Tooltips → Dónde queda recortado un tooltip](./tooltips.md#dónde-queda-recortado-un-tooltip).
+
+- Bajo una estética que dibuja un resplandor alrededor de los componentes, como `.cyber`, el contenedor deja espacio para el resplandor para que no quede recortado. El contenedor se extiende entonces esa distancia más allá de su padre, lo que solo se nota cuando el padre toca el borde de la ventana.
+- El contenedor solo puede dejar espacio para el resplandor de una estética que lo rodea. Pon la clase de estética en `.table-wrap` o en un elemento por encima, no solo en la tabla.
+- Las sombras, como la de una tabla `.raised`, no reciben espacio y quedan recortadas.
+
+Mantén el contenedor en cualquier tabla que pueda ser más ancha que su contenedor; sin él, una tabla ancha ensancha toda la página.
+
+## Citas, código y teclas
+
+| Clase           | Uso                                                                                     | Aspecto por defecto                 | La intención colorea |
+| --------------- | --------------------------------------------------------------------------------------- | ----------------------------------- | -------------------- |
+| `.quote`        | Un `<blockquote>`. Un `<cite>` dentro se muestra en redonda y toma el color de la cita. | Una barra al principio, sin relleno | Barra, fondo, texto  |
+| `.quote-inline` | Una cita en línea `<q>`.                                                                | Solo el estilo de cita              | Nada                 |
+| `.kbd`          | Una tecla que pulsa el usuario, como <kbd>Ctrl</kbd>.                                   | Un chip teñido con borde            | Fondo, borde, texto  |
+| `.code`         | Código en línea.                                                                        | Un chip teñido sin borde            | Fondo, texto         |
+| `.pre`          | Un bloque de código. Tiene scroll horizontal cuando una línea es demasiado larga.       | Un bloque teñido sin borde          | Fondo, texto         |
+
+```html
+<p>Press <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd> to search members.</p>
+<p>Use the <code class="code">Authorization</code> header with your API key.</p>
+<kbd class="kbd primary solid">Ctrl</kbd>
+<kbd class="kbd primary soft edged">Shift</kbd>
+```
+
+Un `.kbd`, un `.code` o un `.pre` reposa sobre el tono subtle de su intención, `--color-surface` para la neutra, y una clase de intención incluida añade encima un 12% de su color. `.ghost` no está soportado en estos tres: el fondo teñido es lo que los convierte en chips, así que lo conservan y `.ghost` no cambia nada. Su fuente es `--font-mono`; consulta [Temas → Fuentes](./theming.md#fuentes).
+
+## Siguiente paso
+
+[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.