Vanilla Web Components: Accordion, Float Bar & Fly-Out

Los Web Components son un estándar del navegador que permite construir elementos HTML propios y reutilizables, sin necesidad de ningún framework. Una vez escritos, funcionan en cualquier lugar: en una página HTML estática igual que en un proyecto de React, Vue o Angular, porque simplemente utilizan funciones nativas del navegador.

Publiqué tres de estos componentes como paquetes de npm: un accordion, una float bar y un panel fly-out. Los tres son sin dependencias, accesibles y se instalan directamente vía npm.

Accordion

Un acordeón accesible con animaciones suaves al abrir y cerrar. A través de elementos <accordion-item> se definen paneles individuales, que se pueden controlar con clic, teclado (Enter/Espacio) o de forma programática (show(), close(), toggle()).

Algo especialmente útil: dentro de un <accordion-group> se pueden agrupar varios ítems para que solo uno esté abierto a la vez, ideal para secciones de preguntas frecuentes. También es posible anidar acordeones. La duración y el easing de la animación se configuran libremente mediante atributos, y gracias a los atributos ARIA y al control automático por teclado, el componente es accesible de fábrica.

Float Bar

Una barra flotante que desaparece automáticamente al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba, un patrón clásico para barras de navegación que no estorban al usuario pero siguen siendo fácilmente accesibles.

El componente detecta automáticamente si está dentro de la ventana o de un contenedor con scroll propio, y anima de forma fluida usando requestAnimationFrame. Mediante el atributo offset (o offset-element, que toma la altura de otro elemento) se puede reservar espacio para headers fijos. En cuanto la barra alcanza su posición "sticky", recibe automáticamente la clase is-sticky, con la que se pueden aplicar, por ejemplo, sombras o un fondo con blur.

Fly-Out

Un panel deslizante que puede entrar desde cualquiera de los cuatro bordes de la pantalla (arriba, abajo, izquierda, derecha), útil para sidebars, menús móviles o bottom sheets. Se controla mediante un elemento propio <fly-out-toggle>, vinculado al panel <fly-out> correspondiente a través del atributo name.

El componente incluye todo lo necesario para que un panel modal sea accesible: un focus trap, cierre con ESC, foco automático en el primer elemento interactivo al abrirse y devolución del foco al cerrarse. Opcionalmente se pueden desactivar por separado el overlay de fondo, el cierre al hacer clic afuera y el bloqueo de scroll del body. Aquí también el control es posible tanto de forma declarativa como programática (open(), close(), toggle()), incluyendo eventos propios como fly-out-opened y fly-out-state-changed.

Los tres componentes están escritos en TypeScript, no tienen dependencias externas y se basan en los estándares web Custom Elements v1 y Shadow DOM v1: funcionan en cualquier navegador moderno y se pueden integrar en cualquier proyecto, sin importar el framework utilizado.