Select

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

Demo

headless-ui の Select（role="listbox"）に pre-styled-ui の recipe CSS を適用した静的掲示です。1 項目が選択済み（data-state="open"）・1 項目が highlight 中（data-highlighted）・1 項目が disabled（data-disabled）の listbox が開いた状態を固定表示しています。グループ見出し（item-group-label）・リーディングアイコン付き項目も実演し、content は既定 16rem の max-height でスクロール可能です。separator（区切り線）・scroll-up-button/scroll-down-button（content 上下端に sticky 固定される装飾。押下時の実スクロールは wasm-full 後続イシューの範囲）も実演します。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 パターン）。
separator / scroll-up-button / scroll-down-button の着装（イシュー #2186）: headless-ui の 3 新設パーツを再エクスポートし、position: sticky で content 上下端に固定するボタン・height/background の区切り線を recipe へ登録する。可視性判定・押下時の実スクロールは wasm-full 後続イシューの範囲。
共通 shape 軸（イシュー #3117）: root_with が Option<Shape> を受け取り、Shape::Pill を渡すと trigger が完全な丸型角丸になる。Shape::Circle は trigger が value-text + indicator を横並びにする構造で真円にする用途がないため未登録。
variant 軸（イシュー #3121）: root_with が SelectVariant（Outline〔既定〕/Subtle）を受け取る。Subtle は trigger を淡色背景・枠線なしにする（native_select::NativeSelectVariant::Subtle・chakra-ui Select の variant: subtle に揃える）。Outline（既定）のときは class を一切出さず [select::root] と出力が変わらない。
選択インジケータ位置（イシュー #3124）: select::root_with の item_indicator_placement（ItemIndicatorPlacement、既定 End）で、チェックマークを項目右端（既定）・左端（Start）のいずれかへ opt-in 切り替えできる。Start 選択時は非選択項目の item_indicator（headless が hidden 属性で隠す既存ノード）を order: -1 + 不可視の空き枠として転用し、非選択項目のテキスト開始位置も揃える（絶対配置・疑似要素は不使用。item の padding は上書きしない）。既定 End は class を一切出さず既存出力はバイト不変。

Anatomy

root
  label
  control
    trigger
      value-text
      indicator
  positioner
    content
      scroll-up-button
      item-group
        item-group-label
        item
          item-text
          item-indicator
      separator
      scroll-down-button

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 を含む）。
`shape`	`Option<Shape>`	`None`	共通 shape 軸（イシュー #3117）。`root_with` 経由の opt-in 引数。`Some(Shape::Pill)` で trigger を丸型角丸にする。`Circle` は未登録。
`variant`	`SelectVariant`	`SelectVariant::Outline`	見た目 variant（イシュー #3121）。`root_with` 経由の opt-in 引数。`Subtle` で trigger を淡色背景・枠線なしにする。
`item_indicator_placement`	`ItemIndicatorPlacement`	`ItemIndicatorPlacement::End`	選択インジケータ（チェックマーク）の配置軸（`select::root_with` のみが受け取る、イシュー #3124）。`root` は常に `End` を渡す。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-state`	`open`
`control`	`data-state`	`open`
`indicator`	`data-state`	`open`
`item`	`data-disabled`	（値なし）
`item`	`data-highlighted`	（値なし）
`item`	`data-selected`	（値なし）
`item`	`data-state`	`closed`, `open`
`item`	`data-value`	`fandhe-frontend`, `legacy`, `other`
`item-indicator`	`data-state`	`closed`, `open`
`item-text`	`data-disabled`	（値なし）
`item-text`	`data-highlighted`	（値なし）
`item-text`	`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-max-height`	`16rem`
`--fandhe-select-content-padding`	`var(--fandhe-space-2)`
`--fandhe-select-item-indicator-margin-left`	`auto`
`--fandhe-select-item-indicator-order`	`0`
`--fandhe-select-item-indicator-placeholder-display`	`none`
`--fandhe-select-item-padding`	`var(--fandhe-space-2) var(--fandhe-space-3)`
`--fandhe-select-trigger-bg`	`var(--fandhe-color-bg)`
`--fandhe-select-trigger-border-color`	`var(--fandhe-color-border)`
`--fandhe-select-trigger-padding`	`var(--fandhe-space-2) var(--fandhe-space-3)`
`--fandhe-select-trigger-radius`	`var(--fandhe-radius-md)`

Examples

pill 形状（shape 軸）

select::root_with に Some(Shape::Pill) を渡し、trigger を完全な丸型角丸にする例です（イシュー #3117）。Circle は select の trigger が value-text + indicator を横並びにする構造のため未登録です。

フレームワーク

淡色背景の pill（Subtle variant）

Shape::Pill と SelectVariant::Subtle を併用し、淡色背景・枠線なしの pill 形状 trigger にする例です（イシュー #3121）。chakra-ui Select の variant: subtle に揃えた見た目です。