Segment Group

fandhe-frontend-headless-ui の segment_group mod が提供する segmented control（セグメントコントロール）の unstyled 部品です。Root / Indicator / Item / ItemText / ItemControl / ItemHiddenInput の 6 anatomy パーツを持ちますが、状態機械・dispatch・hydration は radio_group へ全委譲しており独自の状態機械は持ちません（WAI-ARIA 上 segmented control は radio パターンそのものであるため）。Indicator は SSR 決定的な位置表現（CSS カスタムプロパティ 2 種）のみを提供します。

/themes/ 側の SegmentGroup（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Segment Group を参照してください。

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

Demo

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

ListGrid

Features

Root / Indicator / Item / ItemText / ItemControl / ItemHiddenInput の 6 anatomy パーツを提供する。状態機械・dispatch・hydration は `crate::radio_group::RadioGroup` へ全委譲し、独自の状態機械を新設しない（WAI-ARIA 上 segmented control は radio パターンそのものであるため）。
`indicator` は SSR 決定的な位置表現を持つ: `(index, item_count)` から `--fandhe-segment-group-index`/`--fandhe-segment-group-count` の 2 CSS カスタムプロパティのみを `style` 属性へ出力する（JS 計測は行わない）。
`item_hidden_input` が生成するネイティブ `<input type="radio">` がチェック状態・フォーム送信・グループ内排他選択を担う（`radio_group` と同型）。

Anatomy

root
  indicator
  item
    item-control
    item-text
    item-hidden-input

API Reference

Arguments

Name	Type	Description
root(disabled)	bool	`data-disabled` を反映する。
root(orientation)	Option<Orientation>	`Some` のときのみ `data-orientation`/`aria-orientation` を付与する。
root(labelled_by)	Option<&str>	`Some` のときのみ `aria-labelledby` を付与する。
indicator(position)	Option<(usize, usize)>	`Some((index, count))` のとき `data-state="checked"` + 位置 CSS 変数 2 種を出力する。`None`（未選択）は `data-state="unchecked"` のみ。
indicator(orientation)	Option<Orientation>	`Some` のとき `data-orientation` を出力する（styled 層が `translateX`/`translateY` を切り替える判断材料）。
item/item_control/item_text/item_hidden_input(checked)	bool	`data-state` の checked/unchecked を決める。
item/item_control/item_text/item_hidden_input(disabled)	bool	`data-disabled` を反映する。
item(value)	&str	選択肢の値。`data-value` として動的値のまま出力する。

Data Attributes

Part	Attribute	Observed Values
indicator	data-state	checked
item	data-state	checked, unchecked
item	data-value	grid, list
item-control	data-state	checked, unchecked
item-hidden-input	data-state	checked, unchecked
item-text	data-state	checked, unchecked

Examples

Vertical orientation

`orientation: Some(Orientation::Vertical)` で縦並びにした例。`indicator` の `data-orientation` が styled 層の `translateY` 切替判断材料になる。

DayWeekMonth

Accessibility

Keyboard Interactions

Key	Description
ArrowUp / ArrowDown / ArrowLeft / ArrowRight	`item_hidden_input` はネイティブ `<input type="radio">` であり、同一 `name` グループ内の矢印キー移動・選択はブラウザ標準操作として成立する（`radio_group` と同型）。

WAI-ARIA

Attribute	Description
role="radiogroup" (root)	固定付与。
aria-hidden="true" (indicator)	装飾専用パーツとして固定付与する。
role="radio" / aria-checked	`item_control` へは明示付与しない（`radio_group` と同じ二重読み上げ防止の最小主義）。