Separator

fandhe-frontend-pre-styled-ui の separator mod が提供するスタイル済み Separator 部品です。

コンテンツ間を区切る罫線部品です。orientation が role="separator"（固定）+ aria-orientation + data-orientation + variant クラスの 3 箇所へ連動します。呼び出し側が role/aria-orientation を偽装しても常にフレームワーク値へ一本化されます。variant は solid/dashed/dotted の 3 種を提供し、罫線の太さは --fandhe-separator-thickness（既定 1px）の上書きで変更できます。

イシュー #2053 で shadcn/ui と突合し、線 – テキスト – 線のラベル付き区切り線（group/label、chakra-ui の HStack + Text 合成相当）を pre-styled-only パートとして追加しました。

イシュー #3137 で group_with/SeparatorLabelPosition を追加し、ラベル位置を center（既定、group と同一出力）/start から選べるようにしました。start は「左ラベル – 線」「左タイトル – 線 – ボタン」のような先頭寄せレイアウトを 1 class で表現します。

Demo

区切り線。role="separator" と aria-orientation/data-orientation を常時出力します。orientation（horizontal/vertical）と variant（solid/dashed/dotted）の 2 軸を持ち、太さは --fandhe-separator-thickness（既定 1px）の上書きで変更します。group/label（イシュー #2053）でラベル付き区切り線を、既存 API のみで shadcn/ui の Vertical inline 合成を実演します。

Horizontal

Vertical

Blog

Docs

Source

Features

orientation が role="separator"（固定） + aria-orientation + data-orientation + variant クラスの 3 箇所へ連動する（crates/pre-styled-ui/src/separator.rs:10, 17）
SeparatorVariant（Solid/Dashed/Dotted、separator.rs:113-121。Dotted はイシュー #1585 で追加）で罫線種別を切り替える
罫線の太さは --fandhe-separator-thickness（既定 1px の custom property、イシュー #1585）の上書きで変更する。size 軸は Phase 0 規約（docs/design/pre-styled-ui-focus-ring-and-size-conventions.md §4 (d)）により非提供（separator.rs:24-31）
role/aria-orientation/data-orientation は呼び出し側の偽装を除去し常にフレームワーク値へ一本化する（separator.rs:270-277、skeleton の aria-hidden 除去と同型）
group/label（イシュー #2053、shadcn/ui 突合で補完）: pre-styled-only のラベル付き区切り線パート。線 – テキスト – 線を display: grid（1fr auto 1fr）で合成する（chakra-ui の HStack + Text 合成相当、horizontal 専用契約）
group_with/SeparatorLabelPosition（イシュー #3137）: ラベル位置を center（既定、group と同一出力）/start から opt-in で選べる。start は 1 class（grid-template-columns: auto 1fr + grid-auto-flow: column）のみで、ラベルの後ろに続くノードを同じ行へ流し込む

Anatomy

root
group
  label

API Reference

Arguments

Name	Type	Default	Description
`orientation`	`Orientation`	`Horizontal`	向き（separator.rs:156-161）。
`variant`	`SeparatorVariant`	`Solid`	罫線種別（solid/dashed/dotted、separator.rs:113-121, 159-161）。

Data Attributes

Part	Attribute	Observed Values
`root`	`data-orientation`	`horizontal`, `vertical`

CSS Variables

Variable	Default
`--fandhe-separator-height`	`auto`
`--fandhe-separator-thickness`	`1px`

Examples

Vertical dashed

縦向き・破線の Separator の例です。

Labeled

group/label によるラベル付き区切り線の例です（イシュー #2053）。

Label start

group_with(SeparatorLabelPosition::Start) による左寄せラベルの例です（イシュー #3137）。

Section

Title with action

group_with(SeparatorLabelPosition::Start) で左タイトル・線・右ボタンを 1 行に並べる例です（イシュー #3137）。

Members

Accessibility

WAI-ARIA

Attribute	Description
role="separator" + aria-orientation	orientation と連動し常に固定出力される（separator.rs:10, 17, 58-59）。