# #040 ColorPicker 操作ガイド

## 1. はじめに
ColorPicker は Bone Flow の色選択を担当する UI Component です。単色、透過、構造化された2色 Linear Gradient を扱います。他の UI が独自の色一覧や Native ColorPicker を複製せず、色選択責務を #040 に委譲するための共通 Component です。

このガイドは UI-040 / DOC-0040 / TOC-0040 の正式経路から開きます。通常利用の HTML Functional Class は `bf-colorpicker` 1つです。Public API は高度操作用であり、HTML Classとは別です。

## 2. 対応する値
ColorPicker が扱う値は次の3種類です。

- Solid: `#RRGGBB` の6桁HEX。Runtimeは大文字へ正規化します。
- Transparent: 文字列 `transparent`。
- Gradient: `kind=gradient`、`type=linear`、angle 0以上360未満、stop 2件を持つ安全な構造化値。

短縮HEX、alpha付きHEX、CSS named color、CSS gradient文字列、ASCII制御文字を含む文字列、安全でないaccessor propertyは受理しません。

## 3. HTML Functional Class
通常利用Classは `bf-colorpicker` です。Public APIのメソッドごとにClassを作りません。

### 最小HTML
```html
<div class="bf-colorpicker" data-value="#0D6EFD"></div>
```

このHTMLを読み込むと `BoneColorPickerFunctionalClass` が host を検出し、実 `BoneColorPicker v1.0.18` Runtime を生成します。

### 透過を初期値にする
```html
<div class="bf-colorpicker" data-value="transparent"></div>
```

### 設定付きHTML
```html
<div
  class="bf-colorpicker"
  data-bone-id="profile-accent"
  data-value="#7C3AED"
  data-label="アクセント色"
  data-locale="ja"
  data-allowed-kinds="solid,transparent"
  data-theme="dark"
  data-appearance="normal"
  data-width="280"
  data-height="48"
  data-position="top-left"
  data-transition="fade"
  data-direction="down"
  data-speed="normal"
  data-respect-reduced-motion="true"
  data-show-value-text="true">
</div>
```

### HTMLから直接指定しない設定
`namedColors` と `namedGradients` は配列/構造化値です。HTML属性へJSONを押し込まず、Property Editorまたは `BoneColorPicker` Public APIを使用します。Gradientの初期値も構造化値なので `data-value` へCSS gradient文字列を指定しません。Gradient初期値はProperty EditorまたはPublic APIを使用します。

## 4. HTML属性
`bf-colorpicker` がRuntimeへ渡すHTML属性は次のとおりです。

- `data-value`: `#RRGGBB` または `transparent`。Defaultは `#0D6EFD`。
- `data-bone-id`: Bone ID。省略時はhost idまたは自動ID。
- `data-disabled`: Boolean。
- `data-change-commit`: Boolean。
- `data-show-value-text`: Boolean。
- `data-locale`: `ja` / `en`。
- `data-allowed-kinds`: `solid,transparent,gradient` のカンマ区切り。必要なkindだけ指定できます。
- `data-label-visible`: Boolean。
- `data-label`: Label文字列。
- `data-label-gap`: px相当の数値。
- `data-label-font-size`: px相当の数値。
- `data-inherit-parent`: Boolean。
- `data-width`: px相当の数値。
- `data-height`: px相当の数値。
- `data-position`: 9方向。
- `data-fit`: Boolean。
- `data-parent-fit`: Boolean。
- `data-input-align`: `auto / left / center / right`。
- `data-theme`: `default / dark / light / neon`。
- `data-background-color`: `theme / transparent / #RRGGBB`。
- `data-appearance`: `normal / flat / borderless`。
- `data-active-border-effect`: `normal / neon / spin / cross / blink`。
- `data-active-effect-color`: `#RRGGBB`。
- `data-active-effect-direction`: `clockwise / counterclockwise`。
- `data-active-effect-speed`: `slow / normal / fast`。
- `data-transition`: #118 Transition 23種のいずれか。Defaultは `fade`。
- `data-direction`: `up / down / left / right`。Defaultは `down`。
- `data-speed`: `slow / normal / fast`。Defaultは `normal`。
- `data-respect-reduced-motion`: Boolean。Defaultは `true`。

Boolean値は `true/false`、`1/0`、`yes/no`、`on/off` を受理します。それ以外はFunctional Class側でエラーにします。

## 5. Runtime Default
BoneColorPicker v1.0.18 のDefaultは次のとおりです。

- disabled = false
- changeCommit = true
- showValueText = true
- locale = ja
- allowedKinds = solid / transparent / gradient
- namedColors = Built-in 31色
- namedGradients = Built-in 8 Gradient
- labelVisible = true
- label = ColorPicker
- labelGap = 8
- labelFontSize = 14
- inheritParent = false
- width = 280
- height = 48
- position = top-left
- fit = false
- parentFit = false
- inputAlign = auto
- theme = default
- backgroundColor = theme
- appearance = normal
- activeBorderEffect = normal
- activeEffectColor = #35F4FF
- activeEffectDirection = clockwise
- activeEffectSpeed = normal

## 6. Built-in Solid 31色
以下は文字列だけの一覧ではなく、`bf-colorpicker` HTML Functional Classを31件実mountした表示テストです。各 `bf-colorpicker` の見えている正方形そのものを現在値の色で塗り、実 `BoneColorPicker v1.0.18` Runtimeで描画します。31/31件のmount・値一致・色面描画結果はセクション上部の1件の表示テスト結果で確認します。

[[BF-COLORPICKER-SOLID-PALETTE:ja]]

Primary #0D6EFD、Secondary #6C757D、Success #198754、Danger #DC3545、Warning #FFC107、Info #0DCAF0、Light #F8F9FA、Dark #212529、Blue #0D6EFD、Indigo #6610F2、Purple #6F42C1、Pink #D63384、Red #DC3545、Orange #FD7E14、Yellow #FFC107、Green #198754、Teal #20C997、Cyan #0DCAF0、Black #000000、White #FFFFFF、Gray #6C757D、Gray Dark #343A40、Gray 100 #F8F9FA、Gray 200 #E9ECEF、Gray 300 #DEE2E6、Gray 400 #CED4DA、Gray 500 #ADB5BD、Gray 600 #6C757D、Gray 700 #495057、Gray 800 #343A40、Gray 900 #212529。

表示名はlocaleに応じて日本語/Englishを切り替えます。色名は表示用metadataであり、`Primary`や`red`をBone valueとして渡すことはできません。

## 7. Built-in Gradient 8種
以下も `bf-colorpicker` HTML Functional Classを8件実mountします。GradientはHTML属性へCSS文字列を埋め込まず、mount後にRuntimeの `defaultNamedGradients()` が返した正式 `GRADIENT_V1` 値を `setValue()` して表示します。各正方形そのものを実Gradientで塗り、8/8件のmount・値一致・gradient描画結果はセクション上部の1件の表示テスト結果で確認します。

[[BF-COLORPICKER-GRADIENT-PALETTE:ja]]

Ocean、Sunset、Forest、Aurora、Violet、Fire、Ice、Monochrome の8種です。いずれもRuntime内部では安全な `GRADIENT_V1` 構造として保持し、表示時だけ `gradientToCss()` でCSSへ変換します。

## 8. Property Editor
Property Editorでは値kind、disabled、changeCommit、showValueText、locale、allowedKinds、Label、サイズ、親追従、Position、FIT、Theme、Background、Appearance、Active Effect、Named Color/Gradientに加え、Picker OPEN/CLOSE用の #118 Transition設定（Transition 23種 / Direction 4値 / Speed 3値 / Reduced Motion ON/OFF）を確認します。

BackgroundやEffect色など色を選ぶConsumer Propertyは、Consumer側のNative ColorPickerで代用せず、#040 Callerを使います。#040自身のカスタムPreset作成画面にあるNative `input[type=color]` はColorPicker内部編集UIです。

## 9. #118 Transition
#040では、完成済み **#118 Transition v1.0.12 / Runtime v1.0.3** を **Picker PanelのOPEN / CLOSE時の視覚ENTER / EXIT** に使用します。色値の検証、31色、Transparent、Gradient、chip選択、Caller / RETURNは#040の責務であり、#118へ移しません。

#040が `open / closed / hidden` の意味状態と最終的な `hidden` を所有し、#118はそのPanelに対する視覚補間だけを担当します。Outside click、Escape、RETURNによるCLOSEも同じ#118 EXIT経路を通ります。

### #040での使用位置と責務境界
Picker Panelは実 `bf-transition` hostです。#040がopen/closedと最終hidden状態を所有し、#118はENTER/EXITの視覚遷移だけを担当します。`openPicker` / `closePicker`、Caller trigger、Outside click、Escape、RETURNは同じ#118経路へ集約します。#040は#118の正式設定をProperty / `bf-colorpicker`から指定できます。`data-transition` / `data-direction` / `data-speed` / `data-respect-reduced-motion` はPicker Panelの実 `bf-transition` instanceへ反映されます。Relation 3項目は#040内部責務のためConsumer Propertyへ公開しません。

### `bf-colorpicker` で #118 Transition を設定する
#040をHTML Functional Classで使う場合、#118の表示設定は **#118用の別要素をConsumerが作るのではなく、`bf-colorpicker` hostへ4属性を書く**だけです。

```html
<div
  id="profile-color"
  class="bf-colorpicker"
  data-value="#0D6EFD"
  data-transition="slide-fade"
  data-direction="left"
  data-speed="fast"
  data-respect-reduced-motion="true">
</div>
```

### `data-transition` 設定値 23種（#118 v1.0.12正式値）
以下は完成済み #118 Transition v1.0.12 / Runtime v1.0.3 の `BoneTransition.TRANSITIONS` を基準にした正式設定一覧です。**左端のコード値を `data-transition` に指定します。** 設定値・日本語名・English名・動作説明・Direction使用有無・用途を全23種記載します。

- `fade` — **フェードイン / フェードアウト / Fade In / Fade Out** — 透明度だけで自然に表示・非表示を補間します。 Direction: 使用しない。用途: 一般的な表示切替。 ENTER: 透明から通常表示へ。 EXIT: 通常表示から透明へ。
- `slide` — **スライドイン / スライドアウト / Slide In / Slide Out** — 指定方向から出入りする位置補間です。 Direction: 使用する（`up / down / left / right`）。用途: メニュー、パネル。 ENTER: 指定方向の外側から元位置へ。 EXIT: 元位置から指定方向へ。
- `slide-fade` — **スライド + フェード / Slide + Fade** — 移動と透明度を同時に補間します。 Direction: 使用する（`up / down / left / right`）。用途: 軽いパネル開閉。 ENTER: 移動しながら透明から表示。 EXIT: 移動しながら透明へ。
- `scale` — **スケールイン / スケールアウト / Scale In / Scale Out** — 大きさの変化で状態を補間します。 Direction: 使用しない。用途: カード、ポップアップ。 ENTER: 縮小状態から通常サイズへ。 EXIT: 通常サイズから縮小へ。
- `scale-fade` — **スケール + フェード / Scale + Fade** — 拡縮と透明度を組み合わせます。 Direction: 使用しない。用途: ダイアログ、補助UI。 ENTER: 縮小・透明から通常表示へ。 EXIT: 縮小しながら透明へ。
- `zoom` — **ズームイン / ズームアウト / Zoom In / Zoom Out** — 奥行きを感じる強めの拡縮です。 Direction: 使用しない。用途: 強調表示。 ENTER: 小さい像から前面へ。 EXIT: 前面から小さい像へ。
- `zoom-fade` — **ズーム + フェード / Zoom + Fade** — ズームと透明度を同時に補間します。 Direction: 使用しない。用途: モーダル、注目要素。 ENTER: 拡大しながら表示。 EXIT: 縮小しながら消失。
- `dissolve` — **ディゾルブ / Dissolve** — ぼかしを伴う柔らかな溶解表現です。 Direction: 使用しない。用途: 内容切替。 ENTER: ぼけた透明像から鮮明に。 EXIT: ぼけながら透明へ。
- `wipe` — **ワイプイン / ワイプアウト / Wipe In / Wipe Out** — 指定方向から面を開閉します。 Direction: 使用する（`up / down / left / right`）。用途: セクション切替。 ENTER: 切り抜き領域を開く。 EXIT: 切り抜き領域を閉じる。
- `reveal` — **リビール / コンシール / Reveal / Conceal** — ワイプより柔らかく内容を露出・収納します。 Direction: 使用する（`up / down / left / right`）。用途: 詳細領域。 ENTER: 方向付きで徐々に露出。 EXIT: 方向付きで徐々に収納。
- `expand` — **展開 / 折り畳み / Expand / Collapse** — 軸方向へ展開・折り畳みます。 Direction: 使用する（`up / down / left / right`）。用途: アコーディオン、詳細。 ENTER: 薄い状態から展開。 EXIT: 軸方向へ折り畳み。
- `drop` — **ドロップダウン / プルアップ / Drop Down / Pull Up** — 上から落ちる／上へ戻る動きです。 Direction: 使用しない。用途: メニュー。 ENTER: 上から下へ落ちて定位置へ。 EXIT: 上へ引き上げて消える。
- `pop` — **ポップイン / ポップアウト / Pop In / Pop Out** — 短いオーバーシュートを持つ拡縮です。 Direction: 使用しない。用途: 通知、軽量ポップアップ。 ENTER: 小さく現れ一度大きくなって定着。 EXIT: 少し膨らんでから縮小。
- `flip-x` — **X軸フリップ / Flip X In / Out** — X軸回転で表裏が切り替わるように補間します。 Direction: 使用しない。用途: カード切替。 ENTER: X軸回転から正面へ。 EXIT: 正面からX軸回転へ。
- `flip-y` — **Y軸フリップ / Flip Y In / Out** — Y軸回転で表裏が切り替わるように補間します。 Direction: 使用しない。用途: カード切替。 ENTER: Y軸回転から正面へ。 EXIT: 正面からY軸回転へ。
- `curtain-horizontal` — **左右カーテン開閉 / Curtain Horizontal** — 中央から左右へカーテンのように開閉します。 Direction: 使用しない。用途: 大きな領域切替。 ENTER: 中央の細い領域から左右へ開く。 EXIT: 左右から中央へ閉じる。
- `curtain-vertical` — **上下カーテン開閉 / Curtain Vertical** — 中央から上下へカーテンのように開閉します。 Direction: 使用しない。用途: 大きな領域切替。 ENTER: 中央から上下へ開く。 EXIT: 上下から中央へ閉じる。
- `shutter-horizontal` — **横シャッター / Shutter Horizontal** — 横方向へシャッターのように開閉します。 Direction: 使用する（`up / down / left / right`）。用途: パネル、画像。 ENTER: 横方向に開く。 EXIT: 横方向に閉じる。
- `shutter-vertical` — **縦シャッター / Shutter Vertical** — 縦方向へシャッターのように開閉します。 Direction: 使用する（`up / down / left / right`）。用途: パネル、画像。 ENTER: 縦方向に開く。 EXIT: 縦方向に閉じる。
- `fold` — **フォールド / アンフォールド / Fold / Unfold** — 端を軸に折り畳むように補間します。 Direction: 使用する（`up / down / left / right`）。用途: サイドパネル。 ENTER: 折れた状態から展開。 EXIT: 端へ折り畳む。
- `rise` — **浮上 / 沈下 / Rise / Sink** — 下から浮上し、下へ沈む動きです。 Direction: 使用しない。用途: カード、通知。 ENTER: 下方から浮上して表示。 EXIT: 下方へ沈みながら消える。
- `teleport-up` — **上昇ワープ（ルーラ風） / Teleport Up** — 上方向へ吸い上がるように細く伸びて消え、逆方向では上方から復帰する演出。 Direction: 使用しない。用途: テレポート、画面離脱、特殊なメニュー収納。 ENTER: 上方の細い像から下へ戻りながら通常表示へ。 EXIT: 上へ加速しながら横幅を絞り、縦へ伸びて消失。
- `iris` — **アイリス開閉 / Iris Open / Close** — 円形の開口部を広げたり閉じたりします。 Direction: 使用しない。用途: フォーカス切替。 ENTER: 中央の小円から全面へ。 EXIT: 全面から中央の小円へ。

### Direction / Speed / Reduced Motion の設定値
- `data-direction="up"` = **上**
- `data-direction="down"` = **下**
- `data-direction="left"` = **左**
- `data-direction="right"` = **右**
- `data-speed="slow"` = **遅い**
- `data-speed="normal"` = **標準**（#040既定）
- `data-speed="fast"` = **速い**
- `data-respect-reduced-motion="true"` = OSのモーション低減設定を尊重する（#040既定）
- `data-respect-reduced-motion="false"` = OS設定に関係なく選択Transitionを使用する

`Direction: 使用しない` と記載されたTransitionでは `data-direction` を保持できますが、#118の実motion planでは方向補間に使用しません。
- #040 Runtimeが内部Picker PanelへRelation 3項目を生成し、そのPanelを実 `bf-transition` としてmountします。Consumerが `data-transition-ui-no` / `data-target-ui-no` / `data-target-part` を#040 hostへ書く必要はありません。

Property Editorでは、遷移種類・方向・速度・OSのモーション低減設定を変更した後に **「Propertyを適用」** を押します。適用後、実Picker Panelの#118 instanceへ同じ値が反映されます。
### Property Editorとの対応
Property Editorの **Picker OPEN / CLOSE - #118 Transition** では、次の4項目を設定します。

- **遷移種類（Transition）**: 23種から選択。
- **方向**: 上 / 下 / 左 / 右。内部値は `up / down / left / right`。
- **速度**: 遅い / 標準 / 速い。内部値は `slow / normal / fast`。
- **OSのモーション低減設定を尊重**: ON / OFF。HTMLでは `true / false`。

変更後に **「Propertyを適用」** を押すと、実Picker Panelの `bf-transition` instanceへ反映されます。`data-transition-ui-no` / `data-target-ui-no` / `data-target-part` は#040内部のRelation責務なので、`bf-colorpicker`利用者が指定する必要はありません。

## 10. Position 9値
- top-left: 左上。
- top-center: 上中央。
- top-right: 右上。
- middle-left: 左中央。
- center: 中央。
- middle-right: 右中央。
- bottom-left: 左下。
- bottom-center: 下中央。
- bottom-right: 右下。

`inheritParent=true` やFITが有効な場合は、親追従の寸法責務がPositionより優先する場合があります。

## 11. Caller / RETURN
他Componentが色を選ばせる場合、Consumerは自分の色ボタンだけを所有し、Picker本体は #040 が所有します。

```html
<button id="effect-color" type="button" aria-label="Effect色"></button>
<script>
const trigger = document.getElementById("effect-color");
BoneColorPicker.attachCaller(
  trigger,
  { id: "effect-color-picker", type: "COLORPICKER", value: "#35F4FF" },
  {
    locale: "ja",
    allowedKinds: ["solid"],
    onReturn(output) {
      trigger.dataset.value = output.value;
    }
  }
);
</script>
```

Consumerは #040 Overlay内部DOM、chip class、native input、panel位置を直接操作しません。選択結果は `onReturn(output)` または `bone-colorpicker:return` Eventで受け取ります。

## 12. allowedKinds
Caller用途ごとに選択可能kindを制限します。

- Background: `solid,transparent` など用途に合わせる。
- Text color: `solid`。
- Shadow / Glow / Effect color: `solid`。
- Gradientを許可する用途: `gradient` を明示して追加。

制限対象外のkindを `setCallerValue()` やRETURN対象へ入れた場合はRuntimeが拒否します。

## 13. Caller配置とTooltip
Caller Overlayはdocument.body直下で #040 が所有します。Default placementは `bottom-start`、明示的な `top-start` も使用できます。Consumerは位置を上書きしません。Tooltipも #040 がbody直下で所有し、`showValueText` に従います。


## 14. Security
Untrusted INでは値とProperty descriptorを先に検査します。安全なown data propertyだけを読み、accessor getterを実行しません。拒否時は直前のColorPicker値を保持し、通常Previewとは独立したSecurity Sandboxで確認します。

受理: #RRGGBB / transparent / 安全なGRADIENT_V1。
拒否: short HEX / alpha HEX / CSS named color / CSS gradient string / malformed object / ASCII control / accessor packet。

## 15. #002 Joint
#040は #002 Bone Joint の createDeliveryChannel capability を利用します。Version番号ではなく必要APIで互換判定します。接続イメージでは正常接続、Target Field不存在、型不一致を実Joint評価と描画で確認します。見た目だけの疑似Jointへ置き換えません。

## 16. WAIT / FIFO / BLOCKED
OUTは `BoneJoint.createDeliveryChannel()` を使用します。

- WAIT: TargetがReadyでない間も接続を維持し、値をQueueへ入れます。Ready復帰後にFIFO順で自動配送します。
- FIFO: Queueへ入った順序を変えません。
- BLOCKED: 接続を維持したまま対象値をTargetへ配送しません。解除後は通常Deliveryへ戻します。

## 17. Smoke Test
Smoke TestはRuntimeの生成、値、Solid/Transparent/Gradient、Preset、Caller、Joint/Deliveryなどの実契約を確認します。テストが未実行ならNOT RUNです。

## 18. Validation Report
ValidationはSecurity拒否、Enum/Property、独立Sandbox、Joint fixture、Caller境界、Runtime CSS責務、Functional Class、DOC routeなどを検証します。期待値を書き換えてALL PASSにしません。

## 19. 累積Regressionの使用方法
ヘッダーの **「累積回帰テスト」** を押すと `bone-development-order.html` を開きます。#040は次の4行で判定されます。

- `#040 BoneColorPicker bundle`: 実 `BoneColorPicker v1.0.18`、`BoneColorPickerFunctionalClass`、DOC-0040、#118依存を確認します。さらに `#html-functional-class-live.bf-colorpicker` が実mount済みで、`BoneColorPickerFunctionalClass.getInstance()` が実Runtime instanceを返し、そのPicker Panelが実 `bf-transition` hostとしてmountされていることまで確認します。
- `#040 Smoke Test`: fresh same-origin iframeで #040ページを開き、`#run-smoke` が正確に1個であることを確認して実clickし、ページ側の実結果を待ちます。
- `#040 Validation`: 同じく `#run-validation` が正確に1個であることを確認して実clickし、実Validation結果を待ちます。
- `#040 Runtime 1.0.18`: iframe内の実 `BoneColorPicker.version` が `1.0.18` であることを確認します。

### Regressionで確認する `bf-colorpicker` 設定例
RegressionそのものにTransition設定を書くのではありません。**実 #040 test page上の `bf-colorpicker` hostへ設定を書き、Regressionがそのmount結果を確認します。**

```html
<div
  id="html-functional-class-live"
  class="bf-colorpicker"
  data-value="#0D6EFD"
  data-transition="slide-fade"
  data-direction="left"
  data-speed="fast"
  data-respect-reduced-motion="true">
</div>
```

このhostがmountされると、#040内部Picker Panelへ同じ4設定が渡り、Panelの実 `bf-transition` instanceが `slide-fade / left / fast / true` を保持します。累積Regressionの `#040 BoneColorPicker bundle` は、Class名だけではなく **host mount → 実BoneColorPicker instance → 実Picker Panel → 実bf-transition instance** まで確認します。

### HTML Functional ClassがRegressionで確認される範囲
RegressionはClass名の文字列だけを見ません。次の実経路を確認します。

```text
<div id="html-functional-class-live" class="bf-colorpicker" ...>
  ↓ BoneColorPickerFunctionalClass auto mount
実 BoneColorPicker instance
  ↓
実 Picker Panel .bf-transition
  ↓ BoneTransitionFunctionalClass mount
#118 ENTER / EXIT
```

`bf-colorpicker` のmount、実instance、実Picker Panelの `bf-transition` のどれかが成立しない場合、`#040 BoneColorPicker bundle` はFAILになります。

### Regressionの見方
1. #040ページ上部の「累積回帰テスト」を押します。
2. `#040 BoneColorPicker bundle / Smoke Test / Validation / Runtime 1.0.18` の4行を確認します。
3. 1行でもFAILなら #000 overallもFAILです。FAILを隠すために期待値を書き換えません。
4. 詳細確認は上段の `#040 ColorPicker` カードから実 #040ページへ戻り、Smoke / Validation / DOC-0040 / `bf-colorpicker` を個別に確認します。

累積Regressionは #040 の依存先ではなく、既存Componentをまとめて再確認するテスト経路です。#017や#118の行が同じ画面に存在しても、それらを #040 のConsumer依存として扱いません。

## 20. Completion
CompletionはSmoke/ValidationのALL PASSとWAIT/BLOCKED目視確認後に利用します。ユーザーlocalhostで確認される前にCompleted / Specification Frozenとは扱いません。

## 21. Public API
Public APIはHTML Functional Classとは別の高度操作入口です。

`defaults`、`defaultNamedColors`、`defaultNamedGradients`、`normalizeOptions`、`normalizeAllowedKinds`、`normalizeColor`、`normalizeGradient`、`normalizeValue`、`normalizeNamedColors`、`normalizeNamedGradients`、`localizedName`、`gradientToCss`、`validateValue`、`inspectUntrustedValue`、`normalizeBone`、`create`、`destroy`、`getInput`、`getOptions`、`getValue`、`getEditingValue`、`getColorState`、`getNamedColors`、`addNamedColor`、`removeNamedColor`、`getNamedGradients`、`addNamedGradient`、`removeNamedGradient`、`setValue`、`applyJointInput`、`reset`、`commit`、`buildOutput`、`connectOutput`、`disconnectOutput`、`setOutputTargetReady`、`clearOutputBlock`、`getOutputState`、`setOptions`、`attachCaller`、`detachCaller`、`openCaller`、`closeCaller`、`isCallerOpen`、`repositionCaller`、`getCallerValue`、`setCallerValue`、`getCallerOutput`、`getCallerState`、`openPicker`、`closePicker`、`isPickerOpen`、`syncParentStyle`。

## 22. エラー / Troubleshooting
- `COLORPICKER_FUNCTIONAL_CLASS_RUNTIME_MISSING`: bf-colorpickerより前に正しいRuntimeが読み込まれていません。
- `COLORPICKER_FUNCTIONAL_CLASS_VALUE_INVALID`: HTML `data-value` に未対応値を指定しています。GradientはProperty/Public APIを使用してください。
- `COLORPICKER_VALUE_KIND_NOT_ALLOWED`: `allowedKinds`に含まれない種類を選択しようとしています。
- `COLORPICKER_SECURITY_ACCESSOR_BLOCKED`: accessor propertyを持つUntrusted値を拒否しました。
- Guideが開かない場合: Shared `bone-doc-loader.js / bone-doc-guide.js / bone-doc-guide.css` が既存Bone Flow rootに存在し、DOC-0040 registryがmergeされているか確認してください。

## 23. 依存と責務境界
#040は #001 Core、#002 Joint、#017 Text、#020 Label、#022 Hover Border Effect、#118 Transition Runtime v1.0.3 / `bf-transition` v1.0.4を利用します。Consumer側がColorPicker内部実装を複製しません。逆に #040 DOC IntegrationはShared DOC RuntimeやINDEXを上書きしません。

## 24. Version / Status
Runtime: BoneColorPicker v1.0.18。
Runtime: BoneColorPicker v1.0.24 / DOC Integration: v1.0.32 Candidate / HTML Functional Class bridge: v1.0.28。
User localhost確認前のためCompleted / Specification Frozenではありません。


## v1.0.21 edge containment correction
- Caller overlay and chip tooltip remain viewport-clamped.
- Chip tooltip is rendered only as a #040-owned body overlay; the legacy clipped chip pseudo-tooltip is removed.
- The dedicated left/right edge test stays inside its test card and must not create document horizontal scrolling.