Drawer

fandhe-frontend-pre-styled-ui の drawer mod が提供するスタイル済み Drawer 部品です。画面端からスライドインするパネルで、WAI-ARIA 上は Dialog パターンの変種のため新規状態機械を作らず dialog の Disclosure 状態機械をそのまま再利用します。DrawerPlacement（始端/終端/上端/下端、既定は終端）でどの端から出現するかを切り替えられます。close_trigger_with_variant(CloseTriggerVariant::Text, ...) で dialog と対称の平文ボタン見た目を持たせることもできますが、fandhe-frontend-wasm-full が drawer scope の click 配線を未対応のため、アクション行に置いても現状クリックでは閉じません（別イシューで追跡）。body/footer は headless anatomy を変更しない pre-styled-only のレイアウト専用パートです。content の attrs へ data-has-body を付けると opt-in で flex column 化され、body が残り高さを埋めてスクロールします（付けない場合は body を使っても従来どおり content 全体がスクロールします）。

header も同様に headless anatomy を変更しない pre-styled-only のパートで、パネル上端まで広がる見出し帯のレイアウトのみを担います。header/ description/close_trigger へ data-tone="accent" を付けると、3 パートが連動してアクセント色の塗りに切り替わります（個別の opt-in 属性のため、塗りを適用したい各パートへ呼び出し側がそれぞれ付与してください）。close_trigger は content へ data-close-outside、close_trigger 自身へ data-close-outside="<start|end|top|bottom>"（DrawerPlacement の値と一致させてください）を付けると、パネルの外側（暗幕側）へ配置できます。長い本文は data-has-body + body と組み合わせてスクロールさせる前提です。

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 はフロー内配置へ中和しています。close-trigger は content 右上のゴーストボタン（× アイコン + aria-label）として掲示し、content に data-has-body を付けて description の下に body パート（イシュー #3128、pre-styled-only のスクロール可能コンテンツパート）で複数段落の本文を、その下に footer パート（イシュー #3128、pre-styled-only のレイアウト専用パート）でアクション列を配置しています。2 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です。1 つ目のインスタンス（open）は presence transition が適用されており、対応ブラウザではページ読み込み時にフェード＋スケールインが実際に発火します。

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 で寸法を切り替える。
pre-styled-only の body / footer パート（イシュー #3128、headless anatomy 変更なしの opt-in 純追加）。content の attrs へ data-has-body を付けると content が flex column 化し、body がその残り高さを埋めてスクロールする（data-has-body なしで body だけを使った場合は従来どおり content 全体がスクロールする無害な縮退）。
pre-styled-only の header パート + アクセント状態 / 外側 close-trigger 配置（イシュー #3129、headless anatomy 変更なしの opt-in 純追加）。header/description/close_trigger へ data-tone="accent" を付けるとパネル上端の全幅帯がアクセント色で塗られる。content へ data-close-outside、close_trigger へ data-close-outside="<placement 値>" を付けると close ボタンがパネルの外側（暗幕側）へ配置される。

Anatomy

trigger
root
  backdrop
  positioner
    content
      title
      description
      body
      footer
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	root へ付与するサイズ variant（Xs/Sm/Md/Lg/Xl）。
`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`	`closed`, `open`
`content`	`data-has-body`	（値なし）
`content`	`data-placement`	`end`
`content`	`data-state`	`closed`, `open`
`positioner`	`data-placement`	`end`
`positioner`	`data-state`	`closed`, `open`
`root`	`data-placement`	`end`
`root`	`data-state`	`closed`, `open`
`trigger`	`data-state`	`closed`, `open`

CSS Variables

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

Examples

shadcn/ui の Sheet/Drawer が持つ「本文だけスクロール・見出しとフッターは固定」構成を、pre-styled-only の body / footer パート（イシュー #3128）で再現した例です。content の attrs へ data-has-body を付けて flex column 化し、description の下に body（複数段落の本文）、その下に footer（Cancel/Save の 2 ボタン）を配置しています。placement="bottom" を掲示し、DrawerPlacement の 4 方向のうち Demo（end）とは異なる方向を示します。

Accent header with outside close (end placement)

パネル上端の全幅帯をアクセント色で塗る header パートと、close ボタンをパネルの外側（暗幕側）へ配置する opt-in 2 機能（イシュー #3129）を組み合わせた例です。header/description/close_trigger へ data-tone="accent" を、content/close_trigger へ data-close-outside（close_trigger 側は配置方向 "end"）を付与しています。body/footer（イシュー #3128）とも併用できることを示すため、本文のスクロール・アクション行も併記しています。

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 が設定されているときのみ出力される。