Bubble

fandhe-frontend-pre-styled-ui の bubble mod が提供するスタイル済み Bubble 部品です。AI チャット UI の「吹き出し 1 個」を表現する Root / Content / Reactions / Reaction / CollapseTrigger / CollapseContent の 6 パーツ構成で、塗り・枠線・無装飾の 3 形態と連続発言の角丸連結を見た目に反映します。

variant（solid / outline / plain）・align（start / end）・group-position（single / first / middle / last）・selected・state（open / closed）は headless 層が出力する data-variant / data-align / data-group-position / data-selected / data-state を CSS セレクタとして参照するだけで、class ベースの軸は持ちません。variant ごとに背景・文字色・枠線が切り替わり（solid はアクセント塗り、outline は枠線のみ、plain は無装飾）、align="end" に応じて連続発言の隣接辺の角丸が潰れます（group-position の first / middle / last。single は角丸が潰れません）。実際の色調選択（アクセント色以外）は ColorPalette 軸の責務ではなく、root が公開する --fandhe-bubble-bg / --fandhe-bubble-fg / --fandhe-bubble-border の 3 custom property を呼び出し側が上書きするフックとして提供します。

reactions / reaction はリアクションチップの表示のみを担う非対話パーツです。押下・集計・トグルはこの部品では実装しません。collapse-trigger / collapse-content は折りたたみ詳細を表現し、開閉は headless 層が出力する hidden 属性で行います。hidden の切り替え自体がクライアントランタイムから発火すれば、calc-size() 対応ブラウザでは @starting-style + transition-behavior: allow-discrete による高さトランジションとして開閉が表現されます（collapsible / accordion と同じ共通機構。hidden 契約自体は維持したままの CSS ネイティブな遷移で、fandhe-frontend-wasm-full が実測した高さを CSS 変数（--fandhe-content-height）へ書き込む経路は必須ではありません）。calc-size() 未対応ブラウザでは共通 preset が常に遷移を無効化するため、実測値の同期有無に関わらず auto フォールバックによる hidden の即時切り替えのまま動作します。

「リスト中の何番目か」「前後の発言者が同じか」を突き合わせて group-position を選ぶ計算、リアクションの押下・集計・トグル、折りたたみのトグル自体はアプリケーションロジックであり、この部品では実装しません。

Demo

AI チャット UI の吹き出し 1 個。data-variant（solid/outline/plain）・data-align（start/end）・data-group-position（single/first/middle/last）は headless の data-* を参照するのみで class 軸は持ちません。reactions/reaction はリアクションチップ、collapse-trigger/collapse-content は折りたたみ詳細（opacity フェード）を表現します。

How do I center a div?

Use flexbox:

display: flex; align-items: center; justify-content: center;

That should do it.

👍❤

Sent 09:41 · Edited

Thanks!

Features

BubbleVariant（Solid/Outline/Plain、bubble.rs recipe() の data-variant 参照）で塗り・枠線・無装飾の 3 形態を切り替える
MessageAlign（Start/End、会話系部品共通語彙）で root の水平整列を切り替える
BubbleGroupPosition（Single/First/Middle/Last）で連続発言の隣接辺の角丸を連結する（算出はアプリ側の責務）
root/content/reactions/reaction/collapse-trigger/collapse-content の 6 パーツで吹き出し 1 個を構造化する
reactions/reaction はリアクションチップの表示のみを担う非対話パーツで、押下・集計・トグルは実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）
collapse-trigger/collapse-content は OpenState の open/closed を data-state・hidden へ反映し、collapse-content は共通高さトランジション機構（@starting-style + allow-discrete、collapsible/accordion と同型）を適用する（クライアントランタイムが hidden を切り替えれば、calc-size() 対応ブラウザでは実測変数なしでも高さトランジションになる。calc-size() 非対応ブラウザでは @supports により常に transition: none が適用され、content_height 同期の有無に関わらず hidden による即時切替のまま動作する）
root は --fandhe-bubble-bg/--fandhe-bubble-fg/--fandhe-bubble-border の 3 custom property を公開し、ColorPalette 軸を持たない代わりに呼び出し側が色を上書きできる

Anatomy

root
  content
  reactions
    reaction
  collapse-trigger
  collapse-content

API Reference

Arguments

Name	Type	Default	Description
`variant`	`BubbleVariant`	`Solid`	見た目の形態（Solid/Outline/Plain。data-variant として出力され、背景・文字色・枠線を切り替える）。
`align`	`MessageAlign`	`Start`	root の水平整列（Start/End。会話系部品共通語彙、center は持たない）。
`group_position`	`BubbleGroupPosition`	`Single`	連続発言中の位置（Single/First/Middle/Last。align と組み合わせて隣接辺の角丸を潰す。何番目かの算出は利用者責務）。
`selected`	`bool`	`false`	reaction の選択状態（true の場合 data-selected 存在属性を付与し、背景・枠線・文字色を強調する）。
`state`	`OpenState`	`Closed`	collapse-trigger/collapse-content の開閉状態（Open/Closed。data-state・aria-expanded・hidden へ反映する）。
`controls / id`	`Option<&str>`	`None`	collapse-trigger の aria-controls と collapse-content の id を関連付ける識別子（Some のときのみ出力）。
`label`	`&str`	`""`	reactions の aria-label（空文字列のときは省略）。

Data Attributes

Part	Attribute	Observed Values
`collapse-content`	`data-state`	`closed`, `open`
`collapse-trigger`	`data-state`	`closed`, `open`
`reaction`	`data-selected`	（値なし）
`root`	`data-align`	`end`, `start`
`root`	`data-group-position`	`first`, `last`, `middle`, `single`
`root`	`data-variant`	`outline`, `plain`, `solid`

CSS Variables

Variable	Default
`--fandhe-bubble-bg`	—
`--fandhe-bubble-border`	—
`--fandhe-bubble-fg`	—
`--fandhe-bubble-max-width`	`32rem`

Examples

Conversation turn

solid（align=start）と outline（align=end）の 1 往復の例です。

How do I center a div?

Use flexbox.

Consecutive group position

group-position（first/middle/last）で連続発言の隣接辺の角丸が連結される例です。

Here is the plan:

1. Bump the version.

2. Open a PR.

Reactions and collapse

reactions/reaction（selected あり/なし）と collapse-trigger/collapse-content（open/closed）の例です。

That should do it.

👍❤

Sent 09:41 · Edited

Thanks!

Accessibility

Keyboard Interactions

Key	Description
Space / Enter	collapse-trigger はネイティブ button[type="button"] として描画され、ブラウザ標準の click 発火に従う（wasm-full の toggle 配線は本イシューのスコープ外）。

WAI-ARIA

Attribute	Description
role="group" / aria-label (reactions)	reactions は role="group" を固定付与し、渡した label が空でなければ aria-label へ出力する（bubble.rs モジュール doc「reactions/reaction」節参照）。
aria-expanded / aria-controls / data-state (collapse-trigger)	collapse-trigger は開閉状態を aria-expanded と data-state に同期させ、controls を渡すと aria-controls で collapse-content と関連付ける。
hidden (collapse-content)	collapse-content は closed のとき hidden 存在属性を付与し、JS なしの SSR でも閉状態を表現する。