`, único hijo del índice lateral, que contiene la lista y las acciones: a partir de 80rem es una caja fija dentro del índice, así nunca tapa el pie y se desplaza por sí sola, con espacio al principio para el anillo de foco
- `.luz-page-rail__onpage`: En el `
` de la lista, hijo directo de `__inner`: limita el reinicio del plegado y su título, y sirve de anclaje para un script
- `.luz-page-rail__fold`: En un `` nativo. Escribe `open` para que la lista se muestre sin script. Cuando el índice lateral está encima del contenido, un script puede cerrarlo al cargar la página
- `.luz-page-rail__title`: En ``: «En esta página», en seminegrita. Es el nombre del ``
- `.luz-page-rail__list`: En el ``: sin viñetas y con una línea al principio
- `.luz-page-rail__link` junto con `.luz-sidebar__link`: En cada ``: texto de la página, con 28px de alto. El enlace marcado con `aria-current="true"` tiene un borde al principio en el color de marca
- `.luz-page-rail__sub`: En un `` anidado: el `h3` de un `h2`, con sangría
- `.luz-page-rail__actions`: Una columna de enlaces bajo una línea: copiar, editar e informar
### Cómo funciona
CSS de `components/page-rail.css` de `@luz-ds/catalog` sobre el enlace de la barra lateral y su seguimiento del desplazamiento de catalog.
- Por debajo de 80rem, el índice lateral aparece encima del contenido, bajo la cabecera. A partir de 80rem ocupa una columna tan alta como el contenido, y su caja interior queda fija a `--luz-page-rail-top` desde la parte superior de la ventana: se detiene al final del índice y nunca tapa el pie. La caja interior no supera la altura de la ventana y se desplaza por sí sola si la lista es más larga.
- Los enlaces usan `.luz-sidebar__link` de catalog, así que su script marca la sección visible con `aria-current="true"`. El índice lateral representa el enlace como texto de la página: la marca combina el grosor y un borde al principio, nunca depende solo del color.
- La lista incluye cada `h2` de la página y, debajo, cada `h3`. No hay más niveles de anidación.
- «Copiar la página como Markdown» es un enlace al archivo Markdown de la página; te corresponde implementar su copia con un script. El índice lateral no se imprime.
### Sin JavaScript
La lista y las acciones son enlaces, y el elemento `` nativo funciona sin JavaScript. Ningún enlace aparece marcado como actual: esa marca la añade el script de catalog.
### Teclado y ARIA
- **Orden:** el índice lateral aparece entre la barra lateral y el contenido en el código fuente, así que con Tab llegas a él antes que al texto: primero la lista y después las acciones. El enlace para saltar va al contenido, pasando por encima del índice.
- **Teclas:** pulsa Enter o Espacio en «En esta página» para plegar la lista. Con Tab llegas a cada enlace; con Enter vas a su sección.
- **Nombres:** el `` es una zona de referencia llamada «Acerca de esta página»; el `` recibe el nombre de su resumen: «En esta página».
### Cuándo usarlo
Usa el índice lateral en páginas con varias secciones para que quien lee vea su estructura y pueda saltar a una de ellas.
- Una página con tres secciones o más, lo bastante larga como para desplazarse.
- Acciones propias de la página, no del sitio: editar, informar y copiar.
### Cuándo no usarlo
No uses el índice lateral en una página corta: leer dos enlaces lleva más que leer la propia página.
- Incluye las secciones de una sola página. Las páginas del sitio van en la barra lateral.
- No anides más allá de un `h3`. Para mostrar el índice junto a un artículo, usa la [tabla de contenidos de CMS](https://nandovejer.github.io/luz/es/docs/catalog/toc/).