iter(g52): 新增 colorPicker 颜色选择组件

apps/demo/main.ts

@@ -19,6 +19,7 @@ import {
   card,
   cascader,
   checkbox,
+  colorPicker,
   dataTable,
   datePicker,
   transfer,
@@ -188,6 +189,7 @@ const listPick = signal(''); // 列表点击选中的条目标题
 const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
 const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径（外部受控演示）
 const splitSizes = signal<number[]>([35, 65]); // 分栏比例（外部受控演示）
+const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值（外部受控演示）
 const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示）
 const acValue = signal(''); // 自动补全输入值（外部受控演示）
 const treePick = signal('core'); // 树形选中节点 key
@@ -686,6 +688,19 @@ const content = h(
       button({ label: '错误（可关）', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500，请稍后重试', variant: 'danger' }) }),
     ),
   ),
+  section(
+    'sec-colorpicker',
+    '颜色选择',
+    'colorPicker：预设色板 + 原生取色器 + 手输 CSS 颜色串；缺省色板直接取语义令牌，暗色主题下自动跟着变。',
+    h(
+      'div',
+      { class: 'row' },
+      colorPicker({ value: colorVal, onChange: (c) => toast.success(`已选 ${c}`) }),
+      colorPicker({ placeholder: '只给两个预设', presets: ['var(--ua-color-success)', 'var(--ua-color-danger)'] }),
+      h('span', { class: 'out' }, () => `当前颜色：${colorVal()}`),
+      h('span', { class: 'ua-colorpicker-swatch', style: () => `background:${colorVal()}` }),
+    ),
+  ),
   section(
     'sec-backtop',
     '返回顶部',