Separator Nuevo

El componente hp-separator provee una división visual y semántica entre grupos de contenido, siguiendo el patrón role="separator" con aria-orientation gestionada automáticamente.

Demostración

Sin estilos (solo base.css)

Sección A

Sección B

UnoDos

Con estilos personalizados

Opciones de cuenta

PerfilAjustesSalir

index.html

<!-- Horizontal (default) -->
<hp-separator class="my-sep"></hp-separator>

<!-- Vertical -->
<div style="display: flex; height: 20px;">
  <span>Uno</span>
  <hp-separator orientation="vertical" class="my-sep-v"></hp-separator>
  <span>Dos</span>
</div>

style.css

.my-sep {
  display: block;
  height: 1px;
  background: #eee;
  margin: 10px 0;
}

.my-sep-v {
  display: inline-block;
  width: 1px;
  height: 100%;
  background: #eee;
  margin: 0 10px;
}

Instalación

pnpm

pnpm add @headless-primitives/separator

npm

npm install @headless-primitives/separator

yarn

yarn add @headless-primitives/separator

bun

bun add @headless-primitives/separator

Features

• ♿️ role="separator" y aria-orientation gestionados automáticamente.
• 📐 Orientación configurable: horizontal (default) o vertical.
• 🎨 Sin estilos visuales (Headless).

Anatomía

<hp-separator></hp-separator>

API Reference

hp-separator

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
orientation	"horizontal" | "vertical"	"horizontal"	Orientación del separador.

Métodos

Método	Descripción
setOrientation(value)	Cambia la orientación programáticamente.

Atributos ARIA gestionados automáticamente

• role="separator" — Asignado si no se especifica.
• aria-orientation — Sincronizado con orientation.

Accesibilidad

• role="separator" y aria-orientation sincronizados automáticamente.
• Para separadores puramente decorativos, sobreescribe role="presentation".