@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/color-picker/ColorPicker.svelte.d.ts

@@ -1,49 +1,39 @@
 import { type Snippet } from 'svelte';
-import { type ColorFormat } from '@chenzy-design/core';
-type Size = 'small' | 'default' | 'large';
-type Status = 'default' | 'warning' | 'error';
+import { type ColorValue, type ColorValueFormat } from '@chenzy-design/core';
+import Popover from '../popover/Popover.svelte';
+import type { ComponentProps } from 'svelte';
+type PopoverProps = ComponentProps<typeof Popover>;
 interface Props {
-    value?: string;
-    defaultValue?: string;
+    /** 受控值（Semi ColorValue 对象）。 */
+    value?: ColorValue;
+    /** 非受控初始值（默认 Semi 品牌绿 #39c5bb）。 */
+    defaultValue?: ColorValue;
+    /** 是否显示 alpha 透明度滑条（对齐 Semi alpha）。 */
     alpha?: boolean;
-    open?: boolean;
-    defaultOpen?: boolean;
-    presets?: string[];
-    size?: Size;
-    status?: Status;
-    disabled?: boolean;
-    outputUppercase?: boolean;
-    /** 受控：面板内显示/编辑的颜色格式。对外 onChange 仍为 hex 字符串。 */
-    format?: ColorFormat;
-    /** 非受控初始格式（默认 'hex'）。format 受控时忽略。 */
-    defaultFormat?: ColorFormat;
-    /** 面板内是否显示格式切换器（默认 true；format 锁定可设 false） */
-    showFormatToggle?: boolean;
-    /** 内联渲染选色面板，不使用 trigger 浮层（默认 false） */
-    inline?: boolean;
-    /** 等价于 !inline，使用 trigger 浮层（默认 false） */
+    /** 面板宽度 px（对齐 Semi width，默认 280）。 */
+    width?: number;
+    /** 饱和度方块高度 px（对齐 Semi height，默认 280）。 */
+    height?: number;
+    /** DataPart 输入区初始格式（不受控，对齐 Semi defaultFormat）。 */
+    defaultFormat?: ColorValueFormat;
+    /** 支持浏览器 EyeDropper 时显示吸管按钮（默认 true，不支持自动隐藏）。 */
+    eyeDropper?: boolean;
+    /** 浮层模式：包裹 Popover，children 作触发器（对齐 Semi usePopover）。 */
     usePopover?: boolean;
-    /** 面板顶部 slot */
+    /** 透传内部 Popover 的属性（仅 usePopover）。 */
+    popoverProps?: PopoverProps;
+    /** 自定义触发器（仅 usePopover；缺省渲染默认色块，对齐 Semi children）。 */
+    children?: Snippet;
+    /** 面板顶部 slot（对齐 Semi topSlot）。 */
     topSlot?: Snippet;
-    /** 面板底部 slot */
+    /** 面板底部 slot（对齐 Semi bottomSlot）。 */
     bottomSlot?: Snippet;
-    /** 根元素内联样式 */
+    /** 根元素自定义类名（对齐 Semi className）。 */
+    class?: string;
+    /** 根元素内联样式（对齐 Semi style）。 */
     style?: string;
-    /** 面板高度 px（默认 280） */
-    height?: number;
-    /** 面板宽度 px（默认 280） */
-    width?: number;
-    /** 支持浏览器 EyeDropper 时显示吸管按钮（默认 true，不支持自动隐藏） */
-    eyeDropper?: boolean;
-    /** 显示最近使用颜色行（默认 false） */
-    recentColors?: boolean;
-    /** 最近颜色上限（默认 8） */
-    recentMax?: number;
-    onChange?: (hex: string) => void;
-    onOpenChange?: (open: boolean) => void;
-    /** 面板内格式切换时触发 */
-    onFormatChange?: (format: ColorFormat) => void;
-    ariaLabel?: string;
+    /** 值变化回调（对齐 Semi onChange，回 ColorValue 对象）。 */
+    onChange?: (value: ColorValue) => void;
 }
 declare const ColorPicker: import("svelte").Component<Props, {}, "">;
 type ColorPicker = ReturnType<typeof ColorPicker>;

package/dist/color-picker/ColorPicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAYH,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sCAAsC;IACtC,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAikBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAOH,KAAK,UAAU,EACf,KAAK,gBAAgB,EAGtB,MAAM,qBAAqB,CAAC;AAG/B,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAQ3C,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEnD,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAwTH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/color-picker/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { meta as colorPickerMeta } from './meta.js';
+export { colorValueFromHex, colorValueFromRgba, colorValueFromHsva, DEFAULT_COLOR_VALUE, type ColorValue, type ColorValueFormat, } from '@chenzy-design/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,KAAK,UAAU,EACf,KAAK,gBAAgB,GACtB,MAAM,qBAAqB,CAAC"}

package/dist/color-picker/index.js

@@ -1,2 +1,3 @@
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { meta as colorPickerMeta } from './meta.js';
+export { colorValueFromHex, colorValueFromRgba, colorValueFromHsva, DEFAULT_COLOR_VALUE, } from '@chenzy-design/core';

package/dist/color-picker/meta.d.ts

@@ -5,134 +5,87 @@
 export declare const meta: {
     readonly name: "ColorPicker";
     readonly category: "input";
-    readonly description: "颜色选择器：trigger 触发浮层面板（或 inline 内联），含 saturation 方块 + hue 条 + alpha 条 + 可切换格式（hex/rgb/hsv/hsl）的输入 + presets，对外以 hex 字符串通信。";
+    readonly description: "颜色选择器：严格对齐 Semi。inline 直接渲染选色面板（saturation 方块 + hue 条 + alpha 条 + DataPart 输入区），usePopover 时包裹浮层。值为 Semi ColorValue 对象 { hsva, rgba, hex }，经 onChange 通信。";
     readonly props: readonly [{
         readonly name: "value";
-        readonly type: "string";
+        readonly type: "ColorValue";
         readonly default: "undefined";
+        readonly desc: "受控值（{ hsva, rgba, hex }，hsva 的 s/v 为 0-100）";
     }, {
         readonly name: "defaultValue";
-        readonly type: "string";
-        readonly default: "'#000000'";
+        readonly type: "ColorValue";
+        readonly default: "品牌绿 #39c5bb";
+        readonly desc: "非受控初始值（对齐 Semi defaultProps）";
     }, {
         readonly name: "alpha";
         readonly type: "boolean";
-        readonly default: "true";
-    }, {
-        readonly name: "open";
-        readonly type: "boolean";
-        readonly default: "undefined";
-    }, {
-        readonly name: "defaultOpen";
-        readonly type: "boolean";
         readonly default: "false";
+        readonly desc: "显示 alpha 透明度滑条与百分比输入";
     }, {
-        readonly name: "presets";
-        readonly type: "string[]";
-        readonly default: "[]";
-    }, {
-        readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
-        readonly default: "default";
-    }, {
-        readonly name: "status";
-        readonly type: "'default'|'warning'|'error'";
-        readonly default: "default";
-        readonly desc: "校验态，仅影响 trigger / inline 面板边框色";
-    }, {
-        readonly name: "disabled";
-        readonly type: "boolean";
-        readonly default: "false";
-    }, {
-        readonly name: "outputUppercase";
-        readonly type: "boolean";
-        readonly default: "true";
+        readonly name: "width";
+        readonly type: "number";
+        readonly default: "280";
+        readonly desc: "面板宽度 px（对齐 Semi width）";
     }, {
-        readonly name: "format";
-        readonly type: "'hex'|'rgb'|'hsv'|'hsl'";
-        readonly default: "undefined";
-        readonly desc: "受控：面板内显示/编辑的颜色格式（对外 onChange 仍为 hex）";
+        readonly name: "height";
+        readonly type: "number";
+        readonly default: "280";
+        readonly desc: "saturation 方块高度 px（对齐 Semi height）";
     }, {
         readonly name: "defaultFormat";
-        readonly type: "'hex'|'rgb'|'hsv'|'hsl'";
+        readonly type: "'hex'|'rgba'|'hsva'";
         readonly default: "'hex'";
-        readonly desc: "非受控初始格式";
+        readonly desc: "DataPart 输入区初始格式（不受控，对齐 Semi）";
     }, {
-        readonly name: "showFormatToggle";
+        readonly name: "eyeDropper";
         readonly type: "boolean";
         readonly default: "true";
-        readonly desc: "面板内显示格式切换下拉";
-    }, {
-        readonly name: "inline";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "内联渲染面板，不使用 trigger 浮层";
+        readonly desc: "支持 EyeDropper 时显示吸管按钮（降级隐藏）";
     }, {
         readonly name: "usePopover";
         readonly type: "boolean";
         readonly default: "false";
-        readonly desc: "等价于 !inline，显式启用 trigger 浮层（覆盖 inline）";
+        readonly desc: "浮层模式：包裹 Popover，children 作触发器（对齐 Semi usePopover）";
     }, {
-        readonly name: "topSlot";
-        readonly type: "Snippet";
+        readonly name: "popoverProps";
+        readonly type: "PopoverProps";
         readonly default: "undefined";
-        readonly desc: "面板顶部 slot";
+        readonly desc: "透传内部 Popover 属性（仅 usePopover）";
     }, {
-        readonly name: "bottomSlot";
+        readonly name: "children";
         readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "面板底部 slot";
+        readonly desc: "自定义触发器（仅 usePopover；缺省渲染默认色块，对齐 Semi children）";
     }, {
-        readonly name: "style";
-        readonly type: "string";
+        readonly name: "topSlot";
+        readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "根元素内联样式";
-    }, {
-        readonly name: "height";
-        readonly type: "number";
-        readonly default: "280";
-        readonly desc: "面板高度 px";
-    }, {
-        readonly name: "width";
-        readonly type: "number";
-        readonly default: "280";
-        readonly desc: "面板宽度 px";
-    }, {
-        readonly name: "eyeDropper";
-        readonly type: "boolean";
-        readonly default: "true";
-        readonly desc: "支持 EyeDropper 时显示吸管按钮（降级隐藏）";
-    }, {
-        readonly name: "recentColors";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "显示最近使用颜色行";
-    }, {
-        readonly name: "recentMax";
-        readonly type: "number";
-        readonly default: "8";
-        readonly desc: "最近颜色上限";
+        readonly desc: "面板顶部 slot（对齐 Semi topSlot）";
     }, {
-        readonly name: "onChange";
-        readonly type: "(hex: string) => void";
+        readonly name: "bottomSlot";
+        readonly type: "Snippet";
         readonly default: "undefined";
+        readonly desc: "面板底部 slot（对齐 Semi bottomSlot）";
     }, {
-        readonly name: "onOpenChange";
-        readonly type: "(open: boolean) => void";
+        readonly name: "class";
+        readonly type: "string";
         readonly default: "undefined";
+        readonly desc: "根元素自定义类名（对齐 Semi className）";
     }, {
-        readonly name: "onFormatChange";
-        readonly type: "(format: 'hex'|'rgb'|'hsv'|'hsl') => void";
+        readonly name: "style";
+        readonly type: "string";
         readonly default: "undefined";
+        readonly desc: "根元素内联样式（对齐 Semi style）";
     }, {
-        readonly name: "ariaLabel";
-        readonly type: "string";
+        readonly name: "onChange";
+        readonly type: "(value: ColorValue) => void";
         readonly default: "undefined";
+        readonly desc: "值变化回调（回 ColorValue 对象）";
     }];
     readonly a11y: {
-        readonly role: "dialog";
-        readonly notes: readonly ["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）"];
+        readonly role: "slider";
+        readonly notes: readonly ["saturation / hue / alpha 均为 role=slider，含 aria-label 与 aria-valuenow", "saturation / hue / alpha 支持方向键微调；Home/End 跳极值", "DataPart 复用 Input / InputNumber / Select / Button，各自携带 aria-label / 无障碍", "usePopover 时浮层由 Popover 承载（含 focus trap / dismiss / Esc）"];
     };
-    readonly tokens: readonly ["--cd-color-picker-*", "--cd-focus-ring", "--cd-input-*", "--cd-color-*"];
+    readonly tokens: readonly ["--cd-radius-color-picker-topleft", "--cd-radius-color-picker-topright", "--cd-radius-color-picker-bottomleft", "--cd-radius-color-picker-bottomright", "--cd-radius-color-picker-handle", "--cd-radius-color-picker-alphasliderinner", "--cd-radius-color-picker-demoblock", "--cd-radius-color-picker-defaulttrigger", "--cd-width-color-picker-handle-border", "--cd-width-color-picker-colorpickerinputnumber", "--cd-width-color-picker-formatselect", "--cd-width-color-picker-defaulttrigger", "--cd-color-color-picker-handle-border", "--cd-spacing-color-picker-inputnumbersuffix-horizontal", "--cd-spacing-color-picker-inputgroup-marginleft", "--cd-spacing-color-picker-popover-padding", "--cd-spacing-color-picker-inputnumbersuffix-vertical", "--cd-spacing-color-picker-slider-margintop", "--cd-spacing-color-picker-datapart-margintop", "--cd-font-color-picker-inputnumbersuffix-fontsize", "--cd-color-picker-handle-size", "--cd-color-picker-handle-shadow", "--cd-color-picker-slider-height", "--cd-focus-ring"];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/color-picker/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/color-picker/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/color-picker/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DP,CAAC"}

package/dist/color-picker/meta.js

@@ -5,48 +5,60 @@
 export const meta = {
     name: 'ColorPicker',
     category: 'input',
-    description: '颜色选择器：trigger 触发浮层面板（或 inline 内联），含 saturation 方块 + hue 条 + alpha 条 + 可切换格式（hex/rgb/hsv/hsl）的输入 + presets，对外以 hex 字符串通信。',
+    description: '颜色选择器：严格对齐 Semi。inline 直接渲染选色面板（saturation 方块 + hue 条 + alpha 条 + DataPart 输入区），usePopover 时包裹浮层。值为 Semi ColorValue 对象 { hsva, rgba, hex }，经 onChange 通信。',
     props: [
-        { name: 'value', type: 'string', default: 'undefined' },
-        { name: 'defaultValue', type: 'string', default: "'#000000'" },
-        { name: 'alpha', type: 'boolean', default: 'true' },
-        { name: 'open', type: 'boolean', default: 'undefined' },
-        { name: 'defaultOpen', type: 'boolean', default: 'false' },
-        { name: 'presets', type: 'string[]', default: '[]' },
-        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-        { name: 'status', type: "'default'|'warning'|'error'", default: 'default', desc: '校验态，仅影响 trigger / inline 面板边框色' },
-        { name: 'disabled', type: 'boolean', default: 'false' },
-        { name: 'outputUppercase', type: 'boolean', default: 'true' },
-        { name: 'format', type: "'hex'|'rgb'|'hsv'|'hsl'", default: 'undefined', desc: '受控：面板内显示/编辑的颜色格式（对外 onChange 仍为 hex）' },
-        { name: 'defaultFormat', type: "'hex'|'rgb'|'hsv'|'hsl'", default: "'hex'", desc: '非受控初始格式' },
-        { name: 'showFormatToggle', type: 'boolean', default: 'true', desc: '面板内显示格式切换下拉' },
-        { name: 'inline', type: 'boolean', default: 'false', desc: '内联渲染面板，不使用 trigger 浮层' },
-        { name: 'usePopover', type: 'boolean', default: 'false', desc: '等价于 !inline，显式启用 trigger 浮层（覆盖 inline）' },
-        { name: 'topSlot', type: 'Snippet', default: 'undefined', desc: '面板顶部 slot' },
-        { name: 'bottomSlot', type: 'Snippet', default: 'undefined', desc: '面板底部 slot' },
-        { name: 'style', type: 'string', default: 'undefined', desc: '根元素内联样式' },
-        { name: 'height', type: 'number', default: '280', desc: '面板高度 px' },
-        { name: 'width', type: 'number', default: '280', desc: '面板宽度 px' },
+        { name: 'value', type: 'ColorValue', default: 'undefined', desc: '受控值（{ hsva, rgba, hex }，hsva 的 s/v 为 0-100）' },
+        { name: 'defaultValue', type: 'ColorValue', default: '品牌绿 #39c5bb', desc: '非受控初始值（对齐 Semi defaultProps）' },
+        { name: 'alpha', type: 'boolean', default: 'false', desc: '显示 alpha 透明度滑条与百分比输入' },
+        { name: 'width', type: 'number', default: '280', desc: '面板宽度 px（对齐 Semi width）' },
+        { name: 'height', type: 'number', default: '280', desc: 'saturation 方块高度 px（对齐 Semi height）' },
+        { name: 'defaultFormat', type: "'hex'|'rgba'|'hsva'", default: "'hex'", desc: 'DataPart 输入区初始格式（不受控，对齐 Semi）' },
         { name: 'eyeDropper', type: 'boolean', default: 'true', desc: '支持 EyeDropper 时显示吸管按钮（降级隐藏）' },
-        { name: 'recentColors', type: 'boolean', default: 'false', desc: '显示最近使用颜色行' },
-        { name: 'recentMax', type: 'number', default: '8', desc: '最近颜色上限' },
-        { name: 'onChange', type: '(hex: string) => void', default: 'undefined' },
-        { name: 'onOpenChange', type: '(open: boolean) => void', default: 'undefined' },
-        { name: 'onFormatChange', type: "(format: 'hex'|'rgb'|'hsv'|'hsl') => void", default: 'undefined' },
-        { name: 'ariaLabel', type: 'string', default: 'undefined' },
+        { name: 'usePopover', type: 'boolean', default: 'false', desc: '浮层模式：包裹 Popover，children 作触发器（对齐 Semi usePopover）' },
+        { name: 'popoverProps', type: 'PopoverProps', default: 'undefined', desc: '透传内部 Popover 属性（仅 usePopover）' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '自定义触发器（仅 usePopover；缺省渲染默认色块，对齐 Semi children）' },
+        { name: 'topSlot', type: 'Snippet', default: 'undefined', desc: '面板顶部 slot（对齐 Semi topSlot）' },
+        { name: 'bottomSlot', type: 'Snippet', default: 'undefined', desc: '面板底部 slot（对齐 Semi bottomSlot）' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '根元素自定义类名（对齐 Semi className）' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根元素内联样式（对齐 Semi style）' },
+        { name: 'onChange', type: '(value: ColorValue) => void', default: 'undefined', desc: '值变化回调（回 ColorValue 对象）' },
     ],
     a11y: {
-        role: 'dialog',
+        role: 'slider',
         notes: [
-            '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）',
+            'saturation / hue / alpha 均为 role=slider，含 aria-label 与 aria-valuenow',
+            'saturation / hue / alpha 支持方向键微调；Home/End 跳极值',
+            'DataPart 复用 Input / InputNumber / Select / Button，各自携带 aria-label / 无障碍',
+            'usePopover 时浮层由 Popover 承载（含 focus trap / dismiss / Esc）',
         ],
     },
-    tokens: ['--cd-color-picker-*', '--cd-focus-ring', '--cd-input-*', '--cd-color-*'],
+    tokens: [
+        // Semi 全量对齐（semi-foundation/colorPicker/variables.scss 20 个，均被组件真消费）
+        '--cd-radius-color-picker-topleft',
+        '--cd-radius-color-picker-topright',
+        '--cd-radius-color-picker-bottomleft',
+        '--cd-radius-color-picker-bottomright',
+        '--cd-radius-color-picker-handle',
+        '--cd-radius-color-picker-alphasliderinner',
+        '--cd-radius-color-picker-demoblock',
+        '--cd-radius-color-picker-defaulttrigger',
+        '--cd-width-color-picker-handle-border',
+        '--cd-width-color-picker-colorpickerinputnumber',
+        '--cd-width-color-picker-formatselect',
+        '--cd-width-color-picker-defaulttrigger',
+        '--cd-color-color-picker-handle-border',
+        '--cd-spacing-color-picker-inputnumbersuffix-horizontal',
+        '--cd-spacing-color-picker-inputgroup-marginleft',
+        '--cd-spacing-color-picker-popover-padding',
+        '--cd-spacing-color-picker-inputnumbersuffix-vertical',
+        '--cd-spacing-color-picker-slider-margintop',
+        '--cd-spacing-color-picker-datapart-margintop',
+        '--cd-font-color-picker-inputnumbersuffix-fontsize',
+        // chenzy 补充消费段（Semi 靠 renderPicker 传入，无对应字面量 token）
+        '--cd-color-picker-handle-size',
+        '--cd-color-picker-handle-shadow',
+        '--cd-color-picker-slider-height',
+        // 跨组件共享语义 token
+        '--cd-focus-ring',
+    ],
 };