# 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 最小利用 ```html ``` この`input`は宣言用です。mount後は非表示になり、隣に実`BoneNumberBox v1.0.17`を生成します。Runtimeでcommitが成功すると、確定numberを元inputの`value`へ戻します。 ### 2.2 設定付き利用 ```html ``` ### 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を作りません。 ```js 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 全51件 **`NUMBERBOX_022_EFFECT_UNSUPPORTED`** - 意味: 設定した#022 Effectは接続中の正式Runtimeで未対応です。 - 主な発生条件: 新旧#022 Effectカタログの非共通値を指定。 - 不正例: `旧#022へ activeBorderEffect:"wave" を指定` - 修正方法: `BoneHoverBorderEffect.effects`に含まれるEffectを選択します。旧crossは新cornerへ互換委譲します。 - 失敗時の状態: Unsupported Effectをそのまま適用せず、直前の安全な状態を保持します。 **`NUMBERBOX_022_DEPENDENCY_REQUIRED`** - 意味: #022 Bone Hover Border Effect の正式APIが必要です。 - 主な発生条件: #022 正式API不足 - 不正例: `古い#022/未読込` - 修正方法: `#022 正式Runtimeを先に読込` - 失敗時の状態: 設定/入力を拒否し、既存の安全な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 / 正規化済linear-gradient のみ指定できます。 - 主な発生条件: 背景色が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には依存しません。