Action Bar

fandhe-frontend-pre-styled-ui の action_bar mod が提供するスタイル済み Action Bar 部品です。複数項目を選択した状態で画面下部に現れる操作バー（chakra-ui の ActionBar 相当）で、選択件数から開閉を自動導出する糖衣 API は持たず、「選択操作 → 開閉状態の決定」は呼び出し側アプリケーションの責務とする設計です。開閉状態そのものは Dialog と同じ Disclosure 状態機械を埋め込んで管理します。

Important

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

Demo

headless-ui の ActionBar（role="toolbar"）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています（実際の画面下部固定配置は recipe CSS が担います）。

Features

複数選択操作バー（chakra-ui ActionBar 相当）。Root / Positioner / Content / SelectionTrigger / Separator / CloseTrigger の 6 anatomy パーツを持つ。
開閉は Disclosure を埋め込んだ状態機械 ActionBar が管理する。選択件数から open を自動導出する糖衣 API は持たず、「選択操作 → 開閉状態の決定」は呼び出し側の責務とする。
content に role="toolbar" と aria-label（選択件数などの読み上げ用ラベル、呼び出し側が指定）を固定付与する。

Anatomy

root
  positioner
    content
      selection-trigger
      separator
      close-trigger

API Reference

Arguments

Name	Type	Default	Description
state	OpenState		開閉状態（Open/Closed）。root の data-state へ反映される。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
positioner	data-state	open
root	data-state	open

Accessibility

WAI-ARIA

Attribute	Description
role="toolbar"	content に付与。aria-label とセットで固定付与される。
role="separator"	separator に付与。aria-orientation="vertical" を伴う。