Disclosure は、情報のチャンク（塊）に対して、その情報のサマリ（要約）・見出しにあたる部分をトリガーとして開閉操作し、情報の表示・非表示を切り替えられるコンポーネントです。ページ・ビューにおける有限なスペースの節約や、情報の重みづけを表現する目的で活用できます。

1. 概要 (Overview)

説明

Disclosure は、詳細な情報のチャンクとその一部（サマリ・見出し・抽象化ラベル）で構成され、情報量を抑えながらユーザーの意思で詳細を展開できるようにするために使います。展開前は要約や見出しのような簡潔な情報を表示し、展開後に説明文・設定項目・補足コンテンツなど詳細な情報を表示します。

リンク

• Storybook
• GitHub

2. 構成要素 (Anatomy)

ASummary

Disclosure の内容を抜粋・抽象化した情報の領域です。ユーザーがBodyを展開するかどうか判断しやすい、簡潔なラベルを配置してください。

必須/任意: 必須

BIcon

Bodyを開閉できることと、現在の展開状態を示すアイコンです。折りたたんだ状態では文章末尾方向（日本語では右向き）を示すアイコン（矢印や三角形）を表示し、展開した状態では下向きに変えてください。Summaryの先頭（日本語では左端）に配置しましょう。

必須/任意: 必須

CBody

展開時に表示する詳細情報の領域です。Summaryの内容に直接関連する説明や操作項目を配置します（逆説的に言えば、SummaryはBodyと関連した内容になっている必要があります）。

必須/任意: 必須

3. 使い分け (Usage)

いつ使うか

• 補足説明、詳細条件、注釈などを必要なときだけ表示する
• 設定項目やフォームの補助情報を、主導線を妨げずに配置する

いつ使わないか

• ユーザーが必ず確認すべき重要な情報を隠す
• 本来はそのまま並べればよい（そのまま並べた方がアクセスしやすく有限なスペース領域への負の影響も及ぼさないと考えられる）情報を展開形式にする

4. バリエーション (Variants)

Open

初期状態で Body を展開（表示）するかどうかを指定できます。

実装

Mixin-based

HTML

<details class="disclosure-component">
  <summary class="_leading">
    <span class="_icon in-icon" data-icon="chevron_right"></span>
    請求金額の内訳
  </summary>
  <div class="_body">月額料金、オプション料金、割引額を合算した金額です。</div>
</details>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.disclosure-component {
  @include inhouse.disclosure-style();
}

Class-based

HTML

<details class="in-disclosure">
  <summary class="_leading">
    <span class="_icon in-icon" data-icon="chevron_right"></span>
    請求金額の内訳
  </summary>
  <div class="_body">月額料金、オプション料金、割引額を合算した金額です。</div>
</details>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.disclosure-export;

5. ステート (States)

Closed

Body が非表示になっている状態です。Header だけで内容を予測できるようにします。

Open

Bodyが表示されている状態です。展開した内容はSummaryと直接対応させ、関連しない情報を混在させないようにします。

6. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

• キーボードでフォーカス・開閉できるようにする
• 開閉状態が支援技術に伝わる実装にする
• そもそもDisclosureで情報を隠さない設計を検討する

7. ライティング (Writing)

• 「詳細はこちら」のように展開後の内容が予測しにくい・間接説明的なラベルは避ける
• BodyはSummaryの答えや補足として読める順序で書く
• 複数のDisclosureを並べる場合は、Header の粒度と文体をそろえる