使用コンポーネント
操作ガイド / HTML Functional Class
通常利用Classは bf-colorpicker 1つです。Public APIとは分離しています。操作ガイドはヘッダーの「操作ガイド DOC-0040」からShared DOC Guideを開きます。
最小HTML
<div class="bf-colorpicker" data-value="#0D6EFD"></div>
実Runtime
Gradientの構造化初期値、namedColors / namedGradientsはHTML属性へJSONを埋め込まず、Property EditorまたはBoneColorPicker Public APIを使用します。
プロパティ設定
ColorPicker固有
名前付き単色31
Bootstrap 5.3を参考にTheme色・基本色・Gray 100〜900を31色収録。透過は実Picker内の専用チップで選択。表示名は日本語 / Englishで切替します。
名前付きグラデーション8
安全な2色Linear Gradientを8種類初期収録。CSS文字列ではなく構造化値としてBone / OUTします。
共通Input UI
親要素設定（継承確認用）
親依存ONではColorPickerは親の幅・高さ100%、背景・文字色・角丸・配置へ追従します。
アクティブ時の枠Effect
Picker OPEN / CLOSE - #118 Transition
Property: ready
ColorPicker Preview / API
実使用イメージです。Callerが所有する□をクリックすると、#040が独立Overlayを開き、単色・透過・グラデーションを選択してRETURNします。
{}※ ColorPicker責務は単色 #RRGGBB、透過、または安全な2色Linear Gradientの選択・保持・OUTです。GradientはCSS文字列を直接受けず構造化値で保持します。フルPalette Manager / Image Color Extraction / Theme Designerは含みません。
Caller Overlay / Chip Tooltip 左右端テスト
今回のviewport補正を目視確認する専用テストです。左端・右端のCallerを押してPickerを開き、Picker本体と左端/右端色チップのtooltipが画面外へ隠れないことを確認します。
確認方法: Callerを押す → Pickerの一番左/右の色チップへマウスを置く → tooltip全体が画面内に表示されることを確認。
Untrusted IN / Security Test
通常Previewとは独立した専用ColorPickerで検証します。#RRGGBB string / transparent / 安全なGRADIENT_V1 objectをACCEPTED。short hex / alpha付きhex / CSS named color / CSS gradient string / malformed object / ASCII制御文字 / accessor packetはBLOCKEDし、Security Sandboxの直前値を保持します。通常Previewは変更しません。
Result JSON: 未実行
接続イメージ
#002 Bone Joint実体で評価・描画。正常接続（IN / OUT）、IN/OUT Target Field不存在、IN/OUT型不一致の5ケース。通常Preview / Security / Deliveryとは独立です。
OUT WAIT / BLOCKED - #002 Joint capability Integration
通常Previewとは分離したDelivery Sandboxを使用します。WAITはTarget未到達 → READY復帰後FIFO配送、BLOCKは接続を維持したままBLOCK対象色をTargetへ届けないことを確認します。
Target受信ログ: なし
Smoke Test / Validation Report
NOT RUN
Smoke Test 結果NOT RUN
Smoke Testは未実行です。
Validation 結果NOT RUN
Validationは未実行です。
コンポーネント完了管理
Smoke TestとValidation ReportがALL PASSになり、WAIT / BLOCKEDの目視確認が完了した後に完了できます。