Demos

↓ pulsa Tab dentro del preview para revelar el skip link

Bienvenido

Contenido scrollable para ver la barra de progreso en acción.

Línea de relleno 1 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 2 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 3 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 4 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 5 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 6 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 7 — sigue haciendo scroll dentro de esta caja.

Línea de relleno 8 — sigue haciendo scroll dentro de esta caja.

Fin del contenido. La barra debería estar al 100%.

Uso

layout/BaseLayout.astro (Astro 5 + Svelte 5)

---
import { PageShell } from '@codigosinsiesta/theme/layout';
---

<PageShell theme="dark" scrollProgress client:load>
  <SiteHeader slot="header" />
  <slot slot="main" />
  <SiteFooter slot="footer" />
</PageShell>

Si usas Svelte puro, los slots se pasan como snippets:

App.svelte

<script>
  import { PageShell, SiteHeader, SiteFooter } from '@codigosinsiesta/theme';
</script>

<PageShell theme="dark" scrollProgress>
  {#snippet header()}<SiteHeader ... />{/snippet}
  {#snippet main()}<BentoGrid>...</BentoGrid>{/snippet}
  {#snippet footer()}<SiteFooter ... />{/snippet}
</PageShell>

Accesibilidad

Skip link integrado: primer elemento focusable, oculto hasta recibir foco. Apunta a #main. Personaliza el texto con skipLinkLabel.
Landmarks ARIA: usa <header>, <main id="main" tabindex="-1">, <footer> — landmarks nativos detectados por screen readers.
Scroll progress: la barra es role="presentation" + aria-hidden="true" — decorativa, no se anuncia.

API

Prop	Tipo	Default	Descripción
`theme`	`'dark' \| 'light'`	`'dark'`	Aplica `data-theme` al root. `"light"` ya se acepta pero los tokens light llegan en v0.11.0.
`lang`	`string`	`'es'`	Atributo `lang` del shell.
`scrollProgress`	`boolean`	`false`	Renderiza barra de progreso fija arriba.
`skipLinkLabel`	`string`	`'Saltar al contenido'`	Texto del skip link.
`header`	`Snippet`	—	Snippet del header. Opcional.
`main`	`Snippet`	—	Snippet del main. Opcional.
`footer`	`Snippet`	—	Snippet del footer. Opcional.

Light blueprint pre-cableado

La prop theme="light" se acepta desde v0.9.0 aunque la variante light blueprint del theme se entrega en v0.11.0. Decisión deliberada: evita un breaking change cuando llegue light.

Hoy, theme="light" aplica data-theme="light" al root pero se renderiza con los tokens dark. Los consumidores pueden empezar a estructurar su código para soportar light desde ya.

Casos de uso

Portfolio CsS (Astro+Svelte 5): layout base de la one-page bento.
Landings de talleres: hero + secciones marketing.
Sitios CsS futuros: cualquier app web con estructura header/main/footer.