# Bone Flow #030 - DateBox

Version: 1.0.19  
Status: Development  
Specification: 030-DateBox-Specification-v1.0.md

## 概要

#030 DateBox は単一日付を入力・編集する Input UI。正式 value は `YYYY-MM-DD | null`。#025 Bone DatePicker v1.0.4（内部で #024 Calendar v1.0.6）へPicker UIを委譲し、Bone / Joint / OUT には ISO calendar date だけを保持する。

## 正式依存

- #001 Bone Core v1.0.0 — Runtime required
- #002 Bone Joint v1.1.36 — Runtime required / WAIT・FIFO・BLOCKED・Joint描画
- #022 Bone Hover Border Effect v1.0.1 — Runtime required / Active Border Effect
- #024 Bone Calendar v1.0.6 — Runtime required via #025 / Calendar UI
- #025 Bone DatePicker v1.0.4 — Runtime required / Picker表示・開閉・日付選択RETURN
- #017 Bone Text — Runtime非依存、表示責務・Property・配置の基準のみ
- #029 Bone NumberBox v1.0.33 — 完成済み Input UI / QA構成基準

## DateBox固有 Property

- `inactiveDisplayFormat`: 非アクティブ時の表示形式（年月日 / 年月 / yyyy/mm/dd / mm/dd）
- `fontSizeMode`: `fit | fixed`。`fit` はDateBox要素の幅・高さに合わせてフォントサイズを調整する。
- `fontSize`: 固定フォントサイズ(px)。`fontSizeMode=fixed` の時に使用する。

- `min`: `YYYY-MM-DD | null`
- `max`: `YYYY-MM-DD | null`
- `step`: `any` または整数日
- `required`
- `readonly`
- `disabled`

## 日付契約

- `2026-08-08` → PASS
- `2024-02-29` → PASS
- `2025-02-29` → FAIL
- `08/08/2026` → FAIL
- `Date` object → FAIL

Timezone変換は行わない。

## Input / Commit

- DateBox INPUT は既存どおり `input[type=date]`
- カレンダーアイコン操作は native `showPicker()` を呼ばず、#025 DatePickerを開閉
- #025の選択日RETURNを editingValue へ反映し、#030の既存commit / OUT契約で処理
- Enter / blur commit
- Escape rollback
- committed value と OUT は ISO string / null

## Security / Joint

Untrusted IN / Security Sandbox、WAIT / BLOCK Delivery Sandbox、接続イメージ、Runtime QA、Completionは #029 の構成を継承する。Dependency Lock / 依存SHA固定検証は使用しない。

## Test URL

`http://localhost/BoneFlow/test/bone-datebox.html`

Browser Runtime QA、WAIT / BLOCK目視確認は localhost で実施する。未実施の場合は ALL PASS と記録しない。


## Calendar Annotation IN
- `annotations`: `calendar.annotations` の value objectを #025 DatePicker 経由で #024 Calendarへ委譲。
- kinds: `holiday` / `customHoliday` / `anniversary` / `task`。
- `showTasks`: task表示ON/OFF。
- #030は祝日CSVの取得・変換を担当しない。変換済みAnnotation INのみを受け取る。


## #024 Calendar 設定（#025経由）

#030が#025 DatePickerへ渡し、#024 Calendarで使用する設定:

- `theme`: #030 Themeを共有
- `min` / `max` / `step`: #030日付制約を共有
- `pickerVisual`: `icon` -> `fontawesome`, `emoji` -> `emoji` として#024へ連動
- `weekStart`: `auto | monday | sunday`
- `locale`: 例 `ja-JP` / `en-US`
- `showTasks`: task Tooltip / Link / dot の表示ON/OFF
- `annotations`: #024が保存した `{ "type": "calendar.annotations", "value": ... }` JSONをtest UIから直接読込可能

#024単体用の親吸着・幅・高さ・9方向配置は、#025 Picker内Calendarでは#025が表示責務を持つため#030 Propertyへ重複追加しない。

- v1.0.18: Runtime test page recreates the Preview once after automatic Smoke / Validation so the #025 DatePicker trigger works immediately after page load without pressing Property Apply. Component behavior and #024/#025 are unchanged.

## Active Border Effect (#022)

- Active時の枠Effect描画は完成済み #022 Bone Hover Border Effect v1.0.1へ委譲する。
- #030はDateBox controlへ `trigger: active` でattachする。
- focus時に `setActive(true)`、blur時に `setActive(false)`。
- Effect: `normal / neon / spin / cross / blink`。
- Effect色 / 方向 / 速度Propertyは従来値を#022へ渡す。
- #030 destroy時は#022をdetachする。

- v1.0.19: Active Border Effect rendering delegated to #022 Bone Hover Border Effect v1.0.1. Date/Picker/Security/Joint/WAIT/BLOCK/Completion contracts unchanged.