添付ファイル

hc-attachment はファイルカードです: アイコン、ファイル名、サイズ、削除ボタンが 1 つのグリッド行に並びます。hc-attachments はそれを包むリストです — hc-chips と同じく複数形です。添付ファイルのリストそのものだからで、本物の <ul>/<li> に保つことでセットが読み上げ可能になります。純 CSS です: ドロップゾーンがファイルを集め、ファイルアップロードレシピがマルチパート + 進捗の契約を所有し、 hc-progress が installUploadProgress() の駆動するバーです。

基本の HTML

notes.md4 KB

<ul class="hc-attachments" aria-label="Attachments">
  <li class="hc-attachment">
    <span class="hc-attachment__icon" aria-hidden="true">📄</span>
    <span class="hc-attachment__name">notes.md</span>
    <span class="hc-attachment__size">4 KB</span>
    <button class="hc-attachment__remove" type="button"
            aria-label="Remove notes.md">×</button>
  </li>
</ul>

data-state がなければファイルは確定 — アップロード済みで一覧に載った状態です。アイコンのスロットにはインライン SVG(または絵文字のプレースホルダ)が入ります。装飾なので aria-hidden に保ってください。長いファイル名は行を壊さず、省略記号で切り詰められます。

状態

data-state="uploading" はカードの進捗行を表示します — カードの全幅にわたるネイティブの hc-progress 要素で、 htmx がフォームをアップロードする間、その value を installUploadProgress() が駆動します。data-state="error" は共有のステータストークンでカードを色づけします。

report.pdf1.2 MB
huge.iso9.8 GB

<ul class="hc-attachments" aria-label="Attachments">
  <li class="hc-attachment" data-state="uploading">
    <span class="hc-attachment__icon" aria-hidden="true">📄</span>
    <span class="hc-attachment__name">report.pdf</span>
    <span class="hc-attachment__size">1.2 MB</span>
    <progress class="hc-progress hc-attachment__progress"
              max="100" value="40" aria-label="Uploading report.pdf"></progress>
    <button class="hc-attachment__remove" type="button"
            aria-label="Remove report.pdf">×</button>
  </li>

  <li class="hc-attachment" data-state="error">
    <span class="hc-attachment__icon" aria-hidden="true">📄</span>
    <span class="hc-attachment__name">huge.iso</span>
    <span class="hc-attachment__size">9.8 GB</span>
    <button class="hc-attachment__remove" type="button"
            aria-label="Remove huge.iso">×</button>
  </li>
</ul>

進捗行は data-state="uploading" の間だけ描画されます — サーバの成功フラグメントは確定カード(状態なし、<progress> なし)をそのままスワップし、失敗は data-state="error" をスワップします。

組み合わせ

添付ファイルカードはファイルアップロードフローの表示側です。残りの半分はすでに存在します:

ドロップゾーンがファイルを集めます — ドロップはネイティブの <input type="file"> に代入して普通の change を発火するので、周囲のフォームはいつもどおりシリアライズされます。
ファイルアップロードレシピがマルチパート + 進捗の契約を所有します: htmx がフォームを POST し、 installUploadProgress() が実際のアップロード進捗を <progress> 要素へ写し、レスポンスが確定フラグメントを追記してフォームを out-of-band でリセットします。

アクセシビリティ

削除コントロールは本物の <button> で、aria-label にファイル名を含めます — 素の「×」ではなく「Remove report.pdf」です。
<ul>/<li> 構造により、セットは位置と件数つきで読み上げ可能です。見出しが名前になっていないときはリストに aria-label を与えてください。
<progress> はアクセシブルネームを持ちます(その aria-label もファイル名を含む)。読み上げられるパーセンテージがどのファイルのものか分かります。
アイコンは装飾(aria-hidden="true")です — アイデンティティはファイル名のテキストが担います。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`attachment.bg` / `border` / `radius`	カードの面。
`attachment.gap`	カード内のグリッドギャップとカード間のギャップ。
`attachment.padding-block` / `padding-inline`	カードのパディング。
`attachment.name-fg` / `size-fg`	ファイル名 / サイズの文字。
`attachment.icon-size`	アイコンと削除ボタンの正方形。
`attachment.error-bg` / `error-border`	エラー状態のカード。

CSS 変数

生成される CSS 変数を表示

--hc-attachment-bg | -border | -radius | -gap
--hc-attachment-padding-block | -padding-inline
--hc-attachment-name-fg | -size-fg | -icon-size
--hc-attachment-error-bg | -error-border