Tour

オンボーディング向けステップガイドです。fandhe-frontend-headless-ui の tour mod は Root / Backdrop / Spotlight / Positioner / Arrow / ArrowTip / Content / Title / Description / ProgressText / CloseTrigger / ActionTrigger の 12 anatomy パーツと、Idle/Active/Skipped/Completed の決定的な状態機械を提供します。Themes 版と異なり対象要素の実座標追従・スポットライトの視覚表現を持たず、role="dialog" 等の構造・ARIA 属性と静的な配置情報の出力のみを担います。

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

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

Demo

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

Features

Root / Backdrop / Spotlight / Positioner / Arrow / ArrowTip / Content / Title / Description / ProgressText / CloseTrigger / ActionTrigger の 12 anatomy パーツを提供する（tour.rs:1-11）。
Idle/Active{step}/Skipped/Completed の決定的な状態機械を持ち、終端状態からのいずれのアクションも no-op（一度終了したツアーは暗黙に再開しない、tour.rs:34-52）。
content は role="dialog" を固定出力し、ContentIds が Some のときのみ aria-labelledby/aria-describedby を出力する（tour.rs:371-395）。
progress_text は aria-live="polite" を固定出力し、ステップ遷移を支援技術へ読み上げさせる（tour.rs:431-439）。
対象要素の実座標追従・スポットライト実測値注入・target セレクタの実解決は fandhe-frontend-wasm-full の後続イシューのスコープ（本モジュールは data-target 出力と静的な data-side/data-align のみ、tour.rs:13-21,87-94）。

Anatomy

root
  backdrop
  spotlight
  positioner
    arrow
      arrow-tip
    content
      title
      description
      progress-text
      action-trigger
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
Tour::new: steps	Vec<TourStep>		ツアーの全ステップ（初期状態は常に Idle、tour.rs:238-243）。
content: ids	ContentIds	ContentIds::default()	id/aria-labelledby/aria-describedby の関連付け先（tour.rs:195-205,375-395）。
title/description: id	Option<&str>	None	Some のとき content の labelledby/describedby と対にする（tour.rs:397-429）。

Data Attributes

Part	Attribute	Observed Values
arrow	data-state	open
arrow-tip	data-state	open
backdrop	data-state	open
content	data-state	open
positioner	data-align	center
positioner	data-side	bottom
positioner	data-state	open
root	data-state	open
root	data-status	active
spotlight	data-state	open
spotlight	data-target	#docs-toc-heading

Examples

Second step (2-step tour)

2 ステップ構成で 2 番目の step まで進めた例です（Demo は 1 ステップのみ）。

Accessibility

WAI-ARIA

Attribute	Description
role="dialog"	content に固定出力する（tour.rs:371-395）。
aria-labelledby / aria-describedby	ContentIds が Some のときのみ content に出力する（tour.rs:383-391）。
aria-live="polite"	progress_text に固定出力する（tour.rs:431-439）。