Hover Card

fandhe-frontend-pre-styled-ui の hover_card mod が提供するスタイル済み Hover Card 部品です。リンク先プレビュー等を目的に hover / focus で開閉するオーバーレイで、trigger は a 要素として組み立てられます。WAI-ARIA に hover card 専用パターンは存在しないため aria-expanded/aria-controls/aria-haspopup は付与しません。開閉遅延（既定 600ms/300ms）は data-open-delay/data-close-delay として決定的に出力される SSR 設定値で、実タイマー駆動は wasm-full 側の責務です。content は自由な children を受け取るため、fandhe-frontend-pre-styled-ui の avatar mod と組み合わせてユーザープロフィールプレビュー等の合成パターンも表現できます（下記 Examples 節「User profile preview」参照）。

Important

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

Demo

headless-ui の HoverCard（リンク先プレビュー等 hover/focus で開閉するオーバーレイ）に pre-styled-ui の recipe CSS を適用した静的掲示です。positioner はフロー内配置へ中和しています。2 つ目のインスタンス（closed）は hidden 属性・data-state="closed" により本文上は非表示です。1 つ目のインスタンス（open）は presence transition が適用されており、対応ブラウザではページ読み込み時にフェードインが実際に発火します。

Hover to preview

リンク先のプレビュー内容です。

Hover to preview (closed)

Features

リンク先プレビュー等、hover / focus で開閉するオーバーレイ。Root / Trigger / Positioner / Content / Arrow / ArrowTip の 6 anatomy パーツを持つ。
trigger はリンク先プレビュー用途の a 要素であり、javascript: 等の危険スキームは fandhe-frontend-core の URL スキーム検証が除去する。
HoverCardDelays（既定 open_ms: 600 / close_ms: 300）を data-open-delay / data-close-delay として root へ出力する。実際の hover/focus タイマー駆動は wasm-full 側の後続スコープ。
WAI-ARIA に hover card 専用パターンは存在しないため、trigger へ aria-expanded / aria-controls / aria-haspopup は付与しない。
shadcn/ui（Base UI）の Basic Example（Avatar + ユーザー名/説明文の合成カード）は content の children へ avatar::root/fallback を並べるだけの既存 API のみで再現できる合成パターンであり、新規の variant/size/state 軸を追加しない（下記 Examples 節参照）。

Anatomy

root
  trigger
  positioner
    content

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	—	開閉状態（Open/Closed）。
`delays`	`HoverCardDelays`	HoverCardDelays::default()（open_ms: 600, close_ms: 300）	hover/focus の開閉遅延（ms）。data-open-delay / data-close-delay として出力される決定的な SSR 設定値。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-state`	`closed`, `open`
`positioner`	`data-state`	`closed`, `open`
`root`	`data-close-delay`	`300`
`root`	`data-open-delay`	`600`
`root`	`data-state`	`closed`, `open`
`trigger`	`data-state`	`closed`, `open`

Examples

User profile preview

shadcn/ui（Base UI）の Basic Example に相当する、avatar と説明テキストを組み合わせた合成パターンです。avatar は fandhe-frontend-pre-styled-ui::avatar の root/fallback をそのまま使い、外部画像を読み込まないフォールバック文字（イニシャル）のみで表示します。新しい variant や data-* 語彙を追加せず、既存の hover_card::content の自由な children と avatar の既存 API のみで構成しています。

@ada

Accessibility

WAI-ARIA

Attribute	Description
aria-hidden="true"	positioner に付与。閉じている間、支援技術から内容を隠す。