# Bone Flow #040 ColorPicker - HTML Class Guide

Version: 1.0.15

## 1. 目的

このClassはJavaScriptの `class {}` ではありません。HTML要素の `class=""` に機能Classを設定し、対応Public APIを宣言的に呼び出すためのClass契約です。

Public API function **53件 = HTML Class 53件** を1対1で対応させます。

## 2. Class共通引数契約

- `class="bone-..."`: 対応するPublic APIを指定。
- `data-bone-event`: `load` / `click` / `input` / `change` / `manual` 等。未指定は `load`。
- `data-bone-args`: Public APIの順番に並べたJSON配列。
- `data-bone-arg-N`: 0始まりの引数個別指定。
- `data-bone-once="true"`: DOMイベントを1回だけ処理。
- `data-bone-append-result="false"`: Element戻り値の自動appendを停止。
- `data-bone-throw="true"`: Error保存後にDebug用再throw。

### 特殊値

- `$self`: Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
- `$event`: Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
- `$value`: input / textarea / select等の現在の value を渡します。
- `$checked`: checkbox / radio等の現在の checked(Boolean)を渡します。
- `$text`: Classを設定した要素の textContent を渡します。
- `$dataset`: Classを設定した要素の dataset を通常Objectとして渡します。
- `$files`: file input の FileList を渡します。
- `$selector:...`: ...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
- `$id:...`: ...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
- `$global:...`: window / globalThis上の指定名の値を渡します。
- `$handler:...`: window / globalThis上の指定名のFunctionをコールバック引数として渡します。

## 3. Result / State 契約

- `element.__boneClassResult`: 生の戻り値。
- `data-bone-class-status`: `ok` / `error`。
- `data-bone-class-result`: serializeした結果。
- `bone-html-class-result`: 成功CustomEvent。
- `bone-html-class-error`: 失敗CustomEvent。

## 4. Class一覧

### 1. `bone-colorpicker-defaults`

- Public API: `BoneColorPicker.defaults`
- 説明: BoneColorPicker.defaults の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - 引数なし
- HTML例:

```html
<div class="bone-colorpicker-defaults" data-bone-event="manual"></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 2. `bone-colorpicker-default-named-colors`

- Public API: `BoneColorPicker.defaultNamedColors`
- 説明: BoneColorPicker.defaultNamedColors の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - 引数なし
- HTML例:

```html
<div class="bone-colorpicker-default-named-colors" data-bone-event="manual"></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 3. `bone-colorpicker-default-named-gradients`

- Public API: `BoneColorPicker.defaultNamedGradients`
- 説明: BoneColorPicker.defaultNamedGradients の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - 引数なし
- HTML例:

```html
<div class="bone-colorpicker-default-named-gradients" data-bone-event="manual"></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 4. `bone-colorpicker-normalize-options`

- Public API: `BoneColorPicker.normalizeOptions`
- 説明: 設定をColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: input` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-options" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 5. `bone-colorpicker-normalize-allowed-kinds`

- Public API: `BoneColorPicker.normalizeAllowedKinds`
- 説明: allowed KindsをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-allowed-kinds" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 6. `bone-colorpicker-normalize-color`

- Public API: `BoneColorPicker.normalizeColor`
- 説明: colorをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-color" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 7. `bone-colorpicker-normalize-gradient`

- Public API: `BoneColorPicker.normalizeGradient`
- 説明: gradientをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-gradient" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 8. `bone-colorpicker-normalize-value`

- Public API: `BoneColorPicker.normalizeValue`
- 説明: 値をColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-value" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 9. `bone-colorpicker-normalize-named-colors`

- Public API: `BoneColorPicker.normalizeNamedColors`
- 説明: named ColorsをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-named-colors" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 10. `bone-colorpicker-normalize-named-gradients`

- Public API: `BoneColorPicker.normalizeNamedGradients`
- 説明: named GradientsをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-named-gradients" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 11. `bone-colorpicker-localized-name`

- Public API: `BoneColorPicker.localizedName`
- 説明: BoneColorPicker.localizedName の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: entry` — Number — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: locale` — API定義値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-localized-name" data-bone-event="manual" data-bone-args='[null,null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 12. `bone-colorpicker-gradient-to-css`

- Public API: `BoneColorPicker.gradientToCss`
- 説明: BoneColorPicker.gradientToCss の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-gradient-to-css" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 13. `bone-colorpicker-validate-value`

- Public API: `BoneColorPicker.validateValue`
- 説明: ColorPickerの入力・状態を検証し、Validation結果を返します。
- 使用する場面: HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-validate-value" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 14. `bone-colorpicker-inspect-untrusted-value`

- Public API: `BoneColorPicker.inspectUntrustedValue`
- 説明: ColorPickerの入力・状態を検査し、診断情報を返します。
- 使用する場面: HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
- 引数:
  - `0: value` — String / API許容値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-inspect-untrusted-value" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 15. `bone-colorpicker-normalize-bone`

- Public API: `BoneColorPicker.normalizeBone`
- 説明: BoneをColorPickerの正式契約に沿う形へ正規化します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: input` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-normalize-bone" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 16. `bone-colorpicker-create`

- Public API: `BoneColorPicker.create`
- 説明: ColorPickerの新しい要素またはRuntimeオブジェクトを生成します。
- 使用する場面: HTML上のホスト要素からUI生成・描画を開始したいとき。
- 引数:
  - `0: boneInput` — Object — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: optionsInput` — Object — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-create" data-bone-event="manual" data-bone-args='[null,{}]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 17. `bone-colorpicker-destroy`

- Public API: `BoneColorPicker.destroy`
- 説明: ColorPickerの対象インスタンスを破棄し、関連状態を解放します。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-destroy" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 18. `bone-colorpicker-get-input`

- Public API: `BoneColorPicker.getInput`
- 説明: ColorPickerの「Input」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-input" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 19. `bone-colorpicker-get-options`

- Public API: `BoneColorPicker.getOptions`
- 説明: ColorPickerの「Options」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-options" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 20. `bone-colorpicker-get-value`

- Public API: `BoneColorPicker.getValue`
- 説明: ColorPickerの「Value」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-value" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 21. `bone-colorpicker-get-editing-value`

- Public API: `BoneColorPicker.getEditingValue`
- 説明: ColorPickerの「Editing Value」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-editing-value" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 22. `bone-colorpicker-get-color-state`

- Public API: `BoneColorPicker.getColorState`
- 説明: ColorPickerの「Color State」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-color-state" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 23. `bone-colorpicker-get-named-colors`

- Public API: `BoneColorPicker.getNamedColors`
- 説明: ColorPickerの「Named Colors」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-named-colors" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 24. `bone-colorpicker-add-named-color`

- Public API: `BoneColorPicker.addNamedColor`
- 説明: BoneColorPicker.addNamedColor の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: entry` — Number — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-add-named-color" data-bone-event="manual" data-bone-args='["$self",null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 25. `bone-colorpicker-remove-named-color`

- Public API: `BoneColorPicker.removeNamedColor`
- 説明: ColorPickerから指定対象を削除します。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: name` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-remove-named-color" data-bone-event="manual" data-bone-args='["$self","sample"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 26. `bone-colorpicker-get-named-gradients`

- Public API: `BoneColorPicker.getNamedGradients`
- 説明: ColorPickerの「Named Gradients」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-named-gradients" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 27. `bone-colorpicker-add-named-gradient`

- Public API: `BoneColorPicker.addNamedGradient`
- 説明: BoneColorPicker.addNamedGradient の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: entry` — Number — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-add-named-gradient" data-bone-event="manual" data-bone-args='["$self",null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 28. `bone-colorpicker-remove-named-gradient`

- Public API: `BoneColorPicker.removeNamedGradient`
- 説明: ColorPickerから指定対象を削除します。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: name` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-remove-named-gradient" data-bone-event="manual" data-bone-args='["$self","sample"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 29. `bone-colorpicker-set-value`

- Public API: `BoneColorPicker.setValue`
- 説明: ColorPickerの「Value」を設定します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: value` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
  - `2: options` — Object — `data-bone-arg-2` または `data-bone-args[2]`
- HTML例:

```html
<div class="bone-colorpicker-set-value" data-bone-event="manual" data-bone-args='["$self","$value",{}]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 30. `bone-colorpicker-apply-joint-input`

- Public API: `BoneColorPicker.applyJointInput`
- 説明: ColorPickerへ指定内容を適用します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: packet` — API定義値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-apply-joint-input" data-bone-event="manual" data-bone-args='["$self",null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 31. `bone-colorpicker-reset`

- Public API: `BoneColorPicker.reset`
- 説明: ColorPickerを既定またはcommit済み状態へ戻します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-reset" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 32. `bone-colorpicker-commit`

- Public API: `BoneColorPicker.commit`
- 説明: ColorPickerの現在値を正式値としてcommitします。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: source` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-commit" data-bone-event="manual" data-bone-args='["$self","html-class"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 33. `bone-colorpicker-build-output`

- Public API: `BoneColorPicker.buildOutput`
- 説明: ColorPickerで使用する出力・定義オブジェクトを構築します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: source` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-build-output" data-bone-event="manual" data-bone-args='["$self","html-class"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 34. `bone-colorpicker-connect-output`

- Public API: `BoneColorPicker.connectOutput`
- 説明: ColorPickerの接続・出力先を接続状態へ変更します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: options` — Object — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-connect-output" data-bone-event="manual" data-bone-args='["$self",{}]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 35. `bone-colorpicker-disconnect-output`

- Public API: `BoneColorPicker.disconnectOutput`
- 説明: ColorPickerの接続・出力先を切断状態へ変更します。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-disconnect-output" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 36. `bone-colorpicker-set-output-target-ready`

- Public API: `BoneColorPicker.setOutputTargetReady`
- 説明: ColorPickerの「Output Target Ready」を設定します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: ready` — Boolean — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-set-output-target-ready" data-bone-event="manual" data-bone-args='["$self",true]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 37. `bone-colorpicker-clear-output-block`

- Public API: `BoneColorPicker.clearOutputBlock`
- 説明: ColorPickerの指定状態・内容をクリアします。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-clear-output-block" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 38. `bone-colorpicker-get-output-state`

- Public API: `BoneColorPicker.getOutputState`
- 説明: ColorPickerの「Output State」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-output-state" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 39. `bone-colorpicker-set-options`

- Public API: `BoneColorPicker.setOptions`
- 説明: ColorPickerの「Options」を設定します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: patch` — Object — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-set-options" data-bone-event="manual" data-bone-args='["$self",{}]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 40. `bone-colorpicker-attach-caller`

- Public API: `BoneColorPicker.attachCaller`
- 説明: BoneColorPicker.attachCaller の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: boneInput` — Object — `data-bone-arg-1` または `data-bone-args[1]`
  - `2: optionsInput` — Object — `data-bone-arg-2` または `data-bone-args[2]`
- HTML例:

```html
<div class="bone-colorpicker-attach-caller" data-bone-event="manual" data-bone-args='[null,null,{}]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 41. `bone-colorpicker-detach-caller`

- Public API: `BoneColorPicker.detachCaller`
- 説明: BoneColorPicker.detachCaller の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-detach-caller" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 42. `bone-colorpicker-open-caller`

- Public API: `BoneColorPicker.openCaller`
- 説明: ColorPickerの対象UI・データを開きます。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-open-caller" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 43. `bone-colorpicker-close-caller`

- Public API: `BoneColorPicker.closeCaller`
- 説明: ColorPickerの対象UI・データを閉じます。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-close-caller" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 44. `bone-colorpicker-is-caller-open`

- Public API: `BoneColorPicker.isCallerOpen`
- 説明: 対象がColorPickerの「Caller Open」条件を満たすか判定します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-is-caller-open" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 45. `bone-colorpicker-reposition-caller`

- Public API: `BoneColorPicker.repositionCaller`
- 説明: BoneColorPicker.repositionCaller の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-reposition-caller" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 46. `bone-colorpicker-get-caller-value`

- Public API: `BoneColorPicker.getCallerValue`
- 説明: ColorPickerの「Caller Value」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-caller-value" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 47. `bone-colorpicker-set-caller-value`

- Public API: `BoneColorPicker.setCallerValue`
- 説明: ColorPickerの「Caller Value」を設定します。
- 使用する場面: HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
  - `1: value` — String / API許容値 — `data-bone-arg-1` または `data-bone-args[1]`
- HTML例:

```html
<div class="bone-colorpicker-set-caller-value" data-bone-event="manual" data-bone-args='[null,"$value"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 48. `bone-colorpicker-get-caller-output`

- Public API: `BoneColorPicker.getCallerOutput`
- 説明: ColorPickerの「Caller Output」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-caller-output" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 49. `bone-colorpicker-get-caller-state`

- Public API: `BoneColorPicker.getCallerState`
- 説明: ColorPickerの「Caller State」を取得します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: trigger` — API定義値 — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-get-caller-state" data-bone-event="manual" data-bone-args='[null]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 50. `bone-colorpicker-open-picker`

- Public API: `BoneColorPicker.openPicker`
- 説明: ColorPickerの対象UI・データを開きます。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-open-picker" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 51. `bone-colorpicker-close-picker`

- Public API: `BoneColorPicker.closePicker`
- 説明: ColorPickerの対象UI・データを閉じます。
- 使用する場面: HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-close-picker" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 52. `bone-colorpicker-is-picker-open`

- Public API: `BoneColorPicker.isPickerOpen`
- 説明: 対象がColorPickerの「Picker Open」条件を満たすか判定します。
- 使用する場面: JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-is-picker-open" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。

### 53. `bone-colorpicker-sync-parent-style`

- Public API: `BoneColorPicker.syncParentStyle`
- 説明: BoneColorPicker.syncParentStyle の公開機能をHTML Classから呼び出します。
- 使用する場面: HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
- 引数:
  - `0: element` — Element / Instance — `data-bone-arg-0` または `data-bone-args[0]`
- HTML例:

```html
<div class="bone-colorpicker-sync-parent-style" data-bone-event="manual" data-bone-args='["$self"]'></div>
```

- Result: `__boneClassResult` / `data-bone-class-status` / `data-bone-class-result`。


## Safe activation marker

HTML Functional Class is active only when `bone-html-class-use` is present together with the API class. Example: `class="bone-html-class-use bone-..."`. This prevents existing presentation classes from being executed as APIs.