# Bone Flow #033 - Checkbox

Version: 1.0.11  
Status: Development  
Specification: v1.0 Frozen

## 概要

#033 Checkbox は boolean `value` を入力・編集・commitするInput UI。
#027 TextBox v1.0.22 の完成済みInput QA構造を基準にし、Checkbox固有差分だけを実装する。

## 正式依存

- #001 Bone Core v1.0.0: Bone正規化
- #002 Bone Joint v1.1.36: 接続、Delivery Channel、WAIT FIFO、BLOCKED、Joint描画
- #017 Bone Text: #020 Label内部の文字描画
- #020 Bone Label: CheckboxラベルのRuntime描画

## Boolean Contract

- Bone `type`: `CHECKBOX`
- Bone `value`: booleanのみ
- `getValue()` / `getChecked()` はcommitted booleanを返す
- `getEditingValue()` と `getCommittedValue()` を分離
- `setValue()` / `setChecked()` はbooleanのみ受理
- string / number / objectをbooleanへ強制変換しない
- OUTの `value` / `checked` / `bone.value` もboolean

## Checkbox固有Property

- `required`: trueの場合はchecked=trueが必要
- `readonly`: ユーザー変更/commitを禁止
- `disabled`: 操作/commitを禁止
- `changeCommit`: 既定true。通常のcheckbox changeでcommit

## Input UI共通Property

#027基準を維持する。

- 日本語 / English Property
- Theme: Default / Dark / Light / Neon
- Background: theme / transparent / HEX
- Appearance: standard / outline / filled / rounded / circle / neon / minimal / inherit(legacy alias support: normal / flat / borderless)
- Element click toggle: `elementClickToggle` (`false` default). ON allows clicking inside the Checkbox control area to toggle; OFF limits toggle to the checkbox itself. readonly / disabled remain non-editable.
- Label: `label`（空文字は非表示）
- Label spacing: `labelGap`（0～64px / 既定8px）
- Label font size: `labelFontSize`（8～56px / 既定14px）。#020 `textStyle.fontSize`へ渡し、Checkbox本体サイズも連動
- Parent Dependency
- width / height
- position 9方向
- inputAlign: auto / left / center / right
- Active Border Effect: normal / neon / blink
- Effect color / direction / speed

## Security

`applyJointInput()` はUntrusted INをplain dataとして検査する。
boolean以外は拒否し、暗黙のboolean変換を行わない。getter / Proxyによる安全でない読取も拒否し、直前のcommittedValueを保持する。

## OUT Delivery

`connectOutput()` は #002 `BoneJoint.createDeliveryChannel()` を利用する。#033自身に独自Queue/Retryを持たせない。

- READY: 即配送
- WAITING: Joint側FIFO待機
- BLOCKED: 接続維持 / Target配送停止

## 接続イメージ

`bone-checkbox.html` は #002 Bone Jointを使い、正常IN/OUT・IN不存在・OUT不存在・型不一致IN・型不一致OUTの5ケースを実描画する。

## Runtime QA

テストページ:

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

Smoke 23件 / Validation 29件をBrowser Runtimeで実行し、さらにWAIT 3秒動作とBLOCKEDのTarget未配送を目視確認する。

このv1.0.11 ZIP作成時点ではBrowser Runtimeは未実施。ユーザーlocalhost ALL PASS前にCompleted扱いしない。

## v1.0.1 Parent Dependency correction

- 親要素に依存がONでもCheckbox本体を消さない。
- 親の幅・高さ・背景・文字色・角丸への追従は維持する。
- Checkbox本体は既存の24pxカスタムチェック表示を維持し、親のleft / center / right配置へ追従する。


## v1.0.3 Connection Image correction

- 接続イメージ専用CSSに残っていた `bone-text-*` セレクタを `bone-checkbox-*` へ修正。
- 接続カード / flow / node / diagnostic / legend のレイアウトを #033 HTML class と一致させた。
- Checkbox本体、Parent Dependency、Security、WAIT/BLOCKED、Completion契約は変更しない。


## v1.0.3 Appearance variants

- Added 7 visible appearance presets: `standard / outline / filled / rounded / circle / neon / minimal`.
- Kept legacy compatibility aliases: `normal -> standard`, `flat -> outline`, `borderless -> minimal`.
- No changes to Checkbox boolean contract, Security, WAIT/BLOCKED, connection image, or Completion flow.


## v1.0.4 Element click toggle

- Added `elementClickToggle` boolean Property.
- Default: `false` (existing behavior preserved).
- `true`: clicking inside the Checkbox control area toggles the checked state.
- `false`: only the checkbox glyph toggles the checked state.
- readonly / disabled block element-area toggling.


## v1.0.5 Label / spacing

- `label`: Checkbox要素内へ表示する文字列。空文字では非表示。
- `labelGap`: Checkbox本体とラベル間の余白(px)。0～64、既定8。
- `elementClickToggle=true` の場合、ラベルを含む要素内クリックでON/OFF切替。OFFではラベル表示のみで、ラベル/余白クリックによる切替はしない。
- readonly / disabled の既存切替禁止契約を維持。


## v1.0.6 #020 Label delegation / size linkage

- Checkbox label rendering now delegates to `#020 Bone Label` instead of a private text span.
- `#020 Bone Label` continues to delegate label text rendering to `#017 Bone Text`.
- Added `labelFontSize` (8–56px, default 14px).
- Checkbox glyph size follows the label font size. 14px => 24px, 28px => 48px.
- `labelGap` and `elementClickToggle` behavior are retained.


## v1.0.10 Runtime QA geometry / #020 public API correction

- Browser geometry Validation用 `qa-sandbox` を `hidden` から画面外レンダリングへ変更し、`getBoundingClientRect()` が0になる誤判定を修正。
- #020 Label実委譲のValidationは内部DOM class決め打ちをやめ、公開API `BoneLabel.getOutput()` / `getChildOutput()` で #020 → #017 を確認する。
- Checkboxサイズは #020 Label OUTの実 `textStyle.fontSize` を基準に連動する。
- Checkbox boolean / Security / Joint / WAIT / BLOCKED / Connection Image / Completion契約は変更しない。


## v1.0.10 Runtime QA correction

- S14 now performs deterministic #002 Joint WAIT and BLOCKED rendering and verifies both the Joint path and the corresponding waiting/blocked marker before restoring connected display.
- V27 verifies the #033 -> #020 Label public boundary, visible label text, labelGap, and aria-labelledby association without depending on a particular internal #020 -> #017 output object shape.
- Checkbox behavior, appearance, parent dependency, Security, Delivery, Completion, label sizing, and click behavior are unchanged.


## v1.0.11
Active Border Effect描画を #022 Bone Hover Border Effect v1.0.1へ委譲。Checkbox固有契約は変更なし。