DOC-0029 — NumberBox 操作・HTML Functional Class

0. 文書情報

• UI: UI-029 / Component: #029 NumberBox
• Runtime: BoneNumberBox v1.0.17
• DOC Version: 1.0.2
• HTML Functional Class: bf-numberbox
• Shared DOC Runtimeは参照のみで変更しません。

1. NumberBoxの役割

#029 NumberBoxは、数値を1行で安全に入力し、「編集中の文字列」「確定済みnumber/null」「見た目用の整形表示」を分けて扱うInput UIです。3桁カンマ、表示小数桁、￥、伝票罫線、負数記号は原則表示だけです。decimalPlacesだけは確定値そのものを丸めます。

1.1 最初に覚える用語

• editingValue: 今入力している文字列です。例: "1e3"。
• committedValue: Validation/Securityを通って確定したnumberまたはnullです。Bone.valueとOUTはこれを使います。
• displayValue: 通常入力modeで見せる整形文字列です。3桁カンマや表示小数桁を含めてもcommittedValueは変わりません。
• voucherDisplayValue: 伝票mode専用の表示文字列です。￥・カンマ・△等は表示専用でOUTへ混ざりません。
• commit: editingValueを数値構文→丸め→required/min/max/stepの順で確認し、許可された時だけcommittedValueを更新する操作です。
• Validation: required / min / max / stepなど「業務上その数値を受け付けるか」の検査です。
• Security: Joint INの型、NaN/Infinity、危険な文字列、長さ上限など「Runtimeへ安全に入れられるか」の検査です。Validationより前段の防御です。

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

1. 数値を入力すると、最初にeditingValueだけが変わります。
2. DefaultではEnterまたはblurでcommitします。IME composition中のEnterはcommitしません。
3. commit時にdecimalPlacesの丸め後、required/min/max/stepを検査します。
4. invalidならcommitInvalid=falseでは直前committedValueを維持します。
5. Escapeまたはreset()で未確定編集を直前committedValueへ戻せます。
6. voucherMode=trueならfocus外で伝票表示、focus/showInputModeで編集表示へ切り替わります。

1.3 disabled と readonly

• disabled=true: focus・編集・commitを禁止します。
• readonly=true: 値は表示しますがユーザー編集とcommitを禁止します。
• どちらも既存committedValueを勝手に消しません。

1.4 Validation と Security

• min/max/step/required違反はValidation invalidです。commitInvalid=trueなら意図的にcommitを許可できます。
• numeric stringのJoint IN、NaN/Infinity、getter/Proxy攻撃、制御文字、長さ超過はSecurity拒否です。commitInvalid=trueでも通しません。

2. HTML Functional Class bf-numberbox

2.1 最小利用

<input class="bf-numberbox" type="number" value="1000">

このinputは宣言用です。mount後は非表示になり、隣に実BoneNumberBox v1.0.17を生成します。Runtimeでcommitが成功すると、確定numberを元inputのvalueへ戻します。

2.2 設定付き利用

<input class="bf-numberbox" type="number" value="-1234567.89" data-display-decimal-places="2" data-use-grouping="true" data-voucher-mode="true" data-voucher-yen-mark="true" data-voucher-negative-red="true">

2.3 設定 → 実表示サンプル

各カードの「この設定で変わること」は、直下の実Runtime表示と一致する内容だけを記載します。位置系サンプルは正式Previewと同じGrid親、親継承サンプルは明示した親styleを使用します。

Number / validation

[[BF-NUMBERBOX-SAMPLE:basic]] [[BF-NUMBERBOX-SAMPLE:minmax]] [[BF-NUMBERBOX-SAMPLE:decimal2]] [[BF-NUMBERBOX-SAMPLE:display2]] [[BF-NUMBERBOX-SAMPLE:grouping]] [[BF-NUMBERBOX-SAMPLE:roundHalf]] [[BF-NUMBERBOX-SAMPLE:roundUp]] [[BF-NUMBERBOX-SAMPLE:roundDown]]

Theme / appearance

[[BF-NUMBERBOX-SAMPLE:themeDefault]] [[BF-NUMBERBOX-SAMPLE:themeDark]] [[BF-NUMBERBOX-SAMPLE:themeLight]] [[BF-NUMBERBOX-SAMPLE:themeNeon]] [[BF-NUMBERBOX-SAMPLE:bgTransparent]] [[BF-NUMBERBOX-SAMPLE:bgRgba]] [[BF-NUMBERBOX-SAMPLE:appNormal]] [[BF-NUMBERBOX-SAMPLE:appFlat]] [[BF-NUMBERBOX-SAMPLE:appBorderless]] [[BF-NUMBERBOX-SAMPLE:appInherit]]

Alignment / state

[[BF-NUMBERBOX-SAMPLE:alignAuto]] [[BF-NUMBERBOX-SAMPLE:alignLeft]] [[BF-NUMBERBOX-SAMPLE:alignCenter]] [[BF-NUMBERBOX-SAMPLE:alignRight]] [[BF-NUMBERBOX-SAMPLE:disabled]] [[BF-NUMBERBOX-SAMPLE:readonly]] [[BF-NUMBERBOX-SAMPLE:required]] [[BF-NUMBERBOX-SAMPLE:select]] [[BF-NUMBERBOX-SAMPLE:commitPolicy]]

Voucher

[[BF-NUMBERBOX-SAMPLE:voucherBasic]] [[BF-NUMBERBOX-SAMPLE:voucherYen]] [[BF-NUMBERBOX-SAMPLE:voucherGridOff]] [[BF-NUMBERBOX-SAMPLE:voucherTriangle]] [[BF-NUMBERBOX-SAMPLE:voucherRed]] [[BF-NUMBERBOX-SAMPLE:voucherDigits]] [[BF-NUMBERBOX-SAMPLE:voucherAutoFont]] [[BF-NUMBERBOX-SAMPLE:voucherFixedFont]] [[BF-NUMBERBOX-SAMPLE:voucherHoverEdit]] [[BF-NUMBERBOX-SAMPLE:voucherStyle]]

Active effect

[[BF-NUMBERBOX-SAMPLE:activeNormal]] [[BF-NUMBERBOX-SAMPLE:activeNeon]] [[BF-NUMBERBOX-SAMPLE:activeSpin]] [[BF-NUMBERBOX-SAMPLE:activeCross]] [[BF-NUMBERBOX-SAMPLE:activeBlink]]

Position

[[BF-NUMBERBOX-SAMPLE:posTopLeft]] [[BF-NUMBERBOX-SAMPLE:posTopCenter]] [[BF-NUMBERBOX-SAMPLE:posTopRight]] [[BF-NUMBERBOX-SAMPLE:posMiddleLeft]] [[BF-NUMBERBOX-SAMPLE:posCenter]] [[BF-NUMBERBOX-SAMPLE:posMiddleRight]] [[BF-NUMBERBOX-SAMPLE:posBottomLeft]] [[BF-NUMBERBOX-SAMPLE:posBottomCenter]] [[BF-NUMBERBOX-SAMPLE:posBottomRight]]

Parent / security

[[BF-NUMBERBOX-SAMPLE:sizeCustom]] [[BF-NUMBERBOX-SAMPLE:inheritParent]] [[BF-NUMBERBOX-SAMPLE:security]]

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

• placeholder — 入力が空の時だけ補助文字を表示します。
• disabled — 値は表示しますがユーザー操作とcommitを受け付けません。
• readonly — 現在値は見えますがユーザー編集から確定値を更新しません。
• required — 空欄のeditingValueはinvalidとなりcommitInvalid=falseなら確定値を維持します。
• min — min未満はNUMBERBOX_MINとなり通常commitしません。
• max — max超過はNUMBERBOX_MAXとなり通常commitしません。
• step — 刻み不一致はNUMBERBOX_STEPとなり通常commitしません。
• decimalPlaces — commit/setValue/Joint INのnumberを指定桁へ丸め、committedValue自体が変わります。
• displayDecimalPlaces — 1000を1000.00のように表示しますがcommittedValue/OUTは1000のままです。
• useGrouping — 1234567.89を1,234,567.89と表示します。数値値は変更しません。
• roundingMode — 計算値と表示値の丸め方法が変わります。
• name — フォーム統合時の識別名になります。NumberBoxの数値計算には影響しません。
• autocomplete — 内部inputへautocomplete属性として反映します。
• spellcheck — 画面・数値値には変化せず、内部input spellcheck=falseを維持します。
• inputMode — 内部input.inputModeへ反映します。
• enterCommit — falseではEnterで自動commitせず、API commit等を使います。
• blurCommit — falseではblur後もeditingValueとcommittedValueの差を保持できます。
• commitInvalid — trueではmin/max/step等のValidation invalidでもcommit可能。Security Gateは別です。
• selectOnFocus — focus直後に全選択され、上書き入力しやすくなります。
• ariaLabel — スクリーンリーダー向けlabelになります。
• className — 生成時rootへ追加Classが付きます。
• theme — surface・文字・枠・accentがThemeに応じて変化します。
• backgroundColor — 指定HEXならTheme背景より優先、transparentなら親背景が透けます。
• appearance — flatは立体感を抑え、borderlessは通常枠を抑えます。inheritは親style追従を有効化します。
• inheritParent — rootは親の幅/高さ100%になり、入力文字位置も親text-alignへ合わせます。
• width — root幅が指定pxになります。inheritParent=trueでは親100%が優先。
• height — root高さが指定pxになります。inheritParent=trueでは親100%が優先。
• position — NumberBox自身の配置位置が変わります。Defaultはcenter。
• inputAlign — 数値文字の位置が変わります。
• voucherMode — blur/showVoucherDisplayで伝票表示、focus/hover条件で入力表示へ戻ります。
• voucherYenMark — ￥1000のように見えますがcommittedValue/OUTはnumber 1000です。
• voucherGridLines — trueは罫線中心、falseは区切り記号中心の表示になります。
• voucherAutoFontSize — trueはセル幅に応じて調整、falseは指定pxを使用します。
• voucherFontSize — voucherAutoFontSize=false時に指定サイズで表示します。
• voucherDigitCount — 桁マス数が変わり、整数部は右寄せで配置されます。
• voucherLineColor — 通常桁の罫線色が変わります。
• voucherLineWidth — 通常桁境界の太さが変わります。
• voucherGroupLineWidth — 3桁ごとの境界を通常線より強調できます。
• voucherDecimalLineColor — 整数部と小数部の境界色が変わります。
• voucherDecimalLineWidth — 整数/小数境界の強調幅が変わります。
• voucherNegativeMark — 負数の先頭表示が－/△/なしへ変わります。
• voucherNegativeRed — 負数の記号と数字を赤く見せます。数値値は変わりません。
• voucherHoverEdit — trueではhover中に編集inputを見せ、離れると伝票表示へ戻れます。
• activeBorderEffect — focus中だけ指定Effectを表示し、blurで解除します。
• activeEffectColor — Effect色が変わります。themeなら現在Theme accentを使用します。
• activeEffectDirection — spin等の進行方向が反転します。
• activeEffectSpeed — spin/blink等の周期が変わります。
• securityMaxLength — 上限を超える入力/数値表現をSecurity Gateで拒否し直前の安全な値を保持します。

3. Default Property 全48件 — 個別Reference

3.1 placeholder

• 型: string
• Runtime Default: ""
• HTML指定: placeholder / data-placeholder
• 何の設定か: 空欄時の補助文字。値が入ると消えます。
• 許容値・範囲・単位: 任意string。数値値そのものには影響しません。
• 不正例: placeholderへobject等の非stringを渡す。
• 修正例: data-placeholder="金額を入力"
• この設定で変わること: 入力が空の時だけ補助文字を表示します。
• 関連/競合: value / disabled

3.2 disabled

• 型: boolean
• Runtime Default: false
• HTML指定: disabled / data-disabled
• 何の設定か: NumberBoxを操作禁止にします。
• 許容値・範囲・単位: true / false。trueはfocus・入力・commitを止めます。
• 不正例: data-disabled="maybe"
• 修正例: data-disabled="true"
• この設定で変わること: 値は表示しますがユーザー操作とcommitを受け付けません。
• 関連/競合: readonly

3.3 readonly

• 型: boolean
• Runtime Default: false
• HTML指定: readonly / data-readonly
• 何の設定か: 表示・選択は許可しつつ編集とcommitを禁止します。
• 許容値・範囲・単位: true / false。disabledより弱い参照専用です。
• 不正例: data-readonly="yes?"
• 修正例: data-readonly="true"
• この設定で変わること: 現在値は見えますがユーザー編集から確定値を更新しません。
• 関連/競合: disabled

3.4 required

• 型: boolean
• Runtime Default: false
• HTML指定: required / data-required
• 何の設定か: 空値nullをValidation invalidにします。
• 許容値・範囲・単位: true / false。trueで空欄commitはNUMBERBOX_REQUIRED。
• 不正例: required=trueで空欄のままcommitする。
• 修正例: 値を入力する、またはrequired=falseにする。
• この設定で変わること: 空欄のeditingValueはinvalidとなりcommitInvalid=falseなら確定値を維持します。
• 関連/競合: commitInvalid

3.5 min

• 型: number|null
• Runtime Default: null
• HTML指定: min / data-min
• 何の設定か: 許可する最小数値を設定します。
• 許容値・範囲・単位: 有限数または空/null。min <= max。
• 不正例: min=100, max=10
• 修正例: min=0, max=100
• この設定で変わること: min未満はNUMBERBOX_MINとなり通常commitしません。
• 関連/競合: max / step

3.6 max

• 型: number|null
• Runtime Default: null
• HTML指定: max / data-max
• 何の設定か: 許可する最大数値を設定します。
• 許容値・範囲・単位: 有限数または空/null。min <= max。
• 不正例: max="Infinity"
• 修正例: max=100
• この設定で変わること: max超過はNUMBERBOX_MAXとなり通常commitしません。
• 関連/競合: min / step

3.7 step

• 型: number|"any"
• Runtime Default: "any"
• HTML指定: step / data-step
• 何の設定か: 入力値の刻みを検証します。
• 許容値・範囲・単位: "any" または 0より大きい有限数。基準はmin、minがnullなら0。
• 不正例: step=0
• 修正例: step=0.5 または step="any"
• この設定で変わること: 刻み不一致はNUMBERBOX_STEPとなり通常commitしません。
• 関連/競合: min / decimalPlaces

3.8 decimalPlaces

• 型: integer|null
• Runtime Default: null
• HTML指定: data-decimal-places
• 何の設定か: 確定値を何桁の小数へ丸めるか指定します。
• 許容値・範囲・単位: null/空 または 0～15の整数。
• 不正例: data-decimal-places="16"
• 修正例: data-decimal-places="2"
• この設定で変わること: commit/setValue/Joint INのnumberを指定桁へ丸め、committedValue自体が変わります。
• 関連/競合: roundingMode / displayDecimalPlaces

3.9 displayDecimalPlaces

• 型: integer|null
• Runtime Default: null
• HTML指定: data-display-decimal-places
• 何の設定か: 表示だけの小数桁数を固定します。
• 許容値・範囲・単位: null/空 または 0～20の整数。
• 不正例: data-display-decimal-places="21"
• 修正例: data-display-decimal-places="2"
• この設定で変わること: 1000を1000.00のように表示しますがcommittedValue/OUTは1000のままです。
• 関連/競合: decimalPlaces / useGrouping

3.10 useGrouping

• 型: boolean
• Runtime Default: false
• HTML指定: data-use-grouping
• 何の設定か: 表示へ3桁カンマを追加します。
• 許容値・範囲・単位: true / false。指数表記には強制カンマを入れません。
• 不正例: data-use-grouping="maybe"
• 修正例: data-use-grouping="true"
• この設定で変わること: 1234567.89を1,234,567.89と表示します。数値値は変更しません。
• 関連/競合: displayDecimalPlaces

3.11 roundingMode

• 型: enum
• Runtime Default: "half-up"
• HTML指定: data-rounding-mode
• 何の設定か: decimalPlaces/displayDecimalPlacesの丸め方向を指定します。
• 許容値・範囲・単位: half-up / up / down。half-up=四捨五入、up=0から遠ざかる、down=0へ近づく。
• 不正例: data-rounding-mode="bankers"
• 修正例: data-rounding-mode="half-up"
• この設定で変わること: 計算値と表示値の丸め方法が変わります。
• 関連/競合: decimalPlaces / displayDecimalPlaces

3.12 name

• 型: string
• Runtime Default: ""
• HTML指定: name / data-name
• 何の設定か: 内部inputのname属性を指定します。
• 許容値・範囲・単位: 任意string。
• 不正例: nameへobjectを渡す。
• 修正例: name="amount"
• この設定で変わること: フォーム統合時の識別名になります。NumberBoxの数値計算には影響しません。
• 関連/競合: 特になし。

3.13 autocomplete

• 型: string
• Runtime Default: "off"
• HTML指定: autocomplete / data-autocomplete
• 何の設定か: ブラウザのautocomplete hintを指定します。
• 許容値・範囲・単位: 任意string。空ならoff。
• 不正例: 非stringをRuntime APIで指定する。
• 修正例: autocomplete="off"
• この設定で変わること: 内部inputへautocomplete属性として反映します。
• 関連/競合: 特になし。

3.14 spellcheck

• 型: boolean固定
• Runtime Default: false
• HTML指定: spellcheck / data-spellcheck
• 何の設定か: 数値入力なのでspellcheckは常に無効です。
• 許容値・範囲・単位: Runtime v1.0.17は指定に関係なくfalseへ固定。
• 不正例: spellcheck=trueで有効化できると想定する。
• 修正例: spellcheckはfalseのまま使用する。
• この設定で変わること: 画面・数値値には変化せず、内部input spellcheck=falseを維持します。
• 関連/競合: inputMode

3.15 inputMode

• 型: string
• Runtime Default: "decimal"
• HTML指定: inputmode / data-input-mode
• 何の設定か: モバイル等のソフトキーボードhintです。
• 許容値・範囲・単位: 任意string。空ならdecimal。
• 不正例: 非stringをRuntime APIで指定する。
• 修正例: data-input-mode="decimal"
• この設定で変わること: 内部input.inputModeへ反映します。
• 関連/競合: 特になし。

3.16 enterCommit

• 型: boolean
• Runtime Default: true
• HTML指定: data-enter-commit
• 何の設定か: Enter押下でeditingValueを確定するか指定します。
• 許容値・範囲・単位: true / false。IME composition中はtrueでもcommitしません。
• 不正例: data-enter-commit="maybe"
• 修正例: data-enter-commit="false"
• この設定で変わること: falseではEnterで自動commitせず、API commit等を使います。
• 関連/競合: blurCommit / IME

3.17 blurCommit

• 型: boolean
• Runtime Default: true
• HTML指定: data-blur-commit
• 何の設定か: フォーカスを外した時にcommitするか指定します。
• 許容値・範囲・単位: true / false。
• 不正例: data-blur-commit="maybe"
• 修正例: data-blur-commit="false"
• この設定で変わること: falseではblur後もeditingValueとcommittedValueの差を保持できます。
• 関連/競合: enterCommit

3.18 commitInvalid

• 型: boolean
• Runtime Default: false
• HTML指定: data-commit-invalid
• 何の設定か: Validation invalidでも確定値更新を許可するか指定します。
• 許容値・範囲・単位: true / false。Security拒否はtrueでも通りません。
• 不正例: Security拒否も通ると誤解する。
• 修正例: Validationだけ例外的に許可したい時のみtrue。
• この設定で変わること: trueではmin/max/step等のValidation invalidでもcommit可能。Security Gateは別です。
• 関連/競合: Validation / Security

3.19 selectOnFocus

• 型: boolean
• Runtime Default: false
• HTML指定: data-select-on-focus
• 何の設定か: focus時に編集文字列全体を選択します。
• 許容値・範囲・単位: true / false。disabled時はfocus自体が無効。
• 不正例: data-select-on-focus="maybe"
• 修正例: data-select-on-focus="true"
• この設定で変わること: focus直後に全選択され、上書き入力しやすくなります。
• 関連/競合: disabled

3.20 ariaLabel

• 型: string
• Runtime Default: ""
• HTML指定: aria-label / data-aria-label
• 何の設定か: 内部inputのアクセシブルな名前を指定します。
• 許容値・範囲・単位: 任意string。
• 不正例: 非stringをRuntime APIで指定する。
• 修正例: aria-label="金額"
• この設定で変わること: スクリーンリーダー向けlabelになります。
• 関連/競合: 特になし。

3.21 className

• 型: string
• Runtime Default: ""
• HTML指定: data-class-name
• 何の設定か: Runtime rootへ追加Classをcreate時に付与します。
• 許容値・範囲・単位: 任意string。setOptions後のroot Class付け替え用途としては使わない。
• 不正例: objectを指定する。
• 修正例: data-class-name="amount-field"
• この設定で変わること: 生成時rootへ追加Classが付きます。
• 関連/競合: create

3.22 theme

• 型: enum
• Runtime Default: "default"
• HTML指定: data-theme
• 何の設定か: NumberBoxの基礎配色を切替えます。
• 許容値・範囲・単位:
  • default — 標準配色。
  • dark — 暗いsurfaceへ切替え、文字と枠のコントラストもDark用に変えます。
  • light — 明るいsurfaceへ切替え、文字と枠をLight用に変えます。
  • neon — 暗いsurface上でaccent/枠をNeon向けに強調します。
• 不正例: data-theme="blue"
• 修正例: data-theme="neon"
• この設定で変わること: surface・文字・枠・accentがThemeに応じて変化します。
• 関連/競合: backgroundColor / activeEffectColor

3.23 backgroundColor

• 型: color
• Runtime Default: "theme"
• HTML指定: data-background-color
• 何の設定か: NumberBox背景だけをThemeから上書きします。
• 許容値・範囲・単位: theme / transparent / #RGB / #RGBA / #RRGGBB / #RRGGBBAA。
• 不正例: data-background-color="red"
• 修正例: data-background-color="#26354acc"
• この設定で変わること: 指定HEXならTheme背景より優先、transparentなら親背景が透けます。
• 関連/競合: #040 ColorPicker

3.24 appearance

• 型: enum
• Runtime Default: "normal"
• HTML指定: data-appearance
• 何の設定か: 外枠の見せ方を切替えます。
• 許容値・範囲・単位:
  • normal — 標準の枠・surface表現。
  • flat — 立体感を抑えた平面的な表示。
  • borderless — 通常枠を抑え、背景と文字を中心に見せます。
  • inherit — inheritParent=trueへ切替え、appearance自体はnormalとして親styleを優先します。
• 不正例: data-appearance="glass"
• 修正例: data-appearance="flat"
• この設定で変わること: flatは立体感を抑え、borderlessは通常枠を抑えます。inheritは親style追従を有効化します。
• 関連/競合: inheritParent

3.25 inheritParent

• 型: boolean
• Runtime Default: false
• HTML指定: data-inherit-parent
• 何の設定か: 親要素のサイズ・背景・文字色・枠・角丸・text-alignへ追従します。
• 許容値・範囲・単位: true / false。trueでは単体width/height/position/inputAlignより親styleが優先。
• 不正例: 親追従ONなのにwidth=180の見た目を期待する。
• 修正例: 親追従時は親サイズ/styleを設定する。
• この設定で変わること: rootは親の幅/高さ100%になり、入力文字位置も親text-alignへ合わせます。
• 関連/競合: width / height / position / inputAlign

3.26 width

• 型: number px
• Runtime Default: 320
• HTML指定: data-width
• 何の設定か: 単体利用時のNumberBox幅です。
• 許容値・範囲・単位: 40～4000px。
• 不正例: data-width="20"
• 修正例: data-width="320"
• この設定で変わること: root幅が指定pxになります。inheritParent=trueでは親100%が優先。
• 関連/競合: inheritParent

3.27 height

• 型: number px
• Runtime Default: 44
• HTML指定: data-height
• 何の設定か: 単体利用時のNumberBox高さです。
• 許容値・範囲・単位: 24～2000px。
• 不正例: data-height="10"
• 修正例: data-height="44"
• この設定で変わること: root高さが指定pxになります。inheritParent=trueでは親100%が優先。
• 関連/競合: inheritParent

3.28 position

• 型: enum
• Runtime Default: "center"
• HTML指定: data-position
• 何の設定か: CSS Gridとして配置された親コンテナ内で、NumberBox rootの9方向位置を指定します。Runtimeはrootへjustify-self / align-selfを設定します。
• 許容値・範囲・単位: top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right。
• 不正例: data-position="left"
• 修正例: data-position="bottom-right"
• この設定で変わること: NumberBox自身の配置位置が変わります。Defaultはcenter。
• 関連/競合: inheritParent

3.29 inputAlign

• 型: enum
• Runtime Default: "right"
• HTML指定: data-input-align
• 何の設定か: 入力数字の横寄せを指定します。
• 許容値・範囲・単位: auto / left / center / right。NumberBoxではautoはrightへ解決。
• 不正例: data-input-align="justify"
• 修正例: data-input-align="right"
• この設定で変わること: 数値文字の位置が変わります。
• 関連/競合: inheritParent

3.30 voucherMode

• 型: boolean
• Runtime Default: false
• HTML指定: data-voucher-mode
• 何の設定か: フォーカス外で伝票風の桁割り表示へ切替えます。
• 許容値・範囲・単位: true / false。trueでもfocus中はinput mode。
• 不正例: data-voucher-mode="maybe"
• 修正例: data-voucher-mode="true"
• この設定で変わること: blur/showVoucherDisplayで伝票表示、focus/hover条件で入力表示へ戻ります。
• 関連/競合: voucherHoverEdit / displayDecimalPlaces

3.31 voucherYenMark

• 型: boolean
• Runtime Default: false
• HTML指定: data-voucher-yen-mark
• 何の設定か: 伝票表示の先頭に￥を独立マスで表示します。
• 許容値・範囲・単位: true / false。表示専用で数値値へ混入しません。
• 不正例: ￥をvalue文字列へ含める。
• 修正例: value=1000 + data-voucher-yen-mark="true"
• この設定で変わること: ￥1000のように見えますがcommittedValue/OUTはnumber 1000です。
• 関連/競合: voucherMode

3.32 voucherGridLines

• 型: boolean
• Runtime Default: true
• HTML指定: data-voucher-grid-lines
• 何の設定か: 伝票の桁罫線を表示するか指定します。
• 許容値・範囲・単位: true / false。falseでは区切りカンマ/小数点を文字で見せます。
• 不正例: data-voucher-grid-lines="maybe"
• 修正例: data-voucher-grid-lines="false"
• この設定で変わること: trueは罫線中心、falseは区切り記号中心の表示になります。
• 関連/競合: voucherLine*

3.33 voucherAutoFontSize

• 型: boolean
• Runtime Default: true
• HTML指定: data-voucher-auto-font-size
• 何の設定か: 伝票セル内の文字サイズを自動調整します。
• 許容値・範囲・単位: true / false。falseではvoucherFontSizeを使用。
• 不正例: 固定fontSizeを期待しながらtrueのままにする。
• 修正例: data-voucher-auto-font-size="false" data-voucher-font-size="24"
• この設定で変わること: trueはセル幅に応じて調整、falseは指定pxを使用します。
• 関連/競合: voucherFontSize

3.34 voucherFontSize

• 型: number px
• Runtime Default: 20
• HTML指定: data-voucher-font-size
• 何の設定か: 自動調整OFF時の伝票文字サイズです。
• 許容値・範囲・単位: 8～96px。
• 不正例: data-voucher-font-size="100"
• 修正例: data-voucher-font-size="20"
• この設定で変わること: voucherAutoFontSize=false時に指定サイズで表示します。
• 関連/競合: voucherAutoFontSize

3.35 voucherDigitCount

• 型: integer
• Runtime Default: 12
• HTML指定: data-voucher-digit-count
• 何の設定か: 伝票表示で確保する総桁数を指定します。
• 許容値・範囲・単位: 1～30の整数。小数部も総桁数へ含みます。
• 不正例: data-voucher-digit-count="0"
• 修正例: data-voucher-digit-count="12"
• この設定で変わること: 桁マス数が変わり、整数部は右寄せで配置されます。
• 関連/競合: displayDecimalPlaces

3.36 voucherLineColor

• 型: HEX color
• Runtime Default: "#6ea3ff"
• HTML指定: data-voucher-line-color
• 何の設定か: 通常の伝票罫線色です。
• 許容値・範囲・単位: #RGB / #RGBA / #RRGGBB / #RRGGBBAA。
• 不正例: data-voucher-line-color="red"
• 修正例: data-voucher-line-color="#6ea3ff"
• この設定で変わること: 通常桁の罫線色が変わります。
• 関連/競合: #040 ColorPicker

3.37 voucherLineWidth

• 型: number px
• Runtime Default: 1
• HTML指定: data-voucher-line-width
• 何の設定か: 通常罫線の太さです。
• 許容値・範囲・単位: 0～8px。0は線を実質非表示にできます。
• 不正例: data-voucher-line-width="9"
• 修正例: data-voucher-line-width="1"
• この設定で変わること: 通常桁境界の太さが変わります。
• 関連/競合: voucherGridLines

3.38 voucherGroupLineWidth

• 型: number px
• Runtime Default: 3
• HTML指定: data-voucher-group-line-width
• 何の設定か: 3桁区切り位置の太線幅です。
• 許容値・範囲・単位: 0～12px。
• 不正例: data-voucher-group-line-width="13"
• 修正例: data-voucher-group-line-width="3"
• この設定で変わること: 3桁ごとの境界を通常線より強調できます。
• 関連/競合: voucherGridLines

3.39 voucherDecimalLineColor

• 型: HEX color
• Runtime Default: "#d96a6a"
• HTML指定: data-voucher-decimal-line-color
• 何の設定か: 小数区切り位置の罫線色です。
• 許容値・範囲・単位: #RGB / #RGBA / #RRGGBB / #RRGGBBAA。
• 不正例: data-voucher-decimal-line-color="red"
• 修正例: data-voucher-decimal-line-color="#d96a6a"
• この設定で変わること: 整数部と小数部の境界色が変わります。
• 関連/競合: #040 ColorPicker

3.40 voucherDecimalLineWidth

• 型: number px
• Runtime Default: 2
• HTML指定: data-voucher-decimal-line-width
• 何の設定か: 小数区切り位置の罫線太さです。
• 許容値・範囲・単位: 0～12px。
• 不正例: data-voucher-decimal-line-width="13"
• 修正例: data-voucher-decimal-line-width="2"
• この設定で変わること: 整数/小数境界の強調幅が変わります。
• 関連/競合: voucherGridLines

3.41 voucherNegativeMark

• 型: enum
• Runtime Default: "minus"
• HTML指定: data-voucher-negative-mark
• 何の設定か: 伝票表示の負数記号を選びます。
• 許容値・範囲・単位: minus / triangle / none。minus=－、triangle=△、none=記号なし。
• 不正例: data-voucher-negative-mark="paren"
• 修正例: data-voucher-negative-mark="triangle"
• この設定で変わること: 負数の先頭表示が－/△/なしへ変わります。
• 関連/競合: voucherNegativeRed

3.42 voucherNegativeRed

• 型: boolean
• Runtime Default: false
• HTML指定: data-voucher-negative-red
• 何の設定か: 負数の伝票文字を赤表示します。
• 許容値・範囲・単位: true / false。正数には影響しません。
• 不正例: data-voucher-negative-red="maybe"
• 修正例: data-voucher-negative-red="true"
• この設定で変わること: 負数の記号と数字を赤く見せます。数値値は変わりません。
• 関連/競合: voucherNegativeMark

3.43 voucherHoverEdit

• 型: boolean
• Runtime Default: true
• HTML指定: data-voucher-hover-edit
• 何の設定か: 伝票表示へマウスを重ねた時に入力modeへ戻すか指定します。
• 許容値・範囲・単位: true / false。
• 不正例: hoverしても伝票表示固定を期待しながらtrueのままにする。
• 修正例: 固定したいならdata-voucher-hover-edit="false"
• この設定で変わること: trueではhover中に編集inputを見せ、離れると伝票表示へ戻れます。
• 関連/競合: voucherMode

3.44 activeBorderEffect

• 型: enum
• Runtime Default: "normal"
• HTML指定: data-active-border-effect
• 何の設定か: focus中の枠Effectを#022へ指定します。
• 許容値・範囲・単位: normal / neon / spin / cross / blink。
• 不正例: data-active-border-effect="glow"
• 修正例: data-active-border-effect="spin"
• この設定で変わること: focus中だけ指定Effectを表示し、blurで解除します。
• 関連/競合: #022 Hover Border Effect

3.45 activeEffectColor

• 型: color
• Runtime Default: "theme"
• HTML指定: data-active-effect-color
• 何の設定か: Active Effect色を指定します。
• 許容値・範囲・単位: theme / HEX color。gradientは#022/#029契約外。
• 不正例: data-active-effect-color="red"
• 修正例: data-active-effect-color="#35f4ff"
• この設定で変わること: Effect色が変わります。themeなら現在Theme accentを使用します。
• 関連/競合: #040 ColorPicker / #022

3.46 activeEffectDirection

• 型: enum
• Runtime Default: "clockwise"
• HTML指定: data-active-effect-direction
• 何の設定か: 方向を持つActive Effectの進行方向を指定します。
• 許容値・範囲・単位: clockwise / counterclockwise。spin等で意味を持ちます。
• 不正例: data-active-effect-direction="reverse"
• 修正例: data-active-effect-direction="counterclockwise"
• この設定で変わること: spin等の進行方向が反転します。
• 関連/競合: #022

3.47 activeEffectSpeed

• 型: enum
• Runtime Default: "normal"
• HTML指定: data-active-effect-speed
• 何の設定か: 時間変化するActive Effectの速度を指定します。
• 許容値・範囲・単位: slow / normal / fast。#022 v1.0.10基準で2s / 1.2s / 0.65s。
• 不正例: data-active-effect-speed="turbo"
• 修正例: data-active-effect-speed="fast"
• この設定で変わること: spin/blink等の周期が変わります。
• 関連/競合: #022

3.48 securityMaxLength

• 型: integer
• Runtime Default: 262144
• HTML指定: data-security-max-length
• 何の設定か: 編集文字列/数値表現を受理するSecurity上限です。
• 許容値・範囲・単位: 1～1048576。現在値より小さくsetOptionsすることはできません。
• 不正例: data-security-max-length="0"
• 修正例: data-security-max-length="262144"
• この設定で変わること: 上限を超える入力/数値表現をSecurity Gateで拒否し直前の安全な値を保持します。
• 関連/競合: Security

4. NumberBox固有 — 計算値と表示値

4.1 decimalPlaces と displayDecimalPlaces の違い

• decimalPlaces: committedValueそのものを丸めます。例: 1.235 + 2桁 half-up → 1.24。
• displayDecimalPlaces: 表示だけを固定します。committedValue=1000のまま1000.00と見せられます。
• 両方を2にすれば計算値も表示も2桁ですが、責務は別です。

4.2 useGrouping

trueで表示に3桁カンマを追加します。1,234,567.89と見えてもcommittedValue/OUTはnumber 1234567.89です。

4.3 roundingMode 全3値

• half-up: 四捨五入。5以上を絶対値方向へ。
• up: 切り上げ。正負どちらも0から遠ざかる方向。
• down: 切り捨て。正負どちらも0へ近づく方向。

5. 伝票モード

伝票モードは同じcommitted numberへ重ねる表示専用表現です。focus/編集時は通常input、blurまたはshowVoucherDisplay()で桁を均等割りした伝票表示になります。

• voucherYenMark: ￥を独立マス表示。数値へ含めません。
• voucherGridLines: trueは罫線、falseはカンマ/小数点の文字表示を中心にします。
• voucherNegativeMark 全3値:
  • minus — 負数をマイナス記号で表示します。
  • triangle — 負数を△記号で表示します。
  • none — 負数記号を表示しません。数値自体の符号は変えません。
• voucherNegativeRed: 負数だけ赤いglyphにします。
• voucherHoverEdit: hoverで一時的にinput modeへ戻すか決めます。
• 罫線色/太さは表示だけで数値計算へ影響しません。

6. Position 全9値 / 親依存

positionは画面座標へabsolute配置する機能ではありません。NumberBox rootへCSS Gridのjustify-self / align-selfを設定する契約です。したがって正式Previewと同じdisplay:gridの親で9位置が成立します。通常blockやFlexだけの親では、値を設定しても期待する9方向へ動かない場合があります。

• top-left — justify-self:start + align-self:start。Grid親の左上。
• top-center — justify-self:center + align-self:start。Grid親の上中央。
• top-right — justify-self:end + align-self:start。Grid親の右上。
• middle-left — justify-self:start + align-self:center。Grid親の左中央。
• center — justify-self:center + align-self:center。Grid親の中央 / Default。
• middle-right — justify-self:end + align-self:center。Grid親の右中央。
• bottom-left — justify-self:start + align-self:end。Grid親の左下。
• bottom-center — justify-self:center + align-self:end。Grid親の下中央。
• bottom-right — justify-self:end + align-self:end。Grid親の右下。

Live Sampleはこの契約を確認できるよう、親枠自体をdisplay:gridにしています。

inheritParent=trueまたはappearance=inheritでは、rootがwidth:100% / height:100% / justify-self:stretch / align-self:stretchになり、positionより親追従が優先されます。inputAlignも親のtext-alignへ置き換わります。

7. Active Border Effect / #022 Hover Border Effect

NumberBoxはfocus中に使うEffect設定だけを持ち、実描画は#022 v1.0.10へ委譲します。

• Effect全5値:
  • normal — Active専用の追加Effectなし。
  • neon — focus中にNeon glowを表示。
  • spin — focus中に枠を周回するEffect。Direction/Speedが反映されます。
  • cross — focus中に交差する枠Effect。
  • blink — focus中に点滅するEffect。Speedが周期へ反映されます。
• Direction全2値: clockwise / counterclockwise
• Speed全3値: slow / normal / fast。#022 v1.0.10基準で2s / 1.2s / 0.65s。
• Effect色: themeまたはsolid HEX。色選択UIは#040の責務です。

8. #040 ColorPickerとの責務分離

#040はsolid HEXを選んで返すUI、#029はその文字列をPropertyへ適用する側です。NumberBox内に別ColorPickerを作りません。

const hex = "#35f4ff"; // #040 RETURN example
BoneNumberBox.setOptions(root,{activeEffectColor:hex,voucherLineColor:hex});

9. Untrusted IN / Security

Joint INはfinite numberまたはnullだけを受理します。"22.5"のようなnumeric stringも意図的に拒否し、objectをNumber()/String()で強制変換しません。getter/accessorやProxy trapも通常値として実行しません。拒否時は直前committedValueを保持します。

許可例: value:22.5, value:null。拒否例: "22.5", NaN, Infinity, {}, getter付きvalue, Proxy。

10. JavaScript専用Callback 全15件

全Callback payloadには共通でcomponentId / componentName / version / boneId / boneTypeが入り、その上で下記のevent固有項目が付きます。

10.1 onInput

• 発火条件: ユーザー入力のたび
• 固有payload: value / previousValue / source / composing
• 設定例: onInput: payload => console.log(payload)

10.2 onChange

• 発火条件: focus開始時値から変更してblurした時
• 固有payload: value / previousValue / source
• 設定例: onChange: payload => console.log(payload)

10.3 onCommit

• 発火条件: 確定値が更新された時
• 固有payload: value / previousValue / source / validation / bone
• 設定例: onCommit: payload => console.log(payload)

10.4 onInvalid

• 発火条件: commitしようとした値がValidation invalidの時
• 固有payload: value / previousValue / source / validation
• 設定例: onInvalid: payload => console.log(payload)

10.5 onFocus

• 発火条件: focus時
• 固有payload: value / source
• 設定例: onFocus: payload => console.log(payload)

10.6 onBlur

• 発火条件: blur時
• 固有payload: value / source
• 設定例: onBlur: payload => console.log(payload)

10.7 onCompositionstart

• 発火条件: IME composition開始
• 固有payload: value / source
• 設定例: onCompositionstart: payload => console.log(payload)

10.8 onCompositionupdate

• 発火条件: IME composition更新
• 固有payload: value / source
• 設定例: onCompositionupdate: payload => console.log(payload)

10.9 onCompositionend

• 発火条件: IME composition終了
• 固有payload: value / source
• 設定例: onCompositionend: payload => console.log(payload)

10.10 onReset

• 発火条件: EscapeまたはAPI resetで編集値を戻した時
• 固有payload: value / source
• 設定例: onReset: payload => console.log(payload)

10.11 onInAccepted

• 発火条件: Joint INを安全に受理した時
• 固有payload: accepted / blocked / source / value / state
• 設定例: onInAccepted: payload => console.log(payload)

10.12 onInRejected

• 発火条件: Joint INを拒否した時
• 固有payload: accepted / blocked / code / message / preservedValue
• 設定例: onInRejected: payload => console.log(payload)

10.13 onSecurityRejected

• 発火条件: 入力文字列がSecurity Gateで拒否された時
• 固有payload: code / message / source
• 設定例: onSecurityRejected: payload => console.log(payload)

10.14 onDeliveryState

• 発火条件: #002 Delivery Channel状態が変わった時
• 固有payload: deliveryState / detail / targetReady / queueLength
• 設定例: onDeliveryState: payload => console.log(payload)

10.15 onDelivery

• 発火条件: commit後のOUT配送を試行した時
• 固有payload: source / output / result
• 設定例: onDelivery: payload => console.log(payload)

11. Joint IN

applyJointInput(root,{source,value,state})を使います。安全なnumber/nullなら確定値を更新しin-accepted、拒否ならin-rejectedを発火し直前値を保持してBLOCKED候補を返します。

12. OUT WAIT / FIFO / BLOCKED

12.1 WAIT → FIFO配送

1. connectOutput(root,{targetReady:false,...})で接続は維持したままTarget Busyにします。
2. 11→commit、22→commitするとqueueへ11,22の順で入ります。
3. setTargetReady(root,true)で11→22のFIFO順に自動配送します。

12.2 BLOCKED → 解除

guardが999999を拒否した場合、線は接続維持でもその数値はTargetへ届けません。getOutputState().stateはblockedになり、clearOutputBlock()で解除してから次の安全な数値を配送します。

13. 基本操作 / Focus / IME / 選択

DefaultではEnter commit、Escape resetです。IME composition中はEnter commitを抑止し、compositionend後に通常commitできます。selection APIは内部text inputへ作用します。伝票表示はshowVoucherDisplay() / showInputMode()で明示切替できます。

14. Public API 全44件

14.1 defaults()

• 用途: Default Property 48件のcloneを返す
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const d=BoneNumberBox.defaults();
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.2 normalizeOptions(options)

• 用途: 指定OptionsをRuntime契約へ検証・正規化する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const o=BoneNumberBox.normalizeOptions({step:0.5,theme:"neon"});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.3 validateValue(value, options)

• 用途: number/nullを指定OptionsでValidationし結果を返す
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.validateValue(12.5,{min:0,max:100,step:0.5});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.4 inspectUntrustedNumber(value)

• 用途: 外部valueがnumber/null契約を満たすか安全に検査する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.inspectUntrustedNumber(10);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.5 inspectEditingText(value, limit)

• 用途: 編集中stringの長さ・制御文字・Unicode安全性を検査する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.inspectEditingText("123.45",262144);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.6 roundValue(value, decimalPlaces, roundingMode)

• 用途: numberを指定桁/方式で丸める
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.roundValue(1.235,2,"half-up");
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.7 formatDisplayValue(value, options)

• 用途: committed値を変更せず表示文字列だけ生成する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.formatDisplayValue(1000,{displayDecimalPlaces:2,useGrouping:true});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.8 create(boneInput, options)

• 用途: 新しいNumberBox Runtime rootを生成する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const root=BoneNumberBox.create({id:"amount",type:"NUMBERBOX",value:1000},{step:1});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.9 isInstance(element)

• 用途: 対象がNumberBox Runtime rootか判定する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.isInstance(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.10 getInput(element)

• 用途: 内部の編集input要素を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const input=BoneNumberBox.getInput(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.11 getValue(element)

• 用途: 現在のcommitted number/nullを取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const value=BoneNumberBox.getValue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.12 getEditingValue(element)

• 用途: 確定前の入力stringを取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const editing=BoneNumberBox.getEditingValue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.13 getCommittedValue(element)

• 用途: 確定済みnumber/nullを取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const committed=BoneNumberBox.getCommittedValue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.14 getDisplayValue(element)

• 用途: 通常入力mode用の整形表示文字列を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const display=BoneNumberBox.getDisplayValue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.15 getVoucherDisplayValue(element)

• 用途: 伝票mode用の表示文字列を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const voucher=BoneNumberBox.getVoucherDisplayValue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.16 getVoucherLayout(element)

• 用途: 伝票桁数・整数/小数部・負数記号等の配置情報を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const layout=BoneNumberBox.getVoucherLayout(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.17 getDisplayMode(element)

• 用途: 現在がinput/voucherのどちらか取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const mode=BoneNumberBox.getDisplayMode(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.18 getBone(element)

• 用途: 現在Bone id/type/valueをcloneで取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const bone=BoneNumberBox.getBone(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.19 getOptions(element)

• 用途: 現在Optionsをcloneで取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const options=BoneNumberBox.getOptions(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.20 getState(element)

• 用途: editing/committed/Validation/Delivery/Theme等の統合状態を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const state=BoneNumberBox.getState(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.21 setValue(element, value, options)

• 用途: number/nullをAPIから設定しediting/committedを同期する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.setValue(root,2500,{source:"api"});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.22 setOptions(element, patch)

• 用途: 既存Optionsの一部を検証して更新する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.setOptions(root,{useGrouping:true,displayDecimalPlaces:2});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.23 applyBone(element, boneInput)

• 用途: Bone IN objectを再適用する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.applyBone(root,{id:"amount",type:"NUMBERBOX",value:3000});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.24 applyJointInput(element, payload)

• 用途: Untrusted Joint INを検査し安全ならnumber/nullを適用する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.applyJointInput(root,{source:"joint",value:10,state:{status:"connected"}});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.25 buildOutput(element, source)

• 用途: 確定値からOUT payloadを構築する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const out=BoneNumberBox.buildOutput(root,"manual");
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.26 connectOutput(element, options)

• 用途: #002 Delivery ChannelへOUTを接続する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.connectOutput(root,{targetReady:true,deliver:o=>console.log(o.value)});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.27 disconnectOutput(element)

• 用途: OUT Delivery Channelを切断・disposeする
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.disconnectOutput(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.28 setTargetReady(element, ready)

• 用途: Target Busy/Ready状態を#002 Channelへ伝える
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.setTargetReady(root,false);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.29 clearOutputBlock(element)

• 用途: BLOCKED状態を解除する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.clearOutputBlock(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.30 getOutputState(element)

• 用途: WAIT/BLOCKED/queue等のDelivery状態を取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const state=BoneNumberBox.getOutputState(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.31 getOutputQueue(element)

• 用途: WAIT中のFIFO queueを取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const queue=BoneNumberBox.getOutputQueue(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.32 commit(element, source)

• 用途: editingValueをValidation/Security契約に従って確定する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const result=BoneNumberBox.commit(root,"save-button");
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.33 reset(element)

• 用途: 未確定editingValueをcommittedValueへ戻す
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.reset(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.34 validate(element)

• 用途: 現在editingValueのValidation結果を取得・描画する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const v=BoneNumberBox.validate(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.35 focus(element)

• 用途: focus状態へ移しinput modeを表示する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.focus(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.36 blur(element)

• 用途: blurし、blurCommit=trueならcommitして伝票modeへ戻す
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.blur(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.37 showVoucherDisplay(element)

• 用途: 伝票表示を明示的に表示する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.showVoucherDisplay(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.38 showInputMode(element)

• 用途: 編集input表示を明示的に表示する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.showInputMode(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.39 select(element)

• 用途: 内部inputの文字列全体を選択する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.select(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.40 setSelectionRange(element,start,end,direction)

• 用途: 内部inputの選択範囲を指定する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.setSelectionRange(root,0,3,"forward");
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.41 getSelection(element)

• 用途: 現在のselection start/end/directionを取得する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: const sel=BoneNumberBox.getSelection(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.42 setFeedback(element, feedback)

• 用途: 外部からwarning/error/success feedbackを表示する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.setFeedback(root,{level:"warning",message:"確認してください"});
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.43 syncParentStyle(element)

• 用途: inheritParent時に親styleを再読込して同期する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.syncParentStyle(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

14.44 destroy(element)

• 用途: Delivery/#022を解放しRuntime rootを削除する
• 実行前: 対象rootや引数をRuntime契約に合わせて用意します。
• 実行: BoneNumberBox.destroy(root);
• 実行後/戻り値: 戻り値またはRuntime stateを確認し、表示専用値とcommitted numberを混同しません。
• 拒否時: 対応するNUMBERBOX_* Errorまたはinvalid結果となり、可能な範囲で既存の安全なstateを維持します。

15. Error Code

15.1 Runtime Error 全50件

NUMBERBOX_022_DEPENDENCY_REQUIRED

• 意味: #022 Bone Hover Border Effect v1.0.10 が必要です。
• 主な発生条件: #022 v1.0.10/API不足
• 不正例: 古い#022/未読込
• 修正方法: #022 v1.0.10を先に読込
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_ACTIVE_EFFECT_COLOR_INVALID

• 意味: activeEffectColor は theme / HEX color のみ指定できます。
• 主な発生条件: Effect色がtheme/HEX以外
• 不正例: activeEffectColor:"red"
• 修正方法: activeEffectColor:"#35f4ff"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_BACKGROUND_COLOR_INVALID

• 意味: backgroundColor は theme / transparent / HEX color のみ指定できます。
• 主な発生条件: 背景色がtheme/transparent/HEX以外
• 不正例: backgroundColor:"red"
• 修正方法: backgroundColor:"#26354a"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_BONE_ID_TYPE_INVALID

• 意味: Bone id/typeはstringである必要があります。
• 主な発生条件: Bone id/typeがstringでない
• 不正例: {id:1,type:"NUMBERBOX",value:1}
• 修正方法: id/typeをstringにする
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_BONE_INPUT_INVALID

• 意味: Bone INはplain objectである必要があります。
• 主な発生条件: Bone INがplain objectでない
• 不正例: applyBone(root,[])
• 修正方法: {id,type,value}を渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_CONTROL_CHARACTER_REJECTED

• 意味: 制御文字を含む入力を拒否しました。
• 主な発生条件: 制御文字を含む
• 不正例: "12\u0000"
• 修正方法: 制御文字を除去
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_DECIMAL_PLACES_INVALID

• 意味: ${name} は 0～${max} の整数または空で指定してください。
• 主な発生条件: 小数桁が許容範囲外/整数でない
• 不正例: decimalPlaces:16
• 修正方法: decimalPlaces:2
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_DEPENDENCY_CORE_MISSING

• 意味: #001 Bone Core の正式API BoneCore.normalize が必要です。
• 主な発生条件: #001 BoneCore formal APIなし
• 不正例: BoneCore未読込
• 修正方法: #001を先に読込
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_DEPENDENCY_JOINT_MISSING

• 意味: #002 Bone Joint v1.1.36 createDeliveryChannel が必要です。
• 主な発生条件: #002 createDeliveryChannelなし
• 不正例: BoneJoint未読込
• 修正方法: #002 v1.1.36を先に読込
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_DOM_REQUIRED

• 意味: DOM環境が必要です。
• 主な発生条件: DOMなしでcreate
• 不正例: Node環境でdocumentなしcreate
• 修正方法: ブラウザDOM/テストDOMを用意
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_EDITING_TYPE_REJECTED

• 意味: NumberBox editingValueはstringである必要があります。
• 主な発生条件: editingValue検査へstring以外
• 不正例: inspectEditingText(123,100)
• 修正方法: inspectEditingText("123",100)
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_EXISTING_VALUE_SECURITY_LIMIT

• 意味: 現在値より小さいsecurityMaxLengthへ変更できません。
• 主な発生条件: 現在値より小さいSecurity上限へ変更
• 不正例: 現在8文字なのにsecurityMaxLength:4
• 修正方法: 現在値以上の上限へ変更
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_FEEDBACK_INVALID

• 意味: feedbackはplain objectで指定してください。
• 主な発生条件: feedbackがplain objectでない
• 不正例: setFeedback(root,"error")
• 修正方法: {level:"error",message:"..."}
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_INSTANCE_INVALID

• 意味: BoneNumberBox instance ではありません。
• 主な発生条件: NumberBox rootでないElementをAPIへ渡す
• 不正例: getValue(document.body)
• 修正方法: createが返したrootを渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_IN_REJECTED

• 意味: Runtime契約違反として拒否されます。
• 主な発生条件: Joint IN拒否結果のfallback code
• 不正例: 不正IN
• 修正方法: 拒否code/messageを確認しnumber契約へ直す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_JOINT_INPUT_INVALID

• 意味: Joint INはplain objectである必要があります。
• 主な発生条件: Joint INがplain objectでない
• 不正例: applyJointInput(root,[])
• 修正方法: {source,value,state}を渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_JOINT_SOURCE_INVALID

• 意味: Joint IN sourceはstringまたはnullである必要があります。
• 主な発生条件: Joint sourceがstring/nullでない
• 不正例: source:123
• 修正方法: source:"joint"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_JOINT_STATE_INVALID

• 意味: Joint stateはstringまたはplain objectである必要があります。
• 主な発生条件: Joint stateがstring/plain objectでない
• 不正例: state:[]
• 修正方法: state:{status:"connected"}
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_JOINT_STATE_REASON_INVALID

• 意味: Joint state.reasonはstringである必要があります。
• 主な発生条件: state.reasonがstring/nullでない
• 不正例: reason:{}
• 修正方法: reason:"busy"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_JOINT_STATE_STATUS_INVALID

• 意味: Joint state.statusはstringである必要があります。
• 主な発生条件: state.statusがstringでない
• 不正例: status:1
• 修正方法: status:"connected"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_MAX

• 意味: Runtime契約違反として拒否されます。
• 主な発生条件: 値がmax超過
• 不正例: max=100で101をcommit
• 修正方法: max以下へ直す
• 失敗時の状態: Validation invalid。直前committedValueを維持します。

NUMBERBOX_MIN

• 意味: Runtime契約違反として拒否されます。
• 主な発生条件: 値がmin未満
• 不正例: min=0で-1をcommit
• 修正方法: min以上の値へ直す
• 失敗時の状態: Validation invalid。直前committedValueを維持します。

NUMBERBOX_NON_FINITE_REJECTED

• 意味: 有限数として表現できない値です。
• 主な発生条件: NaN/Infinity
• 不正例: value:Infinity
• 修正方法: 有限numberを渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_NUMBER_SYNTAX_INVALID

• 意味: 数値の前後に空白を含めることはできません。
• 主な発生条件: 編集文字列が数値構文でない/前後空白
• 不正例: " 12 " または "12x"
• 修正方法: "12" または "1.2e3"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_NUMERIC_OPTION_INVALID

• 意味: ${name} は有限数または空で指定してください。
• 主な発生条件: min/maxが有限数/空でない
• 不正例: min:{}
• 修正方法: min:0
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OPTIONS_INVALID

• 意味: optionsはplain objectで指定してください。
• 主な発生条件: options/setOptions patchがplain objectでない
• 不正例: setOptions(root,[])
• 修正方法: {}または通常Objectを渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OPTION_ENUM_INVALID

• 意味: ${name} は ${allowed.join(" / ")} のいずれかで指定してください。
• 主な発生条件: enumに未定義値
• 不正例: position:"left"
• 修正方法: position:"middle-left"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OPTION_TYPE_INVALID

• 意味: ${name} はstringで指定してください。
• 主な発生条件: string Propertyへ非string
• 不正例: theme:123
• 修正方法: theme:"neon"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OUTPUT_CHANNEL_UNBOUND

• 意味: OUT Delivery Channelが接続されていません。
• 主な発生条件: Delivery Channel未接続でReady/BLOCK操作
• 不正例: setTargetReady(root,true)を接続前に実行
• 修正方法: connectOutput後に呼ぶ
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OUTPUT_DELIVER_INVALID

• 意味: deliverはfunctionで指定してください。
• 主な発生条件: deliverがfunction/nullでない
• 不正例: deliver:"x"
• 修正方法: deliver:o=>{}
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OUTPUT_GUARD_INVALID

• 意味: guardはfunctionで指定してください。
• 主な発生条件: guardがfunction/nullでない
• 不正例: guard:true
• 修正方法: guard:o=>true
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OUTPUT_OPTIONS_INVALID

• 意味: connectOutput optionsはplain objectで指定してください。
• 主な発生条件: connectOutput optionsがplain objectでない
• 不正例: connectOutput(root,[])
• 修正方法: {}を渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_OUTPUT_STATE_CALLBACK_INVALID

• 意味: onStateChangeはfunctionで指定してください。
• 主な発生条件: onStateChangeがfunction/nullでない
• 不正例: onStateChange:1
• 修正方法: onStateChange:e=>{}
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_RANGE_INVALID

• 意味: min は max 以下である必要があります。
• 主な発生条件: min > max
• 不正例: {min:100,max:0}
• 修正方法: min <= maxへ直す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_REQUIRED

• 意味: 数値入力が必要です。
• 主な発生条件: required=trueで空欄をcommit
• 不正例: 空欄のままcommit
• 修正方法: 数値を入力するかrequired=false
• 失敗時の状態: Validation invalid。commitInvalid=falseなら確定値を変更しません。

NUMBERBOX_SECURITY_LENGTH_EXCEEDED

• 意味: 安全上限 ${securityLimit} 文字を超える数値表現を拒否しました。
• 主な発生条件: 文字列/数値表現がsecurityMaxLength超過
• 不正例: limit=4で"12345"
• 修正方法: 短くするか安全な範囲で上限を増やす
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_SECURITY_LIMIT_INVALID

• 意味: securityMaxLength は 1～${ABSOLUTE_SECURITY_LIMIT} の整数である必要があります。
• 主な発生条件: securityMaxLengthが1～1048576外
• 不正例: securityMaxLength:0
• 修正方法: securityMaxLength:262144
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_SIZE_INVALID

• 意味: ${name} は ${min}～${max} の数値で指定してください。
• 主な発生条件: width/heightが範囲外
• 不正例: width:20
• 修正方法: width:320
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_STEP

• 意味: Runtime契約違反として拒否されます。
• 主な発生条件: 値がstep刻みに不一致
• 不正例: step=0.5で12.25
• 修正方法: 12.5等の刻みに合わせる
• 失敗時の状態: Validation invalid。通常commitしません。

NUMBERBOX_STEP_INVALID

• 意味: step は any または 0 より大きい有限数で指定してください。
• 主な発生条件: stepがanyまたは正の有限数でない
• 不正例: step:0
• 修正方法: step:"any" または 0.5
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_UNPAIRED_SURROGATE_REJECTED

• 意味: 不正なUnicode surrogateを含む入力を拒否しました。
• 主な発生条件: 壊れたUnicode surrogate
• 不正例: 片側surrogateを含むstring
• 修正方法: 正しいUnicode文字列へ直す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_UNTRUSTED_ACCESSOR_REJECTED

• 意味: ${key} のgetter/setterは受け付けません。
• 主な発生条件: getter/setter propertyを含む
• 不正例: value getterを定義
• 修正方法: data property valueにする
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_UNTRUSTED_PROPERTY_MISSING

• 意味: ${key} がありません。
• 主な発生条件: 必須propertyがない
• 不正例: Bone INにvalueがない
• 修正方法: 必須id/type/valueを入れる
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_UNTRUSTED_PROPERTY_TRAP

• 意味: ${key} の安全な読取に失敗しました。
• 主な発生条件: Proxy等でproperty descriptor取得が失敗
• 不正例: getOwnPropertyDescriptor trap
• 修正方法: Proxyを除きplain objectへコピー
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_UNTRUSTED_RECORD_INVALID

• 意味: object契約ではない入力を拒否しました。
• 主な発生条件: 外部object契約がplain objectでない
• 不正例: Array/Date等を渡す
• 修正方法: 通常Objectを渡す
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_VALUE_TYPE_REJECTED

• 意味: NumberBox valueはnumberのみ受け付けます。numeric stringやobjectをNumber()/String()で強制変換しません。
• 主な発生条件: valueがnumber/nullでない
• 不正例: Joint IN value:"10"
• 修正方法: value:10
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_VOUCHER_DIGIT_COUNT_INVALID

• 意味: voucherDigitCount は 1～30 の整数で指定してください。
• 主な発生条件: voucherDigitCountが1～30外
• 不正例: voucherDigitCount:0
• 修正方法: voucherDigitCount:12
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_VOUCHER_FONT_SIZE_INVALID

• 意味: voucherFontSize は 8～96px で指定してください。
• 主な発生条件: voucherFontSizeが8～96外
• 不正例: voucherFontSize:100
• 修正方法: voucherFontSize:20
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_VOUCHER_LINE_COLOR_INVALID

• 意味: ${name} は HEX color で指定してください。
• 主な発生条件: 伝票線色がHEXでない
• 不正例: voucherLineColor:"red"
• 修正方法: voucherLineColor:"#6ea3ff"
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

NUMBERBOX_VOUCHER_LINE_WIDTH_INVALID

• 意味: ${name} は ${min}～${max} の数値で指定してください。
• 主な発生条件: 伝票線幅が各許容範囲外
• 不正例: voucherLineWidth:9
• 修正方法: voucherLineWidth:1
• 失敗時の状態: 設定/入力を拒否し、既存の安全なRuntime状態を不用意に上書きしません。

15.2 HTML Functional Class Integration Error

• NUMBERBOX_FUNCTIONAL_CLASS_RUNTIME_MISSING — BoneNumberBox runtime is not loaded first. 対処: Load bone-numberbox.js before the functional class.

• NUMBERBOX_FUNCTIONAL_CLASS_ANCHOR_INVALID — bf-numberbox is not set on the target Element. 対処: Add class="bf-numberbox" to an input/Element.

• NUMBERBOX_FUNCTIONAL_CLASS_BOOLEAN_INVALID — A data-* boolean is neither true nor false. 対処: Use true/false (or 1/0, yes/no, on/off).

• NUMBERBOX_FUNCTIONAL_CLASS_VALUE_INVALID — HTML value is not empty or a finite numeric string. 対処: Use value="", value="12.5", etc.

16. Lifecycle

bf-numberboxは宣言元ごとに1回mountし、属性変更時はvalue/optionsをrefreshします。unmount()はRuntimeをdestroyして元inputのhidden状態を戻します。Runtime destroy()は#002 OUTをdisposeし#022 Effectもdetachします。

17. Troubleshooting

• 表示が1,000.00でもOUTはnumberです。display文字列ではなくgetCommittedValue()/buildOutput()を確認します。
• ￥・罫線・△・カンマは表示専用です。表示文字列を数値へ再parseしません。
• commitしても値が変わらない時は、テスト期待値を変える前にvalidate()とSecurity状態を確認します。
• WAITが流れない時はChannel接続とsetTargetReady(true)を確認します。
• DOCに[[BF-NUMBERBOX-SAMPLE:...]]が残る場合、component DOC integration JS未読込または共有Guide DOM契約変化を確認します。

18. 責務境界

• #029: 数値編集、丸め、表示整形、伝票表示、Validation、commit。
• #002: 接続・WAIT/FIFO/BLOCKED配送。
• #022: Active Border Effectの実描画。
• #040: solid色を選んで返すColorPicker UI。
• #017: 表示位置等の基準だけ参照し、BoneText Runtimeには依存しません。