Timer

fandhe-frontend-pre-styled-ui の timer mod が提供するスタイル済み Timer 部品です。

root の data-state（completed / paused）に応じて item-value の文字色が切り替わります（completed は accent 色、paused は muted 色）。item-value/separator のフォントサイズは --fandhe-timer-value-font-size、色は --fandhe-timer-value-color の custom property で上書きできます（クラス付与不要）。size / variant 軸は提供しません（参照サイトの ark-ui Timer も unstyled でスケールを持たないため）。

Demo

headless-ui の Timer（tick 注入型・idle/running/paused/completed の決定的状態機械）に pre-styled-ui のセグメント表示（分:秒）CSS を適用した静的掲示です。左は 90 秒のカウントダウンを開始して 35 秒経過した running 状態、右は 5 秒のカウントダウンが completed に達した状態（root の data-state に応じて item-value の色が accent へ切り替わる）を固定表示しています。実 tick 駆動（setInterval）は fandhe-frontend-wasm-full::headless_timer のスコープです。

00Min

55Sec

00Min

00Sec

Features

tick 注入型・idle/running/paused/completed の決定的状態機械（fandhe-frontend-interactive の dispatch 経由）
countdown（カウントダウン）と count_up（カウントアップ）の 2 モードを持つ
実 tick 駆動（setInterval）は fandhe-frontend-wasm-full 側のスコープ（本ページは SSR 静的掲示）
root の data-state（completed / paused）に応じた item-value の色切り替え・action-trigger の hover / focus ring

Anatomy

root
  area
    item
      item-value
      item-label
    separator
  control
    action-trigger

API Reference

Arguments

Name	Type	Default	Description
`Timer::countdown`	`fn(start_ms, interval_ms) -> Timer`	—	カウントダウン型 Timer を構築する。
`Timer::count_up`	`fn(target_ms, interval_ms) -> Timer`	—	カウントアップ型 Timer を構築する。

Data Attributes

Part	Attribute	Observed Values
`action-trigger`	`data-action`	`pause`, `reset`, `restart`, `start`
`item`	`data-type`	`minutes`, `seconds`
`item-label`	`data-type`	`minutes`, `seconds`
`item-value`	`data-type`	`minutes`, `seconds`
`root`	`data-countdown`	（値なし）
`root`	`data-elapsed`	`35000`, `5000`
`root`	`data-interval`	`1000`
`root`	`data-start-ms`	`5000`, `90000`
`root`	`data-state`	`completed`, `running`
`root`	`data-target-ms`	`0`

CSS Variables

Variable	Default
`--fandhe-timer-value-color`	`var(--fandhe-color-fg)`
`--fandhe-timer-value-font-size`	`var(--fandhe-font-font-size-2xl)`

Examples

90 秒カウントダウン（35 秒経過）

start → 35 秒分の tick を注入した running 状態を固定表示します。

00Min

55Sec

Accessibility

WAI-ARIA

Attribute	Description
aria-live	経過表示の更新を支援技術へ通知する（headless-ui 側の root パーツが付与）。