# Bone Flow #029 - NumberBox

Version: 1.0.18  
Status: Development  
Specification: 029-NumberBox-Specification-v1.0.md

## 概要

#029 NumberBox は単一行の数値 Input UI。#027 Bone TextBox v1.0.13 の構成を基準に、数値 value 契約、`min / max / step`、計算小数桁、表示小数桁、3桁カンマ、丸め方式、右寄せ入力、伝票モードを NumberBox 固有差分として持つ。

## 正式依存

- #001 Bone Core v1.0.0 — Runtime required
- #002 Bone Joint v1.1.36 — Runtime required / WAIT・FIFO・BLOCKED・Joint描画
- #022 Bone Hover Border Effect formal Runtime API — Runtime required / Active時の枠Effect描画
- #017 Bone Text — Runtime 非依存、表示責務・Property・配置の基準のみ
- #027 Bone TextBox v1.0.13 — 単一行 Input UI 設計基準
- #028 Bone TextArea v1.0.0 — Security / Joint 配送確認基準

## NumberBox固有 Property

- `min`
- `max`
- `step`
- `decimalPlaces`: 計算上の小数桁数（0..15 / null）
- `displayDecimalPlaces`: 表示上の小数桁数（0..20 / null）
- `useGrouping`: 3桁カンマ表示
- `roundingMode`: `half-up` / `up` / `down`

### 表示例

`value=1000`, `displayDecimalPlaces=2`, `useGrouping=true` → **1,000.00**

### 丸め

- 四捨五入: `half-up`
- 切り上げ: `up`（0から遠ざかる）
- 切り捨て: `down`（0へ近づく）

表示書式は OUT の number を変更しない。


## 入力時文字位置

NumberBox の入力時文字位置は **右寄せがデフォルト**。`inputAlign=right` を標準値とする。`auto` も NumberBox では数値入力として右寄せに解決する。

## 伝票モード

`voucherMode=true` で伝票表示を使用する。通常のデフォルトは `false` で、通常入力表示を維持する。

- フォーカス中: 通常の数値入力モード
- フォーカスロスト: committed value を伝票表示
- 伝票表示中のマウスオーバー: 入力モードへ切替
- 伝票表示は要素の利用可能幅を設定桁数で均等分割し、フォント幅ではなく要素幅基準で各桁を配置
- 伝票モードではカンマ文字を表示せず、3桁区切りを太い罫線で表現
- 小数区切りは専用罫線で表現し、デフォルト赤
- `voucherYenMark`: 伝票表示の数値直前へ `￥` を表示。デフォルト `false`。表示専用で value / OUT は変更しない
- `voucherGridLines`: 伝票罫線の表示/非表示
- `voucherAutoFontSize`: フォントサイズ自動調整。デフォルト `true`
- `voucherFontSize`: 自動調整OFF時の固定フォントサイズ
- `voucherNegativeMark`: `minus` / `triangle` / `none`
- `voucherNegativeRed`: マイナス値を赤文字表示
- `voucherHoverEdit`: マウスオーバーで入力モードへ切替。デフォルト `true`

伝票表示は表示専用であり Bone.value / OUT value を変更しない。

テスト画面には、実際のフォーカスロストを再現しにくい場合のため **「✓ フォーカスロスト → 伝票表示を再現」** ボタンと **「入力モードを再現」** ボタンを持つ。

## Commit / Security / Joint

Enter / blur commit、Escape rollback、IME、readonly / disabled、Untrusted IN、Security Test独立は #027 / #028 基準を維持する。

配送は `BoneJoint.createDeliveryChannel()` に委譲し、丸め確定済み numeric snapshot を WAIT / FIFO / BLOCKED 契約で配送する。

## Test URL

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

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


## Test Isolation

テストインスタンスは Preview / Security Sandbox / Delivery Sandbox の3つに完全分離する。Untrusted IN / Security Test および WAIT/BLOCK Test は Preview 本体を直接操作しない。これらのテスト実行後も Preview の value、表示モード、伝票モード設定は保持される。
## v1.0.11 伝票罫線と区切り記号

- `voucherGridLines=true`：3桁区切りと小数区切りは罫線で表現し、`,` と `.` は表示しない。
- `voucherGridLines=false`：罫線を非表示にし、同じ論理位置へ3桁区切り`,` と小数区切り`.`を表示する。
- 固定桁の先頭空白領域には不要な`,`を表示しない。


## v1.0.15 個別対応 — 伝票￥表示

伝票モードに `￥記号を表示（表示のみ・値は変更しません）` を追加。ON時は `￥1,000` のように表示側だけへ `￥` を付ける。NumberBox の正式 value / OUT value は数値のまま変更しない。


## v1.0.16 個別対応 — 伝票￥独立マス

伝票罫線ON時の `￥` を数字と同じマスに置かず、`｜￥｜1｜0｜0｜0｜` のように独立した1マスとして表示する。値 / OUT は従来どおり数値のまま変更しない。


## v1.0.18 #022 Active Border Effect正式委譲

- Active時の枠Effect独自描画を#029から削除し、完成済み #022 Bone Hover Border Effect formal Runtime APIへ委譲。
- Triggerは `active` 固定。NumberBox focusでActive、blurで解除。
- Effectは `normal / neon / spin / cross / blink`。
- `activeEffectColor / activeEffectDirection / activeEffectSpeed` は#022へ渡す。
- NumberBox固有の数値処理、伝票モード、￥独立マス、Security、Joint、WAIT/BLOCK、接続イメージ、Completionは変更しない。


## v1.0.18 NumberBox Property / Dependency update

- #022 is checked against the actual formal API and its published effects, not a hard-coded file path or fixed minor version. Older cross maps to corner if only the newer formal effect catalog is available. Unsupported effects fail explicitly.
- #040 ColorPicker is used for Property color selection. Background and parent background support solid and normalized linear gradient; effect, text and voucher line colors remain solid-only because their rendering contract requires a stroke/text color.
- #118 Transition is passed into the actual #040 Caller OPEN/CLOSE path using transition/direction/speed/respectReducedMotion. The test-page audit reports real results and is not pre-marked PASS.
- The normal HTML Functional Class remains `bf-numberbox`; it preserves numerical, voucher and Joint contracts. The runtime/Property bridge is test-page-only, not a new unsupported HTML attribute.
- New package status remains Development / Candidate until user localhost verification.