# Bone Flow #020 Label — 操作説明書
> Browser表示は `/boneflow/test/bone-label.html` の「ガイドを開く」から確認できます。Markdown直開きに依存しません。


Package Version: 1.0.62
Runtime: BoneLabel 1.0.60  
Status: Development  
用途: #020 Labelの操作説明書正本

## 1. 画面の目的

#020 Labelの表示内容、親への吸着、配置、サイズ、文字、装飾、Effect、INPUT / OUT、テスト、Completionを確認する画面です。

## 2. Previewの操作

Propertyを変更すると合算Previewへ反映されます。Label文字、親要素への吸着、表示位置、サイズ、文字装飾、背景、Border、Shadow、Glow、Effectなどを確認します。

## 3. 親要素に吸着

### Label

Label自身を表示主体として確認します。

### 親要素

「親要素に吸着」をONにすると「親要素設定（継承確認用）」が有効になります。親の幅・高さ・背景色・文字色・角丸を設定し、親の中で9方向またはFITから表示位置を選択できます。親要素設定はテスト専用でOUT・保存データには含みません。

- 左上 / 上中央 / 右上
- 左中央 / 中央 / 右中央
- 左下 / 下中央 / 右下
- FIT（親要素の表示領域へ合わせる）

## 4. 色の変更

#020の現在の色選択UIは #040 ColorPickerを使用します。背景は1つのPropertyへ統合されています。

- 文字色 / 背景 / 枠色: Solid / Transparent / Gradient
- 影色 / 発光色: Solid / Transparent

1. Propertyの色□をクリック。
2. #040 ColorPicker Overlayが開く。
3. 用途に対応した色種別を選択。
4. RETURNされた値が#020 PropertyとPreviewへ反映される。

#040本体はProperty内へ埋め込まれません。

## 5. Labelサイズ

- fixed: 指定幅・高さで表示。
- fit: 設定されたLabel領域に合わせて文字表示を調整。

## 6. 均等割り付け

用途に応じてLabel幅または親幅に対する文字の均等割り付けを確認します。

## 7. エフェクト（#117 Animation）

要素本体のMotionは #117 Animation v1.0.9 を参照します。「有効」をONにし、Animation UI番号 / Target UI番号 / 適用先 / Animation種類 / 方向 / 軸 / 速度 / 移動距離 / Loop / Loop WAIT / reduced-motionを設定します。

適用先が「表示主体全体」の場合は `targetPart=whole`、「ラベル文字のみ」の場合は `targetPart=text` です。「#117 Animationをテスト再生」で実際の#117 Runtimeを実行します。

#020は独自keyframe・timer・loop schedulerを持ちません。枠のHover Effectは別責務の#022です。

## 8. INPUT / OUT

#020 LABEL INPUTとOUTをテスト画面で確認できます。

親Componentへ吸着した場合も、Class APIの `getInput()` / `getOutput()` / `getState()` から取得できます。親がLabel内部DOMを調べる必要はありません。

## 9. 親Componentからの操作

親Componentでは `BoneLabel.Component` instanceを保持します。

- 親吸着: `attachInstance()` / `attach()`
- 既存親から参照: `getInstance()`
- 値変更: `setValue()` / `update()`
- 状態確認: `getState()`
- INPUT / OUT: `getInput()` / `getOutput()`
- 親から解除: `detach()`
- 破棄: `destroy()`

詳細は `020-Label-Class-API.md` と `020-Label-Usage.md` を参照します。

## 10. Smoke Test / Validation

Report欄から以下を実行できます。

- Smoke Test 実行
- Validation 実行
- 全テスト実行

Class APIについても、公開確認、親吸着instance参照、既存APIからのClass参照、値更新、INPUT / OUT / State、detach / destroy、Callback / Eventを確認します。

## 11. Completion

Smoke TestとValidationがALL PASSになったあと、ユーザー操作でCompletionを実行します。

ZIPを作成しただけではCompleted / Specification Frozenにはしません。localhostでのRuntime確認とCompletionが正式確定条件です。


## v1.0.58 画面操作
1. 「親要素に吸着」をチェックする。
2. 「親要素」で標準 / 横長 / 小型を選ぶ。
3. 「表示位置（9方向 / FIT）」から位置を選ぶ。FITは親要素の表示領域へ合わせる。
4. 「背景」の□をクリックし、#040 ColorPickerから単色 / 透過 / グラデーションを選ぶ。背景タイプ・開始色・終了色・角度は1つの背景Propertyに統合されている。
5. 画面下部の「Classリスト / Public API」でClassとMethodを確認する。
6. 「ガイドを開く」内の「操作説明」で画面操作の流れを確認する。
7. 合算プレビュー・OUT値を確認し、Smoke Test / Validationを実行する。


## #022 マウスオーバー時の枠Effect

「マウスオーバー時の枠Effect（#022）」で有効化し、通常 / ネオン / スピン / クロス / 点滅、Effect色、方向、速度、Spin外周幅、Spin発光量を設定します。実表示は#022 `BoneHoverBorderEffect.attach()` に委譲します。


## Runtime Schema確認

1. `BoneLabel.getPropertySchema()` で正式Property一覧を取得します。
2. 初期値は `BoneLabel.getPropertyDefaults()` を使用します。
3. 個別定義は `BoneLabel.getPropertyDefinition("text")` のように取得します。
4. HTMLへ直接配置する場合は `bf-label` をFunctional Classとして確認します。

```html
<div class="bf-label"></div>
```