# Bone Flow #030 DateBox Specification v1.0

Component ID: #030  
Component: DateBox  
Version: 1.0.19  
Status: Development  
Standard: Bone Flow Development Standard v1.0

## 1. 責務

#030 DateBox は、単一の日付 value の入力・編集・確定・Calendar Validation を担当する Input UI Component である。#029 Bone NumberBox v1.0.33 の完成済み Input UI / Security / Joint / WAIT / BLOCK / Completion 構成を基準とし、DateBox 固有差分だけを追加する。

完成済み #001 / #002 / #017 / #027 / #028 / #029 は #030 の都合で変更しない。

## 2. value 契約

Bone 最小構造 `id / type / value` は変更しない。

DateBox の正式 committed value は次のいずれか。

- `YYYY-MM-DD` の ISO calendar date string
- `null`（空欄）

`Date` object、timestamp number、locale date string、object / array / accessor / unsafe Proxy は受理しない。`Date.parse()` による暗黙解釈や timezone 変換は行わない。

## 3. 日付 Validation

- 形式: `YYYY-MM-DD`
- year: 0001..9999
- month: 01..12
- day: 月ごとの実在日
- Gregorian leap-year rule を適用
- `2024-02-29` は有効
- `2025-02-29`、`2026-13-01`、`2026-04-31` は無効

## 4. DateBox 固有 Property

- `inactiveDisplayFormat`: `jp-ymd | jp-ym | ymd-slash | md-slash`。フォーカス外表示のみを変え、正式 value `YYYY-MM-DD | null` は変更しない。
- `fontSizeMode`: `fit | fixed`。`fit` は要素サイズへ合わせて表示文字サイズを調整する。
- `fontSize`: 8～96px。`fixed` 時の固定文字サイズ。

### min / max

`YYYY-MM-DD | null`。ISO日付の順序で範囲 Validation を行う。

### step

- `"any"`
- 1以上の整数日

`min` がある場合は `min`、ない場合は `1970-01-01` を基準日として日数差を検査する。

## 5. editing / committed

- `editingValue`: input 内の `YYYY-MM-DD` / 空文字
- `committedValue`: `YYYY-MM-DD | null`

Enter または blur commit。Escape は committedValue へ rollback。readonly / disabled は commit 禁止。

## 6. Date Input / Formal Picker Delegation

実装 input は既存契約どおり `type="date"` とする。内部 value と OUT value は常に ISO `YYYY-MM-DD` を使用し、ブラウザが表示するローカライズされた見た目を Bone.value へ混ぜない。

カレンダーアイコンからのPicker表示・Calendar開閉・日付選択UIは #025 Bone DatePicker v1.0.4へ委譲し、#025は #024 Bone Calendar v1.0.6を使用する。#025から返された選択日は #030のeditingValueへ戻し、commit / Bone.value / OUT / Security / WAIT / BLOCKED / Deliveryは引き続き#030の責務とする。#025側へcommit / OUT / Security / Deliveryを追加しない。

## 7. Untrusted IN / Security

Joint IN を信用しない。own data property のみ読み取り、getter/setter は実行しない。Proxy trap / object coercion / Date object coercion / locale string guessing を行わない。

Security Test は通常 Preview と完全に独立した DateBox instance を使用する。

## 8. OUT / #002 Joint

#030 は commit までを担当し、WAIT / FIFO / BLOCKED / 配送は #002 Bone Joint v1.1.36 `createDeliveryChannel()` へ委譲する。

OUT は committed ISO string snapshot を配送する。

## 9. 表示基準

#029までの Input UI 表現を維持する。

- Property 日本語 / English
- Theme: default / dark / light / neon
- backgroundColor
- appearance
- inheritParent
- width / height
- 9方向 position
- inputAlign
- Active Border Effect（描画は #022 Bone Hover Border Effect v1.0.1へ委譲）

#017 Bone Text は Runtime 非依存で、表示責務・Property表現・配置設定の基準としてのみ参照する。

## 10. Joint 描画

接続イメージ、WAIT spinner、BLOCK fa-ban + beat-fade は #002 Bone Joint 正式描画 API を使用する。DateBox 独自 Joint 線は作らない。

## 11. Test Instance Isolation

正式テストページでは以下を分離する。

- Preview: Property / Date Input確認専用
- Security Sandbox: Untrusted IN専用
- Delivery Sandbox: WAIT / FIFO / BLOCKED専用

Security / Delivery Test は Preview の committedValue / editingValue / Property を変更しない。

## 12. Completion

Runtime QA ALL PASSだけでは完了しない。WAITとBLOCKはユーザー目視確認チェックを別途必要とし、全条件成立後のみ完了ボタンを有効化する。

Browser Runtimeを実施していない状態を 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のみを受け取る。


## Calendar settings delegation

`theme / min / max / step / pickerVisual(iconVisual) / weekStart / locale / annotations / showTasks` are delegated from #030 to #025 v1.0.4 and then to #024 v1.0.6. #024 saved `calendar.annotations` JSON is accepted by the #030 test UI without re-conversion.

- v1.0.18: Runtime test page boot sequencing only: reinitialize Preview after automatic QA. No #030 runtime contract, #024 Calendar, or #025 DatePicker contract change.


## v1.0.19 Addendum: #022 Active Border Effect Delegation

- #022 Bone Hover Border Effect v1.0.1を正式Runtime依存として追加する。
- #030はDateBox controlへ#022を `trigger: active` でattachする。
- focus時は#022 `setActive(true)`、blur時は `setActive(false)`。
- `normal / neon / spin / cross / blink` を#022の正式Effect catalogとして利用する。
- `activeEffectColor / activeEffectDirection / activeEffectSpeed` は#022へ委譲する。
- #030 destroy時はattach済み#022をdetachする。
- 日付値 / #025 DatePicker / #024 Calendar / Security / #002 WAIT・BLOCKED / Delivery / Connection Image / Completionの既存契約は変更しない。