ColorPicker
颜色选择器：trigger 触发浮层面板（或 inline 内联），含 saturation 方块 + hue 条 + alpha 条 + 可切换格式（hex/rgb/hsv/hsl）的输入 + presets，对外以 hex 字符串通信。
如何引入
import { ColorPicker } from '@chenzy-design/svelte';基础用法
弹出触发、内联模式、预设色板、最近用色、校验态。
基础颜色选择
弹出触发与内联模式颜色选择，含预设色板。
格式切换
面板内切换 hex / rgb / hsv / hsl 显示与编辑，回显当前格式与色值。
当前格式：HEX 颜色值：#3366ff
透明度 Alpha
alpha 开启时显示透明度滑条，关闭则强制不透明。
预设色板
presets 品牌色板 + recentColors 最近用色，受控值回显。
尺寸与状态
size 三档尺寸、warning / error 校验态与 disabled 禁用态。
滴管取色
eyeDropper 开启浏览器吸管，从屏幕任意位置取色（需安全上下文，不支持时自动隐藏）。
顶部/底部插槽
topSlot / bottomSlot 在面板顶部、底部渲染额外内容。
选择主题色
当前：#3366ff
自定义触发器
usePopover 浮层模式下用 children 自定义触发器，替换默认色块。
受控
外部持有 value 配合 onChange，按钮编程式设置颜色。
API 参考
ColorPicker
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | — | string | undefined |
defaultValue | — | string | '#000000' |
alpha | — | boolean | true |
open | — | boolean | undefined |
defaultOpen | — | boolean | false |
presets | — | string[] | [] |
size | — | 'small'|'default'|'large' | default |
status | 校验态，仅影响 trigger / inline 面板边框色 | 'default'|'warning'|'error' | default |
disabled | — | boolean | false |
outputUppercase | — | boolean | true |
format | 受控：面板内显示/编辑的颜色格式（对外 onChange 仍为 hex） | 'hex'|'rgb'|'hsv'|'hsl' | undefined |
defaultFormat | 非受控初始格式 | 'hex'|'rgb'|'hsv'|'hsl' | 'hex' |
showFormatToggle | 面板内显示格式切换下拉 | boolean | true |
inline | 内联渲染面板，不使用 trigger 浮层 | boolean | false |
usePopover | 等价于 !inline，显式启用 trigger 浮层（覆盖 inline） | boolean | false |
topSlot | 面板顶部 slot | Snippet | undefined |
bottomSlot | 面板底部 slot | Snippet | undefined |
style | 根元素内联样式 | string | undefined |
height | 面板高度 px | number | 280 |
width | 面板宽度 px | number | 280 |
eyeDropper | 支持 EyeDropper 时显示吸管按钮（降级隐藏） | boolean | true |
recentColors | 显示最近使用颜色行 | boolean | false |
recentMax | 最近颜色上限 | number | 8 |
onChange | — | (hex: string) => void | undefined |
onOpenChange | — | (open: boolean) => void | undefined |
onFormatChange | — | (format: 'hex'|'rgb'|'hsv'|'hsl') => void | undefined |
ariaLabel | — | string | undefined |
children | 自定义触发器内容（提供时替换默认色块 trigger，仅浮层模式；对齐 Semi children） | Snippet | undefined |
Accessibility
| ARIA role | dialog |
- trigger 含 aria-haspopup=dialog / aria-expanded
- 浮层 role=dialog，打开经 useFocusTrap 陷入焦点、关闭归还 trigger
- saturation / hue / alpha handle 为 role=slider，含 aria-label 与 aria-valuenow
- hue / alpha / saturation 支持方向键微调；Home/End 跳极值；RTL 下水平方向键语义镜像
- presets 为 role=listbox + role=option，方向键漫游、Enter/Space 选中、Home/End 首末
- hex 输入含 label 与 aria-label
- 格式切换为 select，含 aria-label
- Esc 与外部点击经 useDismiss 关闭浮层（inline 模式无浮层不挂 dismiss）
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-color-picker-handle-border | var(--cd-color-white) | 把手边框颜色 |
--cd-color-picker-alpha-grid | var(--cd-color-fill-1) | alpha 条透明棋盘格颜色（组件消费） |
--cd-color-picker-field-bg | var(--cd-input-color-bg) | 输入 / 选择 / 吸管背景（组件消费） |
--cd-color-picker-field-border | var(--cd-input-border) | 输入 / 选择 / 吸管边框（组件消费） |
--cd-color-picker-field-border-active | var(--cd-input-border-active) | 输入 / 选择 / 吸管聚焦边框（组件消费） |
--cd-color-picker-field-text | var(--cd-input-color-text) | hex 输入文本颜色（组件消费） |
--cd-color-picker-handle-border | var(--cd-color-color-picker-handle-border) | 拖拽把手边框颜色（组件消费；对齐 Semi $color-colorPicker_handle-border） |
--cd-color-picker-handle-outline | var(--cd-color-border) | hue / alpha 把手描边颜色（组件消费） |
--cd-color-picker-label-text | var(--cd-color-text-2) | 格式标签 / 最近色标签文本颜色（组件消费） |
--cd-color-picker-panel-bg | var(--cd-color-bg-0) | 浮层面板背景色（组件消费） |