Marker

fandhe-frontend-pre-styled-ui の marker mod が提供するスタイル済み Marker 部品です。会話スレッド内のインライン注記行（システム注記・日付等の区切り・ラベル付きセパレータ）を Root / Icon / Content の 3 パーツ構成で表現します。

variant（note / divider / label）・tone（neutral / info / warning / danger）は headless 層が出力する data-variant / data-tone を CSS セレクタとして参照するだけで、class ベースの軸は持ちません。note は既定のインライン注記表示（線なし）、divider は行の下に境界線を伴う表示、label は中央ラベル + 左右の線を伴う表示です。tone は fandhe-frontend-pre-styled-ui の ColorPalette と同名の neutral / info / warning / danger の 4 値で、注記の文字色・線色を切り替えます。

区切り線は疑似要素（::before / ::after）を使わずに描画します。divider 形態は DOM を増やさず root へ境界線（border-bottom）の CSS 規則を適用するだけですが、label 形態は呼び出し側の children をスタイル済み Separator（水平・実線、aria-hidden="true"）2 個で挟んでから headless 層へ委譲します。挟み込む Separator に aria-hidden="true" を渡すのは、短いラベルの前後で role="separator" が 2 回読み上げられるのを避けるためです。

icon は装飾スロットとして aria-hidden="true" を固定付与します（呼び出し側の aria-hidden="false" 偽装は除去されます）。content は注記の本文テキストを children で受け取るだけのスロットです。root には role を固定付与しません。ストリーミング中の注記に role="status" を付与したい場合は、呼び出し側が attrs で明示的に渡してください。

ストリーミング中判定・注記の自動分類・タイムスタンプ整形はアプリケーションロジックであり、この部品では実装しません。

Demo

会話スレッド内のインライン注記行。data-variant（note/divider/label）・data-tone（neutral/info/warning/danger）は headless の data-* を参照するのみで class 軸は持ちません。divider 形態は行下の境界線、label 形態は左右へ separator パーツを挟んだ中央ラベルです。

System note

New feature available

Response delayed

Message failed to send

Earlier

New messages

Reconnecting

Connection lost

2026-09-10

Unread

Draft

Failed

Features

MarkerVariant（Note/Divider/Label、marker.rs recipe() の data-variant 参照）でインライン注記・行下の境界線・中央ラベル + 左右の線の 3 形態を切り替える
MarkerTone（Neutral/Info/Warning/Danger、ColorPalette と同名 4 値）で注記の文字色・線色を切り替える
root/icon/content の 3 パーツで注記行 1 個を構造化する（icon は装飾スロットとして aria-hidden="true" を固定付与する）
Label 形態は呼び出し側 children を styled Separator（horizontal・Solid、aria-hidden="true"）2 個で挟んでから headless へ委譲する。区切り線は疑似要素を使わず DOM 上の separator パート再利用で描画する（marker.rs モジュール doc「区切り線の描画方式」節参照）
Label 形態を使う場合は marker::stylesheet() に加えて separator::css() も併せて読み込む必要がある。marker::stylesheet() は separator 自体の border-width・border-style・margin 等の基本規則を含まない（marker.rs モジュール doc「stylesheet が separator の基本 CSS を含まない理由」節参照）
ストリーミング中判定・注記の自動分類・タイムスタンプ整形は実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1）。root へ role="status" 等を付けたい場合は呼び出し側が attrs で渡す

Anatomy

root
  icon
  content

API Reference

Arguments

Name	Type	Default	Description
`variant`	`MarkerVariant`	`Note`	表示形態（Note/Divider/Label。data-variant として出力される）。
`tone`	`MarkerTone`	`Neutral`	色調（Neutral/Info/Warning/Danger。data-tone として出力され、文字色・線色を切り替える）。

Data Attributes

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

CSS Variables

Variable	Default
`--fandhe-marker-line`	`var(--fandhe-color-border)`

Examples

Note variant

インライン注記表示（既定・neutral）の例です。

System note

Divider variant

行下に境界線を伴う表示（info tone）の例です。

New messages

Label variant with tones

中央ラベル + 左右の線（warning/danger tone）の例です。

Draft

Failed

Accessibility

Keyboard Interactions

Key	Description
(N/A)	静的な表示専用部品でありフォーカス可能な要素を持たない（wasm-full の配線は不要）。

WAI-ARIA

Attribute	Description
aria-hidden="true" (icon)	icon は装飾スロットとして aria-hidden="true" を固定付与する。呼び出し側の aria-hidden="false" 偽装は予約キー除去で無効化する。
role (root、未固定)	root は role を固定付与しない。ストリーミング中の注記へ role="status" を付けたい場合は呼び出し側が attrs で渡す運用とする。
aria-hidden="true" (Label 形態の separator)	Label 形態で挟み込む separator は装飾線として aria-hidden="true" を持ち、支援技術による重複読み上げを避ける。