ColorPicker 颜色选择器
触发色块弹出调色面板，支持 2D 饱和度-亮度色域 + hue 竖条选色、预设色、RGB 与 hex 输入、透明度通道、渐变模式（多 stop 编辑）、宽容格式解析、清空与受控开关；面板采用 fixed 视口定位，自动避让边缘翻转，也可 inline 就地渲染。
基础用法
基础
点击触发器开关面板；在 2D 色域拖动选饱和度与亮度、右侧 hue 竖条选色相，或修改 RGB 数字 / 点击预设色即时生效。聚焦触发按钮后 Esc 或点击外部关闭。
自定义预设色
自定义 preset（任意格式 + label 对象 + 行列）
preset 接受 JSON 数组：字符串可为任意 CSS 颜色（颜色名 / rgb() / hsl() / hex 均可，宽容解析）；也支持 { color, label } 对象，label 作为该色块的可访问名（屏幕阅读器朗读）。preset-columns / preset-rows 配置每行格数与展示行数（超出部分截断）。
禁用与只读
disabled / readonly
disabled 完全禁用（触发器置灰不可点）；readonly 只读展示当前色值，触发器不可展开（不派发开关事件）。
尺寸
size 三档
size="large" / 缺省 / size="small" 复用 --oas-control-height-* 高度档位。
透明度通道
透明度（show-alpha / disabled-alpha）
show-alpha 开启 alpha 滑杆与棋盘格底：半透明色块显示棋盘格，输出 8 位 hex（#rrggbbaa，配合 color-format="rgb" 输出 rgba()）。disabled-alpha 保留通道展示但滑杆禁用（已有透明度不丢）。
格式与宽容解析
宽容解析 + color-format + uppercase
value 宽容解析：CSS 颜色名、rgb()/hsl()、3/4/6/8 位 hex 均可，统一归一化显示。color-format="rgb" 时显示与提交走 rgb()/rgba()；uppercase 让 hex 输出大写。
空值与清除
clearable + value-on-clear
clearable 时展开面板出现清空按钮：清空后 value 置空并渲染「未选择」占位，派发 oas-clear（detail 为旧值）与 oas-change（detail 空串）。value-on-clear 配置清空后的回填值（如 #000000）。
触发器自定义
自定义 trigger 插槽 + show-text
slot="trigger" 完全自定义触发器内容（色值文本不受影响，可在触发内容旁展示）；show-text="false" 隐藏色值文本（默认 true 显示）。
受控开关
受控 open + oas-open-change
open 属性为唯一真源（受控双向）：外部 setAttribute/removeAttribute('open') 与内部点击/外部点击/Esc 统一收敛，任何变化派发 oas-open-change（detail { open }）；初始带 open 不派发。
吸管取色
吸管（EyeDropper）
边缘自动避让（右缘触发复现）
右缘触发不再溢出/裁切（修复验证）
外观 tab 式右对齐场景：窄容器 `overflow: hidden` 且靠右。面板为 fixed 视口定位（12 向 `placement`，默认 `bottom`），打开后面板始终在视口内，不再撑出横向滚动条或被祖先裁切；空间不足自动夹取/换方向。
2D 色域面板
designer 能力（主路径已默认内含）：主路径
@oas-ui/ui/form/color-picker已内置 2D 色域 / hue 竖条 / 渐变（mode="gradient"）设计器（import 即注册），无需显式引用。仅使用默认能力（swatch 预设 + hex/RGB 输入 + alpha）的消费者可改从纯核入口@oas-ui/ui/form/color-picker/core引入瘦身——它不含该能力，此时mode="gradient"配置静默失效并 dev 告警，需显式import '@oas-ui/ui/form/color-picker/designer'（import 即注册）或换回主路径。全量入口@oas-ui/ui与 CDN 表单族包同样已内含。
二期把 HSV 三滑轨重构为更标准的二维取色：SV 色域（横饱和度、纵亮度）+ hue 竖条。色域与竖条支持鼠标拖拽和方向键微调，ARIA 语义为 role="slider" + aria-valuetext（饱和度/亮度双维度）。
2D 色域 + hue 竖条
渐变模式
mode="gradient" 进入渐变编辑：渐变轴上的每个 stop 独立选色，可添加/删除/拖动/键盘移动位置；value 输出 linear-gradient(...)。
渐变（mode=gradient）
渐变 + 透明度（show-alpha）
inline 独立面板
inline 让面板就地渲染（无 trigger/popup），宿主自组弹层场景下直接复用同一套取色控件。
inline（纯面板）
事件
变化事件
最近使用色（recent / recent-key）
recent：选中色入栈，面板底部可回选
recent + recent-key：localStorage 持久化（刷新后仍在）
recent 开启最近使用色条：每次提交的颜色入栈（去重、上限 8、最新在前），面板底部展示可点选色块，点击即回填该色。recent-key 指定 localStorage 持久化键（跨会话保留）；缺省不持久化，仅当前实例内存。
API
oas-color-picker
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clearable | 面板底部显示「清除」按钮（展开且有值时可见）：点击写回 value-on-clear 或清空 value，并派发 oas-clear + oas-change | boolean | — |
color-format | 输出格式：hex（默认）/ rgb；决定 value 写回与触发器文本格式 | string | hex |
disabled | 禁用 | boolean | — |
disabled-alpha | 禁用透明度滑杆（show-alpha 开启时生效） | boolean | — |
inline | 内联模式：面板就地常显、隐藏触发按钮，无 popup 定位契约，不派发 oas-open-change | boolean | — |
mode | 取色模式：single（默认）/ gradient（渐变编辑器，需 designer 能力注入；未注入静默失效 + dev 告警一次） | string | single |
open | 受控展开面板（布尔属性）；readonly/禁用下不生效；变化派发 oas-open-change | boolean | — |
placement | 面板位置，12 向 top/bottom/left/right × -start/-end（默认 bottom）；触发器贴近视口右缘时自动右对齐翻转，下方空间不足时向上弹，溢出部分夹取回视口内 | string | bottom |
preset | 预设色数组（JSON） | string | — |
preset-columns | 预设色板列数（正整数，默认 8） | string | — |
preset-rows | 预设色板行数上限（正整数；缺省不限制，显示全部预设） | string | — |
readonly | 只读：触发器不展开面板，编辑提交全部拦截 | boolean | — |
recent | 最近使用色条：提交颜色入栈（去重、上限 8、最新在前），面板底部可点选 | boolean | — |
recent-key | localStorage 持久化键（配合 recent；缺省仅内存不持久化） | string | — |
show-alpha | 启用透明度通道：面板显示 alpha 滑杆，半透明色的触发器/预设块棋盘格底，value 输出带 alpha | boolean | — |
show-text | 触发器显示色值文本（默认 true；"false" 只显示色块） | string | true |
size | 触发器尺寸：small / medium（默认）/ large | — | — |
uppercase | 输出色值大写（hex 字母 A–F） | boolean | — |
value | 当前颜色（hex） | string | — |
value-on-clear | 清除时的回落值：设置后点「清除」写回该值而非清空 value | string | — |
Property（JS property；是否写回 attribute 见各行说明）
| Property | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 当前值：颜色字符串（读受控 value 属性） | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-change | 颜色变化，detail: { value } |
oas-clear | 点击「清除」后派发，detail: { value } 为清除前的旧值；随后派发 oas-change（detail.value 为新值/空串） |
oas-open-change | 面板展开状态变化时派发，detail: { open }（inline 模式不派发） |
插槽
| 名称 | 说明 |
|---|---|
trigger | 自定义触发器（替代默认色块按钮） |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-glass-blur | none |
--oas-glass-ring | transparent |
键盘：触发按钮聚焦时 Enter/Space 开关面板、Esc 关闭；面板内输入框聚焦时 Esc 关闭，外部点击关闭。