Filtros, listas y timelines.
Usar filtros para acotar un conjunto, listas para elementos comparables y timeline sólo cuando el tiempo es la relación principal.
Cuándo usar
Usar filtros para acotar un conjunto, listas para elementos comparables y timeline sólo cuando el tiempo es la relación principal.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Resumen del conjunto |
| 2 | Controles con labels |
| 3 | Filtros activos |
| 4 | Resultados |
| 5 | Limpiar y compartir |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| unfiltered | Total y criterios disponibles |
| filtered | Conteo y chips removibles |
| no results | Criterios y limpiar |
| loading | Conserva controles y comunica actualización |
| stale | Timestamp y opción de refrescar |
Accesibilidad
- El estado compartible vive en query params.
- Un chip removible nombra filtro y valor.
- El timeline conserva lista ordenada equivalente.
- Los cambios automáticos se anuncian sin mover foco.
HTML de referencia
<form action="/datos" method="get">
<label for="region">Región</label>
<select id="region" name="region"><option>Valparaíso</option></select>
<button type="submit">Aplicar filtros</button>
</form>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.