Attachment

fandhe-frontend-pre-styled-ui の attachment mod が提供するスタイル済み Attachment 部品です。「添付ファイル 1 件の表示」を表現する Root / Media / Content / Name / Meta / Progress / Actions / Action の 8 パーツ構成で、横並びの行カード（file 形態）・縦積みのサムネイルカード（image 形態）の 2 意匠と、アップロード失敗時の枠色を見た目に反映します。

variant（file / image）・state（idle / uploading / error）・disabled は headless 層が出力する data-variant / data-state / data-disabled を CSS セレクタとして参照するだけで、class ベースの軸は持ちません。file は media（角丸アイコン枠）・content（name / meta の縦積み）・actions（末尾へ常時表示）の横並びカード、image は media を正方形サムネイルとして敷き詰める縦積みカードです。error は root の枠色と meta の文字色を強調色へ切り替えます。

image 形態の actions は既定で隠れ、root への hover / focus-within（キーボード操作）で表示します。この隠蔽規則自体は hover 機構を持つ端末向けの @media (hover: hover) 配下にのみ限定しており、タッチ端末等 hover 機構を持たない端末では規則が適用されず、CSS の初期値である opacity: 1（常時表示）のまま残ります。「見えないボタンで操作不能になる」到達不能を避けるための意図的な設計です。

progress は attachment scope の単純なスロットで、Progress（fandhe-frontend-headless-ui）を委譲しません。アップロード進捗を表示するときは、呼び出し側がスタイル済み progress（root / track / range）を中身へ入れ子にします。name / meta は整形済み文字列を受け取るだけのスロットで、byte → KB 変換等の数値整形はこの部品では行いません。

action はゴーストボタン（type="button" 固定・label が空文字列でないときのみ aria-label）です。disabled はネイティブ disabled と data-disabled の両方に反映しますが、root の disabled（opacity 0.5 + cursor: not-allowed）とは独立しており、二重減衰を避けるため action 自身の disabled は cursor: not-allowed のみを適用します。

アップロード進捗の判定・エラー分類・削除処理・ファイル名やサイズの整形はアプリケーションロジックであり、この部品では実装しません。

Demo

添付ファイル 1 件の表示。data-variant（file/image）・data-state（idle/uploading/error）・data-disabled は headless の data-* を参照するのみで class 軸は持ちません。file 形態は横並びの行カード、image 形態は縦積みのサムネイルカードで actions は hover/focus-within（タッチ端末では常時表示）で現れます。progress スロットは styled Progress の入れ子です。

📄

report.pdfPDF · 128 KB

photo.pngPNG · 2.4 MB · 64%

📄

archive.zipUpload failed

Features

AttachmentVariant（File/Image、attachment.rs recipe() の data-variant 参照）で横並びの行カード・縦積みのサムネイルカードを切り替える
AttachmentState（Idle/Uploading/Error）で通常表示・アップロード進行中・失敗時の枠色/文字色を切り替える
root/media/content/name/meta/progress/actions/action の 8 パーツで添付ファイル 1 件を構造化する
image 形態の actions は既定で隠れ、root への hover/focus-within で表示する（タッチ端末等 hover 機構を持たない端末では opacity: 0 の既定非表示規則自体が @media (hover: hover) 配下に限定されるため常時表示のまま残る、attachment.rs モジュール doc「actions の hover 表示とタッチ端末対策」節参照）
progress は attachment scope の単純なスロットで、呼び出し側が styled Progress（root/track/range）を入れ子にする契約
name/meta は整形済み文字列を受け取るだけのスロットで、byte → KB 変換等の数値整形は実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）
action は type="button" 固定・label が空文字列でないときのみ aria-label・disabled はネイティブ disabled + data-disabled の両方に反映する

Anatomy

root
  media
  content
    name
    meta
  actions
    action
  progress

API Reference

Arguments

Name	Type	Default	Description
`variant`	`AttachmentVariant`	`File`	表示形態（File/Image。data-variant として出力され、横並びの行カードと縦積みのサムネイルカードを切り替える）。
`state`	`AttachmentState`	`Idle`	アップロード状態（Idle/Uploading/Error。data-state として出力され、Error は枠色・meta 文字色を切り替える）。
`disabled`	`bool`	`false`	root の data-disabled（true の場合 opacity: 0.5 + cursor: not-allowed を適用）。
`label`	`&str`	`""`	action の aria-label（空文字列のときは省略）。
`disabled (action)`	`bool`	`false`	action 自身の disabled（root の disabled とは独立。ネイティブ disabled + data-disabled の両方に反映し、cursor: not-allowed のみを適用する）。

Data Attributes

Part	Attribute	Observed Values
`action`	`data-disabled`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-state`	`error`, `idle`, `uploading`
`root`	`data-variant`	`file`, `image`

CSS Variables

Variable	Default
`--fandhe-attachment-image-width`	`12rem`

Examples

File variant

横並びの行カード（idle）と media/content/actions パーツの例です。

📄

report.pdfPDF · 128 KB

Image variant uploading

縦積みのサムネイルカード（uploading）と progress スロットへ入れ子にした styled Progress の例です。

photo.pngPNG · 2.4 MB · 64%

Error and disabled

アップロード失敗時（error）と disabled 状態の例です。

📄

archive.zipUpload failed

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab	action はネイティブ button[type="button"] として描画され、ブラウザ標準のフォーカス順序・click 発火に従う（wasm-full の配線は不要、静的部品）。

WAI-ARIA

Attribute	Description
type="button" / aria-label (action)	action は type="button" を固定付与し（フォーム内配置時の意図しない submit を防ぐ）、渡した label が空文字列でなければ aria-label へ出力する。
disabled / data-disabled (action)	action の disabled 引数はネイティブ disabled 属性と data-disabled の両方へ反映する。