Steps

段階ナビゲーション（ウィザード）です。fandhe-frontend-headless-ui の steps mod は Root / List / Item / Trigger / Indicator / Separator / Content / CompletedContent / PrevTrigger / NextTrigger の 10 anatomy パーツと、complete/current/incomplete の 3 状態を導出する決定的な状態機械を提供します。Themes 版と異なりインジケーターの見た目を持たず、構造・aria-current="step" 等の属性・境界（先頭/末尾）判定のみを担います。

スタイル済みの表示例は Steps を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Step 2 content

Features

Root / List / Item / Trigger / Indicator / Separator / Content / CompletedContent / PrevTrigger / NextTrigger の 10 anatomy パーツを提供する（steps.rs:1-10）。
count/step から complete/current/incomplete の 3 状態を導出し、data-state・data-complete/-current/-incomplete へ一元反映する（steps.rs:24-34,89-121）。
current な item の trigger のみ aria-current="step" を付与する（steps.rs:58-61,249-269）。
separator は role="separator" + aria-hidden="true" で装飾要素として a11y ツリーから除外する（steps.rs:288-310）。
prev_trigger/next_trigger は境界（step==0/step==count）で自動的に disabled 属性を付与する（steps.rs:357-388）。

Anatomy

root
  list
    item
      trigger
        indicator
    separator
  content
  completed-content
  prev-trigger
  next-trigger

API Reference

Arguments

Name	Type	Default	Description
Steps::new: count, step, orientation	usize, usize, Orientation		全 step 数・現在位置・向き。fail-closed に正規化する（steps.rs:123-133,164-171）。
item/trigger/indicator/separator/content: index	usize		0..count の step インデックス（3 状態・aria-current 判定の元、steps.rs:224-334）。

Data Attributes

Part	Attribute	Observed Values
completed-content	data-state	closed
content	data-state	open
indicator	data-complete
indicator	data-current
indicator	data-incomplete
indicator	data-state	complete, current, incomplete
item	data-complete
item	data-current
item	data-incomplete
item	data-orientation	horizontal
item	data-state	complete, current, incomplete
list	data-orientation	horizontal
root	data-orientation	horizontal
separator	data-complete
separator	data-current
separator	data-orientation	horizontal
separator	data-state	complete, current
trigger	data-complete
trigger	data-current
trigger	data-incomplete
trigger	data-state	complete, current, incomplete

Examples

All steps completed

count==step（全 step 完了）で completed_content が表示される例です（Demo は 2 番目の step が current）。

All steps completed.

Accessibility

WAI-ARIA

Attribute	Description
aria-current="step"	current な item の trigger のみに出力する（steps.rs:249-269）。
role="separator" / aria-hidden="true"	separator に固定出力する（装飾要素、steps.rs:288-310）。