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 がそのまま担います。

close_trigger はアイコン専用契約です（固定正方 + overflow: hidden）。close_trigger(state, vec![("aria-label", "Close")], vec![text("×")]) のように 1 グリフ（× 等）と aria-label を渡してください。テキストを渡した場合は正方形の枠内で切り詰められます。

action_trigger を複数並べる場合はボタン自身が持つ余白で間隔が空くため、コンテナ側で追加のレイアウトを組む必要はありません。ボタンを無効化するには呼び出し側で attrs へ ("disabled", "") を渡してください（ネイティブ disabled 属性がそのまま素通しされ、不透明度低下・カーソル変更・hover 抑止に反映されます）。

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 / Control / CloseTrigger / ActionTrigger の 13 anatomy パーツを持つ（イシュー #1666 で Control を追加。styled ラッパ・専用 CSS は Themes 側の後続）。
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
`action-trigger`	`data-type`	`next`, `prev`
`arrow`	`data-state`	`open`
`arrow-tip`	`data-state`	`open`
`backdrop`	`data-state`	`open`
`content`	`data-state`	`open`
`content`	`data-step`	`settings`
`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-content-max-width`	`24rem`
`--fandhe-tour-content-padding`	`var(--fandhe-space-6)`
`--fandhe-tour-spotlight-height`	`20%`
`--fandhe-tour-spotlight-radius`	`var(--fandhe-radius-sm, 0.25rem)`
`--fandhe-tour-spotlight-ring-width`	`2px`
`--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 に固定付与。ステップ進捗テキストの更新を読み上げさせる。