Progress Nuevo

El componente hp-progress implementa el patrón WAI-ARIA Progressbar, informando al usuario sobre el estado de avance de un proceso. Soporta estados determinado e indeterminado.

Demostración

Sin estilos (solo base.css)

Con estilos personalizados

Determinado (75%)

Indeterminado

index.html

<!-- Determinado -->
<hp-progress value="60" class="my-progress"></hp-progress>

<!-- Indeterminado -->
<hp-progress class="my-progress"></hp-progress>

style.css

.my-progress {
  display: block;
  height: 10px;
  background: #eee;
  overflow: hidden;
  border-radius: 999px;
}

Instalación

pnpm

pnpm add @headless-primitives/progress

npm

npm install @headless-primitives/progress

yarn

yarn add @headless-primitives/progress

bun

bun add @headless-primitives/progress

Features

• ♿️ role="progressbar", aria-valuenow, aria-valuemin y aria-valuemax gestionados automáticamente.
• 📊 Estado determinado (value definido) e indeterminado (value ausente).
• 🎨 Sin estilos visuales (Headless).
• 📐 Variable CSS --hp-progress-percentage para estilizado avanzado.

Anatomía

<hp-progress value="50" min="0" max="100"></hp-progress>

API Reference

hp-progress

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
value	number | null	null	Progreso actual. null = indeterminado.
min	number	0	Límite inferior.
max	number	100	Límite superior.

Propiedades de solo lectura

Propiedad	Tipo	Descripción
percentage	number	Porcentaje 0–100 derivado de value, min y max.

Métodos

Método	Descripción
setValue(val)	Establece el valor programáticamente.

Variables CSS

Variable	Descripción
--hp-progress-percentage	Porcentaje calculado (ej: 50%). Vacío en estado indeterminado.

Atributos ARIA gestionados automáticamente

• role="progressbar" — Asignado si no se especifica.
• aria-valuemin — Sincronizado con min.
• aria-valuemax — Sincronizado con max.
• aria-valuenow — Presente solo cuando value está definido.
• data-state — "determinate" | "indeterminate".

Accesibilidad

Adhiere al patrón WAI-ARIA Progressbar.

• aria-valuenow se elimina en estado indeterminado.
• aria-valuemin y aria-valuemax siempre presentes.