# Bone Flow #020 - Label

## 0. 文書情報

DOC ID: `DOC-0020` / UI ID: `UI-020` / Runtime: `BoneLabel 1.0.60` / HTML Functional Class: `bf-label` / Package: `1.0.69`

この文書は **#020 Labelを実際に使うためのガイド** です。TEST画面の項目名を並べるだけではなく、HTML Functional Class、Property Editor、JavaScript Component Classの使い分けと実際の記述方法を説明します。

## 1. 最初に

通常のHTMLからLabelを1つ表示するだけなら、最初に覚えるのはこの1行です。

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

この要素の `氏名` がRuntime Property `text` になります。`bf-label` は通常利用の入口であり、Public API 1個ごとにClassを増やす方式ではありません。

#020はLabel文字、配置、FIT/固定サイズ、均等割り付け、装飾、IN/OUTを担当します。Joint描画は#002、Hover Border Effectは#022、色選択は#040、要素Motionは#117へ委譲します。#040 OverlayのOPEN/CLOSEは#118の責務です。

## 2. Labelとは

Labelは入力欄そのものではありません。表示主体はLabel単体、または `BoneLabel.Component.attach(parentElement)` で接続した既存親要素です。通常の `bf-label` はまずLabel単体として生成されます。

## HTML Functional Class

正式Class: `bf-label`

この節は画面下部の「HTML Functional Class ガイドを開く」から直接開きます。以下の順に使えば動作します。

1. `bone-label.css` を読む。
2. 表示したい要素へ `class="bf-label"` を付け、要素内にLabel文字を書く。
3. `bone-label.js` を読む。
4. `bone-label-html-class.js` を読む。
5. bridgeが自動mountし、要素内へBoneLabel Runtime instanceを生成する。

### 3. HTML Functional Class `bf-label`

`bf-label` は、**Public APIを知らなくてもHTMLだけで基本Labelを表示するための正式入口**です。

### 3.1 いつ使うか

通常のHTMLへ固定の項目名・見出し・説明ラベルを置きたい場合に使います。最初から詳細なRuntime Propertyを組み立てる必要はありません。

### 3.2 どこへ書くか

Labelを表示したい場所へ通常のHTML要素として書きます。

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

`bf-label` を付けた要素の `innerText` が初期Label文字になります。

### 3.3 必要な読込と最小構成

CSS → BoneLabel Runtime → HTML Functional Class bridge の順で読み込みます。

```html
<link rel="stylesheet" href="/boneflow/css/bone-label.css">

<div class="bf-label">氏名</div>

<script src="/boneflow/js/bone-label.js"></script>
<script src="/boneflow/js/bone-label-html-class.js"></script>
```

この例では `氏名` がそのまま表示文字になります。

### 3.4 コピーして使える完全HTML

```html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Bone Label Sample</title>
  <link rel="stylesheet" href="/boneflow/css/bone-label.css">
</head>
<body>
  <div id="employee-name-label" class="bf-label">氏名</div>

  <script src="/boneflow/js/bone-label.js"></script>
  <script src="/boneflow/js/bone-label-html-class.js"></script>
</body>
</html>
```

ブラウザでこのHTMLを開くと、bridgeが `.bf-label` を走査し、`BoneLabel.createInstance({ text: "氏名" })` 相当の正式Runtime instanceをmountします。

### 3.5 mount後に何が起きるか

mountは元の `.bf-label` hostを残し、その中へBoneLabel Runtimeが生成したLabel要素を挿入します。bridgeはhostへ次の状態markerを付けます。

- `data-bf-label-mounted="true"` — mount済みmarker。利用者が手書きする属性ではありません。
- `data-bf-label-runtime="1.0.60"` — 使用Runtimeの確認marker。利用者が手書きする属性ではありません。

同じhostへ再度 `mount()` しても、既存instanceを返し二重mountしません。

### 3.6 HTMLから直接指定できるもの

正式bridgeがHTMLから読み取る利用者入力は **`class="bf-label"` と要素の文字列**です。

| 指定 | 書き方 | 意味 |
|---|---|---|
| Component入口 | `class="bf-label"` | #020 Labelとしてmountする |
| 初期文字 | `<div class="bf-label">氏名</div>` | `text="氏名"` としてRuntimeへ渡す |
| その他のRuntime Property | HTML直接指定不可 | Property EditorまたはJavaScript APIを使う |

`data-font-size`、`data-label-width`、`data-border-color` のような **Runtimeに存在しないHTML属性を勝手に追加しません**。

### 3.7 JavaScriptから設定を変更する

自動mountされたinstanceは `BoneLabelHTMLClass.getInstance(host)` で取得できます。

```html
<div id="employee-name-label" class="bf-label">氏名</div>
<script src="/boneflow/js/bone-label.js"></script>
<script src="/boneflow/js/bone-label-html-class.js"></script>
<script>
  const host = document.getElementById("employee-name-label");
  const label = BoneLabelHTMLClass.getInstance(host);

  label.update({
    text: "社員番号",
    textStyle: {
      fontSize: 16,
      color: "#DCE8F8"
    },
    labelSize: {
      mode: "fit"
    }
  });
</script>
```

この方法なら、HTML Functional Classを入口にしたままRuntime Propertyを正式APIで変更できます。

### 3.8 状態・OUTを確認する

```js
const host = document.getElementById("employee-name-label");
const label = BoneLabelHTMLClass.getInstance(host);

console.log(label.getValue());
console.log(label.getOutput());
console.log(label.getState());
```

`getValue()` は現在のProperty、`getOutput()` は#020 OUT、`getState()` はinstance状態を返します。

### 3.9 JavaScriptで後から追加した要素

bridgeは初回scanに加えて `MutationObserver` で追加DOMも監視します。

```js
const host = document.createElement("div");
host.className = "bf-label";
host.textContent = "後から追加したLabel";
document.body.appendChild(host);
```

追加後、bridgeが同じ `bf-label` 契約でmountします。

### 3.10 HTML Functional Classを使わず直接生成する場合

高度操作では `BoneLabel.createInstance()` を直接利用できます。

```js
const label = BoneLabel.createInstance({
  text: "社員番号",
  position: "top",
  labelSize: { mode: "fixed", width: 160, height: 32 }
});

document.body.appendChild(label.getElement());
```

`bf-label` と `BoneLabel.Component` / Public APIは別の入口です。ClassリストへPublic APIをClassとして並べません。

### 3.11 よくある誤り

- `bf-label`を書いただけで詳細PropertyまでHTML属性化されると思わない。
- `data-bf-label-mounted` / `data-bf-label-runtime` を手書きしない。
- `BoneLabel` Runtimeより先にbridgeだけを読み込まない。
- Public API名をHTML Classとして書かない。
- Guide内のコード例を省略記号 `...` のままコピーしない。このガイドの例は省略せず記載しています。

## 4. Property Editorと合算Preview

左のPropertyを変更すると右のPreviewへ反映します。Property EditorはHTML Functional Classとは別の設定入口ですが、最終的に同じBoneLabel Runtime Propertyへ渡します。

## 5. Runtime-owned Property Schema

Property定義の所有者はBoneLabel Runtimeです。UI独自のProperty定義を正本にしません。

```js
BoneLabel.getPropertySchema();
BoneLabel.getPropertyDefaults();
BoneLabel.getPropertyDefinition("text");
```

この3 APIがProperty名・型・Default・enum/rangeの基準です。

## 6. Runtime Default / Property詳細

以下は **BoneLabel 1.0.60のRuntime-owned Property Schemaから生成した値**です。HTML Functional Classから直接指定できるのは `text` に対応するinnerTextだけです。

### 基本設定 (`basic`)

Label文字・関連付け・基本位置・可視状態を管理します。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `text` | `string` | `項目ラベル` | — | 表示するLabel文字。HTML Functional Classでは要素のinnerTextがこの値になる。 | `innerText` |
| `forId` | `string` | `` | — | 空でなければRuntimeはlabel要素を生成し、for属性へ設定する。 | Property Editor / Public API |
| `position` | `enum` | `top` | `top` / `right` / `bottom` / `left` | Label単体の基本配置。top / right / bottom / left。 | Property Editor / Public API |
| `parentPlacement` | `enum` | `top-left` | `top-left` / `top-center` / `top-right` / `middle-left` / `center` / `middle-right` / `bottom-left` / `bottom-center` / `bottom-right` / `fit` | 親要素へattachした場合の親内配置。fitを含む10値。 | Property Editor / Public API |
| `gap` | `number` | `6` | min `0` | Labelと対象の間隔。 | Property Editor / Public API |
| `disabled` | `boolean` | `false` | — | 無効状態。Runtimeはaria-disabledを反映する。 | Property Editor / Public API |
| `hidden` | `boolean` | `false` | — | 非表示状態。Runtimeのhiddenへ反映する。 | Property Editor / Public API |
| `title` | `string` | `` | — | 生成要素のtitle。 | Property Editor / Public API |

### 文字 (`textStyle`)

文字のFont/Size/Weight/Color/Line Height/Letter Spacingを管理します。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `textStyle.fontFamily` | `string` | `Meiryo, Yu Gothic, sans-serif` | — | Label文字のfont-family。 | Property Editor / Public API |
| `textStyle.fontSize` | `number` | `14` | min `8` | Label文字サイズ(px)。 | Property Editor / Public API |
| `textStyle.fontWeight` | `number` | `700` | min `100`; max `900`; step `100` | Label文字の太さ。100～900。 | Property Editor / Public API |
| `textStyle.color` | `color` | `#dce8f8` | — | Label文字色。 | Property Editor / Public API |
| `textStyle.lineHeight` | `number` | `1.5` | min `0.1` | Label文字のline-height。 | Property Editor / Public API |
| `textStyle.letterSpacing` | `number` | `0` | — | Label文字のletter-spacing。 | Property Editor / Public API |

### 均等割り付け (`distribution`)

文字をLabel幅または親幅へ均等割り付けする方式です。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `distribution.mode` | `enum` | `none` | `none` / `label-width` / `parent-width` | 文字の均等割り付け方式。none / label-width / parent-width。 | Property Editor / Public API |

### サイズ (`labelSize`)

固定サイズかFITか、および固定幅/高さを管理します。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `labelSize.mode` | `enum` | `fixed` | `fixed` / `fit` | Labelサイズ方式。fixedまたはfit。 | Property Editor / Public API |
| `labelSize.width` | `number` | `160` | min `20` | fixed時のLabel幅(px)。 | Property Editor / Public API |
| `labelSize.height` | `number` | `32` | min `16` | fixed時のLabel高さ(px)。 | Property Editor / Public API |

### 装飾 (`decoration`)

背景、Gradient、枠、Padding、Shadow、Glow、Outline、Rotation、Scaleを管理します。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `decoration.backgroundType` | `enum` | `solid` | `solid` / `gradient` | 背景方式。solidまたはgradient。 | Property Editor / Public API |
| `decoration.backgroundColor` | `color` | `transparent` | — | solid背景色。transparent対応。 | Property Editor / Public API |
| `decoration.gradientStart` | `color` | `#1c6fd1` | — | gradient開始色。 | Property Editor / Public API |
| `decoration.gradientEnd` | `color` | `#7c3aed` | — | gradient終了色。 | Property Editor / Public API |
| `decoration.gradientAngle` | `number` | `90` | min `0`; max `360` | gradient角度(deg)。 | Property Editor / Public API |
| `decoration.borderEnabled` | `boolean` | `false` | — | Label枠線の有効/無効。 | Property Editor / Public API |
| `decoration.borderColor` | `color` | `#5ba6ff` | — | Label枠線色。 | Property Editor / Public API |
| `decoration.borderWidth` | `number` | `1` | min `0` | Label枠線幅(px)。 | Property Editor / Public API |
| `decoration.borderStyle` | `enum` | `solid` | `solid` / `dashed` / `dotted` / `double` | 枠線style。solid / dashed / dotted / double。 | Property Editor / Public API |
| `decoration.borderRadius` | `number` | `6` | min `0` | 角丸(px)。 | Property Editor / Public API |
| `decoration.paddingX` | `number` | `6` | min `0` | 左右padding(px)。 | Property Editor / Public API |
| `decoration.paddingY` | `number` | `3` | min `0` | 上下padding(px)。 | Property Editor / Public API |
| `decoration.shadowEnabled` | `boolean` | `false` | — | box-shadowの有効/無効。 | Property Editor / Public API |
| `decoration.shadowX` | `number` | `0` | — | 影のXオフセット(px)。 | Property Editor / Public API |
| `decoration.shadowY` | `number` | `3` | — | 影のYオフセット(px)。 | Property Editor / Public API |
| `decoration.shadowBlur` | `number` | `10` | min `0` | 影のblur(px)。 | Property Editor / Public API |
| `decoration.shadowColor` | `color` | `rgba(0,0,0,.35)` | — | 影色。 | Property Editor / Public API |
| `decoration.glowEnabled` | `boolean` | `false` | — | Glowの有効/無効。 | Property Editor / Public API |
| `decoration.glowColor` | `color` | `#5ba6ff` | — | Glow色。 | Property Editor / Public API |
| `decoration.outlineEnabled` | `boolean` | `false` | — | 文字Outlineの有効/無効。 | Property Editor / Public API |
| `decoration.outlineColor` | `color` | `#0b1220` | — | Outline色。 | Property Editor / Public API |
| `decoration.outlineWidth` | `number` | `1` | min `0` | Outline幅(px)。 | Property Editor / Public API |
| `decoration.rotation` | `number` | `0` | — | Label回転角度。 | Property Editor / Public API |
| `decoration.scale` | `number` | `1` | min `0` | Label拡大率。 | Property Editor / Public API |

### #022 Hover Border Effect (`hoverBorderEffect`)

#022 Hover Border Effectへ渡す正式設定です。独自:hover描画ではありません。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `hoverBorderEffect.enabled` | `boolean` | `false` | — | #022 Hover Border Effectを利用するか。 | Property Editor / Public API |
| `hoverBorderEffect.effect` | `enum` | `normal` | `normal` / `neon` / `spin` / `cross` / `blink` | #022へ渡すEffect種別。 | Property Editor / Public API |
| `hoverBorderEffect.color` | `color` | `#35f4ff` | — | #022へ渡すEffect色。 | Property Editor / Public API |
| `hoverBorderEffect.direction` | `enum` | `clockwise` | `clockwise` / `counterclockwise` | #022へ渡す回転方向。 | Property Editor / Public API |
| `hoverBorderEffect.speed` | `enum` | `normal` | `slow` / `normal` / `fast` | #022へ渡す速度。 | Property Editor / Public API |
| `hoverBorderEffect.spinWidth` | `number` | `2` | min `1`; max `24` | #022 spin線幅。 | Property Editor / Public API |
| `hoverBorderEffect.spinGlow` | `number` | `12` | min `0`; max `40` | #022 spin Glow量。 | Property Editor / Public API |

### Animation Relation (`effect`)

#117 Animationへ委譲するRelation/動作設定です。#020自身がMotion engineを所有しません。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `effect.type` | `enum` | `none` | `none` / `move` / `bounce` / `pulse` / `spin` / `blink` / `slide` / `zoom` / `flow` / `shimmer` / `glow-sweep` / `breathing-glow` | #117へ委譲するAnimation種別。noneは無効。 | Property Editor / Public API |
| `effect.trigger` | `enum` | `self` | `self` / `parent` | Animation発火主体。selfまたはparent。 | Property Editor / Public API |
| `effect.target` | `enum` | `subject` | `subject` / `text` | Animation対象。subjectまたはtext。 | Property Editor / Public API |
| `effect.animationUiNo` | `string` | `UI-117-020-001` | — | #117 Animation UI識別子。 | Property Editor / Public API |
| `effect.targetUiNo` | `string` | `UI-020-001` | — | Animation Target UI識別子。 | Property Editor / Public API |
| `effect.targetPart` | `string` | `whole` | — | Animation対象部位識別子。 | Property Editor / Public API |
| `effect.direction` | `enum` | `forward` | `forward` / `reverse` | Animation方向。forward / reverse。 | Property Editor / Public API |
| `effect.axis` | `enum` | `horizontal` | `horizontal` / `vertical` | Animation軸。horizontal / vertical。 | Property Editor / Public API |
| `effect.speed` | `enum` | `normal` | `slow` / `normal` / `fast` | Animation速度。slow / normal / fast。 | Property Editor / Public API |
| `effect.distance` | `number` | `24` | min `0`; max `10000` | Animation移動距離。 | Property Editor / Public API |
| `effect.loop` | `boolean` | `true` | — | Animation loopの有効/無効。 | Property Editor / Public API |
| `effect.loopWaitMs` | `number` | `300` | min `0`; max `60000` | Loop間の待機(ms)。 | Property Editor / Public API |
| `effect.enabled` | `boolean` | `false` | — | Animation連携の有効/無効。 | Property Editor / Public API |
| `effect.reducedMotion` | `boolean` | `true` | — | Reduced Motion考慮フラグ。 | Property Editor / Public API |

### コンテナ (`containerStyle`)

Labelを収めるコンテナ側の外観設定です。

| Property | Type | Runtime Default | 許容値 / Range | 用途 | HTML Functional Classから直接指定 |
|---|---|---|---|---|---|
| `containerStyle.minWidth` | `number` | `0` | min `0` | コンテナ最小幅。 | Property Editor / Public API |
| `containerStyle.maxWidth` | `number|null` | `null` | — | コンテナ最大幅。nullは上限なし。 | Property Editor / Public API |
| `containerStyle.paddingTop` | `number` | `0` | min `0` | 上padding(px)。 | Property Editor / Public API |
| `containerStyle.paddingRight` | `number` | `0` | min `0` | 右padding(px)。 | Property Editor / Public API |
| `containerStyle.paddingBottom` | `number` | `0` | min `0` | 下padding(px)。 | Property Editor / Public API |
| `containerStyle.paddingLeft` | `number` | `0` | min `0` | 左padding(px)。 | Property Editor / Public API |
| `containerStyle.backgroundColor` | `color|null` | `null` | — | コンテナ背景色。nullは未指定。 | Property Editor / Public API |
| `containerStyle.borderEnabled` | `boolean` | `false` | — | コンテナ枠線の有効/無効。 | Property Editor / Public API |
| `containerStyle.borderColor` | `color` | `#425a78` | — | コンテナ枠線色。 | Property Editor / Public API |
| `containerStyle.borderWidth` | `number` | `1` | min `0` | コンテナ枠線幅(px)。 | Property Editor / Public API |
| `containerStyle.borderStyle` | `enum` | `solid` | `solid` / `dashed` / `dotted` / `double` | コンテナ枠線style。 | Property Editor / Public API |
| `containerStyle.borderRadius` | `number` | `6` | min `0` | コンテナ角丸(px)。 | Property Editor / Public API |
| `containerStyle.opacity` | `number` | `1` | min `0`; max `1` | コンテナopacity。0～1。 | Property Editor / Public API |


## 7. 配置 / FIT

`parentPlacement` は `top-left / top-center / top-right / middle-left / center / middle-right / bottom-left / bottom-center / bottom-right / fit` の10値です。`position` は `top / right / bottom / left`、`labelSize.mode` は `fixed / fit`、`distribution.mode` は `none / label-width / parent-width` です。

## 8. 文字と装飾

文字色、背景、Gradient、枠、影、Glow、Outline、Rotation、ScaleはRuntime Propertyです。色選択UIは#040 ColorPicker Callerを使用し、Consumer側でnative color pickerを正式経路にしません。

## 9. #040 ColorPicker

正式経路は Property caller → `BoneColorPicker.attachCaller()` → #040 Overlay → RETURN → 同じProperty → Previewです。Consumerから#040内部DOMを直接操作しません。

## 10. #022 Hover Border Effect

`hoverBorderEffect` はenabled/effect/color/direction/speed/spinWidth/spinGlowをRuntimeで保持し、正式#022 Runtimeへattachします。独自`:hover`枠描画で代用しません。

## 11. #117 Animation

#020 Runtimeは要素Motionを独自実装せず#117へ委譲します。`effect` PropertyはRelation情報で、Label単体/親要素主体の対象をRuntimeが解決します。

## 12. #118 Transition

#020が#118を直接所有するのではありません。#040 ColorPicker OverlayのOPEN/CLOSEが#118をtransitive dependencyとして使用します。

## 13. Preview / OUT

Property変更は合算Previewへ反映します。OUTは `BoneLabel.getOutput()` またはinstance `getOutput()` で取得します。

## 14. #002 Bone Joint

Connection Imageの判定は `BoneJoint.evaluate(...)`、線は#002 Runtimeの描画APIを使います。#020独自Joint線・markerを作りません。

## 15. JavaScript Component Class

`BoneLabel.Component` は高度操作用です。生成、親attach、値更新、IN/OUT/State、detach/destroy、#022/#117状態参照をinstance単位で行います。HTML Functional Class `bf-label` と混同しません。

## 16. Public API

- `BoneLabel.defaults()`
- `BoneLabel.normalizeValue()`
- `BoneLabel.validateValue()`
- `BoneLabel.buildInput()`
- `BoneLabel.buildOutput()`
- `BoneLabel.renderOutput()`
- `BoneLabel.create()`
- `BoneLabel.attachToParent()`
- `BoneLabel.playEffect()`
- `BoneLabel.distributeLabels()`
- `BoneLabel.getInput()`
- `BoneLabel.getOutput()`
- `BoneLabel.getState()`
- `BoneLabel.isInstance()`
- `BoneLabel.createInstance()`
- `BoneLabel.attachInstance()`
- `BoneLabel.getInstance()`
- `BoneLabel.getClassList()`
- `BoneLabel.getPropertySchema()`
- `BoneLabel.getPropertyDefaults()`
- `BoneLabel.getPropertyDefinition()`
- `BoneLabel.getCompletionState()`
- `BoneLabel.getAnimationState()`
- `BoneLabel.getAnimationOutput()`
- `BoneLabel.getAnimationDependency()`
- `BoneLabel.getHoverBorderEffectState()`
- `BoneLabel.refreshHoverBorderEffect()`
- `BoneLabel.complete()`
- `BoneLabel.reopen()`

HTML Functional Classからinstanceを取得する場合は `BoneLabelHTMLClass.getInstance(host)` を使います。

## 17. Smoke Test / Validation

Smokeは正常系の実処理、Validationは異常系・契約・UI/Guide/Functional Class/Schemaを別に検証します。未実行をPASSにしません。

HTML Functional Class確認では最低限、`bf-label` 1Class、innerText mount、二重mount防止、Runtime 1.0.60、`getInstance()`、後追加DOM scanを確認します。

## 18. Completion

CompletionはSmokeとValidationの両方が実行済みかつALL PASSの場合だけRuntime APIへ渡せます。ユーザーlocalhost確認前にCompleted / Specification Frozenとはしません。

## 19. 操作ミス / Troubleshooting

### `bf-label` が何も表示しない

1. `/boneflow/css/bone-label.css` を読んでいるか確認。
2. `/boneflow/js/bone-label.js` を先に読んでいるか確認。
3. `/boneflow/js/bone-label-html-class.js` を読んでいるか確認。
4. HTMLに `class="bf-label"` と表示文字があるか確認。
5. DevToolsでhostに `data-bf-label-mounted="true"` が付いたか確認。

### 詳細PropertyをHTMLへ書きたい

#020の正式HTML Functional Class bridgeは詳細Property用data属性を持ちません。Property Editorまたは `BoneLabelHTMLClass.getInstance(host).update(...)` を使用します。

### GuideボタンでHTML Functional Class節へ移動しない

`HTML Functional Class ガイドを開く` はDOC-0020の `3. HTML Functional Class bf-label` へ直接移動する入口です。通常の `操作ガイド DOC-0020` はガイド先頭から開きます。

## 20. 依存関係まとめ

#001 Core / #002 Joint / #022 Hover Border Effect / #040 ColorPicker / #117 Animation。#118 Transitionは#040経由のtransitive dependencyです。