@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/color-picker/ColorPicker.svelte

@@ -1,985 +0,0 @@
-<!--
-  ColorPicker — see specs/components/input/ColorPicker.spec.md
-  基础子集：trigger + 浮层（saturation 方块 + hue 条 + alpha 条 + hex 输入 + presets）。
-  受控 value / open 不回写 (红线 #1)，仅 onChange / onOpenChange。
-  拖拽用命令式指针（红线 #3）：pointerdown 一次性读 rect 存普通变量，
-  document pointermove/pointerup 手动加/移除。useDismiss 放 $effect。
-  对外 value/onChange 一律为 hex 字符串（向后兼容；format 仅影响面板内显示/编辑）。
-  eyeDropper：浏览器支持 window.EyeDropper 时渲染吸管按钮，取屏幕色（降级隐藏）。
-  recentColors：记录最近应用的颜色（preset/eyeDropper/hex 确认/关闭面板时），去重 + 上限。
-  format：面板内可切换 hex/rgb/hsv/hsl 显示与编辑（红线 #2：转换纯函数在 core）。
-  inline：不渲染 trigger 浮层，直接内联渲染选色面板（设置页嵌入）。
--->
-<script lang="ts">
-  import { tick } from 'svelte';
-  import {
-    useId,
-    useDismiss,
-    useFocusTrap,
-    nextRovingIndex,
-    rovingKeyFromEvent,
-    hexToHsv as coreHexToHsv,
-    hsvToHex as coreHsvToHex,
-    formatColor,
-    parseColor,
-    colorClamp01,
-    type Hsv,
-    type ColorFormat,
-  } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-
-  interface Props {
-    value?: string;
-    defaultValue?: string;
-    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;
-    /** 支持浏览器 EyeDropper 时显示吸管按钮（默认 true，不支持自动隐藏） */
-    eyeDropper?: boolean;
-    /** 显示最近使用颜色行（默认 false） */
-    recentColors?: boolean;
-    /** 最近颜色上限（默认 8） */
-    recentMax?: number;
-    onChange?: (hex: string) => void;
-    onOpenChange?: (open: boolean) => void;
-    /** 面板内格式切换时触发 */
-    onFormatChange?: (format: ColorFormat) => void;
-    ariaLabel?: string;
-  }
-
-  let {
-    value,
-    defaultValue = '#000000',
-    alpha = true,
-    open,
-    defaultOpen = false,
-    presets = [],
-    size = 'default',
-    status = 'default',
-    disabled = false,
-    outputUppercase = true,
-    format,
-    defaultFormat = 'hex',
-    showFormatToggle = true,
-    inline = false,
-    eyeDropper = true,
-    recentColors = false,
-    recentMax = 8,
-    onChange,
-    onOpenChange,
-    onFormatChange,
-    ariaLabel,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  const hexInputId = useId('cd-color-picker-hex');
-
-  // ---------- 色彩工具（纯函数来自 core，红线 #2）----------
-  const clamp01 = colorClamp01;
-
-  function hexToHsv(hex: string): Hsv {
-    return coreHexToHsv(hex);
-  }
-
-  function hsvToHex(hsv: Hsv): string {
-    return coreHsvToHex(hsv, { uppercase: outputUppercase });
-  }
-
-  // ---------- 受控值 (红线 #1) ----------
-  const isControlled = $derived(value !== undefined);
-  let innerValue = $state<string>(getInitialValue());
-  const currentHex = $derived(isControlled ? (value ?? defaultValue) : innerValue);
-
-  function getInitialValue(): string {
-    return defaultValue;
-  }
-
-  function setValue(hex: string) {
-    if (!isControlled) innerValue = hex;
-    onChange?.(hex);
-  }
-
-  // ---------- 受控 open (红线 #1) ----------
-  // inline 模式：面板常驻渲染，不受 open 控制。
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(inline ? true : isOpenControlled ? !!open : innerOpen);
-
-  // ---------- 受控 format (红线 #1) ----------
-  const isFormatControlled = $derived(format !== undefined);
-  let innerFormat = $state<ColorFormat>(getInitialFormat());
-  const currentFormat = $derived<ColorFormat>(isFormatControlled ? format! : innerFormat);
-
-  function getInitialFormat(): ColorFormat {
-    return format ?? defaultFormat;
-  }
-  const formatOptions: ColorFormat[] = ['hex', 'rgb', 'hsv', 'hsl'];
-
-  function setFormat(next: ColorFormat) {
-    if (next === currentFormat) return;
-    if (!isFormatControlled) innerFormat = next;
-    onFormatChange?.(next);
-    // 切换格式时立即用当前色按新格式刷新输入框（非编辑态）。
-    editingHex = false;
-  }
-
-  function getInitialOpen(): boolean {
-    return defaultOpen;
-  }
-
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    // 关闭面板时把当前颜色记入最近用色
-    if (!next) recordColor(hsvToHex({ h, s, v, a }));
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.(next);
-  }
-
-  function toggleOpen() {
-    if (disabled) return;
-    setOpen(!isOpen);
-  }
-
-  // ---------- 内部 HSV 状态 ----------
-  // 初值从 current hex 派生。dragging 期间不从 value 反算（避免与本地更新打架）。
-  function initialHsv(): Hsv {
-    return hexToHsv(defaultValue);
-  }
-  const init = initialHsv();
-  let h = $state(init.h);
-  let s = $state(init.s);
-  let v = $state(init.v);
-  let a = $state(init.a);
-
-  let dragging = $state(false);
-  // 用户正在手动编辑 hex 输入时，不从 value 反算覆盖输入框。
-  let editingHex = $state(false);
-
-  // 当外部 value 变化时同步内部 HSV（非拖拽 / 非手动编辑期间）。
-  $effect(() => {
-    const hex = currentHex;
-    if (dragging || editingHex) return;
-    const next = hexToHsv(hex);
-    h = next.h;
-    s = next.s;
-    v = next.v;
-    a = next.a;
-  });
-
-  // 当前 hex（由 hsv 计算），用于显示与渐变。
-  const displayHex = $derived(hsvToHex({ h, s, v, a }));
-  const opaqueHex = $derived(hsvToHex({ h, s, v, a: 1 }));
-
-  // 按当前格式格式化的字符串，用于输入框显示。
-  const displayFormatted = $derived(
-    formatColor(
-      { h, s, v, a: alpha ? a : 1 },
-      currentFormat,
-      { uppercase: outputUppercase, alpha },
-    ),
-  );
-
-  function commitHsv() {
-    setValue(hsvToHex({ h, s, v, a }));
-  }
-
-  // ---------- 颜色输入框（按 currentFormat 显示/编辑） ----------
-  // 编辑态显示用户输入缓冲，否则始终派生 displayFormatted（切换格式/拖拽即时刷新）。
-  let hexBuffer = $state('');
-  const hexInput = $derived(editingHex ? hexBuffer : displayFormatted);
-
-  function handleHexInput(e: Event & { currentTarget: HTMLInputElement }) {
-    editingHex = true;
-    hexBuffer = e.currentTarget.value;
-    const next = parseColor(hexBuffer, currentFormat);
-    if (!next) return;
-    h = next.h;
-    s = next.s;
-    v = next.v;
-    a = alpha ? next.a : 1;
-    commitHsv();
-  }
-
-  function handleHexBlur() {
-    editingHex = false;
-  }
-
-  // 应用一个完整 hex（preset / eyeDropper / 最近色）：写 HSV + 提交 + 记录最近。
-  function applyHex(hex: string) {
-    if (disabled) return;
-    const next = hexToHsv(hex);
-    h = next.h;
-    s = next.s;
-    v = next.v;
-    a = alpha ? next.a : 1;
-    commitHsv();
-    recordColor(hsvToHex({ h, s, v, a }));
-  }
-
-  // ---------- presets (role=listbox + 方向键漫游) ----------
-  function applyPreset(preset: string) {
-    applyHex(preset);
-  }
-
-  // 当前高亮的预设索引（roving）。render 期只读此 $state，焦点由 effect 命令式移动。
-  let presetActiveIndex = $state(0);
-  let presetsEl = $state<HTMLElement | null>(null);
-
-  function focusPresetAt(index: number) {
-    void tick().then(() => {
-      const opts = presetsEl?.querySelectorAll<HTMLElement>('[role="option"]');
-      opts?.[index]?.focus();
-    });
-  }
-
-  function onPresetsKeydown(e: KeyboardEvent) {
-    if (disabled || presets.length === 0) return;
-    // RTL：水平方向键语义翻转，使视觉移动方向与按键一致。
-    const rtl = isRtl(e.currentTarget);
-    let key = e.key;
-    if (rtl && key === 'ArrowRight') key = 'ArrowLeft';
-    else if (rtl && key === 'ArrowLeft') key = 'ArrowRight';
-    const intent = rovingKeyFromEvent(key);
-    if (intent) {
-      e.preventDefault();
-      const next = nextRovingIndex(presetActiveIndex, presets.length, intent, true);
-      presetActiveIndex = next;
-      focusPresetAt(next);
-      return;
-    }
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      const preset = presets[presetActiveIndex];
-      if (preset) applyPreset(preset);
-    }
-  }
-
-  // ---------- recentColors ----------
-  let recent = $state<string[]>([]);
-  function recordColor(hex: string) {
-    if (!recentColors) return;
-    const norm = outputUppercase ? hex.toUpperCase() : hex.toLowerCase();
-    const next = [norm, ...recent.filter((c) => c !== norm)];
-    recent = next.slice(0, recentMax);
-  }
-
-  // ---------- eyeDropper（实验性 API，降级隐藏） ----------
-  interface EyeDropperCtor {
-    new (): { open: () => Promise<{ sRGBHex: string }> };
-  }
-  const eyeDropperSupported = $derived(
-    eyeDropper && typeof window !== 'undefined' && 'EyeDropper' in window,
-  );
-  async function pickWithEyeDropper() {
-    if (disabled || !eyeDropperSupported) return;
-    const Ctor = (window as unknown as { EyeDropper: EyeDropperCtor }).EyeDropper;
-    try {
-      const result = await new Ctor().open();
-      if (result?.sRGBHex) applyHex(result.sRGBHex);
-    } catch {
-      // 用户取消（Esc）或失败：静默忽略
-    }
-  }
-
-  // ---------- 命令式拖拽 (红线 #3) ----------
-  // pointerdown 一次性读 rect 存普通变量；document 监听手动加/移除。
-  let satRect: DOMRect | null = null;
-  let satEl = $state<HTMLElement | null>(null);
-  let hueRect: DOMRect | null = null;
-  let hueEl = $state<HTMLElement | null>(null);
-  let alphaRect: DOMRect | null = null;
-  let alphaEl = $state<HTMLElement | null>(null);
-
-  function ratioX(rect: DOMRect, clientX: number): number {
-    return clamp01((clientX - rect.left) / rect.width);
-  }
-  function ratioY(rect: DOMRect, clientY: number): number {
-    return clamp01((clientY - rect.top) / rect.height);
-  }
-
-  // --- saturation ---
-  function onSatMove(e: PointerEvent) {
-    if (!satRect) return;
-    s = ratioX(satRect, e.clientX);
-    v = 1 - ratioY(satRect, e.clientY);
-    commitHsv();
-  }
-  function onSatUp() {
-    document.removeEventListener('pointermove', onSatMove);
-    document.removeEventListener('pointerup', onSatUp);
-    satRect = null;
-    dragging = false;
-  }
-  function onSatDown(e: PointerEvent) {
-    if (disabled || !satEl) return;
-    e.preventDefault();
-    dragging = true;
-    satRect = satEl.getBoundingClientRect();
-    s = ratioX(satRect, e.clientX);
-    v = 1 - ratioY(satRect, e.clientY);
-    commitHsv();
-    document.addEventListener('pointermove', onSatMove);
-    document.addEventListener('pointerup', onSatUp);
-  }
-
-  // --- hue ---
-  function onHueMove(e: PointerEvent) {
-    if (!hueRect) return;
-    h = ratioX(hueRect, e.clientX) * 360;
-    commitHsv();
-  }
-  function onHueUp() {
-    document.removeEventListener('pointermove', onHueMove);
-    document.removeEventListener('pointerup', onHueUp);
-    hueRect = null;
-    dragging = false;
-  }
-  function onHueDown(e: PointerEvent) {
-    if (disabled || !hueEl) return;
-    e.preventDefault();
-    dragging = true;
-    hueRect = hueEl.getBoundingClientRect();
-    h = ratioX(hueRect, e.clientX) * 360;
-    commitHsv();
-    document.addEventListener('pointermove', onHueMove);
-    document.addEventListener('pointerup', onHueUp);
-  }
-
-  // --- alpha ---
-  function onAlphaMove(e: PointerEvent) {
-    if (!alphaRect) return;
-    a = ratioX(alphaRect, e.clientX);
-    commitHsv();
-  }
-  function onAlphaUp() {
-    document.removeEventListener('pointermove', onAlphaMove);
-    document.removeEventListener('pointerup', onAlphaUp);
-    alphaRect = null;
-    dragging = false;
-  }
-  function onAlphaDown(e: PointerEvent) {
-    if (disabled || !alphaEl) return;
-    e.preventDefault();
-    dragging = true;
-    alphaRect = alphaEl.getBoundingClientRect();
-    a = ratioX(alphaRect, e.clientX);
-    commitHsv();
-    document.addEventListener('pointermove', onAlphaMove);
-    document.addEventListener('pointerup', onAlphaUp);
-  }
-
-  // ---------- 键盘微调 ----------
-  // RTL：滑块视觉方向翻转（视觉左仍为低值），故水平方向键语义随之翻转。
-  // 在事件处理里读 getComputedStyle，render 期不依赖（红线）。
-  function isRtl(el: EventTarget | null): boolean {
-    return el instanceof HTMLElement && getComputedStyle(el).direction === 'rtl';
-  }
-
-  function onHueKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    if (e.key === 'Home') {
-      e.preventDefault();
-      h = 0;
-      commitHsv();
-      return;
-    }
-    if (e.key === 'End') {
-      e.preventDefault();
-      h = 360;
-      commitHsv();
-      return;
-    }
-    const rtl = isRtl(e.currentTarget);
-    let delta = 0;
-    if (e.key === 'ArrowUp') delta = 1;
-    else if (e.key === 'ArrowDown') delta = -1;
-    else if (e.key === 'ArrowRight') delta = rtl ? -1 : 1;
-    else if (e.key === 'ArrowLeft') delta = rtl ? 1 : -1;
-    else return;
-    e.preventDefault();
-    h = (h + delta + 360) % 360;
-    commitHsv();
-  }
-
-  function onAlphaKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    if (e.key === 'Home') {
-      e.preventDefault();
-      a = 0;
-      commitHsv();
-      return;
-    }
-    if (e.key === 'End') {
-      e.preventDefault();
-      a = 1;
-      commitHsv();
-      return;
-    }
-    const rtl = isRtl(e.currentTarget);
-    let delta = 0;
-    if (e.key === 'ArrowUp') delta = 0.01;
-    else if (e.key === 'ArrowDown') delta = -0.01;
-    else if (e.key === 'ArrowRight') delta = rtl ? -0.01 : 0.01;
-    else if (e.key === 'ArrowLeft') delta = rtl ? 0.01 : -0.01;
-    else return;
-    e.preventDefault();
-    a = clamp01(a + delta);
-    commitHsv();
-  }
-
-  function onSatKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    // Home/End 跳饱和度极值（首=0%，末=100%），明度不变。
-    if (e.key === 'Home') {
-      e.preventDefault();
-      s = 0;
-      commitHsv();
-      return;
-    }
-    if (e.key === 'End') {
-      e.preventDefault();
-      s = 1;
-      commitHsv();
-      return;
-    }
-    const rtl = isRtl(e.currentTarget);
-    let ds = 0;
-    let dv = 0;
-    switch (e.key) {
-      case 'ArrowRight': ds = rtl ? -0.01 : 0.01; break;
-      case 'ArrowLeft': ds = rtl ? 0.01 : -0.01; break;
-      case 'ArrowUp': dv = 0.01; break;
-      case 'ArrowDown': dv = -0.01; break;
-      default: return;
-    }
-    e.preventDefault();
-    s = clamp01(s + ds);
-    v = clamp01(v + dv);
-    commitHsv();
-  }
-
-  // ---------- useDismiss (红线 #3): 放 $effect ----------
-  let rootEl = $state<HTMLDivElement | null>(null);
-  // 浮层面板节点：用于 focus trap（打开聚焦面板内首个控件，关闭归还 trigger）。
-  let panelEl = $state<HTMLElement | null>(null);
-
-  $effect(() => {
-    // inline 模式无浮层，不挂 dismiss。
-    if (inline || !isOpen || !rootEl) return;
-    const cleanup = useDismiss(rootEl, {
-      onDismiss: () => setOpen(false),
-      escape: true,
-      outsideClick: true,
-    });
-    return cleanup;
-  });
-
-  // ---------- useFocusTrap (红线 #3)：浮层模式打开时陷入焦点，关闭归还 trigger ----------
-  // 复用 core 同一原语（与 Modal/Drawer/Popover 一致，不重造）。
-  $effect(() => {
-    if (inline || !isOpen || !panelEl) return;
-    const trap = useFocusTrap(panelEl);
-    trap.activate();
-    return () => trap.deactivate();
-  });
-
-  // ---------- 派生展示数据 ----------
-  const huePercent = $derived((h / 360) * 100);
-  const satPercent = $derived(s * 100);
-  const valPercent = $derived((1 - v) * 100);
-  const alphaPercent = $derived(a * 100);
-  const hueRounded = $derived(Math.round(h));
-  const alphaRounded = $derived(Math.round(a * 100) / 100);
-
-  const cls = $derived(
-    [
-      'cd-color-picker',
-      `cd-color-picker--${size}`,
-      status !== 'default' && `cd-color-picker--${status}`,
-      inline && 'cd-color-picker--inline',
-      disabled && 'cd-color-picker--disabled',
-      isOpen && 'cd-color-picker--open',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-{#snippet panelBody()}
-      <div
-        class="cd-color-picker__saturation"
-        bind:this={satEl}
-        role="slider"
-        tabindex={disabled ? -1 : 0}
-        aria-label={loc().t('ColorPicker.saturation')}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={Math.round(satPercent)}
-        aria-valuetext={`饱和度 ${Math.round(satPercent)}%，明度 ${Math.round(v * 100)}%`}
-        style="background:hsl({hueRounded}, 100%, 50%)"
-        onpointerdown={onSatDown}
-        onkeydown={onSatKeydown}
-      >
-        <div class="cd-color-picker__saturation-white"></div>
-        <div class="cd-color-picker__saturation-black"></div>
-        <span
-          class="cd-color-picker__saturation-handle"
-          style="inset-inline-start:{satPercent}%; inset-block-start:{valPercent}%"
-        ></span>
-      </div>
-
-      <div class="cd-color-picker__sliders">
-        <div class="cd-color-picker__swatch-current" style="background:{displayHex}"></div>
-
-        <div class="cd-color-picker__bars">
-          <div
-            class="cd-color-picker__hue"
-            bind:this={hueEl}
-            role="slider"
-            tabindex={disabled ? -1 : 0}
-            aria-label={loc().t('ColorPicker.hue')}
-            aria-valuemin={0}
-            aria-valuemax={360}
-            aria-valuenow={hueRounded}
-            onpointerdown={onHueDown}
-            onkeydown={onHueKeydown}
-          >
-            <span
-              class="cd-color-picker__bar-handle"
-              style="inset-inline-start:{huePercent}%"
-            ></span>
-          </div>
-
-          {#if alpha}
-            <div
-              class="cd-color-picker__alpha"
-              bind:this={alphaEl}
-              role="slider"
-              tabindex={disabled ? -1 : 0}
-              aria-label={loc().t('ColorPicker.alpha')}
-              aria-valuemin={0}
-              aria-valuemax={1}
-              aria-valuenow={alphaRounded}
-              onpointerdown={onAlphaDown}
-              onkeydown={onAlphaKeydown}
-            >
-              <div
-                class="cd-color-picker__alpha-bg"
-                style="background:linear-gradient(to right, transparent, {opaqueHex})"
-              ></div>
-              <span
-                class="cd-color-picker__bar-handle"
-                style="inset-inline-start:{alphaPercent}%"
-              ></span>
-            </div>
-          {/if}
-        </div>
-      </div>
-
-      <div class="cd-color-picker__field">
-        {#if showFormatToggle}
-          <label class="cd-color-picker__format" aria-label={loc().t('ColorPicker.format')}>
-            <select
-              class="cd-color-picker__format-select"
-              value={currentFormat}
-              {disabled}
-              onchange={(e) => setFormat(e.currentTarget.value as ColorFormat)}
-            >
-              {#each formatOptions as opt (opt)}
-                <option value={opt}>{opt.toUpperCase()}</option>
-              {/each}
-            </select>
-          </label>
-        {:else}
-          <label class="cd-color-picker__label" for={hexInputId}>{currentFormat.toUpperCase()}</label>
-        {/if}
-        <input
-          class="cd-color-picker__hex"
-          id={hexInputId}
-          type="text"
-          value={hexInput}
-          aria-label={loc().t('ColorPicker.hex')}
-          oninput={handleHexInput}
-          onblur={handleHexBlur}
-        />
-        {#if eyeDropperSupported}
-          <button
-            type="button"
-            class="cd-color-picker__eyedropper"
-            aria-label={loc().t('ColorPicker.eyeDropper')}
-            {disabled}
-            onclick={pickWithEyeDropper}
-          >
-            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-              <path fill="currentColor" d="M11.6 1.5a2 2 0 0 1 2.9 2.8l-1.3 1.3 1 1-1.1 1-1-1-5.4 5.4-3 .8.8-3 5.4-5.4-1-1 1-1.1 1 1 1.3-1.3Z" />
-            </svg>
-          </button>
-        {/if}
-      </div>
-
-      {#if presets.length > 0}
-        <div
-          class="cd-color-picker__presets"
-          bind:this={presetsEl}
-          role="listbox"
-          tabindex={-1}
-          aria-label={loc().t('ColorPicker.presets')}
-          onkeydown={onPresetsKeydown}
-        >
-          {#each presets as preset, i (preset)}
-            <button
-              type="button"
-              class="cd-color-picker__preset"
-              role="option"
-              aria-selected={currentHex.toLowerCase() === preset.toLowerCase()}
-              aria-label={preset}
-              tabindex={i === presetActiveIndex ? 0 : -1}
-              style="background:{preset}"
-              onclick={() => {
-                presetActiveIndex = i;
-                applyPreset(preset);
-              }}
-            ></button>
-          {/each}
-        </div>
-      {/if}
-
-      {#if recentColors && recent.length > 0}
-        <div class="cd-color-picker__recent">
-          <span class="cd-color-picker__recent-label">{loc().t('ColorPicker.recent')}</span>
-          <div class="cd-color-picker__recent-swatches">
-            {#each recent as color (color)}
-              <button
-                type="button"
-                class="cd-color-picker__preset"
-                aria-label={color}
-                style="background:{color}"
-                onclick={() => applyHex(color)}
-              ></button>
-            {/each}
-          </div>
-        </div>
-      {/if}
-{/snippet}
-
-{#if inline}
-  <div class={cls} bind:this={rootEl}>
-    <div class="cd-color-picker__panel cd-color-picker__panel--inline" role="group" aria-label={ariaLabel ?? loc().t('ColorPicker.panelLabel')}>
-      {@render panelBody()}
-    </div>
-  </div>
-{:else}
-  <div class={cls} bind:this={rootEl}>
-    <button
-      type="button"
-      class="cd-color-picker__trigger"
-      aria-haspopup="dialog"
-      aria-expanded={isOpen}
-      aria-label={ariaLabel}
-      {disabled}
-      style="background:{displayHex}"
-      onclick={toggleOpen}
-    ></button>
-
-    {#if isOpen}
-      <div class="cd-color-picker__panel" bind:this={panelEl} role="dialog" aria-label={ariaLabel ?? loc().t('ColorPicker.panelLabel')}>
-        {@render panelBody()}
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .cd-color-picker {
-    position: relative;
-    display: inline-flex;
-  }
-  .cd-color-picker__trigger {
-    inline-size: var(--cd-color-picker-trigger-size);
-    block-size: var(--cd-color-picker-trigger-size);
-    padding: 0;
-    border: 1px solid var(--cd-color-picker-trigger-border);
-    border-radius: var(--cd-color-picker-trigger-radius);
-    cursor: pointer;
-  }
-  .cd-color-picker--small .cd-color-picker__trigger {
-    inline-size: calc(var(--cd-color-picker-trigger-size) - 4px);
-    block-size: calc(var(--cd-color-picker-trigger-size) - 4px);
-  }
-  .cd-color-picker--large .cd-color-picker__trigger {
-    inline-size: calc(var(--cd-color-picker-trigger-size) + 6px);
-    block-size: calc(var(--cd-color-picker-trigger-size) + 6px);
-  }
-  .cd-color-picker__trigger:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__trigger:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  /* 校验态：仅影响 trigger 与 inline 面板边框色，不改内部取色控件。 */
-  .cd-color-picker--warning .cd-color-picker__trigger,
-  .cd-color-picker--warning .cd-color-picker__panel--inline {
-    border-color: var(--cd-color-picker-status-warning);
-  }
-  .cd-color-picker--error .cd-color-picker__trigger,
-  .cd-color-picker--error .cd-color-picker__panel--inline {
-    border-color: var(--cd-color-picker-status-error);
-  }
-  .cd-color-picker__panel {
-    position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-2));
-    inset-inline-start: 0;
-    z-index: var(--cd-color-picker-panel-z);
-    inline-size: var(--cd-color-picker-panel-width);
-    padding: var(--cd-spacing-3);
-    background: var(--cd-color-picker-panel-bg);
-    border-radius: var(--cd-color-picker-panel-radius);
-    box-shadow: var(--cd-color-picker-panel-shadow);
-  }
-  .cd-color-picker--inline {
-    display: inline-flex;
-  }
-  .cd-color-picker__panel--inline {
-    position: static;
-    inset: auto;
-    box-shadow: none;
-    border: 1px solid var(--cd-color-border);
-  }
-  .cd-color-picker__saturation {
-    position: relative;
-    inline-size: 100%;
-    block-size: var(--cd-color-picker-saturation-height);
-    border-radius: var(--cd-radius-2);
-    overflow: hidden;
-    cursor: crosshair;
-    touch-action: none;
-    outline: none;
-  }
-  .cd-color-picker__saturation:focus-visible {
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__saturation-white,
-  .cd-color-picker__saturation-black {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-  .cd-color-picker__saturation-white {
-    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-  }
-  .cd-color-picker__saturation-black {
-    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
-  }
-  .cd-color-picker__saturation-handle {
-    position: absolute;
-    inline-size: var(--cd-color-picker-handle-size);
-    block-size: var(--cd-color-picker-handle-size);
-    border: 2px solid var(--cd-color-picker-handle-border);
-    border-radius: var(--cd-radius-full);
-    box-shadow: var(--cd-shadow-1);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-  .cd-color-picker__sliders {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
-  }
-  .cd-color-picker__swatch-current {
-    flex: 0 0 auto;
-    inline-size: var(--cd-color-picker-swatch-size);
-    block-size: var(--cd-color-picker-swatch-size);
-    border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-full);
-  }
-  .cd-color-picker__bars {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: var(--cd-spacing-2);
-    min-inline-size: 0;
-  }
-  .cd-color-picker__hue,
-  .cd-color-picker__alpha {
-    position: relative;
-    inline-size: 100%;
-    block-size: var(--cd-color-picker-slider-height);
-    border-radius: var(--cd-radius-full);
-    cursor: pointer;
-    touch-action: none;
-    outline: none;
-  }
-  .cd-color-picker__hue {
-    background: linear-gradient(
-      to right,
-      #f00 0%,
-      #ff0 17%,
-      #0f0 33%,
-      #0ff 50%,
-      #00f 67%,
-      #f0f 83%,
-      #f00 100%
-    );
-  }
-  .cd-color-picker__alpha {
-    background-image:
-      linear-gradient(45deg, var(--cd-color-fill-1) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--cd-color-fill-1) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--cd-color-fill-1) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--cd-color-fill-1) 75%);
-    background-size: 8px 8px;
-    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
-  }
-  .cd-color-picker__alpha-bg {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-  }
-  .cd-color-picker__hue:focus-visible,
-  .cd-color-picker__alpha:focus-visible {
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__bar-handle {
-    position: absolute;
-    inset-block-start: 50%;
-    inline-size: var(--cd-color-picker-handle-size);
-    block-size: var(--cd-color-picker-handle-size);
-    background: var(--cd-color-picker-handle-border);
-    border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-full);
-    box-shadow: var(--cd-shadow-1);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-  .cd-color-picker__field {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
-  }
-  .cd-color-picker__label {
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-color-picker__format {
-    flex: 0 0 auto;
-    display: inline-flex;
-  }
-  .cd-color-picker__format-select {
-    block-size: var(--cd-input-height-small);
-    padding-inline: var(--cd-spacing-1);
-    color: var(--cd-color-text-2);
-    background: var(--cd-input-bg);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    font: inherit;
-    font-size: var(--cd-font-size-1);
-    cursor: pointer;
-  }
-  .cd-color-picker__format-select:focus-visible {
-    outline: none;
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__format-select:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .cd-color-picker__hex {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    block-size: var(--cd-input-height-small);
-    padding-inline: var(--cd-input-padding-x);
-    background: var(--cd-input-bg);
-    color: var(--cd-input-color-text);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    font: inherit;
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-color-picker__hex:focus-visible {
-    outline: none;
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__presets {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
-  }
-  .cd-color-picker__preset {
-    inline-size: var(--cd-color-picker-swatch-size);
-    block-size: var(--cd-color-picker-swatch-size);
-    padding: 0;
-    border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-1);
-    cursor: pointer;
-  }
-  .cd-color-picker__preset:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__eyedropper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    inline-size: var(--cd-input-height-small);
-    block-size: var(--cd-input-height-small);
-    padding: 0;
-    color: var(--cd-color-text-2);
-    background: var(--cd-input-bg);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    cursor: pointer;
-  }
-  .cd-color-picker__eyedropper:hover:not(:disabled) {
-    color: var(--cd-color-primary);
-    border-color: var(--cd-input-border-active);
-  }
-  .cd-color-picker__eyedropper:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-color-picker__eyedropper:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .cd-color-picker__recent {
-    margin-block-start: var(--cd-spacing-3);
-  }
-  .cd-color-picker__recent-label {
-    display: block;
-    margin-block-end: var(--cd-spacing-1);
-    color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-color-picker__recent-swatches {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cd-spacing-2);
-  }
-</style>