Drawer

fandhe-frontend-pre-styled-ui の drawer mod が提供するスタイル済み Drawer 部品です。画面端からスライドインするパネルで、WAI-ARIA 上は Dialog パターンの変種のため新規状態機械を作らず dialog の Disclosure 状態機械をそのまま再利用します。 DrawerPlacement（始端/終端/上端/下端、既定は終端）でどの端から出現するかを切り替えられます。

Important

Demo はトリガー起点のオーバーレイ部品を「開いた状態」で固定掲示しています。本来の配置（画面全体を覆う・トリガー直下に重なる）ではページ内の他セクションと重なるため、掲示専用 CSS（assets/pre-styled-ui.css の .pre-styled-showcase スコープ）でページの流れの中へ収めています。実アプリケーションでの overlay 配置は pre-styled-ui の recipe CSS がそのまま担います。

Demo

headless-ui の Drawer（WAI-ARIA dialog パターンの変種、dialog の状態機械を再利用）に pre-styled-ui の data-scope / data-part セレクタ CSS を適用した静的掲示です。placement="end" を掲示しています。backdrop は掲示用に非表示化し、positioner はフロー内配置へ中和しています。

Features

画面端からスライドインするパネル。WAI-ARIA 上は Dialog パターンの変種であり、新規状態機械を作らず crate::dialog の状態機械（Disclosure）をそのまま再利用する。
Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツ（dialog と同一構成）。
DrawerPlacement（Start/End/Top/Bottom、既定 End）で画面のどの端から出現するかを data-placement として root/positioner/content へ出力する。
size variant で寸法を切り替える。

Anatomy

trigger
root
  backdrop
  positioner
    content
      title
      description
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	root へ付与するサイズ variant（Sm/Md/Lg）。
state	OpenState		開閉状態（Open/Closed）。dialog と同じ Disclosure 状態機械を再利用する。
placement	DrawerPlacement	DrawerPlacement::End	画面のどの端から出現するか（Start/End/Top/Bottom）。data-placement として出力される。

Data Attributes

Part	Attribute	Observed Values
backdrop	data-state	open
content	data-placement	end
content	data-state	open
positioner	data-placement	end
positioner	data-state	open
root	data-placement	end
root	data-state	open
trigger	data-state	open

CSS Variables

Variable	Default
--fandhe-drawer-content-padding	var(--fandhe-space-6)
--fandhe-drawer-size	20rem

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded / aria-controls	trigger に付与。dialog と同一の意味論。
role="dialog"	content に固定付与。
aria-modal	content に付与。モーダルかどうかを表す真偽値。
aria-labelledby / aria-describedby	content に付与。対応する title/description が設定されているときのみ出力される。