タイムライン

hc-timeline はアクティビティ履歴 — 監査ログ、デプロイイベント、注文ステータス — を、マーカーのレールとコネクタ線を持つ素の <ol> として描画します。純 CSS です: アクセシビリティはリストのセマンティクスそのもの、ステータスは data-variant に乗り、RTL は論理プロパティで自動的に反転します。

別名: 活動履歴、アクティビティフィード、履歴表示。

基本の HTML

09:14Deploy finished
v2.4 to production.
09:10Smoke test flaky
Retried once, then green.
09:02Build started

<ol class="hc-timeline" aria-label="Deployment history">
  <li class="hc-timeline__item" data-variant="success">
    <span class="hc-timeline__marker" aria-hidden="true">✓</span>
    <div class="hc-timeline__content">
      <time class="hc-timeline__time" datetime="2026-07-03T09:14">09:14</time>
      <span class="hc-timeline__title">Deploy finished</span>
      <p class="hc-timeline__description">v2.4 to production.</p>
    </div>
  </li>
  <!-- … one <li class="hc-timeline__item"> per event -->
</ol>

__time と __description は任意です — タイトルだけの項目でも機能します。コネクタ線は最後の項目で自動的に止まります。

バリアント

項目の data-variant がそのマーカーをステータストークンで色づけします: success、warning、error、info。なければマーカーはニュートラルな中抜きのドットです。マーカー内の任意のグリフは装飾です — aria-hidden に保ち、意味はタイトルに載せてください。

Deploy finished
Smoke test flaky
Rollback triggered
Maintenance window opened

<ol class="hc-timeline" aria-label="Status variants">
  <li class="hc-timeline__item" data-variant="success">
    <span class="hc-timeline__marker" aria-hidden="true">✓</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Deploy finished</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="warning">
    <span class="hc-timeline__marker" aria-hidden="true">!</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Smoke test flaky</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="error">
    <span class="hc-timeline__marker" aria-hidden="true">✕</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Rollback triggered</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="info">
    <span class="hc-timeline__marker" aria-hidden="true">i</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Maintenance window opened</span></div>
  </li>
</ol>

htmx での利用

アクティビティフィードはサーバ描画された項目のリストです — 新しいイベントを out-of-band スワップで前置するか、SSE で更新します (sse-updates レシピを参照):

<ol class="hc-timeline" id="audit-log"
    data-hx-get="/audit?page=2" data-hx-trigger="revealed from:#log-more"
    data-hx-swap="beforeend">
  …
</ol>

新しい順・古い順はどちらでも構いません — コンポーネントはどちらでも同じに描画します。自明でなければ、順序をリストの aria-label で伝えてください。

アクセシビリティ

これはリストそのものです: <ol>/<li> は位置と件数つきで読み上げられます。見出しが名前になっていないときはリストに aria-label を与えてください。
機械可読なタイムスタンプには <time datetime="…"> を使います。
マーカーのグリフは装飾(aria-hidden="true")です — 意味はタイトルのテキストが運ぶため、ステータスが色だけになることはありません。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`timeline.marker-size`	マーカーの直径。
`timeline.marker-bg` / `marker-fg` / `marker-border` / `marker-border-size`	ニュートラルのマーカー。
`timeline.line-size` / `line-color`	コネクタの線分。
`timeline.gap`	レールとコンテンツの間のカラムギャップ。
`timeline.item-gap`	項目間の縦のギャップ。
`timeline.time-fg` / `time-font-size`	タイムスタンプの文字。
`timeline.title-fg` / `title-font-weight`	タイトルの文字。
`timeline.description-fg` / `description-font-size`	説明の文字。
`timeline.success-bg` / `warning-bg` / `error-bg` / `info-bg` / `status-fg`	バリアントのマーカー。

CSS 変数

生成される CSS 変数を表示

--hc-timeline-marker-size | -marker-bg | -marker-fg | -marker-border | -marker-border-size
--hc-timeline-line-size | -line-color | -gap | -item-gap
--hc-timeline-time-fg | -time-font-size
--hc-timeline-title-fg | -title-font-weight
--hc-timeline-description-fg | -description-font-size
--hc-timeline-success-bg | -warning-bg | -error-bg | -info-bg | -status-fg