Tabs

WAI-ARIA APG の Tabs パターンに準拠したタブ切り替え UI です。fandhe-frontend-headless-ui の tabs mod が構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを提供する unstyled 部品であり、Themes 版と異なりスタイル（CSS）は一切持ちません。ActivationMode（Automatic/Manual）や Orientation（Horizontal/Vertical）を切り替えられます。

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

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

Demo

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

Overview panel content.

Features

WAI-ARIA APG の Tabs パターン（role="tablist"/"tab"/"tabpanel"、aria-selected、相互参照する aria-controls/aria-labelledby、roving tabindex）に準拠したマークアップを組み立てる（tabs.rs モジュール doc）。
root / list / trigger / content の 4 パーツに加え、選択タブの位置を示す装飾パーツ indicator（opt-in、TabsProps::indicator）を持つ 5 パーツ構成。
ActivationMode（Automatic/Manual）を data-activation-mode として出力し、wasm-full 側のキーボード操作時の活性化挙動分岐に使われる（Automatic が既定）。
props.selected がどの value とも一致しない場合、または一致した項目が disabled の場合は全 trigger/content が inactive として決定的に描画される（panic しない）。

Anatomy

root
  list
    trigger
    indicator
  content

API Reference

Arguments

Name	Type	Default	Description
props(orientation)	Orientation		data-orientation（root/list/trigger/content 共通）・list の aria-orientation の双方に反映する。
props(activation_mode)	ActivationMode	Automatic	list へ data-activation-mode として出力する（フォーカス移動と同時に活性化 or Enter/Space で活性化）。
props(loop_focus)	bool		list へ data-loop-focus として出力する（Arrow キーで端から反対端へ循環するか）。
TabItem(disabled)	bool		true のとき disabled 属性・data-disabled・aria-disabled="true" を trigger に付与し、roving tabindex のフォールバック候補からも除外する。

Data Attributes

Part	Attribute	Observed Values
content	data-orientation	horizontal
content	data-state	active, inactive
indicator	data-orientation	horizontal
indicator	data-state	active
list	data-activation-mode	automatic
list	data-loop-focus	true
list	data-orientation	horizontal
root	data-orientation	horizontal
trigger	data-orientation	horizontal
trigger	data-state	active, inactive
trigger	data-value	overview, settings

Examples

Vertical orientation・Manual activation・indicator なし

Demo とは異なる軸（縦向き・手動活性化・indicator 省略）の組み合わせを実演します。

Profile panel content.

Accessibility

WAI-ARIA

Attribute	Description
role="tablist" / aria-orientation	list に付与。
role="tab" / aria-selected / aria-controls	trigger に付与。選択状態と対応する content の id を表す。
role="tabpanel" / aria-labelledby	content に付与。対応する trigger の id を指す。