#Timeline

Timeline orders durable operations, deployments, and semantic Agent events without prescribing application state management.

npm install @a3s-lab/ui@0.4.0

<ol class="timeline" aria-label="Execution history">
  <li data-state="success">
    <article class="item" data-variant="outline">…</article>
  </li>
  <li data-state="active" aria-current="step">
    <article class="item" data-variant="outline">…</article>
  </li>
</ol>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Import the full style bundle, or compose Timeline with the components used by each entry.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

<ol class="timeline" aria-label="Execution history">
  <li data-state="success">
    <article class="item" data-variant="outline">…</article>
  </li>
  <li data-state="active" aria-current="step">
    <article class="item" data-variant="outline">…</article>
  </li>
</ol>

#Parameters

#States and variants

Map domain statuses to the four semantic states in the host application. Do not expose every backend status as a styling API. Omit data-state for neutral or future events, and use text or a Badge so color is never the only status signal.

#Accessibility

Use <ol> when order matters and <time datetime="…"> for timestamps. Keep the current state explicit with aria-current="step". Timeline is CSS-only; focus, selection, and live announcements remain the host application's responsibility.