Accordion

fandhe-frontend-pre-styled-ui の accordion mod が提供するスタイル済み Accordion 部品です。項目（Item）ごとに開閉するトリガー（ItemTrigger）とパネル（ItemContent）を持ち、高々 1 項目だけが開く single モードと複数項目が同時に開ける multiple モードの 2 つの状態機械（Accordion / MultiAccordion）を選べます。ページ内に収まる disclosure（開閉パネル）であり、他のセクションを覆うオーバーレイではないため、掲示位置を中和する専用 CSS は不要です。

Demo

開閉状態（data-state="open" / "closed"）に応じてスタイルが切り替わる開閉パネルの静的掲示です。

headless-ui の anatomy（data-scope / data-part）へテーマトークンと recipe CSS を重ねる styled 層です。

Features

高々 1 項目が開く single モード（Accordion）と、複数項目が同時に開く multiple モード（MultiAccordion）の 2 状態機械を提供する。
開いている項目の item-trigger / item-indicator を data-state="open" に連動してハイライトする。
size variant（Sm/Md/Lg）を root へ付与し、item-trigger / item-content の padding を切り替える。
item-trigger はキーボード操作時のみのフォーカスリング（:focus-visible）を持つ。
開閉状態（data-state）は呼び出し側が SSR/SSG のビルド時に渡した値がそのまま出力される。JS ゼロ SSG（クライアント側 JavaScript を読み込まない構成）での挙動・ネイティブ details/summary への代替パターンは「JS ゼロ SSG での利用ガイド」（/guides/no-js-ssg/）を参照。

Anatomy

root
  item
    item-trigger
    item-content

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	root へ付与するサイズ variant（Sm/Md/Lg）。item-trigger/item-content の padding を切り替える。

Data Attributes

Part	Attribute	Observed Values
item	data-state	closed, open
item-content	data-state	closed, open
item-trigger	data-state	closed, open
item-trigger	data-value	showcase-acc-1, showcase-acc-2

CSS Variables

Variable	Default
--fandhe-accordion-content-padding	var(--fandhe-space-4)
--fandhe-accordion-trigger-padding	var(--fandhe-space-4)

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	item-trigger に付与。項目の開閉状態（open で true）を表す。
aria-controls	item-trigger に付与。controls が Some のとき対応する item-content の id を指す。
role="region"	item-content に付与。labelled_by が Some のとき aria-labelledby とセットで付与される。