Floating Panel

ドラッグ移動・リサイズ可能な浮遊パネルです。fandhe-frontend-headless-ui の floating_panel mod は Root / Trigger / Positioner / Content / Header / Title / Control / StageTrigger / CloseTrigger / Body の 10 anatomy パーツと、開閉・Stage（Default/Minimized/Maximized）・座標を持つ状態機械を提供します。content は role="dialog" を固定付与しますが、非モーダル overlay のため aria-modal は出力しません（ユーザーは他の要素を操作し続けられます）。実際のドラッグ・リサイズ操作は JS ランタイムの責務としてスコープ外です。

スタイル済みの表示例は Floating Panel を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

Root / Trigger / Positioner / Content / Header / Title / Control / StageTrigger / CloseTrigger / Body の 10 anatomy パーツと、開閉・stage（Default/Minimized/Maximized）・座標を持つ状態機械 FloatingPanel を提供する。
stage（Default/Minimized/Maximized）は crate::state::Disclosure/SingleSelect に写像できないため、Steps/Progress と同じ判断で独自 enum として実装する。
content は role="dialog" を固定付与するが、非モーダル overlay のため aria-modal は出力しない（ユーザーは他の要素を操作し続けられる）。
座標（--fandhe-x/--fandhe-y）は crate::positioning の CSS 変数語彙を再利用するが、実際のドラッグ・リサイズ操作は JS ランタイムの責務としてスコープ外。

Anatomy

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

API Reference

Arguments

Name	Type	Default	Description
root: state	OpenState	Closed	パネル全体の開閉状態（data-state へ反映）。
root: stage	Stage	Default	パネルの表示段階（Default/Minimized/Maximized、data-stage へ反映）。
trigger: state	OpenState	Closed	aria-expanded/data-state へ反映される開閉状態。
trigger: disabled	bool		ネイティブ disabled 存在属性のみで表現する disabled 状態。
trigger: controls	Option<&str>		Some のとき aria-controls で content と関連付ける。
positioner: state	OpenState	Closed	closed のとき hidden 存在属性を付与する配置ラッパーの開閉状態。
positioner: stage	Stage	Default	data-stage へ反映される表示段階。
content: state	OpenState	Closed	開閉状態（closed のとき hidden 存在属性を付与）。
content: stage	Stage	Default	data-stage へ反映される表示段階。
content: id	Option<&str>		trigger の controls と対で aria-controls 関連付けを成立させる。
content: labelledby	Option<&str>		Some のとき title の id と対で aria-labelledby 関連付けを成立させる。
title: id	Option<&str>		content の labelledby と対にする。
stage_trigger: target	Stage		遷移先の表示段階（data-stage へ反映。実際の dispatch 配線は呼び出し側/wasm 層の責務）。
body: stage	Stage	Default	data-stage へ反映される表示段階（styled 層が minimized 時の折り畳みフックとして使う）。

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	minimized
trigger	data-state	open

Examples

Maximized stage

Stage::Maximized（既定 Default とは異なる表示段階）で開いた FloatingPanel の例です。

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup="dialog"	trigger に固定付与。
aria-expanded	trigger に付与。開閉状態を反映する。
aria-controls	trigger に付与。controls が Some のとき content と関連付ける。
role="dialog"	content に固定付与。
aria-labelledby	content に付与。labelledby が Some のときのみ出力される。
aria-modal（非付与）	content は role="dialog" を固定付与するが aria-modal は出力しない（非モーダル overlay。ユーザーは他の要素を操作し続けられ、支援技術へ誤ったモーダル通知を送らない）。