# DOC-0030 — DateBox Operation / HTML Functional Class

## 0. Document information

- 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 role

DateBox safely edits and commits strict ISO dates (`YYYY-MM-DD`). Visual inactive formatting never changes the committed ISO string/null OUT contract. It does not use `Date.parse()`, timezone conversion, or Date-object coercion.

### 1.1 Terms

- **source input**: `<input class="bf-datebox">` written in HTML.
- **real DateBox**: runtime UI created by `BoneDateBox.create()`.
- **editingValue**: current editing string.
- **committedValue**: validated ISO date/null used for OUT.
- **commit**: validates editingValue and promotes it to committedValue.
- **Validation**: checks required/min/max/step/real date.
- **Security**: rejects unsafe type/accessor/Proxy/control-character/Unicode/length input.
- **Picker**: #025 DatePicker backed by #024 Calendar.

### 1.2 Basic flow

1. Editing changes editingValue.
2. Enter/blur commit according to enterCommit/blurCommit.
3. Invalid dates do not replace committedValue.
4. Escape restores editingValue from committedValue.
5. DatePicker RETURN is accepted and committed according to the DateBox policy.

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

The single normal-use HTML Functional Class is **`bf-datebox`**. Legacy API-specific classes are not the normal-use contract.

### 2.1 Minimal use

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

### 2.2 Configured use

```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 Setting → live result samples

#### Basic / 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]]

#### Inactive display / 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 values)

[[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 All 36 HTML properties

- `placeholder` — Default `""` / HTML `placeholder / data-placeholder` / Placeholder text shown only when the field is empty; it is not part of the value.
- `disabled` — Default `false` / HTML `disabled / data-disabled` / When true, blocks user input, focus, and commit.
- `readonly` — Default `false` / HTML `readonly / data-readonly` / When true, keeps the value visible but blocks user editing and commit.
- `required` — Default `false` / HTML `required / data-required` / Makes an empty value validation-invalid with DATEBOX_REQUIRED.
- `min` — Default `null` / HTML `min / data-min` / Minimum selectable/committable ISO date; delegated to #025/#024 as well.
- `max` — Default `null` / HTML `max / data-max` / Maximum selectable/committable ISO date; delegated to #025/#024 as well.
- `step` — Default `1` / HTML `step / data-step` / Validates a day interval from min, or 1970-01-01 when min is absent.
- `name` — Default `""` / HTML `name / data-name` / Sets the name of the internal native date input.
- `autocomplete` — Default `"off"` / HTML `autocomplete / data-autocomplete` / Passes through to the native input autocomplete attribute.
- `inputMode` — Default `"numeric"` / HTML `inputmode / data-input-mode` / Passes through to the native input inputMode.
- `enterCommit` — Default `true` / HTML `data-enter-commit` / Controls whether Enter commits editingValue.
- `blurCommit` — Default `true` / HTML `data-blur-commit` / Controls whether blur commits editingValue; DatePicker RETURN follows this commit policy.
- `selectOnFocus` — Default `false` / HTML `data-select-on-focus` / Selects the native input text when focused.
- `ariaLabel` — Default `""` / HTML `aria-label / data-aria-label` / Sets the ARIA label on the actual input.
- `className` — Default `""` / HTML `data-class-name` / Adds an optional class name to the DateBox root.
- `theme` — Default `default` / HTML `data-theme` / Switches the surface/text/border/accent theme.
- `backgroundColor` — Default `theme` / HTML `data-background-color` / Overrides the input surface with theme, transparent, or a solid HEX color.
- `appearance` — Default `normal` / HTML `data-appearance` / Switches the border/radius appearance.
- `inheritParent` — Default `false` / HTML `data-inherit-parent` / Follows parent width/height/background/text/radius/alignment.
- `width` — Default `320` / HTML `data-width` / Root width when used independently.
- `height` — Default `44` / HTML `data-height` / Root height when used independently.
- `position` — Default `center` / HTML `data-position` / Chooses one of nine root placements inside a CSS Grid parent.
- `inputAlign` — Default `center` / HTML `data-input-align` / Controls editing text alignment.
- `inactiveDisplayFormat` — Default `ymd-slash` / HTML `data-inactive-display-format` / Changes only the unfocused display; committedValue remains ISO.
- `fontSizeMode` — Default `fit` / HTML `data-font-size-mode` / Uses automatic FIT or fixed font sizing.
- `fontSize` — Default `14` / HTML `data-font-size` / Fixed font size used when fontSizeMode=fixed.
- `pickerVisual` — Default `icon` / HTML `data-picker-visual` / Switches the DatePicker trigger visual.
- `weekStart` — Default `auto` / HTML `data-week-start` / Controls the first weekday in the picker Calendar.
- `locale` — Default `null` / HTML `data-locale` / Sets picker Calendar locale without changing the DateBox ISO value format.
- `annotations` — Default `null` / HTML `data-annotations` / Delegates date annotations to #025 and #024.
- `showTasks` — Default `true` / HTML `data-show-tasks` / Shows or hides task annotations in the picker.
- `activeBorderEffect` — Default `normal` / HTML `data-active-border-effect` / Shows the #022 border effect while DateBox is focused.
- `activeEffectColor` — Default `theme` / HTML `data-active-effect-color` / Sets the #022 effect color.
- `activeEffectDirection` — Default `clockwise` / HTML `data-active-effect-direction` / Sets #022 effect direction.
- `activeEffectSpeed` — Default `normal` / HTML `data-active-effect-speed` / Sets #022 effect speed.
- `securityMaxLength` — Default `64` / HTML `data-security-max-length` / Security length ceiling for editing text.

## 3. All 36 default properties — detailed reference

### 3.1 `placeholder`

- **Purpose**: Placeholder text shown only when the field is empty; it is not part of the value.
- **Type / Default**: `string` / `""`
- **HTML**: `placeholder / data-placeholder`
- **Allowed values / range**: Any string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.2 `disabled`

- **Purpose**: When true, blocks user input, focus, and commit.
- **Type / Default**: `boolean` / `false`
- **HTML**: `disabled / data-disabled`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.3 `readonly`

- **Purpose**: When true, keeps the value visible but blocks user editing and commit.
- **Type / Default**: `boolean` / `false`
- **HTML**: `readonly / data-readonly`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.4 `required`

- **Purpose**: Makes an empty value validation-invalid with DATEBOX_REQUIRED.
- **Type / Default**: `boolean` / `false`
- **HTML**: `required / data-required`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.5 `min`

- **Purpose**: Minimum selectable/committable ISO date; delegated to #025/#024 as well.
- **Type / Default**: `string/null` / `null`
- **HTML**: `min / data-min`
- **Allowed values / range**: null or a real YYYY-MM-DD date.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.6 `max`

- **Purpose**: Maximum selectable/committable ISO date; delegated to #025/#024 as well.
- **Type / Default**: `string/null` / `null`
- **HTML**: `max / data-max`
- **Allowed values / range**: null or a real YYYY-MM-DD date; min <= max.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.7 `step`

- **Purpose**: Validates a day interval from min, or 1970-01-01 when min is absent.
- **Type / Default**: `integer/"any"` / `1`
- **HTML**: `step / data-step`
- **Allowed values / range**: any or an integer day count from 1 to 365000.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.8 `name`

- **Purpose**: Sets the name of the internal native date input.
- **Type / Default**: `string` / `""`
- **HTML**: `name / data-name`
- **Allowed values / range**: Any string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.9 `autocomplete`

- **Purpose**: Passes through to the native input autocomplete attribute.
- **Type / Default**: `string` / `"off"`
- **HTML**: `autocomplete / data-autocomplete`
- **Allowed values / range**: Any browser-understood autocomplete string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.10 `inputMode`

- **Purpose**: Passes through to the native input inputMode.
- **Type / Default**: `string` / `"numeric"`
- **HTML**: `inputmode / data-input-mode`
- **Allowed values / range**: Any string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.11 `enterCommit`

- **Purpose**: Controls whether Enter commits editingValue.
- **Type / Default**: `boolean` / `true`
- **HTML**: `data-enter-commit`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.12 `blurCommit`

- **Purpose**: Controls whether blur commits editingValue; DatePicker RETURN follows this commit policy.
- **Type / Default**: `boolean` / `true`
- **HTML**: `data-blur-commit`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.13 `selectOnFocus`

- **Purpose**: Selects the native input text when focused.
- **Type / Default**: `boolean` / `false`
- **HTML**: `data-select-on-focus`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.14 `ariaLabel`

- **Purpose**: Sets the ARIA label on the actual input.
- **Type / Default**: `string` / `""`
- **HTML**: `aria-label / data-aria-label`
- **Allowed values / range**: Any string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.15 `className`

- **Purpose**: Adds an optional class name to the DateBox root.
- **Type / Default**: `string` / `""`
- **HTML**: `data-class-name`
- **Allowed values / range**: Any string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.16 `theme`

- **Purpose**: Switches the surface/text/border/accent theme.
- **Type / Default**: `enum` / `default`
- **HTML**: `data-theme`
- **Allowed values / range**: default / dark / light / neon.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.17 `backgroundColor`

- **Purpose**: Overrides the input surface with theme, transparent, or a solid HEX color.
- **Type / Default**: `enum/color` / `theme`
- **HTML**: `data-background-color`
- **Allowed values / range**: theme / transparent / #RRGGBB.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.18 `appearance`

- **Purpose**: Switches the border/radius appearance.
- **Type / Default**: `enum` / `normal`
- **HTML**: `data-appearance`
- **Allowed values / range**: normal / flat / borderless.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.19 `inheritParent`

- **Purpose**: Follows parent width/height/background/text/radius/alignment.
- **Type / Default**: `boolean` / `false`
- **HTML**: `data-inherit-parent`
- **Allowed values / range**: true / false; parent style takes priority when true.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.20 `width`

- **Purpose**: Root width when used independently.
- **Type / Default**: `number px` / `320`
- **HTML**: `data-width`
- **Allowed values / range**: 40..4096px.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.21 `height`

- **Purpose**: Root height when used independently.
- **Type / Default**: `number px` / `44`
- **HTML**: `data-height`
- **Allowed values / range**: 24..1024px.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.22 `position`

- **Purpose**: Chooses one of nine root placements inside a CSS Grid parent.
- **Type / Default**: `enum` / `center`
- **HTML**: `data-position`
- **Allowed values / range**: top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.23 `inputAlign`

- **Purpose**: Controls editing text alignment.
- **Type / Default**: `enum` / `center`
- **HTML**: `data-input-align`
- **Allowed values / range**: auto / left / center / right; auto resolves to center.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.24 `inactiveDisplayFormat`

- **Purpose**: Changes only the unfocused display; committedValue remains ISO.
- **Type / Default**: `enum` / `ymd-slash`
- **HTML**: `data-inactive-display-format`
- **Allowed values / range**: jp-ymd / jp-ym / ymd-slash / md-slash.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.25 `fontSizeMode`

- **Purpose**: Uses automatic FIT or fixed font sizing.
- **Type / Default**: `enum` / `fit`
- **HTML**: `data-font-size-mode`
- **Allowed values / range**: fit / fixed.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.26 `fontSize`

- **Purpose**: Fixed font size used when fontSizeMode=fixed.
- **Type / Default**: `number px` / `14`
- **HTML**: `data-font-size`
- **Allowed values / range**: 8..96px.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.27 `pickerVisual`

- **Purpose**: Switches the DatePicker trigger visual.
- **Type / Default**: `enum` / `icon`
- **HTML**: `data-picker-visual`
- **Allowed values / range**: icon / emoji; delegated to #025 as fontawesome / emoji.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.28 `weekStart`

- **Purpose**: Controls the first weekday in the picker Calendar.
- **Type / Default**: `enum` / `auto`
- **HTML**: `data-week-start`
- **Allowed values / range**: auto / monday / sunday.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.29 `locale`

- **Purpose**: Sets picker Calendar locale without changing the DateBox ISO value format.
- **Type / Default**: `string/null` / `null`
- **HTML**: `data-locale`
- **Allowed values / range**: empty/null or a language-tag style string.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.30 `annotations`

- **Purpose**: Delegates date annotations to #025 and #024.
- **Type / Default**: `object/null` / `null`
- **HTML**: `data-annotations`
- **Allowed values / range**: JSON object in HTML, using date keys and annotation items.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.31 `showTasks`

- **Purpose**: Shows or hides task annotations in the picker.
- **Type / Default**: `boolean` / `true`
- **HTML**: `data-show-tasks`
- **Allowed values / range**: true / false.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.32 `activeBorderEffect`

- **Purpose**: Shows the #022 border effect while DateBox is focused.
- **Type / Default**: `enum` / `normal`
- **HTML**: `data-active-border-effect`
- **Allowed values / range**: normal / neon / spin / cross / blink.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.33 `activeEffectColor`

- **Purpose**: Sets the #022 effect color.
- **Type / Default**: `enum/color` / `theme`
- **HTML**: `data-active-effect-color`
- **Allowed values / range**: theme / #RRGGBB.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.34 `activeEffectDirection`

- **Purpose**: Sets #022 effect direction.
- **Type / Default**: `enum` / `clockwise`
- **HTML**: `data-active-effect-direction`
- **Allowed values / range**: clockwise / counterclockwise.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.35 `activeEffectSpeed`

- **Purpose**: Sets #022 effect speed.
- **Type / Default**: `enum` / `normal`
- **HTML**: `data-active-effect-speed`
- **Allowed values / range**: slow / normal / fast.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

### 3.36 `securityMaxLength`

- **Purpose**: Security length ceiling for editing text.
- **Type / Default**: `integer` / `64`
- **HTML**: `data-security-max-length`
- **Allowed values / range**: integer 10..4096; cannot be reduced below current editing length.
- **Invalid input**: the runtime rejects values outside this contract and preserves the previous safe state.
- **Related**: inspect the resolved value with `BoneDateBox.getOptions()` / `setOptions()`.

## 4. Date/range/step

- Values are null or real strict `YYYY-MM-DD` dates.
- min/max affect DateBox validation and picker range.
- step is measured in days from min or 1970-01-01; `any` disables step validation.

## 5. Theme / Appearance / Background

- Themes: default / dark / light / neon.
- Appearance: normal / flat / borderless.
- backgroundColor: theme / transparent / #RRGGBB.

## 6. Inactive display / Font

- jp-ymd / jp-ym / ymd-slash / md-slash change display only; committedValue remains ISO.
- fontSizeMode=fit auto-sizes 8..96px; fixed uses fontSize 8..96px.

## 7. Picker / Calendar

- Delegates picker options to #025 DatePicker and #024 Calendar.
- pickerVisual: icon / emoji; weekStart: auto / monday / sunday.

## 8. Position / parent inheritance

- All nine positions use CSS Grid `justify-self / align-self`.
- inheritParent stretches to parent style and overrides self layout settings.

## 9. Active Border Effect

- Effects: normal / neon / spin / cross / blink; directions clockwise/counterclockwise; speeds slow/normal/fast.

## 10. JavaScript-only callbacks (12)

### `onInput`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onInput: detail => console.log(detail)})`.

### `onChange`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onChange: detail => console.log(detail)})`.

### `onCommit`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onCommit: detail => console.log(detail)})`.

### `onInvalid`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onInvalid: detail => console.log(detail)})`.

### `onFocus`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onFocus: detail => console.log(detail)})`.

### `onBlur`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onBlur: detail => console.log(detail)})`.

### `onReset`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onReset: detail => console.log(detail)})`.

### `onInAccepted`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onInAccepted: detail => console.log(detail)})`.

### `onInRejected`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onInRejected: detail => console.log(detail)})`.

### `onSecurityRejected`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onSecurityRejected: detail => console.log(detail)})`.

### `onDeliveryState`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onDeliveryState: detail => console.log(detail)})`.

### `onDelivery`

- Fires at the corresponding DateBox runtime event.
- Common payload: componentId/componentName/version/boneId/boneType plus event-specific fields.
- Example: `BoneDateBox.create(bone, {onDelivery: detail => console.log(detail)})`.

## 11. Operations / Validation / Security

- validateValue() checks a value without an instance; validate() checks current editingValue.
- Security rejects unsafe access/type/text before normal validation.
- securityMaxLength is 10..4096.
- Joint IN reads only own data properties; accessors and Proxy traps are rejected.

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

1. targetReady=false queues committed OUT in WAIT.
2. Switching ready=true flushes in FIFO order.
3. guard rejection enters BLOCKED and prevents delivery.
4. clearOutputBlock() clears the block.

## 13. Public API — all 36

Individual APIs use H4 headings to keep the TOC readable. Signatures below match the real `BoneDateBox v1.0.22` implementation.

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

- **Purpose**: Returns a clone of all 36 default properties.
- **Arguments**: None.
- **Return / state effect**: A cloned options object; no runtime state change.
- **Example**: `const defaults = BoneDateBox.defaults();`

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

- **Purpose**: Validates and fills an options object according to the DateBox contract.
- **Arguments**: `options`: plain object. Missing values use defaults.
- **Return / state effect**: A frozen normalized object; no instance change.
- **Example**: `const options = BoneDateBox.normalizeOptions({theme:"dark", width:360});`

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

- **Purpose**: Validates a date without creating an instance, including required/min/max/step.
- **Arguments**: `value`: null/empty/`YYYY-MM-DD`; `options`: validation rules.
- **Return / state effect**: Validation result object; invalid options are returned as `valid:false` rather than thrown.
- **Example**: `const check = BoneDateBox.validateValue("2026-08-30", {min:"2026-08-01", max:"2026-08-31", step:1});`

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

- **Purpose**: Checks strict `YYYY-MM-DD` format and real calendar validity.
- **Arguments**: `value`: string or null.
- **Return / state effect**: Inspection object; no timezone conversion.
- **Example**: `const info = BoneDateBox.inspectIsoDate("2026-02-28");`

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

- **Purpose**: Formats an ISO date for the unfocused display layer.
- **Arguments**: `value`, `format`: `jp-ymd|jp-ym|ymd-slash|md-slash`.
- **Return / state effect**: Formatted string; source value is unchanged.
- **Example**: `const text = BoneDateBox.formatInactiveDisplay("2026-08-30", "jp-ymd");`

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

- **Purpose**: Converts an ISO date to an integer day number used by step calculations.
- **Arguments**: `iso`: a real `YYYY-MM-DD`.
- **Return / state effect**: Integer; no DOM change.
- **Example**: `const dayNo = BoneDateBox.daysFromCivil("2026-08-30");`

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

- **Purpose**: Creates a real DateBox DOM from Bone input and options.
- **Arguments**: `boneInput`: `{id,type,value}` plain object; `options`: DateBox options.
- **Return / state effect**: `.bone-datebox` root Element; also creates the internal #025 DatePicker.
- **Example**: `const box = BoneDateBox.create({id:"date-1", type:"DATEBOX", value:"2026-08-30"}, {theme:"dark"});`

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

- **Purpose**: Checks whether the exact Element is a registered DateBox root.
- **Arguments**: `element`.
- **Return / state effect**: Boolean; a child input returns false.
- **Example**: `const ok = BoneDateBox.isInstance(box);`

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

- **Purpose**: Returns the internal native date input.
- **Arguments**: DateBox root or internal element.
- **Return / state effect**: HTMLInputElement.
- **Example**: `const input = BoneDateBox.getInput(box);`

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

- **Purpose**: Returns the internal #025 DatePicker instance.
- **Arguments**: DateBox root or internal element.
- **Return / state effect**: #025 DatePicker root Element.
- **Example**: `const picker = BoneDateBox.getDatePicker(box);`

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

- **Purpose**: Returns the committed value.
- **Arguments**: DateBox instance.
- **Return / state effect**: `YYYY-MM-DD` or null.
- **Example**: `const value = BoneDateBox.getValue(box);`

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

- **Purpose**: Returns the current editing string.
- **Arguments**: DateBox instance.
- **Return / state effect**: String; may differ from committed value before commit.
- **Example**: `const editing = BoneDateBox.getEditingValue(box);`

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

- **Purpose**: Explicitly returns the committed value.
- **Arguments**: DateBox instance.
- **Return / state effect**: `YYYY-MM-DD` or null.
- **Example**: `const committed = BoneDateBox.getCommittedValue(box);`

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

- **Purpose**: Returns a clone of current Bone `{id,type,value}`.
- **Arguments**: DateBox instance.
- **Return / state effect**: Bone clone.
- **Example**: `const bone = BoneDateBox.getBone(box);`

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

- **Purpose**: Returns resolved current options.
- **Arguments**: DateBox instance.
- **Return / state effect**: Options clone; editing it does not update the instance.
- **Example**: `const options = BoneDateBox.getOptions(box);`

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

- **Purpose**: Returns a snapshot of editing/validation/security/delivery/display state.
- **Arguments**: DateBox instance.
- **Return / state effect**: State clone.
- **Example**: `const state = BoneDateBox.getState(box);`

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

- **Purpose**: Safely updates both editing and committed values directly.
- **Arguments**: `value`; optional `{emit,source}`.
- **Return / state effect**: New value; date format/security are enforced. min/max/step are reflected in validation state.
- **Example**: `BoneDateBox.setValue(box, "2026-09-01", {emit:false, source:"api"});`

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

- **Purpose**: Partially updates existing options.
- **Arguments**: `patch`: plain object; use `setValue` for value changes.
- **Return / state effect**: Updated options clone; invalid patch is rejected without applying it.
- **Example**: `const options = BoneDateBox.setOptions(box, {theme:"light", width:360});`

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

- **Purpose**: Applies another Bone object to the instance.
- **Arguments**: `boneInput`: valid `{id,type,value}`.
- **Return / state effect**: Applied Bone clone; no commit event.
- **Example**: `const bone = BoneDateBox.applyBone(box, {id:"date-2", type:"DATEBOX", value:"2026-09-15"});`

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

- **Purpose**: Security-checks and applies untrusted #002 Joint input.
- **Arguments**: Payload with own-data `value`, optional `source/state`.
- **Return / state effect**: Accepted/rejected result; rejected input preserves previous value.
- **Example**: `const result = BoneDateBox.applyJointInput(box, {value:"2026-09-20", source:"joint-1", state:{status:"ready"}});`

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

- **Purpose**: Builds an OUT payload from committed value without delivering it.
- **Arguments**: Optional source string.
- **Return / state effect**: Frozen payload including Bone and validation.
- **Example**: `const payload = BoneDateBox.buildOutput(box, "manual");`

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

- **Purpose**: Connects a #002 Delivery Channel for WAIT/FIFO/BLOCKED.
- **Arguments**: `{targetReady,guard,deliver,onStateChange}`.
- **Return / state effect**: Initial delivery state snapshot.
- **Example**: `BoneDateBox.connectOutput(box, {targetReady:false, deliver:payload => console.log(payload)});`

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

- **Purpose**: Disposes the OUT channel and returns to unbound.
- **Arguments**: DateBox instance.
- **Return / state effect**: true.
- **Example**: `BoneDateBox.disconnectOutput(box);`

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

- **Purpose**: Changes target readiness; false queues commits in WAIT.
- **Arguments**: Boolean ready; channel must be connected.
- **Return / state effect**: Updated delivery state; setting true flushes FIFO queue.
- **Example**: `const state = BoneDateBox.setTargetReady(box, true);`

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

- **Purpose**: Clears a BLOCKED delivery state.
- **Arguments**: Connected DateBox.
- **Return / state effect**: Updated delivery state.
- **Example**: `const state = BoneDateBox.clearOutputBlock(box);`

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

- **Purpose**: Returns current delivery state.
- **Arguments**: DateBox instance.
- **Return / state effect**: Unbound snapshot or #002 state clone.
- **Example**: `const state = BoneDateBox.getOutputState(box);`

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

- **Purpose**: Returns the current WAIT FIFO queue.
- **Arguments**: DateBox instance.
- **Return / state effect**: Queue clone or empty array when unbound.
- **Example**: `const queue = BoneDateBox.getOutputQueue(box);`

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

- **Purpose**: Validates editing value and commits only when valid.
- **Arguments**: Optional source string.
- **Return / state effect**: Committed result or `not-editable|invalid|unchanged`; successful commit also delivers OUT.
- **Example**: `const result = BoneDateBox.commit(box, "save-button");`

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

- **Purpose**: Restores editing value from committed value.
- **Arguments**: DateBox instance.
- **Return / state effect**: Committed value and emits reset event.
- **Example**: `const value = BoneDateBox.reset(box);`

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

- **Purpose**: Validates current editing value and refreshes validation UI.
- **Arguments**: DateBox instance.
- **Return / state effect**: Validation clone; does not commit.
- **Example**: `const validation = BoneDateBox.validate(box);`

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

- **Purpose**: Focuses the internal date input.
- **Arguments**: DateBox instance.
- **Return / state effect**: true; active border follows focus.
- **Example**: `BoneDateBox.focus(box);`

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

- **Purpose**: Blurs the internal date input.
- **Arguments**: DateBox instance.
- **Return / state effect**: true; normal blur handler applies `blurCommit`.
- **Example**: `BoneDateBox.blur(box);`

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

- **Purpose**: Calls select on the internal date input.
- **Arguments**: DateBox instance.
- **Return / state effect**: No return value.
- **Example**: `BoneDateBox.select(box);`

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

- **Purpose**: Sets manual feedback that overrides automatic validation/security feedback.
- **Arguments**: `{level,message}` plain object.
- **Return / state effect**: Applied feedback clone.
- **Example**: `BoneDateBox.setFeedback(box, {level:"warning", message:"Please confirm"});`

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

- **Purpose**: Re-reads parent style when `inheritParent=true`.
- **Arguments**: DateBox instance.
- **Return / state effect**: Parent style snapshot or null.
- **Example**: `const parentStyle = BoneDateBox.syncParentStyle(box);`

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

- **Purpose**: Disposes DatePicker/effect/observer/delivery/DOM.
- **Arguments**: DateBox instance.
- **Return / state effect**: true; the destroyed root is no longer an instance.
- **Example**: `BoneDateBox.destroy(box);`


## 14. Error Codes

Each entry explains when it occurs, an invalid example, the correction, and what is preserved on failure. Runtime and HTML Functional Class errors are separated.

### 14.1 Runtime errors — 50

- **`DATEBOX_022_DEPENDENCY_REQUIRED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_022_DEPENDENCY_REQUIRED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_022_DEPENDENCY_REQUIRED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_ANNOTATIONS_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_ANNOTATIONS_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_ANNOTATIONS_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_BACKGROUND_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_BACKGROUND_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_BACKGROUND_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_BONE_ID_TYPE_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_BONE_ID_TYPE_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_BONE_ID_TYPE_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_BONE_INPUT_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_BONE_INPUT_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_BONE_INPUT_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_CALLBACK_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_CALLBACK_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_CALLBACK_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_CONTROL_CHARACTER_REJECTED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_CONTROL_CHARACTER_REJECTED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_CONTROL_CHARACTER_REJECTED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DATEPICKER_TRIGGER_MISSING`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DATEPICKER_TRIGGER_MISSING` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DATEPICKER_TRIGGER_MISSING` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DATE_FORMAT_INVALID`**
  - **Meaning / trigger**: The date is not strict `YYYY-MM-DD`.
  - **Invalid example**: `"2026/08/30"`.
  - **Fix**: Use `"2026-08-30"`.
  - **On failure**: The invalid date is not committed.

- **`DATEBOX_DATE_INVALID`**
  - **Meaning / trigger**: The formatted date does not exist.
  - **Invalid example**: `"2026-02-30"`.
  - **Fix**: Use a real date such as `"2026-02-28"`.
  - **On failure**: The invalid date is not applied.

- **`DATEBOX_DEPENDENCY_CALENDAR_VERSION`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DEPENDENCY_CALENDAR_VERSION` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DEPENDENCY_CALENDAR_VERSION` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DEPENDENCY_CORE_MISSING`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DEPENDENCY_CORE_MISSING` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DEPENDENCY_CORE_MISSING` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DEPENDENCY_DATEPICKER_MISSING`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DEPENDENCY_DATEPICKER_MISSING` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DEPENDENCY_DATEPICKER_MISSING` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DEPENDENCY_DATEPICKER_VERSION`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DEPENDENCY_DATEPICKER_VERSION` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DEPENDENCY_DATEPICKER_VERSION` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DEPENDENCY_JOINT_MISSING`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DEPENDENCY_JOINT_MISSING` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DEPENDENCY_JOINT_MISSING` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_DOM_REQUIRED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_DOM_REQUIRED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_DOM_REQUIRED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_EDITING_TYPE_REJECTED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_EDITING_TYPE_REJECTED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_EDITING_TYPE_REJECTED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_EFFECT_COLOR_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_EFFECT_COLOR_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_EFFECT_COLOR_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_EXISTING_VALUE_SECURITY_LIMIT`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_EXISTING_VALUE_SECURITY_LIMIT` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_EXISTING_VALUE_SECURITY_LIMIT` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_FEEDBACK_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_FEEDBACK_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_FEEDBACK_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_INSTANCE_NOT_FOUND`**
  - **Meaning / trigger**: The supplied element cannot be resolved to a DateBox instance.
  - **Invalid example**: Pass an unrelated element or destroyed root.
  - **Fix**: Use the root returned by create or a resolvable child.
  - **On failure**: The requested API does nothing.

- **`DATEBOX_IN_REJECTED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_IN_REJECTED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_IN_REJECTED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_JOINT_INPUT_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_JOINT_INPUT_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_JOINT_INPUT_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_JOINT_SOURCE_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_JOINT_SOURCE_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_JOINT_SOURCE_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_JOINT_STATE_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_JOINT_STATE_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_JOINT_STATE_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_JOINT_STATE_REASON_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_JOINT_STATE_REASON_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_JOINT_STATE_REASON_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_JOINT_STATE_STATUS_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_JOINT_STATE_STATUS_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_JOINT_STATE_STATUS_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_LOCALE_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_LOCALE_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_LOCALE_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_MAX`**
  - **Meaning / trigger**: The value is later than `max`.
  - **Invalid example**: max 2026-08-31 with value 2026-09-01.
  - **Fix**: Choose a date on/before max or widen max.
  - **On failure**: Commit is rejected.

- **`DATEBOX_MIN`**
  - **Meaning / trigger**: The value is earlier than `min`.
  - **Invalid example**: min 2026-08-01 with value 2026-07-31.
  - **Fix**: Choose a date on/after min or widen min.
  - **On failure**: Commit is rejected.

- **`DATEBOX_MIN_MAX_INVALID`**
  - **Meaning / trigger**: The option range has min later than max.
  - **Invalid example**: min 2026-12-31, max 2026-01-01.
  - **Fix**: Make min <= max.
  - **On failure**: create/setOptions rejects the new range.

- **`DATEBOX_OPTIONS_INVALID`**
  - **Meaning / trigger**: Options/patch is not a plain object.
  - **Invalid example**: `setOptions(box,"dark")`.
  - **Fix**: Use `setOptions(box,{theme:"dark"})`.
  - **On failure**: Options are not changed.

- **`DATEBOX_OPTION_ENUM_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OPTION_ENUM_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OPTION_ENUM_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OPTION_STRING_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OPTION_STRING_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OPTION_STRING_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OUTPUT_CHANNEL_UNBOUND`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OUTPUT_CHANNEL_UNBOUND` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OUTPUT_CHANNEL_UNBOUND` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OUTPUT_DELIVER_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OUTPUT_DELIVER_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OUTPUT_DELIVER_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OUTPUT_GUARD_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OUTPUT_GUARD_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OUTPUT_GUARD_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OUTPUT_OPTIONS_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OUTPUT_OPTIONS_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OUTPUT_OPTIONS_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_OUTPUT_STATE_CALLBACK_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_OUTPUT_STATE_CALLBACK_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_OUTPUT_STATE_CALLBACK_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_REQUIRED`**
  - **Meaning / trigger**: `required=true` but the value is empty.
  - **Invalid example**: Commit an empty required DateBox.
  - **Fix**: Enter a real ISO date or disable required.
  - **On failure**: Validation fails and committed value is preserved.

- **`DATEBOX_SECURITY_LENGTH_EXCEEDED`**
  - **Meaning / trigger**: Input exceeds `securityMaxLength`.
  - **Invalid example**: More characters than the configured limit.
  - **Fix**: Reduce input or increase the limit within 10..4096.
  - **On failure**: Security rejects input and preserves committed value.

- **`DATEBOX_SECURITY_LIMIT_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_SECURITY_LIMIT_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_SECURITY_LIMIT_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_SIZE_INVALID`**
  - **Meaning / trigger**: A size option is outside its allowed range.
  - **Invalid example**: width 20, height 2000, or fontSize 100.
  - **Fix**: Use width 40..4096, height 24..1024, fontSize 8..96.
  - **On failure**: The option update is rejected.

- **`DATEBOX_STEP`**
  - **Meaning / trigger**: The value does not match the configured day step.
  - **Invalid example**: min 2026-08-01, step 2, value 2026-08-02.
  - **Fix**: Choose a matching date or set step to `any`.
  - **On failure**: Commit is rejected.

- **`DATEBOX_STEP_INVALID`**
  - **Meaning / trigger**: step is not `any` or an integer day count 1..365000.
  - **Invalid example**: step 0 or 1.5.
  - **Fix**: Use 1, 7, or `any`.
  - **On failure**: The option update is rejected.

- **`DATEBOX_UNPAIRED_SURROGATE_REJECTED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_UNPAIRED_SURROGATE_REJECTED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_UNPAIRED_SURROGATE_REJECTED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_UNTRUSTED_ACCESSOR_REJECTED`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_UNTRUSTED_ACCESSOR_REJECTED` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_UNTRUSTED_ACCESSOR_REJECTED` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_UNTRUSTED_PROPERTY_MISSING`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_UNTRUSTED_PROPERTY_MISSING` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_UNTRUSTED_PROPERTY_MISSING` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_UNTRUSTED_PROPERTY_TRAP`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_UNTRUSTED_PROPERTY_TRAP` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_UNTRUSTED_PROPERTY_TRAP` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

- **`DATEBOX_UNTRUSTED_RECORD_INVALID`**
  - **Meaning / trigger**: The runtime rejected a value, option, dependency, security input, or delivery operation under the `DATEBOX_UNTRUSTED_RECORD_INVALID` contract.
  - **Invalid example**: Use a value that violates the `DATEBOX_UNTRUSTED_RECORD_INVALID` condition.
  - **Fix**: Correct the related property/type/dependency according to the DateBox contract and retry.
  - **On failure**: The failed operation is rejected; existing safe state is not silently replaced.

### 14.2 HTML Functional Class integration errors — 5

- **`DATEBOX_FUNCTIONAL_CLASS_RUNTIME_MISSING`**
  - **Meaning / trigger**: BoneDateBox v1.0.22 is unavailable before `bf-datebox` mounts.
  - **Fix**: Load `bone-datebox.js` first.
  - **On failure**: mount/refresh is rejected without silently replacing an existing runtime value.

- **`DATEBOX_FUNCTIONAL_CLASS_ANCHOR_INVALID`**
  - **Meaning / trigger**: mount received a non-Element or an Element without `bf-datebox`.
  - **Fix**: Pass an Element with class `bf-datebox`.
  - **On failure**: mount/refresh is rejected without silently replacing an existing runtime value.

- **`DATEBOX_FUNCTIONAL_CLASS_BOOLEAN_INVALID`**
  - **Meaning / trigger**: A Boolean HTML value is not recognized.
  - **Fix**: Use true/false, 1/0, yes/no, or on/off.
  - **On failure**: mount/refresh is rejected without silently replacing an existing runtime value.

- **`DATEBOX_FUNCTIONAL_CLASS_JSON_INVALID`**
  - **Meaning / trigger**: `data-annotations` is not a JSON object.
  - **Fix**: Use a JSON object string, not an array.
  - **On failure**: mount/refresh is rejected without silently replacing an existing runtime value.

- **`DATEBOX_FUNCTIONAL_CLASS_VALUE_INVALID`**
  - **Meaning / trigger**: The HTML value is neither empty nor `YYYY-MM-DD`.
  - **Fix**: Use `value="2026-08-30"` or empty.
  - **On failure**: mount/refresh is rejected without silently replacing an existing runtime value.


## 15. Responsibility boundaries

- #030 owns ISO date editing/validation/commit/security/OUT.
- #025 owns picker panel/trigger and selected-date return.
- #024 owns calendar rendering/annotations/week start.
- #022 owns border effects.
- #040 owns color selection UI.
- #002 owns Joint delivery WAIT/FIFO/BLOCKED.

## 16. Troubleshooting

- DOC missing: verify DOC-0030 source contract and ja/en files.
- Raw sample marker: verify the component doc integration JS.
- Picker missing: verify #025/#024 dependencies.
- Position requires a CSS Grid parent.


### DatePicker Calendar near viewport edges

Calendar display for `bf-datebox` is delegated to #025 DatePicker v1.0.10 or a later compatible 1.0.x patch. The panel normally opens below the DateBox. If there is not enough room for `calendarHeight`, it flips above. If neither side can contain the panel completely, it is clamped into the viewport and is repositioned on scroll or resize. When DOC Live Samples are removed by closing or rerendering the guide, their DateBox instances are destroyed so body-owned DatePicker panels and global listeners are not left behind.