Demo
headless-ui の DatePicker（popover 基盤 + Calendar 合成）に pre-styled-ui の recipe CSS を適用した静的掲示です。popover が開いた状態を固定表示し、内部に Calendar の月グリッドを合成しています。positioner はフロー内配置へ中和しています。invalid（枠線色、イシュー #2013）・readonly（ネイティブ <input readonly> のまま追加の視覚宣言なし）・disabled（control は cursor のみ、clear-trigger は opacity + cursor、イシュー #2195）の 3 状態も並べて実演します。
Features
- popover 基盤 + Calendar 合成の日付選択部品
- popover が開いた状態を固定表示し、positioner はフロー内配置へ中和する
- size（sm/md/lg）で寸法を切り替える
Anatomy
root
label
control
input
trigger
clear-trigger
positioner
content
API Reference
Arguments
| Name | Type | Default | Description |
|---|
size | Size | Md | 寸法 variant。 |
|---|
state | OpenState | Closed | popover の開閉状態。 |
|---|
attrs | Vec<(&str, &str)> | — | root パーツへ合成する追加属性。 |
|---|
children | Vec<Node> | — | root 配下の子ノード。 |
|---|
Data Attributes
| Part | Attribute | Observed Values |
|---|
clear-trigger | data-disabled | （値なし） |
clear-trigger | data-invalid | （値なし） |
clear-trigger | data-readonly | （値なし） |
content | data-state | open |
control | data-disabled | （値なし） |
control | data-invalid | （値なし） |
control | data-readonly | （値なし） |
control | data-state | open |
input | data-disabled | （値なし） |
input | data-invalid | （値なし） |
input | data-readonly | （値なし） |
label | data-disabled | （値なし） |
label | data-invalid | （値なし） |
label | data-readonly | （値なし） |
positioner | data-state | open |
root | data-disabled | （値なし） |
root | data-invalid | （値なし） |
root | data-readonly | （値なし） |
root | data-state | open |
trigger | data-disabled | （値なし） |
trigger | data-invalid | （値なし） |
trigger | data-readonly | （値なし） |
trigger | data-state | open |
CSS Variables
| Variable | Default |
|---|
--fandhe-date-picker-content-padding | var(--fandhe-space-2) |
--fandhe-date-picker-input-padding | var(--fandhe-space-2) var(--fandhe-space-3) |
Examples
開いた状態の掲示
入力欄 + トリガー + Calendar 月グリッドを popover 内に合成します。
invalid / readonly 状態（イシュー #2013）
shadcn/ui との突合で追加した data-invalid（枠線色）の CSS 消費と、readonly（ネイティブ <input readonly> のまま追加の視覚宣言を持たない意図的な見送り）を並べて実演します。
Accessibility
Keyboard Interactions
| Key | Description |
|---|
| Escape | popover を閉じる（wasm 層実装）。 |
WAI-ARIA
| Attribute | Description |
|---|
| aria-expanded | トリガーが popover の開閉状態を伝える。 |