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="dialog"、イシュー #1647 で role="toolbar" から是正済み）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています（実際の画面下部固定配置は recipe CSS が担います）。

Features

複数選択操作バー（chakra-ui ActionBar 相当。実体は Ark Popover の再利用）。Root / Positioner / Content / SelectionTrigger / Separator / CloseTrigger の 6 anatomy パーツを持つ。
開閉は Disclosure を埋め込んだ状態機械 ActionBar が管理する。選択件数から open を自動導出する糖衣 API は持たず、「選択操作 → 開閉状態の決定」は呼び出し側の責務とする。
content に role="dialog"（非モーダル）と aria-label（選択件数などの読み上げ用ラベル、呼び出し側が指定）を固定付与する。参照基準に合わせイシュー #1647 で role="toolbar" から是正済み（**破壊的変更**）。開状態のみ data-expanded を、常時 tabindex="-1" を付与する。
close-trigger は呼び出し側が aria-label を指定せず、かつ children が空（可視テキストを持たないボタン）のときに限り既定値 "close" を出力する。

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-expanded`	（値なし）
`content`	`data-state`	`open`
`positioner`	`data-state`	`open`
`root`	`data-state`	`open`

Accessibility

WAI-ARIA

Attribute	Description
role="dialog"	content に付与（非モーダル、aria-modal は付与しない）。aria-label とセットで固定付与される。
data-expanded	content が開状態のときのみ付与される。
role="separator"	separator に付与。aria-orientation="vertical" を伴う。