Select

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

Demo

headless-ui の Select（role="listbox"）に pre-styled-ui の recipe CSS を適用した静的掲示です。1 項目が選択済み（data-state="open"）の listbox が開いた状態を固定表示しています。positioner はフロー内配置へ中和しています。

Framework

Features

headless-ui の `select::root` へ委譲し、`size` variant クラスを付与する。
`trigger` パーツが `aria-haspopup="listbox"` を固定付与し、`content`/`label` との関連付けを `aria-controls`/`aria-labelledby` で行う。
`content` パーツの `aria-activedescendant` は選択中アイテムの `id` を参照する（select-only combobox パターン）。

Anatomy

root
  label
  control
    trigger
      value-text
      indicator
  positioner
    content
      item
        item-text
        item-indicator

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
state	OpenState	OpenState::Closed	開閉状態。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード（通常 trigger/content を含む）。

Data Attributes

Part	Attribute	Observed Values
content	data-state	open
control	data-state	open
indicator	data-state	open
item	data-state	closed, open
item	data-value	fandhe-frontend, other
item-indicator	data-state	closed, open
positioner	data-state	open
root	data-state	open
trigger	data-state	open
value-text	data-bind-text	select-value-text

CSS Variables

Variable	Default
--fandhe-select-content-padding	var(--fandhe-space-2)
--fandhe-select-item-padding	var(--fandhe-space-2) var(--fandhe-space-3)
--fandhe-select-trigger-padding	var(--fandhe-space-2) var(--fandhe-space-3)

Accessibility

WAI-ARIA

Attribute	Description
aria-haspopup	`trigger` パーツへ `"listbox"` を固定付与する。
aria-expanded	開閉状態に応じて `trigger` パーツへ `"true"`/`"false"` を付与する。
aria-controls	`controls` が `Some` のとき `trigger` パーツから `content` パーツへ関連付ける。
aria-activedescendant	`content` パーツへ、フォーカス対象アイテムの `id` を参照値として付与する（`Some` のときのみ）。
aria-selected	各アイテムパーツへ選択状態に応じて `"true"`/`"false"` を付与する。