Clipboard

値のコピーとコピー済み表示を扱う unstyled 部品です。コピー済み/未コピーの 2 値状態を data-copied（存在属性）で表現します。参考実装（ark-ui/chakra-ui）と突合し、Label は input の id を指す for、Input は data-readonly、Trigger は既定 aria-label（コピー済み状態に応じて反転）を持ちます。

Themes 版（fandhe-frontend-pre-styled-ui）はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Clipboard を参照してください。

実際の navigator.clipboard.writeText への書き込み・コピー完了後の自動リセットはクライアントランタイム側の責務であり、本部品は状態遷移の SSR マークアップのみを提供します。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Share link

https://example.com/share/abc

Features

Root/Label/Control/Input/Trigger/Indicator/ValueText の 7 anatomy パーツと、コピー済み/未コピーの 2 値状態機械 Clipboard を提供する。状態は値語彙ではなく data-copied（存在属性）で表現する。
input パーツはコピー元テキストの表示専用（readonly）であり name を持たず、フォーム送信を目的としない。
indicator は copied 用/idle 用の 2 変種を SSR で両方描画し、現在状態と不一致の側へ hidden を付与する（子孫セレクタを使わずに表示切り替えできる表現）。
実際の navigator.clipboard.writeText 書き込み・コピー完了後の自動リセット（タイムアウト）はクライアント配線層の責務であり、本コンポーネントは "clipboard:copy"/"clipboard:reset" の 2 アクションによる状態遷移のみを提供する（docs/policy/intentional-non-adoption.md §3.25）。

Anatomy

root
  label
  control
    input
    trigger
      indicator
  value-text

API Reference

Arguments

Name	Type	Default	Description
`value`	`&str`	（必須）	コピー対象値。`root` の `data-value` としてそのまま出力される（既定エスケープ経由）。クライアント側はこの `data-value` を読み取って実際の書き込みを行う契約。
`copied`	`bool`	`false`	コピー済みかどうか。`data-copied`・`indicator` の可視性・`input`/`control`/`trigger` の `data-copied` へ反映される。

Data Attributes

Part	Attribute	Observed Values
`indicator`	`data-state`	`hidden`, `visible`
`indicator`	`data-variant`	`copied`, `idle`
`input`	`data-readonly`	（値なし）
`root`	`data-value`	`https://example.com/share/abc`

Examples

コピー済み状態

copied = true を渡すと data-copied が付与され、indicator の可視性が入れ替わります（コピー用 → コピー済み用）。

Share link

https://example.com/share/xyz

Accessibility

Keyboard Interactions

Key	Description
Tab / Space / Enter	`trigger` はネイティブ `<button type="button">` であり、フォーカス・押下操作はブラウザ既定動作で成立する。