Floating Panel

fandhe-frontend-pre-styled-ui の floating_panel mod が提供するスタイル済み Floating Panel 部品です。ドラッグ移動・リサイズ可能な浮遊パネルで、開閉に加えて default/minimized/ maximized の 3 値を持つ独自状態 Stage を管理します。非モーダル overlay のため content は role="dialog" のみを付与し aria-modal は出力しません（ユーザーは他の要素を操作し続けられます）。

Important

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

Demo

headless-ui の FloatingPanel（role="dialog"、非モーダル）に pre-styled-ui の recipe CSS を適用した静的掲示です。stage="default" の状態を固定表示しています。positioner はフロー内配置へ中和しています（実際のドラッグ移動・overlay 配置は recipe CSS/wasm 層が担います）。

Features

ドラッグ移動・リサイズ可能な浮遊パネル。Root / Trigger / Positioner / Content / Header / Title / Control / StageTrigger / CloseTrigger / Body の 10 anatomy パーツを持つ。
開閉（crate::state::Disclosure 埋め込み）に加え、default/minimized/maximized の 3 値を持つ独自状態 Stage を管理する。
content は非モーダル overlay のため role="dialog" のみを付与し、aria-modal は出力しない（ユーザーは他の要素を操作し続けられる）。
座標は --fandhe-x / --fandhe-y CSS 変数として出力する（実際のドラッグ操作の DOM 配線は wasm-full 側の後続スコープ）。

Anatomy

root
  trigger
  positioner
    content
      header
        title
        control
          stage-trigger
          close-trigger
      body

API Reference

Arguments

Name	Type	Default	Description
state	OpenState		開閉状態（Open/Closed）。
stage	Stage		パネルの表示段階（default/minimized/maximized）。data-stage へ反映される。

Data Attributes

Part	Attribute	Observed Values
body	data-stage	default
content	data-stage	default
content	data-state	open
positioner	data-stage	default
positioner	data-state	open
root	data-stage	default
root	data-state	open
stage-trigger	data-stage	maximized, minimized
trigger	data-state	open

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded / aria-controls	trigger に付与。開閉状態と対応する content の id を表す。
role="dialog"	content に固定付与。aria-modal は出力しない（非モーダル overlay）。
aria-labelledby	content に付与。対応する title が設定されているときのみ出力される。