Tour

fandhe-frontend-pre-styled-ui の tour mod が提供するスタイル済み Tour 部品です。オンボーディング向けステップガイドで、open/closed の 2 値に加え skipped/completed という終端状態を持つ独自状態機械 Tour を提供します。対象要素の実座標追従（DOM 解決・スクロール/リサイズ再計算）は行わず、 TourStep::target を data-target 属性としてエスケープ済みで出力するのみです。

Important

Demo はトリガー起点のオーバーレイ部品を「開いた状態」で固定掲示しています。本来の配置（画面全体を覆う・トリガー直下に重なる）ではページ内の他セクションと重なるため、掲示専用 CSS（assets/pre-styled-ui.css の .pre-styled-showcase スコープ）でページの流れの中へ収めています。実アプリケーションでの overlay 配置は pre-styled-ui の recipe CSS がそのまま担います。

Demo

steps（全ステップ）+ status（idle/active/skipped/completed）を持つ headless Tour の静的掲示（現在 Active { step: 1 } を固定表示）。content は role="dialog" + aria-labelledby/aria-describedby、progress-text は aria-live="polite" を持ちます。対象要素の実座標追従・target セレクタの実解決・クリック/キーボードの実配線は wasm 層の後続イシューのスコープ外です。

Features

オンボーディング向けステップガイド。Root / Backdrop / Spotlight / Positioner / Arrow / ArrowTip / Content / Title / Description / ProgressText / CloseTrigger / ActionTrigger の 12 anatomy パーツを持つ。
open/closed の 2 値に加え skipped/completed という終端状態を持つ独自状態機械 Tour（Disclosure/SingleSelect のいずれにも写像できないため Component/Hydrate を直接実装する）。
TourStep::target は DOM 解決を行わず data-target 属性としてエスケープ済みで出力するのみ（実座標追従は wasm-full 側の後続スコープ）。
color-palette variant で root にクラスを付与する。

Anatomy

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

API Reference

Arguments

Name	Type	Default	Description
palette	ColorPalette		root へ付与する配色 variant。

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	start
positioner	data-side	left
positioner	data-state	open
root	data-state	open
root	data-status	active
spotlight	data-state	open
spotlight	data-target	#showcase-tour-target-2

CSS Variables

Variable	Default
--fandhe-tour-spotlight-height	20%
--fandhe-tour-spotlight-width	20%
--fandhe-tour-spotlight-x	40%
--fandhe-tour-spotlight-y	40%

Accessibility

WAI-ARIA

Attribute	Description
role="dialog" / aria-labelledby / aria-describedby	content に付与。ContentIds で指定した title/description の id を指す。
aria-live="polite"	progress_text に固定付与。ステップ進捗テキストの更新を読み上げさせる。