Marker

会話スレッド内のインライン注記行（システム注記・日付等の区切り・ラベル付きセパレータ）を表現する shadcn/ui Marker 相当の部品です（参照軸はイシュー #2001）。fandhe-frontend-headless-ui の marker mod が構造・アクセシビリティ（WAI-ARIA）・表示状態（data-*）のみを提供する unstyled 部品で、root / icon / content の 3 anatomy パーツを持ちます。状態機械を持たない静的部品です。

root は variant（note / divider / label）・tone（neutral / info / warning / danger）の props を受け取り、それぞれ data-variant / data-tone として出力します。会話系部品（message / bubble / attachment / marker）が共有する data-role / data-align は意図的に持ちません。data-tone の値語彙は fandhe-frontend-pre-styled-ui の ColorPalette（neutral / info / warning / danger）の同名 4 値の部分集合で、新しい値語彙は作りません。

divider / label variant の区切り線（行の下の境界線、中央ラベル + 左右の線）は本 mod では一切描画しません。区切り線の描画は fandhe-frontend-pre-styled-ui 側（separator パーツの再利用または CSS）が担う設計です。icon は装飾スロット（アイコン文字等）を、content は注記の本文テキストを children で受け取るだけのスロットです。

アクセシビリティ

icon には常に aria-hidden="true" を固定付与します（呼び出し側の aria-hidden="false" 偽装は除去されます）。
root には role を固定付与しません。静的な注記に割り込み通知は不要という判断です。ストリーミング中の注記に role="status" を付与したい場合は、呼び出し側が attrs で明示的に渡してください。

fandhe-frontend-pre-styled-ui 側の対応するスタイル済み部品（recipe・golden・Themes ページ）は Marker を参照してください。

自前 CSS の最小例:

CSS

[data-scope="marker"][data-part="root"] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #6b7280;
}
[data-scope="marker"][data-part="root"][data-tone="warning"] {
  color: #b45309;
}
[data-scope="marker"][data-part="root"][data-tone="danger"] {
  color: #b91c1c;
}
[data-scope="marker"][data-part="root"][data-variant="label"] {
  justify-content: center;
}

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

Demo

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

Explored 4 files

Conversation compacted

Today

Connection lost

Features

会話スレッド内のインライン注記行（システム注記・日付等の区切り・ラベル付きセパレータ）を表現する 3 anatomy パーツ（root/icon/content）を提供する（marker.rs）。状態機械を持たない静的部品であり wasm-full 側の配線は不要。
root へ data-variant（note/divider/label）・data-tone（neutral/info/warning/danger）を付与する。会話系 4 部品（message/bubble/attachment/marker）の共通語彙（data-role/data-align）は意図的に持たない（marker.rs「会話系 4 部品の共通語彙への不追随」節）。
divider/label variant の区切り線（水平線・左右の線）は headless 層で一切出力しない。fandhe-frontend-pre-styled-ui 側が separator パーツの再利用または CSS で描く契約とする（marker.rs「区切り線は headless で描かない」節）。data-tone の値語彙は fandhe-frontend-pre-styled-ui recipe::ColorPalette の同名 4 値の部分集合であり新語彙を作らない。

Anatomy

root
  icon
  content

API Reference

Arguments

Name	Type	Default	Description
`root: props.variant`	`MarkerVariant`	`MarkerVariant::Note`	表示形態（note/divider/label）。data-variant へ出力する（marker.rs）。
`root: props.tone`	`MarkerTone`	`MarkerTone::Neutral`	色調（neutral/info/warning/danger）。data-tone へ出力する（marker.rs）。
`root/icon/content: attrs`	`Vec<(&str, &str)>`	—	呼び出し側の追加属性。予約キー（data-variant/data-tone/aria-hidden）は大小文字無視でなりすまし除去される（marker.rs）。
`root/icon/content: children`	`Vec<Node>`	—	子ノード。content は注記の本文テキストを受け取るスロット（marker.rs）。

Data Attributes

Part	Attribute	Observed Values
`root`	`data-tone`	`danger`, `info`, `neutral`, `warning`
`root`	`data-variant`	`divider`, `label`, `note`

Examples

Note with icon

インライン注記（アイコン + 本文）の例です。

Explored 4 files

Label separator

中央ラベル形式の区切りを表す例です（線自体は範囲外）。

Today

Divider, tone warning

警告色の行境界線を表す例です（線自体は範囲外）。

Context window 80% full

自前 CSS の最小例

data-scope/data-part/data-variant/data-tone 属性セレクタでスタイルを当てる例です。

利用者が data-scope / data-part / data-variant / data-tone 属性セレクタで自前 CSS を当てる最小例です。headless-ui 自体はスタイルを持ちません。区切り線（divider/label variant）の描画自体は本サンプルの範囲外です。

Conversation compacted

CSS

[data-scope="marker"][data-part="root"] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #6b7280;
}
[data-scope="marker"][data-part="root"][data-tone="warning"] {
  color: #b45309;
}
[data-scope="marker"][data-part="root"][data-tone="danger"] {
  color: #b91c1c;
}
[data-scope="marker"][data-part="root"][data-variant="label"] {
  justify-content: center;
}

Accessibility

WAI-ARIA

Attribute	Description
aria-hidden="true"（icon、固定）	装飾スロットとして常に付与し、呼び出し側の aria-hidden="false" 偽装は除去する（marker.rs「アクセシビリティ」節）。
role（root、非固定）	静的注記に割り込み通知は不要なため root へ role を固定付与しない。ストリーミング中の注記へ role="status" を付与する運用は呼び出し側の attrs で可能（marker.rs「アクセシビリティ」節）。