# Bone Flow #022 - Hover Border Effect Specification v1.0

## Formal scope

#022は既存HTMLElementへ視覚的な外周Effectを付与する共通UI Component。Effectは対象要素の内容・文字・Icon・背景を覆わない。

## Trigger

- Mouse Over
- Active
- Mouse Over + Active

Active状態の意味は#022で推測せず、利用Componentが `setActive(target, true / false)` で明示する。

## Effect

- normal
- neon
- spin
- blink
- dash
- corner
- chase
- double
- wave

`cross` はユーザー指示により削除。Runtime enumからも除外し、`cross` 入力は `BONE_022_EFFECT_INVALID` とする。

`normal` は固定外周線。`neon` は外周を移動する発光線。`spin` は固定された外周mask内でconic rotorのみを回転させる。`blink` は外周線の点滅。

`dash` は外周4辺の破線が周回する。`corner` は四隅のL字線だけを伸縮する。`chase` は短い発光線1本が外周を周回する。`double` は二重の外周線を表示する。`wave` は外周上の明暗帯を移動させる。

すべてのEffectはElement内部を塗りつぶさず、document.body直下overlayの外周領域だけで描画する。

`direction` は neon / spin / dash / chase / wave の進行方向へ適用する。`speed` は動的Effectの速度へ適用する。

`lineWidth` は `normal / neon / blink / dash / corner / chase / double / wave` の外周線幅を `1..12 px` で調整する正式Runtime Property。Defaultは `3`。`spin` は専用の `spinWidth` / `spinGlow` を維持する。

## Color Property selection

#022の `color` は単色 `#RRGGBB` 契約を維持する。色選択のUI責務のみ #040 ColorPicker Caller APIへ委譲し、#022 Consumerでは `solid` のみ許可する。Consumer所有Triggerから `attachCaller()` を使用し、#040 Overlay / Tooltipは `document.body` 直下、選択結果は `onReturn` で既存Propertyへ戻す。#022は#040内部DOM/CSSやPicker位置計算を持たない。既定色 `#35f4ff` を変更しない。

## Test UI required sections

- Property / Preview実連動
- Runtime-owned Property Schema
- 接続イメージ
- Smoke Test / Validation Report
- Runtime Console
- コンポーネント完了管理
- Guide Live Samples（9 Effect + 3 Trigger）
- 日本語 / English切替

ユーザーlocalhost Runtime確認前にCompleted扱いにしない。


## Effect registration revision

- Removed: `cross`
- Added: `dash / corner / chase / double / wave`
- Formal current enum: `normal / neon / spin / blink / dash / corner / chase / double / wave`
- Runtime Schema, Property UI, Guide JA/EN, Guide Live Samples, Smoke and Validation must all use this same enum.