Collapsible

fandhe-frontend-pre-styled-ui の collapsible mod が提供するスタイル済み Collapsible 部品です。トリガー（Trigger）・開閉状態を示すインジケータ（Indicator）・パネル（Content）を持つ Root / Trigger / Indicator / Content の 4 パーツ構成で、data-state（open/closed）と data-disabled をトリガーの文字色強調・インジケータの回転・減光として視覚に反映します。ページ内に収まる disclosure（開閉パネル）であり、他のセクションを覆うオーバーレイではないため、掲示位置を中和する専用 CSS は不要です。パネルの開閉は headless 層が付与する hidden 属性で行いますが、JS 有効時は fandhe-frontend-wasm-full が実測した content の高さを CSS 変数（--fandhe-content-height）へ書き込み、@starting-style + transition-behavior: allow-discrete によって開閉を高さトランジションとして表現します（hidden 契約自体は維持したままの CSS ネイティブな遷移、Radix の collapsedHeight のような JS 実測依存の部分表示は再現しません）。JS 無効時（変数未設定）は auto フォールバックにより従来どおり hidden による即時切り替えのまま動作します。

Demo

ルート・トリガー・インジケータ・パネルの 4 パーツで開閉状態（data-state="open" / "closed"）と disabled を視覚に反映する静的掲示です。

Hidden details revealed here.

Features

単一の開閉パネル。Root / Trigger / Indicator / Content の 4 anatomy パーツを持つ。
data-state（open/closed）を trigger の文字色強調・indicator の回転として視覚に反映する。
data-disabled を 4 パート全てへ反映する（trigger のみネイティブ disabled 存在属性も伴う）。
size/variant/colorPalette は提供しない（参照 4 サイト chakra-ui/Ark UI/Radix Primitives/shadcn-ui のいずれも Collapsible に持たないため）。
closed のとき content は headless 層が付与する hidden 存在属性のみで隠れる（base では display を宣言せず、UA 既定の [hidden] { display: none } を上書きしない）。
JS 有効時、content の開閉は高さトランジションになる（イシュー #2192、案 C）。fandhe-frontend-wasm-full が実測した content 高さを CSS 変数（--fandhe-content-height）へ書き込み、@starting-style + transition-behavior: allow-discrete で hidden 属性の即時切り替えを遷移させる（hidden 契約そのものは維持し、Radix の collapsedHeight のような JS 実測依存の部分表示は再現しない）。JS 無効時（変数未設定）は auto フォールバックにより従来どおり hidden による即時切り替えのまま動作する。JS ゼロ SSG（クライアント側 JavaScript を読み込まない構成）での挙動は「JS ゼロ SSG での利用ガイド」（/guides/no-js-ssg/）を参照。
shadcn/ui（Base UI）の Examples（Basic / Settings Panel / File Tree）はいずれも既存 API（root/trigger/indicator/content の再帰的な組み合わせ）で再現できる合成パターンであり、新規の variant/size/state 軸を追加しない（下記 Examples 節参照）。

Anatomy

root
  trigger
    indicator
  content

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	—	開閉状態（Open/Closed）。root/trigger/indicator/content の data-state へ反映される。
`disabled`	`bool`	`false`	無効状態。4 パート全ての data-disabled へ反映し、trigger にはネイティブ disabled 存在属性も付与する。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-disabled`	（値なし）
`content`	`data-state`	`closed`, `open`
`indicator`	`data-disabled`	（値なし）
`indicator`	`data-state`	`closed`, `open`
`root`	`data-disabled`	（値なし）
`root`	`data-state`	`closed`, `open`
`trigger`	`data-disabled`	（値なし）
`trigger`	`data-state`	`closed`, `open`

Examples

shadcn/ui（Base UI）の File Tree Example に相当する、collapsible を再帰的にネストした合成パターンです。フォルダ行はテキストの折り畳みトリガー（indicator は固定グリフ ▾ + data-state="open" 時の回転で開閉方向を示す既存 CSS 規約に従う）、ファイル行はトリガーを持たない単なるテキストとして表現しています。新しい variant や data-* 語彙を追加せず、既存の root/trigger/indicator/content のみで構成しています。

Button.rs

Input.rs

main.rs

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	trigger に付与。開閉状態を表す。
aria-controls	trigger に付与。controls が Some のとき content の id を指す。