# AppShell

Un diseño de regiones para un producto. Nacido en móvil: cabecera arriba, contenido abajo, navegación en un Drawer; en pantallas anchas, el drawer se convierte en la columna lateral.

## Playground

```html
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Producto</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Cerrar</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Trabajo</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Citas</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tareas</a></li></ul></div><div class="group"><p class="group-title">Producto</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Ajustes</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Citas</h3><p>Recordatorio 1: cada semana, 8h.</p><p>Recordatorio 2: cada semana, 9h.</p><p>Recordatorio 3: cada semana, 10h.</p><p>Recordatorio 4: cada semana, 11h.</p><p>Recordatorio 5: cada semana, 12h.</p><p>Recordatorio 6: cada semana, 13h.</p><p>Recordatorio 7: cada semana, 14h.</p><p>Recordatorio 8: cada semana, 15h.</p><p>Recordatorio 9: cada semana, 16h.</p><p>Recordatorio 10: cada semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Arriba</a></div></div></div>
```

## Cuándo usarlo

-   En cada pantalla de un producto con más de un lugar a donde ir: un dashboard, un admin.

## Cuándo no usarlo

-   **Una página de lectura independiente** o documentación: solo el contenido, o DocPage.

## Ejemplos

### En móvil

Desliza dentro del marco y toca Menú: el panel deslizante se abre desde la derecha, con la cuenta y "Cerrar sesión" en su pie de página. Al final del contenido, ScrollFade y BackToTop.

Mostrar código

```html
<div class="feitio-app-frame">
  <div class="feitio-app">
    <header class="feitio-app-header" data-hide-on-scroll>
      <a class="brand" href="/">Produto</a>
      <button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
    </header>
    <nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
    <main class="feitio-app-main" id="conteudo" tabindex="-1">
      …
      <span class="feitio-scroll-fade" aria-hidden="true"></span>
      <a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
    </main>
  </div>
</div>
```

### En pantallas anchas

Desde un marco de 64rem, el panel se convierte en la columna lateral, con su pie de página abajo; Menú desaparece. El ejemplo se encoge a la mitad.

Mostrar código

```html
<!-- o mesmo HTML: a moldura mede a própria largura -->
```

## Las regiones

Región

Lo que va ahí

`brand`

El nombre del producto, apuntando al inicio. Obligatorio.

`actions`

Opcional, como máximo dos piezas usadas siempre. Nunca la cuenta ni "Cerrar sesión".

`menu`

El botón que abre el panel, último, a la derecha. Desaparece en pantallas anchas.

`nav`

Una Navegación, dentro de un Panel en móvil.

`nav-footer`

Opcional: quién está conectado, "Cerrar sesión", la versión.

`main`

La pantalla en sí misma, con la tarea principal primero. Lleva ScrollFade y BackToTop.

## Anatomía

1.  **marca:** lleva a casa.
2.  **acciones**, opcional: lo que se usa todo el tiempo.
3.  **menú:** abre el panel lateral, a la derecha, por el pulgar.
4.  **principal:** la pantalla en sí misma.

## Estados

-   **Hacer scroll hacia abajo:** el encabezado se desliza; hacia arriba, vuelve. Cerca del tope, o con foco dentro de él, permanece visible.
-   **Pantallas grandes:** el contenido se detiene en 72rem y permanece centrado.

## Hacer y no hacer

Do

Marca y Menú en el encabezado; la cuenta y "Cerrar sesión" en el pie del panel lateral.

Lo que se usa todo el tiempo queda a mano; el resto, escondido.

Don’t

"Cerrar sesión" anclado en el encabezado, junto al Menú, en cada pantalla.

El mejor lugar en la pantalla para la acción menos utilizada.

## Accesibilidad

-   Regiones reales: `<header>`, un `<nav>` con nombre, `<main>`.
-   El SkipLink es el primer elemento de la página.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-app-frame"`

alrededor

Mide su propio ancho y selecciona el formulario.

`class="feitio-app"`

obligatorio

La cuadrícula de regiones.

`data-hide-on-scroll`

en el encabezado

Se oculta al hacer scroll hacia abajo, en móvil.

`class="feitio-drawer feitio-app-nav"`

con `popover`

Cuadro lateral en móvil, columna en pantallas anchas.