Avatar

プロフィール画像とフォールバック表示を切り替える部品です。fandhe-frontend-headless-ui の avatar mod は画像読み込みステータス（loading/loaded/error）を管理する状態機械を提供し、Root / Image / Fallback の 3 anatomy パーツで構成されます。Themes 版と異なりスタイル（外形・サイズ）は一切持たず、data-state による表示切り替えのみを担います。

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

アクセシビリティ・参考サイトとの対応

root/image/fallback はいずれも role/aria-* を付与しません。image の alt を必須引数にすることが実質的なアクセシビリティ担保です。
キーボード操作はありません（参照サイト 4 件〔ark-ui/Zag.js・Radix Primitives・Radix Themes・chakra-ui〕もキーボード操作表を持たない非インタラクティブな表示系コンポーネントです）。
data-state（visible/hidden）は image/fallback のみが持ちます。root へは付与しません（ark-ui 準拠）。
Radix Primitives の Fallback が持つ delayMs（表示遅延によるフラッシュ回避）は意図的に採用していません。JS なしの SSR では hidden 存在属性 + data-state で表示制御が成立しており、遅延が必要な場合は呼び出し側（fandhe-frontend-wasm-full/fandhe-frontend-pre-styled-ui）で実装してください。自前 CSS で組み立てる最小例は API Reference の Avatar 節を参照してください。

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

Demo

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

Features

画像読み込みステータス 3 値（ImageStatus::Loading/Loaded/Error）を管理する状態機械 Avatar を提供する（avatar.rs:135-182）。
Root / Image / Fallback の 3 anatomy パーツで構成し、Loaded のときのみ image を表示、それ以外は fallback を表示する安全側の既定（avatar.rs:173-182,193-248）。
image パーツは alt テキストを必須引数として要求することが実質的なアクセシビリティ担保であり、専用の role/aria-* は付与しない（avatar.rs:37-43）。
ark-ui/Zag.js・Radix Primitives・Radix Themes・chakra-ui の 4 参照サイトと突合済み（イシュー #1659）。anatomy/data-*/ARIA は一致し是正なし。Radix の delayMs（表示遅延）・各パーツへの dir/id・イニシャル自動導出は意図的に非採用（avatar.rs:81-120）。

Anatomy

root
  image
  fallback

API Reference

Arguments

Name	Type	Default	Description
`image: src`	`&str`	—	画像 URL（avatar.rs:211-229、必須）。
`image: alt`	`&str`	—	代替テキスト（avatar.rs:211-229、必須。実質的なアクセシビリティ担保）。
`image/fallback: status`	`ImageStatus`	`ImageStatus::Loading`	画像読み込みステータス。Loaded のときのみ image が可視（avatar.rs:140-148,173-182）。
`Avatar::new: initial`	`ImageStatus`	`ImageStatus::Loading`	状態機械の初期ステータス（avatar.rs:262-282）。

Data Attributes

Part	Attribute	Observed Values
`fallback`	`data-state`	`hidden`, `visible`
`image`	`data-state`	`hidden`, `visible`

Examples

Error fallback

画像読み込み失敗（ImageStatus::Error）時のイニシャル表示例です。

自前 CSS の最小例

data-scope/data-part/data-state 属性セレクタで円形アバターのスタイルを当てる例です。

利用者が data-scope / data-part / data-state 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。

CSS

[data-scope="avatar"][data-part="root"] {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
}
[data-scope="avatar"][data-part="image"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-scope="avatar"][data-part="fallback"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #e5e7eb;
}
[data-scope="avatar"][data-part="image"][data-state="hidden"],
[data-scope="avatar"][data-part="fallback"][data-state="hidden"] {
  display: none;
}

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	root/image/fallback は固有の role/aria-* を出力しない（avatar.rs 全文の非テスト行で role/aria- grep 0 件）。image パーツの alt テキストのみが代替情報を提供する。参照 4 サイト（ark-ui/Zag.js・Radix Primitives・Radix Themes・chakra-ui）とも role/aria-* を付与しない点で一致する（イシュー #1659 突合）。