# Bone Flow #042 Button

Version: 1.0.12
Status: Development

## Purpose

Action UI for a clickable Button. The former #044 CommandButton responsibility is integrated into #042 as optional `mode: "command"`; no separate #044 runtime is created.

## 使用 / 参照コンポーネント

- #001 Bone Core v1.0.0
- #002 Bone Joint v1.1.36
- #017 Bone Text v1.0.34: display-responsibility basis
- #019 Bone Image v1.0.72: ボタン画像の描画、およびボタンアイコンの選択・設定・描画
- #039 Bone FilePicker v1.0.2: Normal / Pressed ボタン画像ファイルの選択
- #020 Bone Label v1.0.61: common UI / Label / QA / Completion basis
- #022 Bone Hover Border Effect v1.0.10: Active + mouse-over border effects
- #040 Bone ColorPicker v1.0.15: formal Caller API for Normal / Pressed text (solid + GRADIENT_V1) / parent / Effect color selection


## Button visual states

- Shape: `normal` / `square` / `raised` / `image`
- Normal color: #040 ColorPicker `solid + GRADIENT_V1`
- Normal image / Pressed image: **選択は#039 FilePicker**、描画は#019 Bone Image
- Button icon: **#019 Bone Image** で設定し、表示位置は `top / bottom / left / right`
- Pressed text: `pressedLabel`
- Tooltip text: `tooltip`

`shape=image` の画像ファイルは#039 FilePickerから受け取り、#042は選択結果をNormal/Pressed Sourceとして保持し、実描画を#019へ委譲します。Button iconも#019のImage Editor/valueを使用し、#042は`iconPosition`（上/下/左/右）だけをButtonレイアウトへ反映します。

## Modes

- `normal`: emits a Button action and OUT when executed.
- `command`: executes a bound command (`id`, `execute`, optional `canExecute`) and emits the result to OUT.

## Common UI contract

The test UI preserves the Bone Flow common sections: Property language switch (日本語 / English), parent element inheritance / FIT / 9-direction parent preview, active border effect, mouse-over border effect using #022, independent Untrusted IN / Security Test, five formal #002 evaluated connection-image cases, #002 OUT WAIT / BLOCKED, Smoke Test / Validation Report, Runtime Console, Completion, and HTML Functional Class Guide.

## Completion

Completion is available only after Runtime QA ALL PASS plus WAIT and BLOCK visual confirmations. Browser Runtime is user-confirmed on localhost; package/static checks do not replace Browser Runtime.


## v1.0.6 correction
- Class List / HTML Functional Class is restored immediately after Button Preview / API and before Security.
- Normal color delegates to #040 ColorPicker with solid + GRADIENT_V1.
- Button runtime accepts #040 GRADIENT_V1 and converts it with BoneColorPicker.gradientToCss().
- #019 Image icon flow uses only the Image Editor native Font Awesome list. #042 enhances that same list with visible Glyph / 60-item paging / release / current selection status; no second catalog is rendered.
- #039 Normal / Pressed image picker, Parent, #022 effects, Security, Connection Image, WAIT/FIFO/BLOCKED, Smoke/Validation and Completion are retained.

## v1.0.9 correction

- Fixed Preview overflow where the #019/#018 standalone icon container could push the Button label outside the control.
- Icon + Text stay inside the Button for top / bottom / left / right positions.
- Added Browser Runtime bounds checks for this exact regression.


## v1.0.9 Pressed text color
- `pressedTextColor`: 押下中のButton文字色。#040 ColorPicker Caller（solid + GRADIENT_V1）で選択し、#042のPressed stateで文字へ適用する。
- Font Awesome一覧は#019 Image Editor内の1一覧だけを使用し、#019ローカルFont Awesomeフォントのロード完了後に実Glyph + 名前を表示する。


## v1.0.9 duplicate catalog correction

- Font Awesomeアイコン一覧は#019 Image Editor内の正式一覧1つだけを表示する。
- v1.0.8で追加した二重の独自一覧は削除。
- Glyph補助・検索・ページ移動・解除は同じ#019一覧へ適用する。
- 押下時テキスト色は#040 Callerを維持し、v1.0.12でsolid + GRADIENT_V1へ拡張する。


## v1.0.10 Property language correction
- Property表示言語が日本語の時、Button Propertyのラベルだけでなくselect option（Mode / Variant / Size / Theme / Appearance / Shape / Icon position / 9-way / Effect）も日本語表示する。
- English選択時は同じoptionを英語へ戻す。value/API値は変更しない。


## v1.0.12 Pressed text gradient correction
- `pressedTextColor` accepts #040 `GRADIENT_V1` in addition to `#RRGGBB`.
- The pressed text ColorPicker caller exposes both solid and gradient presets.
- Gradient is rendered on the pressed label text with background-clip, and cleared on release.


## v1.0.12 Runtime QA correction
- V17は#042が独自native color inputを持たないことを検証する。
- #040 ColorPicker自身が生成する`.bone-colorpicker input[type=color]`と、#019 Image Editor責務の`.bone-image-editor input[type=color]`は正式依存Component内部として許可する。
- #042 Propertyの6つのcolor sourceはhiddenのまま、各triggerが#040 Callerへattach済みであることを同時検証する。