# DOC-0030 — DateBox 操作・HTML Functional Class

## 0. 文書情報

- Component: `#030 DateBox`
- Runtime: `BoneDateBox v1.0.22`
- HTML Functional Class: `bf-datebox`
- DOC: `DOC-0030 / TOC-0030`
- DOC Integration Version: `1.0.8`

## 1. DateBoxの役割

DateBoxは **ISO日付 `YYYY-MM-DD` を安全に入力・編集・確定するInput UI** です。画面上の見せ方が `2026/08/30` や `2026年08月30日` でも、`committedValue` とOUTは `2026-08-30` のISO文字列または `null` です。`Date.parse()`、timezone変換、Date objectへの暗黙変換は行いません。

### 1.1 最初に覚える用語

- **元input**: HTMLへ書く `<input class="bf-datebox">`。Functional Classが実DateBoxを生成すると非表示になります。
- **実DateBox**: `BoneDateBox.create()` が生成する画面上のUIです。
- **editingValue**: いま入力欄で編集中の文字列。まだ確定値とは限りません。
- **committedValue**: Validationを通って正式確定したISO日付。OUTへ送る値です。
- **commit**: editingValueを検証し、問題なければcommittedValueへ確定する処理です。
- **Validation**: required / min / max / step / 実在日を確認します。
- **Security**: getter/Proxy/制御文字/不正Unicode/長すぎる入力/型違い等を、値へ触れる前に拒否する防御です。
- **Picker**: #025 DatePicker。内部Calendarは#024です。DateBoxはDatePicker選択RETURNを受け、DateBoxのcommit policyで確定します。

### 1.2 まず基本操作を理解する

1. 日付を入力すると `editingValue` が変わります。
2. `enterCommit=true`ならEnter、`blurCommit=true`ならフォーカスを外した時にcommitします。
3. 実在日・required・min/max・stepに違反するとcommitせず、直前の`committedValue`を維持します。
4. Escapeは編集中の値を直前のcommittedValueへ戻します。
5. Pickerで日付を選ぶとDatePicker RETURNをeditingValueへ取り込み、`blurCommit=true`ならそのままcommitします。

### 1.3 `disabled` と `readonly`

- `disabled=true`: ユーザー入力・focus・commitを禁止。
- `readonly=true`: 値を表示しますがユーザー編集・commitを禁止。
- どちらも`commit()`は`reason="not-editable"`で確定しません。

### 1.4 Validation と Security

- `2026-02-30`は実在しないためValidation/ISO検査で拒否。
- `min=2026-08-01`で`2026-07-31`は`DATEBOX_MIN`。
- getterを持つJoint IN、Proxy trap、Date object、`2026/08/30`、制御文字、不正surrogateはSecurity契約で拒否し、直前の安全なcommittedValueを保持します。

## 2. HTML Functional Class `bf-datebox`

通常利用Classは **`bf-datebox` 1個だけ**です。旧`bone-html-class-use` / API別Classは通常利用仕様ではありません。

### 2.1 最小利用

```html
<input class="bf-datebox" type="date" value="2026-08-30">
```

### 2.2 設定付き利用

```html
<input class="bf-datebox" type="date" value="2026-08-30"
       min="2026-08-01" max="2026-12-31" step="1"
       data-theme="dark" data-picker-visual="emoji"
       data-week-start="monday" data-inactive-display-format="jp-ymd"
       data-position="center" data-width="320">
```

### 2.3 設定 → 実表示サンプル

#### 基本・Validation

[[BF-DATEBOX-SAMPLE:basic]]

[[BF-DATEBOX-SAMPLE:minmax]]

[[BF-DATEBOX-SAMPLE:step2]]

[[BF-DATEBOX-SAMPLE:required]]

[[BF-DATEBOX-SAMPLE:disabled]]

[[BF-DATEBOX-SAMPLE:readonly]]

[[BF-DATEBOX-SAMPLE:select]]

[[BF-DATEBOX-SAMPLE:commitPolicy]]

#### Theme / Appearance

[[BF-DATEBOX-SAMPLE:themeDefault]]

[[BF-DATEBOX-SAMPLE:themeDark]]

[[BF-DATEBOX-SAMPLE:themeLight]]

[[BF-DATEBOX-SAMPLE:themeNeon]]

[[BF-DATEBOX-SAMPLE:bgTransparent]]

[[BF-DATEBOX-SAMPLE:bgCustom]]

[[BF-DATEBOX-SAMPLE:appNormal]]

[[BF-DATEBOX-SAMPLE:appFlat]]

[[BF-DATEBOX-SAMPLE:appBorderless]]

#### 非アクティブ表示 / Font

[[BF-DATEBOX-SAMPLE:fmtJpYmd]]

[[BF-DATEBOX-SAMPLE:fmtJpYm]]

[[BF-DATEBOX-SAMPLE:fmtYmd]]

[[BF-DATEBOX-SAMPLE:fmtMd]]

[[BF-DATEBOX-SAMPLE:fontFit]]

[[BF-DATEBOX-SAMPLE:fontFixed]]

#### Picker / Calendar

[[BF-DATEBOX-SAMPLE:pickerIcon]]

[[BF-DATEBOX-SAMPLE:pickerEmoji]]

[[BF-DATEBOX-SAMPLE:weekAuto]]

[[BF-DATEBOX-SAMPLE:weekMonday]]

[[BF-DATEBOX-SAMPLE:weekSunday]]

[[BF-DATEBOX-SAMPLE:localeEn]]

[[BF-DATEBOX-SAMPLE:annotations]]

[[BF-DATEBOX-SAMPLE:showTasksFalse]]

#### Active Border Effect #022

[[BF-DATEBOX-SAMPLE:activeNormal]]

[[BF-DATEBOX-SAMPLE:activeNeon]]

[[BF-DATEBOX-SAMPLE:activeSpin]]

[[BF-DATEBOX-SAMPLE:activeCross]]

[[BF-DATEBOX-SAMPLE:activeBlink]]

#### Position 9値

[[BF-DATEBOX-SAMPLE:posTopLeft]]

[[BF-DATEBOX-SAMPLE:posTopCenter]]

[[BF-DATEBOX-SAMPLE:posTopRight]]

[[BF-DATEBOX-SAMPLE:posMiddleLeft]]

[[BF-DATEBOX-SAMPLE:posCenter]]

[[BF-DATEBOX-SAMPLE:posMiddleRight]]

[[BF-DATEBOX-SAMPLE:posBottomLeft]]

[[BF-DATEBOX-SAMPLE:posBottomCenter]]

[[BF-DATEBOX-SAMPLE:posBottomRight]]

#### Align / Size / Parent / Security

[[BF-DATEBOX-SAMPLE:alignAuto]]

[[BF-DATEBOX-SAMPLE:alignLeft]]

[[BF-DATEBOX-SAMPLE:alignCenter]]

[[BF-DATEBOX-SAMPLE:alignRight]]

[[BF-DATEBOX-SAMPLE:sizeCustom]]

[[BF-DATEBOX-SAMPLE:inheritParent]]

[[BF-DATEBOX-SAMPLE:security]]

### 2.4 HTML宣言Property 全36件「設定 → 表示/動作」早見

- `placeholder` — Default `""` / HTML `placeholder / data-placeholder` / 空欄時の補助文字。値そのものには入りません。
- `disabled` — Default `false` / HTML `disabled / data-disabled` / trueでユーザー入力・focus・commitを禁止します。
- `readonly` — Default `false` / HTML `readonly / data-readonly` / trueで表示は維持しつつユーザー編集・commitを禁止します。
- `required` — Default `false` / HTML `required / data-required` / 空値をDATEBOX_REQUIREDとしてValidation invalidにします。
- `min` — Default `null` / HTML `min / data-min` / 選択・確定できる最小ISO日付。#025/#024へも委譲します。
- `max` — Default `null` / HTML `max / data-max` / 選択・確定できる最大ISO日付。#025/#024へも委譲します。
- `step` — Default `1` / HTML `step / data-step` / min（未指定時1970-01-01）を基準に日数刻みを検証します。
- `name` — Default `""` / HTML `name / data-name` / 内部native date inputのnameへ設定します。
- `autocomplete` — Default `"off"` / HTML `autocomplete / data-autocomplete` / native inputのautocompleteへ渡します。
- `inputMode` — Default `"numeric"` / HTML `inputmode / data-input-mode` / native inputのinputModeへ渡します。
- `enterCommit` — Default `true` / HTML `data-enter-commit` / EnterキーでeditingValueをcommitするかを決めます。
- `blurCommit` — Default `true` / HTML `data-blur-commit` / blur時にeditingValueをcommitするかを決めます。Picker選択RETURNもこのpolicyを使います。
- `selectOnFocus` — Default `false` / HTML `data-select-on-focus` / focus時にnative inputをselectします。
- `ariaLabel` — Default `""` / HTML `aria-label / data-aria-label` / 実inputのARIA labelを指定します。
- `className` — Default `""` / HTML `data-class-name` / DateBox rootへ追加する任意Class名です。
- `theme` — Default `default` / HTML `data-theme` / surface/text/border/accentのThemeを切替えます。
- `backgroundColor` — Default `theme` / HTML `data-background-color` / 入力面背景をTheme・透明・solid HEXで上書きします。
- `appearance` — Default `normal` / HTML `data-appearance` / 枠と角丸の外観を切替えます。
- `inheritParent` — Default `false` / HTML `data-inherit-parent` / 親の幅・高さ・背景・文字・角丸・文字位置へ追従します。
- `width` — Default `320` / HTML `data-width` / 単体表示時のroot幅です。
- `height` — Default `44` / HTML `data-height` / 単体表示時のroot高さです。
- `position` — Default `center` / HTML `data-position` / Grid親内でrootの9方向配置を決めます。
- `inputAlign` — Default `center` / HTML `data-input-align` / 編集中の文字位置を決めます。
- `inactiveDisplayFormat` — Default `ymd-slash` / HTML `data-inactive-display-format` / focus外の見せ方だけを変更します。committedValueはISOのままです。
- `fontSizeMode` — Default `fit` / HTML `data-font-size-mode` / 文字サイズを自動FITまたは固定にします。
- `fontSize` — Default `14` / HTML `data-font-size` / fontSizeMode=fixed時の文字サイズです。
- `pickerVisual` — Default `icon` / HTML `data-picker-visual` / DatePicker triggerの見た目を切替えます。
- `weekStart` — Default `auto` / HTML `data-week-start` / Picker Calendarの開始曜日を指定します。
- `locale` — Default `null` / HTML `data-locale` / Picker Calendarのlocaleを指定します。DateBox値形式は変わりません。
- `annotations` — Default `null` / HTML `data-annotations` / 日付Annotationを#025→#024へ委譲します。
- `showTasks` — Default `true` / HTML `data-show-tasks` / Picker上のtask Annotation表示を切替えます。
- `activeBorderEffect` — Default `normal` / HTML `data-active-border-effect` / focus中の枠Effectを#022で表示します。
- `activeEffectColor` — Default `theme` / HTML `data-active-effect-color` / #022 Effect色を指定します。
- `activeEffectDirection` — Default `clockwise` / HTML `data-active-effect-direction` / #022方向を指定します。
- `activeEffectSpeed` — Default `normal` / HTML `data-active-effect-speed` / #022速度を指定します。
- `securityMaxLength` — Default `64` / HTML `data-security-max-length` / editing textのSecurity上限です。

## 3. Default Property 全36件 — 個別Reference

### 3.1 `placeholder`

- **何の設定か**: 空欄時の補助文字。値そのものには入りません。
- **型 / Default**: `string` / `""`
- **HTML**: `placeholder / data-placeholder`
- **許容値・範囲**: 任意string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.2 `disabled`

- **何の設定か**: trueでユーザー入力・focus・commitを禁止します。
- **型 / Default**: `boolean` / `false`
- **HTML**: `disabled / data-disabled`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.3 `readonly`

- **何の設定か**: trueで表示は維持しつつユーザー編集・commitを禁止します。
- **型 / Default**: `boolean` / `false`
- **HTML**: `readonly / data-readonly`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.4 `required`

- **何の設定か**: 空値をDATEBOX_REQUIREDとしてValidation invalidにします。
- **型 / Default**: `boolean` / `false`
- **HTML**: `required / data-required`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.5 `min`

- **何の設定か**: 選択・確定できる最小ISO日付。#025/#024へも委譲します。
- **型 / Default**: `string/null` / `null`
- **HTML**: `min / data-min`
- **許容値・範囲**: null または実在する YYYY-MM-DD。
- **無効値時**: `data-min="2026/08/01"` はISO形式ではないため拒否。`2026-08-01`へ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.6 `max`

- **何の設定か**: 選択・確定できる最大ISO日付。#025/#024へも委譲します。
- **型 / Default**: `string/null` / `null`
- **HTML**: `max / data-max`
- **許容値・範囲**: null または実在する YYYY-MM-DD。min <= max。
- **無効値時**: `min`より前の`max`は`DATEBOX_MIN_MAX_INVALID`。`min <= max`へ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.7 `step`

- **何の設定か**: min（未指定時1970-01-01）を基準に日数刻みを検証します。
- **型 / Default**: `integer/"any"` / `1`
- **HTML**: `step / data-step`
- **許容値・範囲**: any または1～365000の整数日。
- **無効値時**: `0`や小数は`DATEBOX_STEP_INVALID`。`any`または1以上の整数日にします。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.8 `name`

- **何の設定か**: 内部native date inputのnameへ設定します。
- **型 / Default**: `string` / `""`
- **HTML**: `name / data-name`
- **許容値・範囲**: 任意string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.9 `autocomplete`

- **何の設定か**: native inputのautocompleteへ渡します。
- **型 / Default**: `string` / `"off"`
- **HTML**: `autocomplete / data-autocomplete`
- **許容値・範囲**: ブラウザが理解するautocomplete string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.10 `inputMode`

- **何の設定か**: native inputのinputModeへ渡します。
- **型 / Default**: `string` / `"numeric"`
- **HTML**: `inputmode / data-input-mode`
- **許容値・範囲**: 任意string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.11 `enterCommit`

- **何の設定か**: EnterキーでeditingValueをcommitするかを決めます。
- **型 / Default**: `boolean` / `true`
- **HTML**: `data-enter-commit`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.12 `blurCommit`

- **何の設定か**: blur時にeditingValueをcommitするかを決めます。Picker選択RETURNもこのpolicyを使います。
- **型 / Default**: `boolean` / `true`
- **HTML**: `data-blur-commit`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.13 `selectOnFocus`

- **何の設定か**: focus時にnative inputをselectします。
- **型 / Default**: `boolean` / `false`
- **HTML**: `data-select-on-focus`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.14 `ariaLabel`

- **何の設定か**: 実inputのARIA labelを指定します。
- **型 / Default**: `string` / `""`
- **HTML**: `aria-label / data-aria-label`
- **許容値・範囲**: 任意string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.15 `className`

- **何の設定か**: DateBox rootへ追加する任意Class名です。
- **型 / Default**: `string` / `""`
- **HTML**: `data-class-name`
- **許容値・範囲**: 任意string。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.16 `theme`

- **何の設定か**: surface/text/border/accentのThemeを切替えます。
- **型 / Default**: `enum` / `default`
- **HTML**: `data-theme`
- **許容値・範囲**: default / dark / light / neon。
- **無効値時**: `blue`は`DATEBOX_OPTION_ENUM_INVALID`。4値のいずれかを指定します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.17 `backgroundColor`

- **何の設定か**: 入力面背景をTheme・透明・solid HEXで上書きします。
- **型 / Default**: `enum/color` / `theme`
- **HTML**: `data-background-color`
- **許容値・範囲**: theme / transparent / #RRGGBB。
- **無効値時**: `red`や8桁HEXは`DATEBOX_BACKGROUND_INVALID`。`theme`/`transparent`/`#RRGGBB`を使用します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.18 `appearance`

- **何の設定か**: 枠と角丸の外観を切替えます。
- **型 / Default**: `enum` / `normal`
- **HTML**: `data-appearance`
- **許容値・範囲**: normal / flat / borderless。
- **無効値時**: 未知値は`DATEBOX_OPTION_ENUM_INVALID`。normal/flat/borderlessへ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.19 `inheritParent`

- **何の設定か**: 親の幅・高さ・背景・文字・角丸・文字位置へ追従します。
- **型 / Default**: `boolean` / `false`
- **HTML**: `data-inherit-parent`
- **許容値・範囲**: true / false。true時はself layoutより親style優先。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.20 `width`

- **何の設定か**: 単体表示時のroot幅です。
- **型 / Default**: `number px` / `320`
- **HTML**: `data-width`
- **許容値・範囲**: 40～4096px。
- **無効値時**: 40px未満または4096px超は`DATEBOX_SIZE_INVALID`。範囲内pxへ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.21 `height`

- **何の設定か**: 単体表示時のroot高さです。
- **型 / Default**: `number px` / `44`
- **HTML**: `data-height`
- **許容値・範囲**: 24～1024px。
- **無効値時**: 24px未満または1024px超は`DATEBOX_SIZE_INVALID`。範囲内pxへ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.22 `position`

- **何の設定か**: Grid親内でrootの9方向配置を決めます。
- **型 / Default**: `enum` / `center`
- **HTML**: `data-position`
- **許容値・範囲**: top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right。
- **無効値時**: 9値以外は`DATEBOX_OPTION_ENUM_INVALID`。Grid親で利用します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.23 `inputAlign`

- **何の設定か**: 編集中の文字位置を決めます。
- **型 / Default**: `enum` / `center`
- **HTML**: `data-input-align`
- **許容値・範囲**: auto / left / center / right。autoはcenterへ解決。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.24 `inactiveDisplayFormat`

- **何の設定か**: focus外の見せ方だけを変更します。committedValueはISOのままです。
- **型 / Default**: `enum` / `ymd-slash`
- **HTML**: `data-inactive-display-format`
- **許容値・範囲**: jp-ymd / jp-ym / ymd-slash / md-slash。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.25 `fontSizeMode`

- **何の設定か**: 文字サイズを自動FITまたは固定にします。
- **型 / Default**: `enum` / `fit`
- **HTML**: `data-font-size-mode`
- **許容値・範囲**: fit / fixed。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.26 `fontSize`

- **何の設定か**: fontSizeMode=fixed時の文字サイズです。
- **型 / Default**: `number px` / `14`
- **HTML**: `data-font-size`
- **許容値・範囲**: 8～96px。
- **無効値時**: 8～96px外は`DATEBOX_SIZE_INVALID`。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.27 `pickerVisual`

- **何の設定か**: DatePicker triggerの見た目を切替えます。
- **型 / Default**: `enum` / `icon`
- **HTML**: `data-picker-visual`
- **許容値・範囲**: icon / emoji。#025へはfontawesome / emojiとして委譲。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.28 `weekStart`

- **何の設定か**: Picker Calendarの開始曜日を指定します。
- **型 / Default**: `enum` / `auto`
- **HTML**: `data-week-start`
- **許容値・範囲**: auto / monday / sunday。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.29 `locale`

- **何の設定か**: Picker Calendarのlocaleを指定します。DateBox値形式は変わりません。
- **型 / Default**: `string/null` / `null`
- **HTML**: `data-locale`
- **許容値・範囲**: 空/null または言語tag形式。
- **無効値時**: `ja_JP`は`DATEBOX_LOCALE_INVALID`。`ja-JP`のようなlanguage-tagへ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.30 `annotations`

- **何の設定か**: 日付Annotationを#025→#024へ委譲します。
- **型 / Default**: `object/null` / `null`
- **HTML**: `data-annotations`
- **許容値・範囲**: HTMLではJSON object。祝日🎌・記念日⭐・task等。
- **無効値時**: JSON配列や文字列は`DATEBOX_ANNOTATIONS_INVALID`。日付keyのobjectにします。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.31 `showTasks`

- **何の設定か**: Picker上のtask Annotation表示を切替えます。
- **型 / Default**: `boolean` / `true`
- **HTML**: `data-show-tasks`
- **許容値・範囲**: true / false。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.32 `activeBorderEffect`

- **何の設定か**: focus中の枠Effectを#022で表示します。
- **型 / Default**: `enum` / `normal`
- **HTML**: `data-active-border-effect`
- **許容値・範囲**: normal / neon / spin / cross / blink。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.33 `activeEffectColor`

- **何の設定か**: #022 Effect色を指定します。
- **型 / Default**: `enum/color` / `theme`
- **HTML**: `data-active-effect-color`
- **許容値・範囲**: theme / #RRGGBB。#040は色選択UI責務。
- **無効値時**: `red`は`DATEBOX_EFFECT_COLOR_INVALID`。`theme`か`#RRGGBB`にします。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.34 `activeEffectDirection`

- **何の設定か**: #022方向を指定します。
- **型 / Default**: `enum` / `clockwise`
- **HTML**: `data-active-effect-direction`
- **許容値・範囲**: clockwise / counterclockwise。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.35 `activeEffectSpeed`

- **何の設定か**: #022速度を指定します。
- **型 / Default**: `enum` / `normal`
- **HTML**: `data-active-effect-speed`
- **許容値・範囲**: slow / normal / fast。
- **無効値時**: 型・列挙値が契約外の場合は設定更新を拒否し、直前の安全な設定/値を維持します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

### 3.36 `securityMaxLength`

- **何の設定か**: editing textのSecurity上限です。
- **型 / Default**: `integer` / `64`
- **HTML**: `data-security-max-length`
- **許容値・範囲**: 10～4096文字。既存値より小さく変更不可。
- **無効値時**: 10未満/4096超は`DATEBOX_SECURITY_LIMIT_INVALID`。10～4096整数へ修正します。
- **関連**: `BoneDateBox.getOptions()` / `setOptions()` で実設定を確認できます。

## 4. 日付・範囲・step

- DateBoxの値は`null`または実在する`YYYY-MM-DD`です。`2026/08/30`やDate objectは値契約外です。
- `min/max`はDateBox Validationと#025/#024 Pickerの選択可能範囲の両方へ反映します。
- `step`は`min`、min未指定時は`1970-01-01`を基準に日数差で判定します。`any`でstep検査を無効化できます。

## 5. Theme / Appearance / Background

- Theme 4値: `default / dark / light / neon`。
- Appearance 3値: `normal / flat / borderless`。
- `backgroundColor`は`theme / transparent / #RRGGBB`。Runtime v1.0.22は8桁HEXを受け付けません。

## 6. 非アクティブ表示 / Font

- `jp-ymd`: `2026年08月30日`
- `jp-ym`: `2026年08月`
- `ymd-slash`: `2026/08/30` (Default)
- `md-slash`: `08/30`
- これらは表示だけで、committedValueは常に`2026-08-30`です。
- `fontSizeMode=fit`は要素サイズと文字数から8～96pxで自動計算。`fixed`は`fontSize` 8～96pxを使用します。

## 7. Picker / Calendar (#025 / #024)

- DateBoxは#025 DatePicker v1.0.10以上（同一major.minorの上位patch）へ`value/theme/iconVisual/locale/weekStart/min/max/step/annotations/showTasks/disabled/readonly`を委譲します。
- DatePickerは#024 Calendar v1.0.13を使用します。DateBoxはCalendarを再実装しません。
- `pickerVisual=icon` → #025へ`fontawesome`、`emoji` → `emoji`。
- `weekStart`: `auto / monday / sunday`。
- Annotation例: `🎌 山の日`, `⭐ 記念日`, task。

## 8. Position 9値 / 親追従

- Positionはabsolute座標ではなく、**Grid親内の`justify-self / align-self`契約**です。
- `top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right`の9値。
- `inheritParent=true`ではrootをstretchし、親の幅・高さ・背景・文字・角丸・文字位置が自己`width/height/position/inputAlign`より優先されます。

## 9. Active Border Effect (#022)

- TriggerはDateBox focus中の`active`です。
- Effect 5値: `normal / neon / spin / cross / blink`。
- Direction 2値: `clockwise / counterclockwise`。
- Speed 3値: `slow / normal / fast`。
- 色は`theme`または`#RRGGBB`。色を選ぶUIは#040 ColorPickerの責務で、DateBoxは返されたsolid HEXを`activeEffectColor`へ設定します。

## 10. JavaScript専用Callback 全12件

### `onInput`

- **発火**: editingValueが変わった時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onInput: detail => console.log(detail)})`。

### `onChange`

- **発火**: 編集変更がchangeとして確定した時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onChange: detail => console.log(detail)})`。

### `onCommit`

- **発火**: committedValueが更新された時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onCommit: detail => console.log(detail)})`。

### `onInvalid`

- **発火**: commitがValidationで拒否された時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onInvalid: detail => console.log(detail)})`。

### `onFocus`

- **発火**: focus時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onFocus: detail => console.log(detail)})`。

### `onBlur`

- **発火**: blur時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onBlur: detail => console.log(detail)})`。

### `onReset`

- **発火**: reset時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onReset: detail => console.log(detail)})`。

### `onInAccepted`

- **発火**: Joint IN受理時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onInAccepted: detail => console.log(detail)})`。

### `onInRejected`

- **発火**: Joint IN拒否時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onInRejected: detail => console.log(detail)})`。

### `onSecurityRejected`

- **発火**: ユーザー編集をSecurityで拒否した時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onSecurityRejected: detail => console.log(detail)})`。

### `onDeliveryState`

- **発火**: WAIT/BLOCKED/connected等の配送状態変化時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onDeliveryState: detail => console.log(detail)})`。

### `onDelivery`

- **発火**: OUT配送成功時。
- **共通payload**: `componentId / componentName / version / boneId / boneType`。Event固有情報としてvalue/source/validation/delivery等を追加します。
- **設定例**: `BoneDateBox.create(bone, {onDelivery: detail => console.log(detail)})`。

## 11. 基本操作 / Validation / Security

- `validateValue()`は入力値単体を検査できます。`validate()`はinstanceの現在editingValueを検査します。
- Security拒否はValidationを通す/通さない以前に、危険な読み取り・型・文字列を拒否する層です。
- `securityMaxLength`は10～4096。長すぎる編集は`DATEBOX_SECURITY_LENGTH_EXCEEDED`。
- Untrusted Joint INはplain objectのown data propertyだけを読み、getter/setterを実行しません。Proxy trap例外もUI値へ反映しません。

## 12. #002 Joint / WAIT / FIFO / BLOCKED

1. `connectOutput({targetReady:false})`でTarget Busyを作ると配送状態はWAITになり、commitしたOUTはQueueへ入ります。
2. A→Bの順にcommitし、`setTargetReady(true)`にするとA→BのFIFO順で自動配送します。
3. guardが`allowed:false`を返すとBLOCKEDになり、Targetへ配送しません。
4. `clearOutputBlock()`でBLOCKを解除し、必要に応じて再配送します。
- WAIT/BLOCKEDはDateBox独自の見た目だけの状態ではなく、#002 Delivery Channelの実状態です。

## 13. Public API 全36件

API個別項目は左目次を過密化しないためH4で記載します。すべて実`BoneDateBox v1.0.22`のシグネチャに合わせています。

共通: `element`には`create()`が返したDateBox root、または`getState()`で解決可能な内部Elementを渡します。ただし`isInstance()`だけはrootそのものを判定します。

#### 13.1 `BoneDateBox.defaults()`

- **何をするAPIか**: Default Property 36件を新しいObjectとして取得します。
- **引数**: なし。
- **戻り値 / 画面・状態への影響**: 36 Propertyのclone。Runtime状態は変更しません。
- **使用例**: `const defaults = BoneDateBox.defaults();`

#### 13.2 `BoneDateBox.normalizeOptions(options)`

- **何をするAPIか**: 指定した設定ObjectをDateBoxが使用できる正式な設定値へ検証・補完します。
- **引数**: `options`: plain object。省略値はDefaultで補完。
- **戻り値 / 画面・状態への影響**: 正規化済みのfreeze済みObject。instanceは変更しません。
- **使用例**: `const options = BoneDateBox.normalizeOptions({theme:"dark", width:360});`

#### 13.3 `BoneDateBox.validateValue(value, options)`

- **何をするAPIか**: instanceを作らずに、日付値がrequired/min/max/stepを含む条件に合うか検査します。
- **引数**: `value`: `null`/空/`YYYY-MM-DD`。`options`: 検査条件。
- **戻り値 / 画面・状態への影響**: `{valid, errors, warnings, value, ...}`。不正optionsはthrowせず`valid:false`で返します。
- **使用例**: `const check = BoneDateBox.validateValue("2026-08-30", {min:"2026-08-01", max:"2026-08-31", step:1});`

#### 13.4 `BoneDateBox.inspectIsoDate(value)`

- **何をするAPIか**: 文字列が厳密な`YYYY-MM-DD`で、実在する日付かを検査します。
- **引数**: `value`: string/null。
- **戻り値 / 画面・状態への影響**: `{valid,value,code,message,year,month,day}`等。timezone変換はしません。
- **使用例**: `const info = BoneDateBox.inspectIsoDate("2026-02-28");`

#### 13.5 `BoneDateBox.formatInactiveDisplay(value, format)`

- **何をするAPIか**: focus外に表示する日付文字列へ変換します。
- **引数**: `value`: ISO日付。`format`: `jp-ymd / jp-ym / ymd-slash / md-slash`。
- **戻り値 / 画面・状態への影響**: 表示文字列。元valueは変更しません。
- **使用例**: `const text = BoneDateBox.formatInactiveDisplay("2026-08-30", "jp-ymd");`

#### 13.6 `BoneDateBox.daysFromCivil(iso)`

- **何をするAPIか**: ISO日付をstep計算に使用する連続日数整数へ変換します。
- **引数**: `iso`: 実在する`YYYY-MM-DD`。
- **戻り値 / 画面・状態への影響**: 整数。画面・instanceは変更しません。
- **使用例**: `const dayNo = BoneDateBox.daysFromCivil("2026-08-30");`

#### 13.7 `BoneDateBox.create(boneInput, options)`

- **何をするAPIか**: Bone入力とoptionsから実DateBox DOMを生成します。
- **引数**: `boneInput`: `{id,type,value}` plain object。`options`: DateBox設定。
- **戻り値 / 画面・状態への影響**: `.bone-datebox` root Element。内部に#025 DatePickerも生成します。
- **使用例**: `const box = BoneDateBox.create({id:"date-1", type:"DATEBOX", value:"2026-08-30"}, {theme:"dark"});`

#### 13.8 `BoneDateBox.isInstance(element)`

- **何をするAPIか**: 渡したElementそのものが登録済みDateBox rootか確認します。
- **引数**: `element`: 判定対象Element。
- **戻り値 / 画面・状態への影響**: boolean。子inputを渡した場合はfalseです。
- **使用例**: `const ok = BoneDateBox.isInstance(box);`

#### 13.9 `BoneDateBox.getInput(element)`

- **何をするAPIか**: DateBox内部のnative `<input type="date">` を取得します。
- **引数**: `element`: DateBox rootまたはその内部Element。
- **戻り値 / 画面・状態への影響**: HTMLInputElement。
- **使用例**: `const input = BoneDateBox.getInput(box);`

#### 13.10 `BoneDateBox.getDatePicker(element)`

- **何をするAPIか**: DateBoxが内部利用している#025 DatePicker instanceを取得します。
- **引数**: `element`: DateBox rootまたは内部Element。
- **戻り値 / 画面・状態への影響**: #025 DatePicker root Element。
- **使用例**: `const picker = BoneDateBox.getDatePicker(box);`

#### 13.11 `BoneDateBox.getValue(element)`

- **何をするAPIか**: 現在の正式確定値(committedValue)を取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: `YYYY-MM-DD`または`null`。editing中の未確定文字列ではありません。
- **使用例**: `const value = BoneDateBox.getValue(box);`

#### 13.12 `BoneDateBox.getEditingValue(element)`

- **何をするAPIか**: 現在inputで編集中の文字列を取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: string。commit前はgetValue()と異なる場合があります。
- **使用例**: `const editing = BoneDateBox.getEditingValue(box);`

#### 13.13 `BoneDateBox.getCommittedValue(element)`

- **何をするAPIか**: 正式確定値を明示的に取得します。getValue()と同じ値です。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: `YYYY-MM-DD`または`null`。
- **使用例**: `const committed = BoneDateBox.getCommittedValue(box);`

#### 13.14 `BoneDateBox.getBone(element)`

- **何をするAPIか**: 現在のBone `{id,type,value}` のcloneを取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: Bone object clone。
- **使用例**: `const bone = BoneDateBox.getBone(box);`

#### 13.15 `BoneDateBox.getOptions(element)`

- **何をするAPIか**: 現在適用されている36 Propertyの解決済み設定を取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: options clone。変更してもinstanceへ自動反映しません。
- **使用例**: `const options = BoneDateBox.getOptions(box);`

#### 13.16 `BoneDateBox.getState(element)`

- **何をするAPIか**: 編集値、確定値、Validation、Security、配送、表示設定などの状態snapshotを取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: state clone。
- **使用例**: `const state = BoneDateBox.getState(box);`

#### 13.17 `BoneDateBox.setValue(element, value, options)`

- **何をするAPIか**: 日付を安全に直接設定し、editingValueとcommittedValueを同時に更新します。
- **引数**: `value`: `null`または実在ISO日付。`options.emit=true`でcommit Event/OUTも発火。
- **戻り値 / 画面・状態への影響**: 設定後の値。日付形式/Securityは拒否します。min/max/stepはValidation状態へ反映されます。
- **使用例**: `BoneDateBox.setValue(box, "2026-09-01", {emit:false, source:"api"});`

#### 13.18 `BoneDateBox.setOptions(element, patch)`

- **何をするAPIか**: 既存DateBoxのPropertyを部分更新します。
- **引数**: `patch`: 36 Propertyの一部を持つplain object。`value`更新には使いません。
- **戻り値 / 画面・状態への影響**: 更新後options clone。無効値では更新前状態を維持してError。
- **使用例**: `const options = BoneDateBox.setOptions(box, {theme:"light", width:360});`

#### 13.19 `BoneDateBox.applyBone(element, boneInput)`

- **何をするAPIか**: 別のBone `{id,type,value}` をDateBoxへ適用します。
- **引数**: `boneInput`: plain object。id/typeはstring、valueは安全なISO日付/null。
- **戻り値 / 画面・状態への影響**: 適用後Bone clone。commit Eventは発火しません。
- **使用例**: `const bone = BoneDateBox.applyBone(box, {id:"date-2", type:"DATEBOX", value:"2026-09-15"});`

#### 13.20 `BoneDateBox.applyJointInput(element, payload)`

- **何をするAPIか**: #002 Jointから来たUntrusted INを安全検査してDateBoxへ適用します。
- **引数**: `payload`: own data propertyの`value`必須、`source/state`任意。
- **戻り値 / 画面・状態への影響**: accepted時`{accepted:true,...}`、拒否時`{accepted:false,blocked:true,...}`。拒否時は既存値を保持。
- **使用例**: `const result = BoneDateBox.applyJointInput(box, {value:"2026-09-20", source:"joint-1", state:{status:"ready"}});`

#### 13.21 `BoneDateBox.buildOutput(element, source)`

- **何をするAPIか**: 現在のcommittedValueからOUT payloadを作成します。配送はしません。
- **引数**: `source`: 任意のsource文字列。
- **戻り値 / 画面・状態への影響**: componentId/type/value/bone/validationを含むfreeze済みpayload。
- **使用例**: `const payload = BoneDateBox.buildOutput(box, "manual");`

#### 13.22 `BoneDateBox.connectOutput(element, options)`

- **何をするAPIか**: #002 Delivery Channelを接続し、WAIT/FIFO/BLOCKED配送を有効にします。
- **引数**: `options`: `targetReady`, `guard`, `deliver`, `onStateChange`。
- **戻り値 / 画面・状態への影響**: Delivery Channelの初期state snapshot。
- **使用例**: `BoneDateBox.connectOutput(box, {targetReady:false, deliver:payload => console.log(payload)});`

#### 13.23 `BoneDateBox.disconnectOutput(element)`

- **何をするAPIか**: 接続済みOUT Delivery Channelをdisposeしてunboundへ戻します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: true。Queue/接続は破棄されます。
- **使用例**: `BoneDateBox.disconnectOutput(box);`

#### 13.24 `BoneDateBox.setTargetReady(element, ready)`

- **何をするAPIか**: 接続先が配送可能かを切替えます。falseではcommit OUTをWAIT Queueへ保持します。
- **引数**: `ready`: boolean。Channel接続済みであること。
- **戻り値 / 画面・状態への影響**: 更新後Delivery state snapshot。trueへ戻すとQueueをFIFO配送します。
- **使用例**: `const state = BoneDateBox.setTargetReady(box, true);`

#### 13.25 `BoneDateBox.clearOutputBlock(element)`

- **何をするAPIか**: guard等でBLOCKEDになったDelivery Channelのblock状態を解除します。
- **引数**: `element`: Channel接続済みDateBox。
- **戻り値 / 画面・状態への影響**: 解除後Delivery state snapshot。
- **使用例**: `const state = BoneDateBox.clearOutputBlock(box);`

#### 13.26 `BoneDateBox.getOutputState(element)`

- **何をするAPIか**: 現在のOUT配送状態を取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: 未接続なら`{state:"unbound",...}`、接続済みなら#002 state clone。
- **使用例**: `const state = BoneDateBox.getOutputState(box);`

#### 13.27 `BoneDateBox.getOutputQueue(element)`

- **何をするAPIか**: WAIT中のFIFO Queue内容を取得します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: 未接続なら空配列、接続済みならQueue clone。
- **使用例**: `const queue = BoneDateBox.getOutputQueue(box);`

#### 13.28 `BoneDateBox.commit(element, source)`

- **何をするAPIか**: editingValueをrequired/min/max/stepでValidationし、合格時だけcommittedValueへ確定します。
- **引数**: `source`: Event/ログへ残す任意文字列。
- **戻り値 / 画面・状態への影響**: `{committed:true,...}`または`{committed:false,reason:"invalid|unchanged|not-editable",...}`。成功時はOUT配送も実行。
- **使用例**: `const result = BoneDateBox.commit(box, "save-button");`

#### 13.29 `BoneDateBox.reset(element)`

- **何をするAPIか**: 未確定editingValueを現在のcommittedValueへ戻します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: committedValue。`bone-datebox:reset`を発火。
- **使用例**: `const value = BoneDateBox.reset(box);`

#### 13.30 `BoneDateBox.validate(element)`

- **何をするAPIか**: 現在のeditingValueを36 Property条件で検査し、画面のValidation表示も更新します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: validation clone。値はcommitしません。
- **使用例**: `const validation = BoneDateBox.validate(box);`

#### 13.31 `BoneDateBox.focus(element)`

- **何をするAPIか**: 内部date inputへfocusします。Active Border Effectもfocus状態へ追従します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: true。
- **使用例**: `BoneDateBox.focus(box);`

#### 13.32 `BoneDateBox.blur(element)`

- **何をするAPIか**: 内部date inputからfocusを外します。`blurCommit=true`なら通常のblur handlerでcommit対象になります。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: true。
- **使用例**: `BoneDateBox.blur(box);`

#### 13.33 `BoneDateBox.select(element)`

- **何をするAPIか**: 内部date inputの選択操作を呼び出します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: 戻り値なし。ブラウザのdate input選択可否に従います。
- **使用例**: `BoneDateBox.select(box);`

#### 13.34 `BoneDateBox.setFeedback(element, feedback)`

- **何をするAPIか**: 自動Validation/Security表示より優先する任意Feedbackを設定します。
- **引数**: `feedback`: `{level:"none|warning|error|success", message:"..."}` plain object。
- **戻り値 / 画面・状態への影響**: 適用後`{level,message}` clone。不明levelは`none`。
- **使用例**: `BoneDateBox.setFeedback(box, {level:"warning", message:"確認してください"});`

#### 13.35 `BoneDateBox.syncParentStyle(element)`

- **何をするAPIか**: `inheritParent=true`時に親要素の背景/文字/角丸/align/サイズを再読込します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: 親style snapshot。inheritParent=falseならnull。
- **使用例**: `const parentStyle = BoneDateBox.syncParentStyle(box);`

#### 13.36 `BoneDateBox.destroy(element)`

- **何をするAPIか**: DatePicker、#022 Effect、ResizeObserver、Delivery Channel、DOMを破棄します。
- **引数**: `element`: DateBox instance。
- **戻り値 / 画面・状態への影響**: true。以後そのrootをAPIへ渡すとinstance Errorです。
- **使用例**: `BoneDateBox.destroy(box);`


## 14. Error Code

Errorは「名前だけ」ではなく、**何をすると発生するか → どう直すか → 失敗時に何が起こるか**まで示します。Runtime Error 50件とHTML Functional Class固有Error 5件を分離します。

### 14.1 Runtime Error 50件

- **`DATEBOX_022_DEPENDENCY_REQUIRED`**
  - **意味 / 発生条件**: Active Border Effectに必要な#022 v1.0.10が未読込/契約不一致です。
  - **不正例**: `BoneHoverBorderEffect`なしで`create()`する。
  - **修正**: #022 Hover Border Effect v1.0.10を先に読込み、attach/update/setActive/detach/isAttached APIを揃えます。
  - **失敗時**: DateBox生成/再描画を続行しません。

- **`DATEBOX_ANNOTATIONS_INVALID`**
  - **意味 / 発生条件**: `annotations`が日付キーを持つplain objectではありません。
  - **不正例**: `annotations: []` や文字列。
  - **修正**: `annotations:{"2026-08-11":{...}}` のようなobjectを指定します。
  - **失敗時**: 無効optionsは採用されません。

- **`DATEBOX_BACKGROUND_INVALID`**
  - **意味 / 発生条件**: `backgroundColor`が許容値外です。
  - **不正例**: `backgroundColor:"red"` / `#12345678`。
  - **修正**: `theme` / `transparent` / `#35f4ff` を指定します。
  - **失敗時**: 設定更新/生成を拒否し既存設定を保ちます。

- **`DATEBOX_BONE_ID_TYPE_INVALID`**
  - **意味 / 発生条件**: Boneの`id`または`type`がstringではありません。
  - **不正例**: `{id:1,type:"DATEBOX",value:null}`。
  - **修正**: `{id:"date-1",type:"DATEBOX",value:null}`。
  - **失敗時**: Bone適用/生成を拒否します。

- **`DATEBOX_BONE_INPUT_INVALID`**
  - **意味 / 発生条件**: Bone INがplain objectではありません。
  - **不正例**: `create("2026-08-30", {})`。
  - **修正**: `create({id:"date-1",type:"DATEBOX",value:"2026-08-30"},{})`。
  - **失敗時**: instanceを生成/更新しません。

- **`DATEBOX_CALLBACK_INVALID`**
  - **意味 / 発生条件**: Callback Propertyがfunctionまたはnullではありません。
  - **不正例**: `onCommit:"save"`。
  - **修正**: `onCommit: detail => save(detail)` または`null`。
  - **失敗時**: Callbackを含むoptions更新を拒否します。

- **`DATEBOX_CONTROL_CHARACTER_REJECTED`**
  - **意味 / 発生条件**: 値にNUL等の危険な制御文字が含まれています。
  - **不正例**: `"2026-08-30\u0000"`。
  - **修正**: 制御文字を除いた`"2026-08-30"`を渡します。
  - **失敗時**: Security拒否しcommittedValueを置換しません。

- **`DATEBOX_DATEPICKER_TRIGGER_MISSING`**
  - **意味 / 発生条件**: #025 DatePickerが生成したtrigger DOMを取得できません。
  - **不正例**: 互換外DatePicker実装で`.bone-datepicker__trigger`がない。
  - **修正**: #025 DatePicker v1.0.10以上（同一major.minorの互換patch）を使用します。
  - **失敗時**: DateBox createを完了しません。

- **`DATEBOX_DATE_FORMAT_INVALID`**
  - **意味 / 発生条件**: 日付文字列が厳密な`YYYY-MM-DD`ではありません。
  - **不正例**: `"2026/08/30"` / `"26-8-30"`。
  - **修正**: `"2026-08-30"`。
  - **失敗時**: Validation/Security経路で拒否し、不正値を確定しません。

- **`DATEBOX_DATE_INVALID`**
  - **意味 / 発生条件**: 形式は正しくても実在しない日付です。
  - **不正例**: `"2026-02-30"`。
  - **修正**: `"2026-02-28"`。
  - **失敗時**: 不正日付を確定/適用しません。

- **`DATEBOX_DEPENDENCY_CALENDAR_VERSION`**
  - **意味 / 発生条件**: #025が参照する#024 Calendar versionがDateBox契約`1.0.13`と一致しません。
  - **不正例**: `BoneDatePicker.calendarVersion !== "1.0.13"`。
  - **修正**: #025 DatePicker v1.0.10以上が要求するCalendar契約を揃えます。
  - **失敗時**: DateBox生成を拒否します。

- **`DATEBOX_DEPENDENCY_CORE_MISSING`**
  - **意味 / 発生条件**: #001 BoneCore.normalizeがありません。
  - **不正例**: BoneCore未読込。
  - **修正**: #001 Bone Core正本を先に読込みます。
  - **失敗時**: Bone正規化できないため生成/適用を拒否します。

- **`DATEBOX_DEPENDENCY_DATEPICKER_MISSING`**
  - **意味 / 発生条件**: #025 DatePicker v1.0.10以上の互換Runtimeがありません。
  - **不正例**: BoneDatePicker未読込。
  - **修正**: #025 DatePicker v1.0.10以上（同一major.minor）を先に読込みます。
  - **失敗時**: DateBox生成を拒否します。

- **`DATEBOX_DEPENDENCY_DATEPICKER_VERSION`**
  - **意味 / 発生条件**: #025 DatePicker versionが`1.0.10`と一致しません。
  - **不正例**: `BoneDatePicker.version="1.0.8"`。
  - **修正**: v1.0.10正本へ揃えます。
  - **失敗時**: DateBox生成を拒否します。

- **`DATEBOX_DEPENDENCY_JOINT_MISSING`**
  - **意味 / 発生条件**: #002 BoneJoint.createDeliveryChannelがありません。
  - **不正例**: OUT接続時にBoneJoint未読込。
  - **修正**: #002 Bone Joint v1.1.36を読込みます。
  - **失敗時**: OUT Delivery Channelを作成できません。

- **`DATEBOX_DOM_REQUIRED`**
  - **意味 / 発生条件**: DOMを持たない環境で`create()`しました。
  - **不正例**: 純粋Node環境でdocumentなしにcreate。
  - **修正**: ブラウザ/JSDOM等、document.createElementがある環境で実行します。
  - **失敗時**: instanceは生成されません。

- **`DATEBOX_EDITING_TYPE_REJECTED`**
  - **意味 / 発生条件**: editingValue/日付値がstringではありません。
  - **不正例**: `setValue(box, 20260830)`。
  - **修正**: `setValue(box,"2026-08-30")`または`null`。
  - **失敗時**: Security拒否し既存値を保持します。

- **`DATEBOX_EFFECT_COLOR_INVALID`**
  - **意味 / 発生条件**: `activeEffectColor`が`theme`または#RRGGBBではありません。
  - **不正例**: `activeEffectColor:"blue"`。
  - **修正**: `theme`または`#35f4ff`。
  - **失敗時**: Effect設定更新を拒否します。

- **`DATEBOX_EXISTING_VALUE_SECURITY_LIMIT`**
  - **意味 / 発生条件**: 現在のeditingValueより短い`securityMaxLength`へ縮小しようとしました。
  - **不正例**: 現在10文字なのに`securityMaxLength:9`。
  - **修正**: 現在値以上、かつ10～4096の値へ設定します。
  - **失敗時**: setOptionsを拒否し既存optionsを維持します。

- **`DATEBOX_FEEDBACK_INVALID`**
  - **意味 / 発生条件**: `setFeedback()`へplain object以外を渡しました。
  - **不正例**: `setFeedback(box,"error")`。
  - **修正**: `setFeedback(box,{level:"error",message:"..."})`。
  - **失敗時**: Feedbackを変更しません。

- **`DATEBOX_INSTANCE_NOT_FOUND`**
  - **意味 / 発生条件**: 登録済みDateBox instanceとして解決できないElementです。
  - **不正例**: 未登録divやdestroy後rootをAPIへ渡す。
  - **修正**: `create()`が返したroot、またはその内部Elementを渡します。
  - **失敗時**: 対象APIは処理を行いません。

- **`DATEBOX_IN_REJECTED`**
  - **意味 / 発生条件**: Joint IN処理中の想定外拒否をBLOCKED結果へ変換するfallback codeです。
  - **不正例**: 契約外payloadで内部Error codeが得られない場合。
  - **修正**: 正式`{value,source,state}` payloadを使用します。
  - **失敗時**: `accepted:false, blocked:true`で既存値を保持します。

- **`DATEBOX_JOINT_INPUT_INVALID`**
  - **意味 / 発生条件**: Joint IN payloadがplain objectではありません。
  - **不正例**: `applyJointInput(box,"2026-08-30")`。
  - **修正**: `applyJointInput(box,{value:"2026-08-30"})`。
  - **失敗時**: INを拒否し既存committedValueを保持します。

- **`DATEBOX_JOINT_SOURCE_INVALID`**
  - **意味 / 発生条件**: Joint IN `source`がstring/nullではありません。
  - **不正例**: `source:123`。
  - **修正**: `source:"joint-A"`または`null`。
  - **失敗時**: INをBLOCKED結果として拒否します。

- **`DATEBOX_JOINT_STATE_INVALID`**
  - **意味 / 発生条件**: Joint IN `state`がstring/plain objectではありません。
  - **不正例**: `state:[]`。
  - **修正**: `state:"ready"`または`{status:"ready",reason:null}`。
  - **失敗時**: INを拒否し値を保持します。

- **`DATEBOX_JOINT_STATE_REASON_INVALID`**
  - **意味 / 発生条件**: `state.reason`がstring/nullではありません。
  - **不正例**: `reason:123`。
  - **修正**: `reason:"busy"`または`null`。
  - **失敗時**: INを拒否します。

- **`DATEBOX_JOINT_STATE_STATUS_INVALID`**
  - **意味 / 発生条件**: `state.status`がstringではありません。
  - **不正例**: `status:true`。
  - **修正**: `status:"ready"`。
  - **失敗時**: INを拒否します。

- **`DATEBOX_LOCALE_INVALID`**
  - **意味 / 発生条件**: `locale`が許可されたlanguage-tag形式ではありません。
  - **不正例**: `locale:"ja JP!"`。
  - **修正**: `ja-JP` / `en-US` / `null`。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_MAX`**
  - **意味 / 発生条件**: 入力日が`max`より後です。
  - **不正例**: `max:"2026-08-31"`で`2026-09-01`をcommit。
  - **修正**: `max`以前の日付へ直すかmaxを広げます。
  - **失敗時**: Validation失敗。commitせず以前のcommittedValueを維持します。

- **`DATEBOX_MIN`**
  - **意味 / 発生条件**: 入力日が`min`より前です。
  - **不正例**: `min:"2026-08-01"`で`2026-07-31`をcommit。
  - **修正**: `min`以降の日付へ直すかminを広げます。
  - **失敗時**: Validation失敗。commitしません。

- **`DATEBOX_MIN_MAX_INVALID`**
  - **意味 / 発生条件**: 設定自体で`min > max`になっています。
  - **不正例**: `min:"2026-12-31", max:"2026-01-01"`。
  - **修正**: `min <= max`に修正します。
  - **失敗時**: create/setOptionsを拒否し不整合範囲を採用しません。

- **`DATEBOX_OPTIONS_INVALID`**
  - **意味 / 発生条件**: options/setOptions patchがplain objectではありません。
  - **不正例**: `setOptions(box,"dark")`。
  - **修正**: `setOptions(box,{theme:"dark"})`。
  - **失敗時**: 設定を変更しません。

- **`DATEBOX_OPTION_ENUM_INVALID`**
  - **意味 / 発生条件**: 列挙Propertyが許容値外です。
  - **不正例**: `theme:"blue"` / `position:"left-top"`。
  - **修正**: 各Propertyの全許容値から選びます。例:`theme:"dark"`。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_OPTION_STRING_INVALID`**
  - **意味 / 発生条件**: string Propertyへstring以外を渡しました。
  - **不正例**: `placeholder:123`。
  - **修正**: `placeholder:"日付を選択"`。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_OUTPUT_CHANNEL_UNBOUND`**
  - **意味 / 発生条件**: OUT Delivery Channel未接続でReady/BLOCK操作を呼びました。
  - **不正例**: connectOutput前に`setTargetReady()`。
  - **修正**: 先に`connectOutput()`します。
  - **失敗時**: 配送状態を変更しません。

- **`DATEBOX_OUTPUT_DELIVER_INVALID`**
  - **意味 / 発生条件**: `connectOutput.deliver`がfunction/nullではありません。
  - **不正例**: `deliver:"send"`。
  - **修正**: `deliver: payload => send(payload)`。
  - **失敗時**: Channel接続を拒否します。

- **`DATEBOX_OUTPUT_GUARD_INVALID`**
  - **意味 / 発生条件**: `connectOutput.guard`がfunction/nullではありません。
  - **不正例**: `guard:true`。
  - **修正**: `guard: payload => ({allowed:true})`等のfunction。
  - **失敗時**: Channel接続を拒否します。

- **`DATEBOX_OUTPUT_OPTIONS_INVALID`**
  - **意味 / 発生条件**: `connectOutput()` optionsがplain objectではありません。
  - **不正例**: `connectOutput(box,false)`。
  - **修正**: `connectOutput(box,{targetReady:false})`。
  - **失敗時**: Channelを作成しません。

- **`DATEBOX_OUTPUT_STATE_CALLBACK_INVALID`**
  - **意味 / 発生条件**: `onStateChange`がfunction/nullではありません。
  - **不正例**: `onStateChange:"log"`。
  - **修正**: `onStateChange:e=>console.log(e)`。
  - **失敗時**: Channel接続を拒否します。

- **`DATEBOX_REQUIRED`**
  - **意味 / 発生条件**: `required=true`なのに値が空です。
  - **不正例**: required状態で空のままcommit。
  - **修正**: 実在するISO日付を入力するかrequired=falseにします。
  - **失敗時**: Validation失敗しcommitしません。

- **`DATEBOX_SECURITY_LENGTH_EXCEEDED`**
  - **意味 / 発生条件**: 入力文字列が`securityMaxLength`を超えました。
  - **不正例**: securityMaxLength=10で11文字以上の値。
  - **修正**: 上限内にするか、10～4096の範囲で上限を適切に増やします。
  - **失敗時**: Security拒否し既存committedValueを保持します。

- **`DATEBOX_SECURITY_LIMIT_INVALID`**
  - **意味 / 発生条件**: `securityMaxLength`が10～4096整数ではありません。
  - **不正例**: `securityMaxLength:5` / `10.5`。
  - **修正**: `64`など10～4096整数。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_SIZE_INVALID`**
  - **意味 / 発生条件**: width/height/fontSizeが各許容範囲外です。
  - **不正例**: `width:20`, `height:2000`, `fontSize:100`。
  - **修正**: width 40～4096px、height 24～1024px、fontSize 8～96pxへ直します。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_STEP`**
  - **意味 / 発生条件**: 日付がstep刻みに一致しません。
  - **不正例**: `min:"2026-08-01",step:2`で`2026-08-02`をcommit。
  - **修正**: 基準日からstep日刻みの日付に直すかstep="any"。
  - **失敗時**: Validation失敗しcommitしません。

- **`DATEBOX_STEP_INVALID`**
  - **意味 / 発生条件**: `step`が`any`または1～365000の整数日ではありません。
  - **不正例**: `step:0` / `1.5`。
  - **修正**: `step:1`, `7`, または`"any"`。
  - **失敗時**: options更新を拒否します。

- **`DATEBOX_UNPAIRED_SURROGATE_REJECTED`**
  - **意味 / 発生条件**: 不正なUnicode surrogateを含む文字列です。
  - **不正例**: 片側だけのsurrogateを含むvalue。
  - **修正**: 正常なUnicode文字列/ISO日付へ直します。
  - **失敗時**: Security拒否し既存値を保持します。

- **`DATEBOX_UNTRUSTED_ACCESSOR_REJECTED`**
  - **意味 / 発生条件**: Untrusted objectの必要Propertyがgetter/setterです。実行による副作用を防ぐため拒否します。
  - **不正例**: `Object.defineProperty(payload,"value",{get(){...}})`。
  - **修正**: own data propertyとして`value:"2026-08-30"`を持たせます。
  - **失敗時**: getterを実行せずIN/optionsを拒否します。

- **`DATEBOX_UNTRUSTED_PROPERTY_MISSING`**
  - **意味 / 発生条件**: 必須own data propertyがありません。
  - **不正例**: Bone INに`value`がない。
  - **修正**: 契約で必須の`id/type/value`またはJoint INの`value`をown propertyで持たせます。
  - **失敗時**: 入力を拒否します。

- **`DATEBOX_UNTRUSTED_PROPERTY_TRAP`**
  - **意味 / 発生条件**: Proxy等により`Object.getOwnPropertyDescriptor`が例外になりました。
  - **不正例**: descriptor trapがthrowするProxy。
  - **修正**: 副作用のないplain objectへコピーして渡します。
  - **失敗時**: trap値を採用せず入力を拒否します。

- **`DATEBOX_UNTRUSTED_RECORD_INVALID`**
  - **意味 / 発生条件**: Security対象がplain object契約ではありません。
  - **不正例**: Array/function/Date等をJoint INやBone INに渡す。
  - **修正**: 通常のplain objectを使用します。
  - **失敗時**: 入力を拒否し既存状態を保持します。

### 14.2 HTML Functional Class Integration Error 5件

- **`DATEBOX_FUNCTIONAL_CLASS_ANCHOR_INVALID`**
  - **意味 / 発生条件**: `bf-datebox`をElement以外/該当classなしへmountしました。
  - **不正例**: `mount(null)`。
  - **修正**: `class="bf-datebox"`を持つinput等を渡します。
  - **失敗時**: 対象`bf-datebox`のmount/refreshを拒否し、既存Runtime instanceを勝手に別値へ置換しません。

- **`DATEBOX_FUNCTIONAL_CLASS_BOOLEAN_INVALID`**
  - **意味 / 発生条件**: HTML Boolean値が認識できません。
  - **不正例**: `data-disabled="maybe"`。
  - **修正**: `true/false`, `1/0`, `yes/no`, `on/off`を使用します。
  - **失敗時**: 対象`bf-datebox`のmount/refreshを拒否し、既存Runtime instanceを勝手に別値へ置換しません。

- **`DATEBOX_FUNCTIONAL_CLASS_JSON_INVALID`**
  - **意味 / 発生条件**: `data-annotations`がJSON objectではありません。
  - **不正例**: `data-annotations="[]"`。
  - **修正**: JSON object文字列を指定します。
  - **失敗時**: 対象`bf-datebox`のmount/refreshを拒否し、既存Runtime instanceを勝手に別値へ置換しません。

- **`DATEBOX_FUNCTIONAL_CLASS_RUNTIME_MISSING`**
  - **意味 / 発生条件**: `bf-datebox`より先にBoneDateBox v1.0.22が利用可能になっていません。
  - **不正例**: Functional Class scriptだけ読み込む。
  - **修正**: bone-datebox.jsを先に読み込みます。
  - **失敗時**: 対象`bf-datebox`のmount/refreshを拒否し、既存Runtime instanceを勝手に別値へ置換しません。

- **`DATEBOX_FUNCTIONAL_CLASS_VALUE_INVALID`**
  - **意味 / 発生条件**: HTML valueが空または`YYYY-MM-DD`ではありません。
  - **不正例**: `value="2026/08/30"`。
  - **修正**: `value="2026-08-30"`または空にします。
  - **失敗時**: 対象`bf-datebox`のmount/refreshを拒否し、既存Runtime instanceを勝手に別値へ置換しません。


## 15. 責務分離

- **#030 DateBox**: ISO日付入力・編集・Validation・commit・Security・OUT。
- **#025 DatePicker**: Picker panel/triggerとCalendar選択RETURN。
- **#024 Calendar**: 月表示・日付セル・Annotation・週開始。
- **#022 Hover Border Effect**: focus中の枠Effect。DateBoxはattach/update/setActiveを利用するだけです。
- **#040 ColorPicker**: 色を選ぶUI。DateBoxは返されたsolid HEXを背景/Effect Propertyへ受けます。
- **#002 Joint**: IN/OUT接続とWAIT/FIFO/BLOCKED Delivery。

## 16. Troubleshooting

- DOCが開かない: Registryの`DOC-0030.source = content/DOC-0030/{lang}.md`とja/en実体を確認。
- Live Sample markerが文字のまま: `bone-datebox-doc-integration.js`の読込と共有Guide DOMを確認。
- Pickerが開かない: #025 DatePicker v1.0.10以上 / #024 Calendar v1.0.13以上（各同一major.minor）の依存契約を確認。
- positionが中央のまま: 9位置はGrid親の`justify-self / align-self`契約です。Live Sampleは`display:grid`を使用します。


### DatePicker Calendarが画面端にある場合

`bf-datebox` のCalendar表示は #025 DatePicker v1.0.10以上（同一major.minorの互換patch）に委譲します。通常はDateBoxの下へ表示しますが、下側に `calendarHeight` 分の空きがない場合は上側へ自動反転します。上側・下側のどちらにも完全に収まらない場合はviewport内へclampし、スクロールやリサイズ時も再配置します。DOC Live Sampleを閉じる・言語切替で再描画する場合は、sampleのDateBoxをdestroyしてbody配下のDatePicker panelとglobal listenerを残しません。