x-next 1.4.0 → 1.6.0

package/AI_USAGE.md

@@ -1,9 +1,9 @@
 <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage-recipes.md and script/ai-usage/manifest.js. -->
 # x-next AI 使用手册
 
-适用版本：**x-next@1.4.0**。Vue：`^3.5.0`；Node：`>=20.19.0`。
+适用版本：**x-next@1.6.0**。Vue：`^3.5.0`；Node：`>=20.19.0`。
 
-来源指纹（精选示例、映射、版本与公开类型声明）：`37f7ca897f3f8851dd34e16a59bbdeb40404262841c8c0bc9112fc62100f031a`。
+来源指纹（精选示例、映射、版本与公开类型声明）：`8b4e92e3477781a27ff136cbc59a1f8508ba69d45a4f5539daeee1de7a5d9570`。
 
 先按业务需要选择组件，不要求全部迁移。本手册限定在用户确认的 22 个组件及必要的同族子组件，未覆盖的导出不表示已完成业务验收。
 

package/CHANGELOG.md

@@ -2,6 +2,77 @@
 
 本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [1.6.0] - 2026-10-02
+
+### 新增
+
+- **Heatmap 热力图**：以「周 × 星期」网格展示按天聚合的数值分布，支持自然年与自定义跨度、五档色阶、尺寸与首日配置、月/周标签与图例开关、格子点击事件与自定义提示。整块网格只挂一个 `mousemove` 做事件委托 + 单个浮层节点，避免 371 个格子各挂一个 Trigger 带来的开销。
+- **ColorPicker 颜色选择器**：SV 取色面板 + 色相条 + 透明度条 + hex/rgb/hsl 三格式输入 + 预设色板 + 确认/清除。受控与非受控、禁用与尺寸、表单校验联动、自定义触发器均支持；Esc 关闭并把焦点归还触发器。
+- 新增 `_utils/color.ts` 颜色工具（含 alpha 的 hex/rgb/hsl 解析、HSV 双向换算、格式化与混色），附 44 项单测。
+- **Spin `tipShimmer`**：提示文字扫光效果。新增 `--x-spin-tip-shimmer-color-highlight` / `--x-spin-tip-shimmer-duration` 两个 token；用 `background-clip: text` 实现，并包在 `@supports` 中兜底（不支持裁切时文字保持原色，不会变成空白）。
+- **Spin `delay`**：延迟显示加载态，避免快速请求闪一下遮罩。语义与 AntDV 有一处刻意差异——只延迟出现、结束时立即收起，不会让已加载完的内容再被多盖一段时间。
+- 修复 `Empty` 的插画色阶后新增 `--x-empty-illustration-*` 四个 token，使默认插画能随亮/暗主题换色。
+
+### 修复
+
+- **全库行高依赖宿主（系统性缺陷）**：组件文案未显式声明行高时会继承宿主（如 `body`）的行高，导致同一组件在不同项目中高度与文字位置不一致。实测宿主行高设为 3 时按钮内容盒涨到 42px、设为 1 时只有 14px。已为 Steps 描述、Pagination 跳转区、Image footer、Input/Select 前后缀、Input 字数统计、Radio/Checkbox、InputTag 输入框、Form 说明文字等补齐行高声明。
+- **Input 字数统计类名漂移**：`.x-input-word-limit`（单横线）与运行时类名 `x-input--word-limit`（双横线）不匹配，整条规则从未生效——该元素字号一直是宿主默认值而非规定的 12px。
+- **InputTag 输入框字号**：原生 `<input>` 不继承父级字体，此前一直渲染在 UA 默认的 `13.3333px`：既与标签字号（12/14px）不一致，也让内部测宽元素 `.x-input-tag--mirror` 的测量失准。现已显式 `font-size: inherit`。
+- **Radio / Checkbox 的 `line-height: unset`**：该写法会主动丢弃行高、完全继承宿主，比不声明更糟；改为显式声明。
+- **Table / Dropdown 空态来源标识**：两者渲染裸 `<Empty />`，导致 `ConfigProvider` 的 `#empty` 插槽回调 `component` 恒为 `'empty'`，文档承诺的「按来源区分空态」在这两个组件里失效。
+- **Spin 容器模式的无障碍语义**：`loading=false` 时仍保留 `aria-label="加载中"`，屏幕阅读器会把已加载完成的区域播报为加载中。
+- **Spin 默认图标旋转叠加**：默认图标同时叠加了 Icon 的 `spin` 层与图标自带的旋转动画，两层周期与缓动都不同，合成转速在 1~2 圈/秒之间波动，观感又快又乱。现只保留图标自带旋转；自定义 `icon` 插槽仍注入 `spin`。
+- **Spin 点状动画与文案扫光的动效降级**：新增 `prefers-reduced-motion` 适配，扫光在降级时还原成纯色（而非停在某处留下一块亮斑）。
+- **Network 字段缺失被误判为「较差」**：`navigator.connection` 存在但字段不全时（部分浏览器只给 `effectiveType`），旧逻辑把缺失值兜底成 `downlink=0 / rtt=Infinity` 再走阈值判断，结果一律判成 `poor`，比完全不支持该 API 还悲观，且与文档描述相反。现在字段不足回落为「检测中」，`4g` 直接判良好。
+- **Network 其它缺陷**：`connection.onchange` 降级会顶掉使用方已注册的处理器（现改为转发并在卸载时归还）；轮询无变化仍反复派发 `change`（现按语义字段去重，但仍保留首次状态派发）；`refresh()` 可能返回 `undefined`（现始终返回 `Promise<NetworkStatus>`）。
+- **Pagination `total` 非有限值导致死循环**：`total` 传 `Infinity`（「总数未知」）时会渲染出文案为 `Infinity` 的页码；若 `current` 同时非有限，页列表里的 `for (let i = Infinity; i <= Infinity; i++)` 条件恒为真（`Infinity++ === Infinity`），主线程死循环、页面卡死。现对 `total` / `current` 做归一化。
+- **Pagination 无障碍与边界**：根节点补 `role="navigation"` 与可访问名称；跳转输入框补无障碍名称；省略号在禁用态下不再可聚焦、不再响应键盘；`pageSize` 不在 `pageSizeOptions` 中时不再显示空 placeholder；`pageSizeProps` 不再能覆盖 `disabled` / `modelValue`。
+- **Skeleton 无障碍**：根节点补 `aria-busy`，装饰性的 `SkeletonLine` / `SkeletonShape` 补 `aria-hidden`（此前空 `<li>` 会被读屏念成一串无内容的列表项）。
+- **Skeleton 动画时长**硬编码 `1.5s` 提到 token；`SkeletonShape.size` 类型收窄。
+- **Empty 默认插画**：四个灰阶是硬编码浅色字面量，暗色主题下整块发白；现改为 `--x-empty-illustration-*` token，图形本身不变，亮色取值与原字面量逐位一致。
+- **forced-colors 适配**：补齐分页当前页描边与骨架屏轮廓，避免背景被强制成 Canvas 后这些状态不可见。
+- **Steps 描述行高**、**TimePicker / DatePicker 面板宽度自适应**等文档与样式细节。
+
+### 测试
+
+- 新增 Heatmap / ColorPicker / 颜色工具共 100+ 项单测。
+- 新增 Empty 插画单色契约、Table/Dropdown 空态来源、Spin `delay` 与 `tipShimmer`、Spin `inert` 键盘兜底（显式移除 `inert` 原型属性以覆盖真实降级路径）、Network 字段缺失与 `onchange` 转发、Pagination 非有限 `total` 等回归测试，测试总数 2034。
+
+## [1.5.0] - 2026-10-02
+
+### 修复
+
+- **Steps**：
+  - 修复横向连接线特异性回归——显示规则特异性 (0,4,1) 压过 arrow / navigation / vertical / dot / line-less 各模式的 `display: none` (0,2,1)，导致这些模式渲染出 5000px 的水平残线并溢出整页；改为给显示规则加模式守卫。
+  - 修复 SSR / 首帧所有步骤被判成 `finish`（DOM 测量未就绪时 `innerIndex` 为 -1、`stepNumber` 为 0），文档站静态产物此前是「全部打勾」；改用 setup 顺序号兜底。
+- **Menu**：
+  - 修复水平溢出收纳时，其内部弹层 Menu 向根收集器上报空数据，导致 `autoOpen` / `defaultOpenKeys` / `autoOpenSelected` 在溢出场景整体失效。
+  - 修复点击溢出收纳头会把内部占位 key `__arco-menu-overflow-sub-menu` 泄漏到 `update:openKeys` / `sub-menu-click` 公开事件。
+- **Tabs**：
+  - 补齐全垂直布局规则：标签间距、垂直专用水平内边距、内容区方向性留白、滚动轨道留白、新增按钮对齐。
+  - 修复 `justify` 与垂直布局同时命中导致导航与内容上下堆叠。
+  - 修复 `position="bottom"` 时激活下划线画在页面最底边、与分隔线错开一个标签高。
+  - tab 与 panel 补齐 `id` / `aria-controls` / `aria-labelledby` 双向关联，读屏可建立对应关系。
+  - `scrollPosition` 类型支持 `number`（原先只声明 `String`，传数字会触发 prop 校验告警）。
+- **Pagination**：
+  - 修复 `mm()` 误传含 `&` 的选择器导致编译出非法 CSS，首 / 末页箭头禁用色失效、看起来仍可点击。
+  - 修复 `autoAdjust` 判断分支不可达（`computedCurrent` 已钳制，条件恒假），总页数减少时不再调整当前页也不派发事件。
+  - 修复省略号死规则，`--x-pagination-size-icon-ellipsis` 字号首次生效。
+- **Dropdown**：
+  - 修复仅在 `optionProps` 中禁用子菜单时，hover 触发仍会弹出被禁用的子菜单。
+  - 根触发器补齐 `aria-haspopup` / `aria-expanded` 菜单语义。
+  - `DropdownButton` 的图标触发器补齐可访问名称（原为无名按钮）。
+- 修复 3 处 Less → SCSS 迁移残留的非法 CSS 值（`-var(...)` 与缺少 `calc` 的减法），这些声明此前被浏览器静默丢弃：Dropdown 子菜单浮层偏移、Menu 横向 pop 的 hover 桥接区、Menu popup 首分组间距校正。
+
+### 新增
+
+- 新增 `common.more` locale 文案（中文「更多操作」/ 英文「More actions」），供图标触发器提供可访问名称。
+- 新增 `pnpm run check:compiled-css`：检查编译产物的非法 CSS 值、BEM 拼接损坏的选择器，以及显式登记的层叠守卫，覆盖「SCSS 能编译、单测通过、浏览器静默丢弃规则」这一类此前无门禁的缺陷；已接入 `check` 总入口。
+
+### 测试
+
+- 新增 5 项回归测试：Menu 溢出收纳不泄漏内部 key、Pagination `autoAdjust` 越界派发与未越界不派发、Tabs tab/panel id 双向关联与唯一性、Steps SSR 首帧状态推算。
+
 ## [1.4.0] - 2026-10-02
 
 ### 新增

package/dist/_utils/color.d.ts

@@ -0,0 +1,53 @@
+import { hslToRgb, rgbToHsl } from './palette';
+export { hslToRgb, rgbToHsl };
+/**
+ * 带透明度的颜色工具。
+ *
+ * 与 `palette.ts` 的分工：那里的 `parseColor` 服务于主题色阶生成，语义是
+ * 「丢弃 alpha、只取不透明 RGB」（该行为被色阶测试锁定）。颜色选择器需要
+ * 保留 alpha、需要 HSV（取色面板的饱和度/明度轴）以及多格式输出，
+ * 因此单独放在这里，不修改 palette.ts 的既有语义。
+ */
+/** 通道 0-255，alpha 0-1 */
+export interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** h 0-360，s/v 0-100 */
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+/**
+ * 解析颜色字符串为 RGBA。
+ *
+ * 支持 `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`、`rgb()` / `rgba()`、
+ * `hsl()` / `hsla()`（通道可用百分比），逗号与空格两种语法均可。
+ * 无法解析时返回 null。
+ */
+export declare const parseColorAlpha: (input: string) => RGBA | null;
+/** 解析失败时回退到给定颜色，便于受控输入容错 */
+export declare const parseColorAlphaOr: (input: string, fallback: RGBA) => RGBA;
+export declare const rgbToHsv: ({ r, g, b }: Pick<RGBA, "r" | "g" | "b">) => HSV;
+export declare const hsvToRgb: ({ h, s, v }: HSV) => [number, number, number];
+export declare const rgbaToHex: ({ r, g, b, a }: RGBA, showAlpha?: boolean) => string;
+/** alpha 输入框展示用：整数百分比 */
+export declare const formatAlphaPercent: (a: number) => number;
+/**
+ * 按目标格式输出颜色字符串。
+ * `showAlpha` 为 false 时忽略 alpha；为 true 但 alpha 为 1 时省略 alpha 通道。
+ */
+export declare const formatColor: (rgba: RGBA, format: ColorFormat, showAlpha?: boolean) => string;
+/**
+ * 输出 `rgba(r, g, b, a)`，用于渐变端点等需要精确 alpha 的场景。
+ * alpha 滑块的两端分别是「完全透明」与「当前色」，都靠它构造。
+ */
+export declare const toRgbaString: ({ r, g, b, a }: RGBA) => string;
+/** alpha 滑轨的渐变终点色：始终输出不透明的 `rgba()` */
+export declare const toAlphaSliderColor: ({ r, g, b }: RGBA) => string;
+/** 十六进制输入框的即时校验（供输入过程的分支判断，允许带 alpha） */
+export declare const isHexColor: (input: string) => boolean;

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

@@ -0,0 +1,239 @@
+import { PropType, SlotsType } from 'vue';
+import { ColorFormat } from '../../_utils/color';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 颜色值，支持 hex / rgb / hsl（含 alpha）
+     * @en Color value, supports hex / rgb / hsl with alpha
+     * @vModel
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 非受控初值
+     * @en Default value for uncontrolled mode
+     */
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 面板是否可见
+     * @en Whether the panel is visible
+     * @vModel
+     */
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 面板默认是否可见
+     * @en Whether the panel is visible by default
+     */
+    defaultShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 可选的颜色格式
+     * @en Available color formats
+     * @defaultValue ['hex', 'rgb', 'hsl']
+     */
+    modes: {
+        type: PropType<ColorFormat[]>;
+        default: () => ColorFormat[];
+    };
+    /**
+     * @zh 是否启用透明度
+     * @en Whether alpha is enabled
+     * @defaultValue true
+     */
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 预设色块
+     * @en Preset swatches
+     */
+    swatches: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 是否展示确认按钮
+     * @en Whether to show the confirm button
+     * @defaultValue true
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否展示清除按钮
+     * @en Whether to show the clear button
+     * @defaultValue true
+     */
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否禁用
+     * @en Whether the picker is disabled
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 尺寸
+     * @en Size
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+        type: PropType<"mini" | "small" | "medium" | "large">;
+    };
+    /**
+     * @zh 面板挂载容器
+     * @en Mount container for the panel
+     */
+    popupContainer: {
+        type: PropType<string | HTMLElement>;
+    };
+}>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (_value: string, _ev?: Event) => true;
+    change: (_value: string, _ev?: Event) => true;
+    'update:show': (_visible: boolean) => true;
+    showChange: (_visible: boolean) => true;
+    confirm: (_value: string) => true;
+    clear: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * @zh 颜色值，支持 hex / rgb / hsl（含 alpha）
+     * @en Color value, supports hex / rgb / hsl with alpha
+     * @vModel
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 非受控初值
+     * @en Default value for uncontrolled mode
+     */
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 面板是否可见
+     * @en Whether the panel is visible
+     * @vModel
+     */
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /**
+     * @zh 面板默认是否可见
+     * @en Whether the panel is visible by default
+     */
+    defaultShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 可选的颜色格式
+     * @en Available color formats
+     * @defaultValue ['hex', 'rgb', 'hsl']
+     */
+    modes: {
+        type: PropType<ColorFormat[]>;
+        default: () => ColorFormat[];
+    };
+    /**
+     * @zh 是否启用透明度
+     * @en Whether alpha is enabled
+     * @defaultValue true
+     */
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 预设色块
+     * @en Preset swatches
+     */
+    swatches: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    /**
+     * @zh 是否展示确认按钮
+     * @en Whether to show the confirm button
+     * @defaultValue true
+     */
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否展示清除按钮
+     * @en Whether to show the clear button
+     * @defaultValue true
+     */
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 是否禁用
+     * @en Whether the picker is disabled
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @zh 尺寸
+     * @en Size
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+        type: PropType<"mini" | "small" | "medium" | "large">;
+    };
+    /**
+     * @zh 面板挂载容器
+     * @en Mount container for the panel
+     */
+    popupContainer: {
+        type: PropType<string | HTMLElement>;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onChange?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+    onConfirm?: ((_value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+    "onUpdate:show"?: ((_visible: boolean) => any) | undefined;
+    onShowChange?: ((_visible: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    defaultValue: string;
+    show: boolean;
+    modelValue: string;
+    modes: ColorFormat[];
+    showAlpha: boolean;
+    swatches: string[];
+    showConfirm: boolean;
+    showClear: boolean;
+    defaultShow: boolean;
+}, SlotsType<{
+    default?: () => unknown;
+    trigger?: (props: {
+        value: string;
+        visible: boolean;
+    }) => unknown;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/color-picker/gradient-slider.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 通用渐变滑轨，色相条与透明度条共用。
+ *
+ * 差异只在背景：色相条是固定的色相环渐变，透明度条是「透明 → 当前色」。
+ * 通过 `background` prop 注入，组件本身不关心颜色语义。
+ */
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 0-100 的位置百分比 */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 滑轨背景（CSS background 值） */
+    background: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 无障碍名称，由父组件传入已本地化的文案 */
+    ariaLabel: {
+        type: StringConstructor;
+    };
+}>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (_value: number) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 0-100 的位置百分比 */
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 滑轨背景（CSS background 值） */
+    background: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 无障碍名称，由父组件传入已本地化的文案 */
+    ariaLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onChange?: ((_value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,238 @@
+export declare const ColorPicker: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        defaultValue: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        show: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        defaultShow: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        modes: {
+            type: import('vue').PropType<import('.').ColorFormat[]>;
+            default: () => import('.').ColorFormat[];
+        };
+        showAlpha: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        swatches: {
+            type: import('vue').PropType<string[]>;
+            default: () => never[];
+        };
+        showConfirm: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
+        };
+        popupContainer: {
+            type: import('vue').PropType<string | HTMLElement>;
+        };
+    }>> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onChange?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+        onConfirm?: ((_value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+        "onUpdate:show"?: ((_visible: boolean) => any) | undefined;
+        onShowChange?: ((_visible: boolean) => any) | undefined;
+    }>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        'update:modelValue': (_value: string, _ev?: Event) => true;
+        change: (_value: string, _ev?: Event) => true;
+        'update:show': (_visible: boolean) => true;
+        showChange: (_visible: boolean) => true;
+        confirm: (_value: string) => true;
+        clear: () => true;
+    }, import('vue').PublicProps, {
+        disabled: boolean;
+        defaultValue: string;
+        show: boolean;
+        modelValue: string;
+        modes: import('.').ColorFormat[];
+        showAlpha: boolean;
+        swatches: string[];
+        showConfirm: boolean;
+        showClear: boolean;
+        defaultShow: boolean;
+    }, true, {}, import('vue').SlotsType<{
+        default?: () => unknown;
+        trigger?: (props: {
+            value: string;
+            visible: boolean;
+        }) => unknown;
+    }>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        defaultValue: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        show: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        defaultShow: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        modes: {
+            type: import('vue').PropType<import('.').ColorFormat[]>;
+            default: () => import('.').ColorFormat[];
+        };
+        showAlpha: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        swatches: {
+            type: import('vue').PropType<string[]>;
+            default: () => never[];
+        };
+        showConfirm: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showClear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
+        };
+        popupContainer: {
+            type: import('vue').PropType<string | HTMLElement>;
+        };
+    }>> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onChange?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+        onConfirm?: ((_value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+        "onUpdate:show"?: ((_visible: boolean) => any) | undefined;
+        onShowChange?: ((_visible: boolean) => any) | undefined;
+    }>, () => VNode, {}, {}, {}, {
+        disabled: boolean;
+        defaultValue: string;
+        show: boolean;
+        modelValue: string;
+        modes: import('.').ColorFormat[];
+        showAlpha: boolean;
+        swatches: string[];
+        showConfirm: boolean;
+        showClear: boolean;
+        defaultShow: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modes: {
+        type: import('vue').PropType<import('.').ColorFormat[]>;
+        default: () => import('.').ColorFormat[];
+    };
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    swatches: {
+        type: import('vue').PropType<string[]>;
+        default: () => never[];
+    };
+    showConfirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
+    };
+    popupContainer: {
+        type: import('vue').PropType<string | HTMLElement>;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onChange?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+    onConfirm?: ((_value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string, _ev?: Event | undefined) => any) | undefined;
+    "onUpdate:show"?: ((_visible: boolean) => any) | undefined;
+    onShowChange?: ((_visible: boolean) => any) | undefined;
+}>, () => VNode, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (_value: string, _ev?: Event) => true;
+    change: (_value: string, _ev?: Event) => true;
+    'update:show': (_visible: boolean) => true;
+    showChange: (_visible: boolean) => true;
+    confirm: (_value: string) => true;
+    clear: () => true;
+}, string, {
+    disabled: boolean;
+    defaultValue: string;
+    show: boolean;
+    modelValue: string;
+    modes: import('.').ColorFormat[];
+    showAlpha: boolean;
+    swatches: string[];
+    showConfirm: boolean;
+    showClear: boolean;
+    defaultShow: boolean;
+}, {}, string, import('vue').SlotsType<{
+    default?: () => unknown;
+    trigger?: (props: {
+        value: string;
+        visible: boolean;
+    }) => unknown;
+}>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install(app: import('vue').App): void;
+};
+export { ColorPicker as default };
+export type { ColorFormat } from '../../_utils/color';