Toast

fandhe-frontend-pre-styled-ui の toast mod が提供するスタイル済み Toast 部品です。一時的な通知を有界なキューとして管理する状態機械 Toaster を持ち、aria-live は通知の状態（ToastStatus）から決定的に導出します（Error のみ assertive、他は polite）。aria-atomic="true" を併用し通知全体を単位として読み上げさせます。

Important

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

close_trigger はアイコン専用の契約です。固定正方（右上絶対配置）+ overflow: hidden のため、テキストを渡しても切り詰められます。close_trigger(vec![("aria-label", "Close")], vec![text("×")]) のように、1〜2 文字のグリフと aria-label の組み合わせで呼び出してください。

action_trigger は outline 小ボタンとして表示され、hover / キーボード操作時のフォーカスリング / disabled 状態のスタイルを備えます: action_trigger(vec![], vec![text("Update")])。ネイティブ <button disabled> のみが disabled 状態を反映します（headless 層が data-disabled を発行しないため）。

title は省略可能で、description のみで構成する通知も既存 anatomy のまま実現できます（Examples 節を参照）。イシュー #2040 で shadcn/ui と突合した結果、状態配色（淡色面 tint）と action_trigger の縦積み配置は既存のまま維持することを確定しています。理由の詳細は crates/pre-styled-ui/src/toast.rs のモジュール doc「イシュー #2040」節を参照してください。

縦積み配置は既定のまま維持する一方、右端にアクション列を置きたい場合は ACTIONS_COLUMN_ATTR（data-actions-column）を root と列内の各 action_trigger へ付ける opt-in のレイアウトを選べます。本文は pre-styled-only の content パート、アクション列は同じく pre-styled-only の actions パートで包みます。actions 内の action_trigger が 1 個なら全高のボタン 1 個の列に、2 個なら縦に等分された列になります（イシュー #3142、Examples 節参照）。close_trigger と同じ終端ガターを使うため、列レイアウトと close_trigger の併用は意図的にサポートしていません。

Demo

headless-ui の Toast（role="status" + aria-live（error のみ assertive）+ aria-atomic="true"）に pre-styled-ui の placement（group slot）/status（root slot）/action-trigger・close-trigger（hover/focus/disabled）variant CSS を適用した静的掲示です。複数通知の有界キュー管理・自動 dismiss のタイマー配線は wasm 層の後続イシューのスコープ外です。

Info

新しいバージョンが利用可能です。

Success

ビルドが完了しました。

Warning

依存クレート数が上限に近づいています。

Error

リンク切れを検出したため書き出しを中止しました。

Features

一時的な通知の queue 表示。group（live region）/ root（通知 1 件）/ title / description / action-trigger / close-trigger の 6 anatomy パーツを持つ。
複数通知を有界なキューとして管理する状態機械 Toaster を提供する（Disclosure/SingleSelect のいずれにも写像できないため Component/Hydrate を直接実装する）。
aria-live は ToastStatus から決定的に導出する（Error のみ assertive、他は polite）。aria-atomic="true" を併用し通知全体を単位として読み上げさせる。
placement（6 語彙、既定 BottomEnd）/ status（Info/Success/Warning/Error、既定 Info）の 2 軸 variant。
stack 表示（積層・hover/focus-within 展開、motion feature の opt-in、イシュー #2543）。group へ data-fandhe-toast-stack を付けると後ろの通知ほど縮小・オフセットして重なり、hover/focus-within で通常の縦並びへ展開する。
右端アクション列レイアウト（opt-in、イシュー #3142）。root とアクション列内の各 action-trigger へ data-actions-column を付けると、縦積みの既定配置から pre-styled-only の content/actions パートによる本文・全高アクション列の横並びへ切り替わる（ボタン 1 個の全高列、またはボタン複数個の縦分割列）。

Anatomy

group
  root
    title
    description
    action-trigger
    close-trigger

API Reference

Arguments

Name	Type	Default	Description
`placement`	`ToastPlacement`	`ToastPlacement::BottomEnd`	group（live region）の表示位置（6 語彙）。
`label`	`&str`	—	group の role="region" に付与する aria-label（読み上げ用ラベル）。
`status`	`ToastStatus`	`ToastStatus::Info`	通知 1 件（root）の状態（Info/Success/Warning/Error）。aria-live の緊急度導出にも使われる。

Data Attributes

Part	Attribute	Observed Values
`group`	`data-placement`	`bottom-end`
`root`	`data-state`	`open`
`root`	`data-type`	`error`, `info`, `success`, `warning`

CSS Variables

Variable	Default
`--fandhe-toast-enter-translate`	`0 var(--fandhe-space-2)`
`--fandhe-toast-stack-index`	—
`--fandhe-toast-stack-offset`	—
`--fandhe-toast-stack-scale-step`	—

Examples

Description のみ（タイトルなし）

title を省略し description のみで構成する合成パターン。既存 anatomy のみで再現でき、CSS 変更は不要（イシュー #2040、shadcn/ui 突合）。

設定を保存しました。

積層表示（stack、motion feature opt-in）

group へ toast_motion::STACK_ATTR を付けると、後ろの通知ほど縮小・オフセットして積層表示になり、hover/focus-within で展開します（イシュー #2543）。DOM 順は新しい通知が先頭（前面）です。

右端アクション列（全高 1 ボタン）

root と action-trigger へ toast::ACTIONS_COLUMN_ATTR を付け、content/actions パートで本文とアクション列を分ける合成パターンです。アクション 1 個のときは全高のボタン 1 個の列になります（イシュー #3142）。

メッセージを送信しました。

右端アクション列（縦 2 分割）

同じ data-actions-column 構成で action-trigger を 2 個並べると、列が上下に等分され、それぞれが独立したボタンになります（イシュー #3142）。

新しいメッセージ要求

Accessibility

WAI-ARIA

Attribute	Description
role="region" / aria-label	group に付与。label 引数がそのまま aria-label になる。
role="status" / aria-atomic="true" / aria-live	root に付与。aria-live は status から決定的に導出される（Error のみ assertive、他は polite）。