@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/date-picker/DatePicker.svelte

@@ -1,1798 +0,0 @@
-<!--
-  DatePicker — see specs/components/input/DatePicker.spec.md
-  基础子集: 单选 type='date' 日历面板 / type='dateTime' 日期+时间。Token-driven, a11y-correct, 受控/非受控。
-  本地化全部走 Intl.DateTimeFormat (不手拼日期串)。dateTime 复用 TimePicker 的时/分/秒列逻辑。
-  disabledTime: dateTime 时/分/秒列按日期禁用值置灰跳过；presets: 面板侧边快捷日期按钮。
-  format: 传 token 串（YYYY/MM/DD/HH/mm/ss）时，触发器变可输入文本框，显示与手输解析均走
-  core 的 formatDate/parseDateString 纯函数（红线 #2）；不传则沿用 Intl.DateTimeFormat 显示（向后兼容）。
--->
-<script lang="ts">
-  import { tick, type Snippet } from 'svelte';
-  import { useId, useDismiss, useFocusTrap, isSameDay, startOfDay, addMonths, getMonthGrid, weekdayOrder, gridFocusMove, formatDate, parseDateString, type GridFocusKey } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  type PickerType = 'date' | 'dateTime' | 'month' | 'year';
-  type CSSProperties = Record<string, string | number>;
-  type PresetPosition = 'left' | 'right' | 'top' | 'bottom';
-
-  // 时间列禁用配置 (Semi/AntD 风格)：按当前日期返回各列禁用值
-  interface DisabledTime {
-    disabledHours?: () => number[];
-    disabledMinutes?: (hour: number) => number[];
-    disabledSeconds?: (hour: number, minute: number) => number[];
-  }
-
-  // 快捷日期项：value 可为 Date 或惰性求值函数 (点击时才计算，如「今天」)
-  interface Preset {
-    label: string;
-    value: Date | (() => Date);
-  }
-
-  interface DayStatus {
-    isSelected: boolean;
-    isToday: boolean;
-    isDisabled: boolean;
-    isInMonth: boolean;
-  }
-
-  interface Props {
-    type?: PickerType;
-    value?: Date | Date[] | null;
-    defaultValue?: Date | Date[] | null;
-    open?: boolean;
-    defaultOpen?: boolean;
-    placeholder?: string;
-    size?: Size;
-    status?: Status;
-    disabled?: boolean;
-    clearable?: boolean;
-    disabledDate?: (date: Date) => boolean;
-    disabledTime?: (date: Date) => DisabledTime;
-    presets?: Preset[];
-    weekStart?: WeekStart;
-    showSecond?: boolean;
-    locale?: string;
-    /** token 格式串 (YYYY/MM/DD/HH/mm/ss)。传入则触发器变可输入文本框，显示+手输解析按此格式。 */
-    format?: string;
-    onChange?: (v: Date | Date[] | null) => void;
-    onOpenChange?: (open: boolean) => void;
-    /** 手动键入解析失败 (editable 模式)。 */
-    onParseError?: (e: { text: string }) => void;
-    /** 可见年月切换 (头部导航)。 */
-    onPanelChange?: (e: { panelDate: Date }) => void;
-    /** 点击快捷选项。 */
-    onPresetClick?: (e: { preset: Preset }) => void;
-    /** 点击清除。 */
-    onClear?: (e: Record<string, never>) => void;
-    /** 点击确认按钮 (dateTime / needConfirm)。 */
-    onConfirm?: (e: { value: Date | Date[] | null }) => void;
-    /** 触发器获得焦点。 */
-    onFocus?: (e: FocusEvent) => void;
-    /** 触发器失去焦点。 */
-    onBlur?: (e: FocusEvent) => void;
-    ariaLabel?: string;
-    /** 用 Snippet 自定义范围分隔符，优先于 rangeSeparator 字符串。 */
-    rangeSeparatorNode?: Snippet;
-    /** 选完月/年后自动切换到日视图（默认 true）。 */
-    autoSwitchDate?: boolean;
-    /** 浮层自动调整位置防溢出（默认 true）。 */
-    autoAdjustOverflow?: boolean;
-    /** 范围模式下在面板内嵌输入框（默认 false）。 */
-    insetInput?: boolean;
-    /** 浮层弹出位置（默认 'bottomLeft'）。 */
-    position?: string;
-    /** 触发器与浮层间距。 */
-    spacing?: number;
-    /** 浮层挂载容器。 */
-    getPopupContainer?: () => HTMLElement;
-    /** weekStart 别名。 */
-    weekStartsOn?: WeekStart;
-    /** 点击取消按钮。 */
-    onCancel?: (date: Date | Date[] | null, dateStr: string) => void;
-    /** onChange 参数改为 dateFirst（仅声明，透传语义）。 */
-    onChangeWithDateFirst?: boolean;
-    /** 点击外部关闭时触发。 */
-    onClickOutSide?: (e: MouseEvent) => void;
-
-    // --- 外观类 ---
-    /** 无边框模式 */
-    borderless?: boolean;
-    /** 面板尺寸 compact 时面板更紧凑 */
-    density?: 'default' | 'compact';
-    /** 触发器前缀内容，渲染在 input 左侧 */
-    prefix?: Snippet | string;
-    /** 自定义清除按钮图标 */
-    clearIcon?: Snippet;
-    /** 是否显示清除按钮（默认 true，受 clearable 控制） */
-    showClear?: boolean;
-    /** 输入框 readonly 属性 */
-    inputReadOnly?: boolean;
-    /** 输入框内联样式 */
-    inputStyle?: CSSProperties | string;
-    /** 挂载时自动聚焦 */
-    autoFocus?: boolean;
-
-    // --- 浮层类 ---
-    /** 下拉浮层 className */
-    dropdownClassName?: string;
-    /** 下拉浮层样式 */
-    dropdownStyle?: CSSProperties | string;
-    /** 浮层溢出冗余值 */
-    dropdownMargin?: number | { x?: number; y?: number };
-    /** 浮层 z-index（默认 1030） */
-    zIndex?: number;
-    /** 面板展开动画，false 时添加 cd-date-picker--no-motion（默认 true） */
-    motion?: boolean;
-    /** 聚焦时阻止滚动 */
-    preventScroll?: boolean;
-    /** 阻止浮层点击事件冒泡（默认 true） */
-    stopPropagation?: boolean;
-
-    // --- 插槽类 ---
-    /** 面板顶部额外区域 */
-    topSlot?: Snippet;
-    /** 面板底部额外区域 */
-    bottomSlot?: Snippet;
-    /** 面板左侧额外区域 */
-    leftSlot?: Snippet;
-    /** 面板右侧额外区域 */
-    rightSlot?: Snippet;
-
-    // --- 日期范围增强 ---
-    /** 多选（仅 type='date'），value 变为 Date[] */
-    multiple?: boolean;
-    /** multiple=true 时最多选择数量 */
-    max?: number;
-    /** 范围日期分隔符（默认 '~'） */
-    rangeSeparator?: string;
-    /** 单击选择范围的起始偏移 */
-    startDateOffset?: (date: Date) => Date;
-    /** 单击选择范围的结束偏移 */
-    endDateOffset?: (date: Date) => Date;
-    /** 年份滚轮最小年 */
-    startYear?: number;
-    /** 年份滚轮最大年 */
-    endYear?: number;
-    /** 范围选择双面板同步切换月份（默认 false） */
-    syncSwitchMonth?: boolean;
-
-    // --- 自定义渲染 ---
-    /** 自定义日期单元格内容 */
-    renderDate?: Snippet<[{ day: number; fullDate: string }]>;
-    /** 完全自定义日期格子 */
-    renderFullDate?: Snippet<[{ day: number; fullDate: string; dayStatus: DayStatus }]>;
-    /** 完全自定义触发器 */
-    triggerRender?: Snippet<[{ value: Date | Date[] | null; placeholder: string }]>;
-
-    // --- 时间相关 ---
-    /** 透传给内部 TimePicker 的参数 */
-    timePickerOpts?: Record<string, unknown>;
-    /** 隐藏禁止的时间选项 */
-    hideDisabledOptions?: boolean;
-    /** 禁止时间选择 */
-    disabledTimePicker?: boolean;
-    /** dateTime/dateTimeRange 时需要点击确认才写入 */
-    needConfirm?: boolean;
-
-    // --- 快捷选项 ---
-    /** 快捷选项列表位置（默认 'bottom'） */
-    presetPosition?: PresetPosition;
-
-    // --- 年月滚轮配置 ---
-    /** 透传给年月 ScrollList 的参数 */
-    yearAndMonthOpts?: { yearCyclic?: boolean; monthCyclic?: boolean } | Record<string, unknown>;
-  }
-
-  let {
-    type = 'date',
-    value,
-    defaultValue = null,
-    open,
-    defaultOpen = false,
-    placeholder,
-    size = 'default',
-    status = 'default',
-    disabled = false,
-    clearable = true,
-    disabledDate,
-    disabledTime,
-    presets,
-    weekStart = 0,
-    showSecond = true,
-    locale = 'zh-CN',
-    format,
-    onChange,
-    onOpenChange,
-    onParseError,
-    onPanelChange,
-    onPresetClick,
-    onClear,
-    onConfirm,
-    onFocus,
-    onBlur,
-    ariaLabel,
-    rangeSeparatorNode,
-    rangeSeparator = '~',
-    autoSwitchDate = true,
-    autoAdjustOverflow = true,
-    insetInput = false,
-    position = 'bottomLeft',
-    spacing,
-    getPopupContainer,
-    weekStartsOn,
-    yearAndMonthOpts,
-    onCancel,
-    onChangeWithDateFirst = false,
-    onClickOutSide,
-    // 外观类
-    borderless = false,
-    density = 'default',
-    prefix,
-    clearIcon,
-    showClear: showClearProp = true,
-    inputReadOnly = false,
-    inputStyle,
-    autoFocus = false,
-    // 浮层类
-    dropdownClassName,
-    dropdownStyle,
-    dropdownMargin,
-    zIndex = 1030,
-    motion = true,
-    preventScroll = false,
-    stopPropagation = true,
-    // 插槽类
-    topSlot,
-    bottomSlot,
-    leftSlot,
-    rightSlot,
-    // 日期范围增强
-    multiple = false,
-    max,
-    startDateOffset,
-    endDateOffset,
-    startYear,
-    endYear,
-    syncSwitchMonth = false,
-    // 自定义渲染
-    renderDate,
-    renderFullDate,
-    triggerRender,
-    // 时间相关
-    timePickerOpts,
-    hideDisabledOptions = false,
-    disabledTimePicker = false,
-    needConfirm = false,
-    // 快捷选项
-    presetPosition = 'bottom',
-  }: Props = $props();
-
-  const isDateTime = $derived(type === 'dateTime');
-  const isMonth = $derived(type === 'month');
-  const isYear = $derived(type === 'year');
-
-  // weekStartsOn 是 weekStart 的别名，weekStart 优先
-  const effWeekStart = $derived(weekStart ?? weekStartsOn ?? 0);
-
-  const loc = useLocale();
-
-  const dialogId = useId('cd-date-picker-panel');
-  // 日期网格容器 id（aria-activedescendant 指向其中的 cell id 前缀）
-  const gridId = useId('cd-date-picker-grid');
-
-  // --- 受控 value (红线 #1): 不无条件回写 value，仅 onChange ---
-  const isValueControlled = $derived(value !== undefined);
-
-  // multiple 模式下 value 为 Date[]，单选为 Date | null
-  function getInitialValue(): Date | Date[] | null {
-    if (multiple) {
-      if (Array.isArray(defaultValue)) return defaultValue;
-      if (defaultValue instanceof Date) return [defaultValue];
-      return [];
-    }
-    if (Array.isArray(defaultValue)) return defaultValue[0] ?? null;
-    return defaultValue ?? null;
-  }
-
-  let innerValue = $state<Date | Date[] | null>(getInitialValue());
-  const current = $derived<Date | Date[] | null>(isValueControlled ? (value ?? null) : innerValue);
-
-  // 单一 Date 视图（multiple 时取第一个，非 multiple 直接用）
-  const currentSingle = $derived<Date | null>(
-    Array.isArray(current) ? (current[0] ?? null) : current,
-  );
-
-  function setValue(next: Date | Date[] | null) {
-    if (!isValueControlled) innerValue = next;
-    onChange?.(next);
-  }
-
-  // --- 受控 open (红线 #1): 不无条件回写 open，仅 onOpenChange ---
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(isOpenControlled ? !!open : innerOpen);
-
-  function getInitialOpen(): boolean {
-    return defaultOpen;
-  }
-
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.(next);
-  }
-
-  function toggleOpen() {
-    if (disabled) return;
-    setOpen(!isOpen);
-  }
-
-  // --- 面板游标月份 (本地 $state)，打开时同步到 value/today 月份 ---
-  const today = startOfDay(new Date());
-  // 初始化游标用 defaultValue（不依赖 $derived 的 currentSingle 避免 state_referenced_locally）
-  const _initCursorDate: Date | null = Array.isArray(defaultValue)
-    ? (defaultValue[0] ?? null)
-    : (defaultValue instanceof Date ? defaultValue : null);
-  let cursor = $state(startOfDay(_initCursorDate ?? new Date()));
-
-  // 当面板打开时把游标对齐到当前选中值(或今天)所在月份
-  $effect(() => {
-    if (isOpen) {
-      cursor = startOfDay(currentSingle ?? new Date());
-    }
-  });
-
-  // --- needConfirm 暂存值：点确认才写入 ---
-  let pendingValue = $state<Date | Date[] | null>(null);
-
-  $effect(() => {
-    if (isOpen) {
-      pendingValue = current;
-    }
-  });
-
-  // --- Intl 本地化格式化器 (不手拼日期串) ---
-  const triggerFormat = $derived(
-    new Intl.DateTimeFormat(
-      locale,
-      isYear
-        ? { year: 'numeric' }
-        : isMonth
-          ? { year: 'numeric', month: '2-digit' }
-          : {
-              year: 'numeric',
-              month: '2-digit',
-              day: '2-digit',
-              ...(isDateTime
-                ? { hour: '2-digit', minute: '2-digit', second: showSecond ? '2-digit' : undefined, hour12: false }
-                : {}),
-            },
-    ),
-  );
-  const headerFormat = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),
-  );
-  // 仅年份的头部文案 (month 面板头部 / year 面板基准)
-  const yearFormat = $derived(new Intl.DateTimeFormat(locale, { year: 'numeric' }));
-  // 月格短名 (month 面板 12 格)
-  const monthShortFormat = $derived(new Intl.DateTimeFormat(locale, { month: 'short' }));
-  const weekdayFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
-  // 完整星期名 (columnheader aria-label，朗读用)
-  const weekdayLongFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: 'long' }));
-
-  // format 串优先用 core 纯函数序列化；否则沿用 Intl (向后兼容)
-  function formatSingle(d: Date | null): string {
-    if (!d) return '';
-    return format ? formatDate(d, format) : triggerFormat.format(d);
-  }
-
-  const formattedValue = $derived(
-    multiple
-      ? (Array.isArray(current) ? current.map(formatSingle).join(` ${rangeSeparator} `) : '')
-      : formatSingle(currentSingle),
-  );
-  const displayText = $derived(formattedValue || (placeholder ?? loc().t('DatePicker.placeholder')));
-
-  // --- 可输入模式 (format 串)：本地草稿文本 + 按格式解析 ---
-  const editable = $derived(!!format && !multiple);
-  let inputText = $state('');
-  // 非编辑期同步草稿到受控显示值 (打开输入时让用户继续编辑当前文本)
-  $effect(() => {
-    if (!editable) return;
-    inputText = formattedValue;
-  });
-
-  function commitInput() {
-    if (!editable || !format) return;
-    const raw = inputText.trim();
-    if (raw === '') {
-      if (currentSingle !== null) setValue(null);
-      return;
-    }
-    const parsed = parseDateString(raw, format);
-    if (parsed && !(disabledDate?.(parsed) ?? false)) {
-      setValue(combine(parsed));
-    } else {
-      // 解析失败：回退到当前值的规范文本
-      inputText = formattedValue;
-      onParseError?.({ text: raw });
-    }
-  }
-
-  function onInputKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      commitInput();
-      setOpen(false);
-    } else if (e.key === 'ArrowDown' && !isOpen) {
-      e.preventDefault();
-      setOpen(true);
-    } else if (e.key === 'Escape' && isOpen) {
-      e.preventDefault();
-      inputText = formattedValue;
-      setOpen(false);
-    }
-  }
-
-  // --- 十年范围 (year 面板)：以 cursor 年所在的十年起点对齐 ---
-  const decadeStart = $derived(Math.floor(cursor.getFullYear() / 10) * 10);
-  const headerText = $derived(
-    isYear
-      ? `${decadeStart}-${decadeStart + 9}`
-      : isMonth
-        ? yearFormat.format(cursor)
-        : headerFormat.format(cursor),
-  );
-
-  // month 面板 12 个月格 (用 cursor 年份 + 0..11 月)
-  const monthCells = $derived(
-    Array.from({ length: 12 }, (_, m) => {
-      const date = new Date(cursor.getFullYear(), m, 1);
-      return { date, label: monthShortFormat.format(date), month: m };
-    }),
-  );
-
-  // year 面板格子：前后各留 1 个邻十年年份用于占位，共 12 格
-  const yearCells = $derived(
-    Array.from({ length: 12 }, (_, i) => {
-      const year = decadeStart - 1 + i;
-      const date = new Date(year, 0, 1);
-      const inRange = (startYear === undefined || year >= startYear) && (endYear === undefined || year <= endYear);
-      return { date, year, inDecade: year >= decadeStart && year <= decadeStart + 9, inRange };
-    }),
-  );
-
-  // 星期名: 用 weekdayOrder + 一个已知周日基准 (2023-01-01 是星期日) 经 Intl 本地化
-  const weekdayNames = $derived(
-    weekdayOrder(effWeekStart).map((dow) => weekdayFormat.format(new Date(2023, 0, 1 + dow))),
-  );
-  // 完整星期名 (columnheader aria-label)，顺序与 weekdayNames 一致
-  const weekdayLongNames = $derived(
-    weekdayOrder(effWeekStart).map((dow) => weekdayLongFormat.format(new Date(2023, 0, 1 + dow))),
-  );
-
-  // 面板内键盘高亮日 (highlight 为本地 $state；aria-activedescendant 指向它)
-  let highlight = $state<Date | null>(null);
-
-  const grid = $derived(getMonthGrid(cursor, effWeekStart));
-  // 6×7 行结构 (role=row / gridcell)。getMonthGrid 固定返回 42 格。
-  const weekRows = $derived(
-    Array.from({ length: 6 }, (_, r) => grid.slice(r * 7, r * 7 + 7)),
-  );
-  // 每个日期格的稳定 id（aria-activedescendant 指向当前高亮格）
-  function cellId(date: Date): string {
-    return `${gridId}-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-  }
-  // 当前高亮格 id（aria-activedescendant）
-  const activeCellId = $derived(highlight ? cellId(highlight) : undefined);
-
-  // showClear 综合判断：clearable & !disabled & 有值 & showClearProp=true
-  const showClearDerived = $derived(
-    clearable &&
-    showClearProp &&
-    !disabled &&
-    (multiple ? (Array.isArray(current) && current.length > 0) : currentSingle !== null),
-  );
-
-  // 头部导航切换可见年月：更新游标并通知 onPanelChange（红线 #1：panelDate 是面板视图态，非 value）
-  function setCursor(next: Date) {
-    cursor = next;
-    onPanelChange?.({ panelDate: next });
-  }
-  function prevMonth() {
-    setCursor(addMonths(cursor, -1));
-  }
-  function nextMonth() {
-    setCursor(addMonths(cursor, 1));
-  }
-  // month 面板：切年（±12 个月）
-  function prevYear() {
-    setCursor(addMonths(cursor, -12));
-  }
-  function nextYear() {
-    setCursor(addMonths(cursor, 12));
-  }
-  // year 面板：切十年
-  function prevDecade() {
-    setCursor(new Date(cursor.getFullYear() - 10, cursor.getMonth(), 1));
-  }
-  function nextDecade() {
-    setCursor(new Date(cursor.getFullYear() + 10, cursor.getMonth(), 1));
-  }
-
-  // 选中某个月：保留年+月，归一到该月 1 号起始
-  function selectMonth(date: Date) {
-    if (disabledDate?.(date)) return;
-    setValue(startOfDay(date));
-    setOpen(false);
-  }
-  // 选中某一年：归一到该年 1 月 1 号起始
-  function selectYear(date: Date) {
-    if (disabledDate?.(date)) return;
-    setValue(startOfDay(date));
-    setOpen(false);
-  }
-
-  // 头部导航按面板类型分派（month=切年, year=切十年, 其它=切月）
-  const onPrev = $derived(isYear ? prevDecade : isMonth ? prevYear : prevMonth);
-  const onNext = $derived(isYear ? nextDecade : isMonth ? nextYear : nextMonth);
-  const prevLabel = $derived(
-    isYear
-      ? loc().t('DatePicker.prevDecade')
-      : isMonth
-        ? loc().t('DatePicker.prevYear')
-        : loc().t('DatePicker.prevMonth'),
-  );
-  const nextLabel = $derived(
-    isYear
-      ? loc().t('DatePicker.nextDecade')
-      : isMonth
-        ? loc().t('DatePicker.nextYear')
-        : loc().t('DatePicker.nextMonth'),
-  );
-
-  // --- 时间部分 (dateTime)：复用 TimePicker 的列逻辑 ---
-  const selectedHour = $derived(currentSingle ? currentSingle.getHours() : 0);
-  const selectedMinute = $derived(currentSingle ? currentSingle.getMinutes() : 0);
-  const selectedSecond = $derived(currentSingle ? currentSingle.getSeconds() : 0);
-
-  const hours = Array.from({ length: 24 }, (_, i) => i);
-  const minutes = Array.from({ length: 60 }, (_, i) => i);
-  const seconds = Array.from({ length: 60 }, (_, i) => i);
-
-  function pad2(n: number): string {
-    return n < 10 ? `0${n}` : `${n}`;
-  }
-
-  // --- disabledTime (dateTime)：按当前日期解析各列禁用值集合 ---
-  // 基准日期取当前选中值(无则今天)；时/分依赖已选时分以联动下游列。
-  const disabledTimeCfg = $derived(
-    isDateTime && disabledTime ? disabledTime(currentSingle ?? today) : undefined,
-  );
-  const disabledHourSet = $derived(new Set(disabledTimeCfg?.disabledHours?.() ?? []));
-  const disabledMinuteSet = $derived(
-    new Set(disabledTimeCfg?.disabledMinutes?.(selectedHour) ?? []),
-  );
-  const disabledSecondSet = $derived(
-    new Set(disabledTimeCfg?.disabledSeconds?.(selectedHour, selectedMinute) ?? []),
-  );
-
-  // 合并指定日期与已有时分秒 (dateTime 保留时间，date 归零到当天起始)
-  function combine(date: Date): Date {
-    if (!isDateTime) return startOfDay(date);
-    const next = new Date(date);
-    next.setHours(selectedHour, selectedMinute, selectedSecond, 0);
-    return next;
-  }
-
-  function selectDate(date: Date) {
-    if (disabledDate?.(date)) return;
-
-    if (multiple) {
-      const arr = Array.isArray(current) ? [...current] : [];
-      const idx = arr.findIndex((d) => isSameDay(d, date));
-      let next: Date[];
-      if (idx >= 0) {
-        // 取消选中
-        next = arr.filter((_, i) => i !== idx);
-      } else {
-        // 新增选中（max 限制）
-        if (max !== undefined && arr.length >= max) return;
-        next = [...arr, startOfDay(date)];
-      }
-      if (needConfirm) {
-        pendingValue = next;
-      } else {
-        setValue(next);
-      }
-      return;
-    }
-
-    const combined = combine(date);
-    if (needConfirm) {
-      pendingValue = combined;
-      // dateTime needConfirm：选日期后保留面板
-    } else {
-      setValue(combined);
-      // dateTime：选日期后保留面板，让用户继续选时间，点确定再关
-      if (!isDateTime) setOpen(false);
-    }
-  }
-
-  function selectToday() {
-    if (disabledDate?.(today)) return;
-    if (isMonth) {
-      setValue(startOfDay(new Date(today.getFullYear(), today.getMonth(), 1)));
-      setOpen(false);
-      return;
-    }
-    if (isYear) {
-      setValue(startOfDay(new Date(today.getFullYear(), 0, 1)));
-      setOpen(false);
-      return;
-    }
-    setValue(combine(today));
-    if (!isDateTime) setOpen(false);
-  }
-
-  // 时间列：基于 current（无则今天）写入 h/m/s，不关面板
-  function commitTime(h: number, m: number, s: number) {
-    const base = currentSingle ? new Date(currentSingle) : startOfDay(today);
-    base.setHours(h, m, s, 0);
-    if (needConfirm) {
-      pendingValue = base;
-    } else {
-      setValue(base);
-    }
-  }
-  function pickHour(h: number) {
-    if (disabledHourSet.has(h)) return;
-    commitTime(h, selectedMinute, selectedSecond);
-  }
-  function pickMinute(m: number) {
-    if (disabledMinuteSet.has(m)) return;
-    commitTime(selectedHour, m, selectedSecond);
-  }
-  function pickSecond(s: number) {
-    if (disabledSecondSet.has(s)) return;
-    commitTime(selectedHour, selectedMinute, s);
-  }
-
-  // --- presets：点击快捷项直接选中 (惰性 value 即时求值) ---
-  function selectPreset(preset: Preset) {
-    onPresetClick?.({ preset });
-    const date = typeof preset.value === 'function' ? preset.value() : preset.value;
-    if (disabledDate?.(date)) return;
-    if (isMonth) {
-      setValue(startOfDay(new Date(date.getFullYear(), date.getMonth(), 1)));
-      setOpen(false);
-      return;
-    }
-    if (isYear) {
-      setValue(startOfDay(new Date(date.getFullYear(), 0, 1)));
-      setOpen(false);
-      return;
-    }
-    // dateTime：连带时间一起选中；date：归零到当天起始。
-    setValue(isDateTime ? new Date(date) : startOfDay(date));
-    setOpen(false);
-  }
-
-  function confirm() {
-    const val = needConfirm ? pendingValue : current;
-    onConfirm?.({ value: val });
-    if (needConfirm && pendingValue !== null) {
-      setValue(pendingValue);
-    }
-    setOpen(false);
-  }
-
-  function cancelConfirm() {
-    const dateStr = Array.isArray(current)
-      ? current.map(formatSingle).join(` ${rangeSeparator} `)
-      : formatSingle(currentSingle);
-    onCancel?.(current, dateStr);
-    pendingValue = current;
-    setOpen(false);
-  }
-
-  // 时间列容器引用 (红线 #3: 普通 bind:this，scrollIntoView 命令式调用)
-  let hourCol = $state<HTMLUListElement | null>(null);
-  let minuteCol = $state<HTMLUListElement | null>(null);
-  let secondCol = $state<HTMLUListElement | null>(null);
-
-  function scrollColToSelected(col: HTMLUListElement | null) {
-    if (!col) return;
-    const target = col.querySelector<HTMLElement>('[aria-selected="true"]');
-    target?.scrollIntoView({ block: 'center' });
-  }
-
-  // 打开时把时间列各自滚到选中项 (命令式，不放响应式 attachment)
-  $effect(() => {
-    if (!isOpen || !isDateTime) return;
-    void tick().then(() => {
-      scrollColToSelected(hourCol);
-      scrollColToSelected(minuteCol);
-      if (showSecond) scrollColToSelected(secondCol);
-    });
-  });
-
-  function clear(e: MouseEvent) {
-    e.stopPropagation();
-    if (disabled) return;
-    const emptyVal = multiple ? [] : null;
-    setValue(emptyVal);
-    onClear?.({});
-  }
-
-  function onTriggerKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        setOpen(true);
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isOpen) setOpen(true);
-        break;
-      case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          setOpen(false);
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  // 打开时把高亮对齐当前选中值或今天，关闭清空
-  $effect(() => {
-    if (isOpen) {
-      highlight = startOfDay(currentSingle ?? today);
-    } else {
-      highlight = null;
-    }
-  });
-
-  // 把高亮移到 next，并让游标随动到 next 所在月份（跨月自动翻页）
-  function setHighlight(next: Date) {
-    highlight = startOfDay(next);
-    cursor = startOfDay(new Date(next.getFullYear(), next.getMonth(), 1));
-  }
-
-  const GRID_NAV_KEYS = new Set<string>([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'PageUp',
-    'PageDown',
-    'Home',
-    'End',
-  ]);
-
-  // 日期网格键盘导航 (WAI-ARIA grid，红线 #2：方向用纯 gridFocusMove 派生)
-  // 方向键 ∓1 天 / ∓1 周；Home/End 本周首末；PageUp/Down ∓1 月；Shift+PageUp/Down ∓1 年。
-  function onGridKeydown(e: KeyboardEvent) {
-    const key = e.key;
-    if (key === 'Enter' || key === ' ') {
-      e.preventDefault();
-      if (highlight) selectDate(highlight);
-      return;
-    }
-    if (key === 'Escape') {
-      e.preventDefault();
-      setOpen(false);
-      return;
-    }
-    const base = highlight ?? today;
-    // Shift+PageUp/Down：切年（gridFocusMove 不含年级，组件层 ±12 月）
-    if (e.shiftKey && (key === 'PageUp' || key === 'PageDown')) {
-      e.preventDefault();
-      setHighlight(addMonths(base, key === 'PageUp' ? -12 : 12));
-      return;
-    }
-    if (!GRID_NAV_KEYS.has(key)) return;
-    e.preventDefault();
-    const next = gridFocusMove(base, key as GridFocusKey, 'month', effWeekStart);
-    if (next) setHighlight(next);
-  }
-
-  // --- useDismiss (红线 #3): 绑定放进 $effect，open 时绑、cleanup 解绑 ---
-  let rootEl = $state<HTMLDivElement | null>(null);
-  // 浮层 + 日期网格容器引用 (focus trap / 进场落焦，红线 #3 命令式 + cleanup)
-  let panelEl = $state<HTMLDivElement | null>(null);
-  let gridEl = $state<HTMLDivElement | null>(null);
-  let triggerEl = $state<HTMLButtonElement | HTMLInputElement | null>(null);
-
-  // autoFocus: 挂载后聚焦触发器
-  $effect(() => {
-    if (autoFocus && triggerEl) {
-      void tick().then(() => {
-        triggerEl?.focus({ preventScroll });
-      });
-    }
-  });
-
-  $effect(() => {
-    if (!isOpen || !rootEl) return;
-    // onClickOutSide 额外监听
-    function handleDocClick(e: MouseEvent) {
-      if (rootEl && !rootEl.contains(e.target as Node)) {
-        onClickOutSide?.(e);
-      }
-    }
-    if (onClickOutSide) {
-      document.addEventListener('click', handleDocClick, true);
-    }
-    const cleanup = useDismiss(rootEl, {
-      onDismiss: () => setOpen(false),
-      escape: true,
-      outsideClick: true,
-    });
-    return () => {
-      if (onClickOutSide) {
-        document.removeEventListener('click', handleDocClick, true);
-      }
-      cleanup?.();
-    };
-  });
-
-  // --- focus trap (红线 #3): 打开时困住 Tab，关闭归还焦点到触发器；进场落焦到日期网格 ---
-  $effect(() => {
-    if (!isOpen || !panelEl) return;
-    const trap = useFocusTrap(panelEl, { trapTab: true, returnFocus: true });
-    trap.activate();
-    // aria-activedescendant 模型：焦点落在网格容器（非单格），用 tick 等渲染完成
-    void tick().then(() => {
-      if (gridEl) gridEl.focus();
-    });
-    return () => trap.deactivate();
-  });
-
-  // onClickOutSide: 监听 document mousedown，点击不在 rootEl 内时触发
-  $effect(() => {
-    if (!onClickOutSide) return;
-    function handler(e: MouseEvent) {
-      if (rootEl && !rootEl.contains(e.target as Node)) {
-        onClickOutSide!(e);
-      }
-    }
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  });
-
-  // stopPropagation：面板点击阻止冒泡
-  function onPanelClick(e: MouseEvent) {
-    if (stopPropagation) e.stopPropagation();
-  }
-
-  // --- 样式工具函数 ---
-  function styleToString(s: CSSProperties | string | undefined): string | undefined {
-    if (!s) return undefined;
-    if (typeof s === 'string') return s;
-    return Object.entries(s)
-      .map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`)
-      .join(';');
-  }
-
-  const dropdownStyleStr = $derived(styleToString(dropdownStyle));
-  const inputStyleStr = $derived(styleToString(inputStyle));
-
-  // z-index CSS variable 注入到 panel
-  const panelStyle = $derived(
-    [dropdownStyleStr, `z-index:${zIndex}`].filter(Boolean).join(';'),
-  );
-
-  const cls = $derived(
-    [
-      'cd-date-picker',
-      `cd-date-picker--${size}`,
-      `cd-date-picker--${status}`,
-      disabled && 'cd-date-picker--disabled',
-      isOpen && 'cd-date-picker--open',
-      insetInput && 'cd-date-picker--inset-input',
-      position && `cd-date-picker--${position}`,
-      borderless && 'cd-date-picker--borderless',
-      density === 'compact' && 'cd-date-picker--compact',
-      !motion && 'cd-date-picker--no-motion',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  // multiple 模式下是否选中某天
-  function isDateSelected(date: Date): boolean {
-    if (multiple) {
-      return Array.isArray(current) && current.some((d) => isSameDay(d, date));
-    }
-    return isSameDay(date, currentSingle);
-  }
-
-  // fullDate 字符串工具
-  function fullDateStr(date: Date): string {
-    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
-  }
-
-  // presets 布局：left/right 时垂直在侧边；top/bottom 时水平在上下
-  const presetsVertical = $derived(presetPosition === 'left' || presetPosition === 'right');
-</script>
-
-<div class={cls} bind:this={rootEl} aria-invalid={status === 'error' || undefined} data-position={position}>
-  <div class="cd-date-picker__control">
-    {#if triggerRender}
-      {@render triggerRender({ value: current, placeholder: placeholder ?? loc().t('DatePicker.placeholder') })}
-    {:else if editable}
-      <input
-        type="text"
-        class="cd-date-picker__trigger cd-date-picker__input"
-        role="combobox"
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        aria-controls={dialogId}
-        aria-label={ariaLabel}
-        placeholder={placeholder ?? format}
-        {disabled}
-        readonly={inputReadOnly}
-        style={inputStyleStr}
-        bind:this={triggerEl as HTMLInputElement}
-        bind:value={inputText}
-        onclick={() => setOpen(true)}
-        onkeydown={onInputKeydown}
-        onfocus={onFocus}
-        onblur={(e) => {
-          commitInput();
-          onBlur?.(e);
-        }}
-      />
-    {:else}
-      <button
-        type="button"
-        class="cd-date-picker__trigger"
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        aria-controls={dialogId}
-        aria-label={ariaLabel}
-        {disabled}
-        style={inputStyleStr}
-        bind:this={triggerEl as HTMLButtonElement}
-        onclick={toggleOpen}
-        onkeydown={onTriggerKeydown}
-        onfocus={onFocus}
-        onblur={onBlur}
-      >
-        {#if prefix}
-          <span class="cd-date-picker__prefix">
-            {#if typeof prefix === 'string'}
-              {prefix}
-            {:else}
-              {@render prefix()}
-            {/if}
-          </span>
-        {/if}
-        <span class="cd-date-picker__value" class:cd-date-picker__value--placeholder={!formattedValue}>
-          {displayText}
-        </span>
-      </button>
-    {/if}
-
-    {#if showClearDerived}
-      <button type="button" class="cd-date-picker__clear" aria-label={loc().t('DatePicker.clear')} onclick={clear}>
-        {#if clearIcon}
-          {@render clearIcon()}
-        {:else}
-          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-            <path
-              fill="currentColor"
-              d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm2.5 9.1-1.4 1.4L8 9.4 6.5 11l-1.4-1.4L6.6 8 5.1 6.5 6.5 5.1 8 6.6 9.5 5.1l1.4 1.4L9.4 8l1.1 1.1Z"
-            />
-          </svg>
-        {/if}
-      </button>
-    {/if}
-
-    <span class="cd-date-picker__icon" aria-hidden="true">
-      <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
-        <path
-          fill="currentColor"
-          d="M5 1v1H3.5A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 12.5 2H11V1h-1v1H6V1H5Zm7.5 4.5v7h-9v-7h9Z"
-        />
-      </svg>
-    </span>
-  </div>
-
-  {#if isOpen}
-    <div
-      bind:this={panelEl}
-      class={['cd-date-picker__panel', dropdownClassName].filter(Boolean).join(' ')}
-      class:cd-date-picker__panel--datetime={isDateTime}
-      id={dialogId}
-      role="dialog"
-      aria-modal="false"
-      aria-label={loc().t('DatePicker.triggerLabel')}
-      tabindex="-1"
-      style={panelStyle}
-      onclick={onPanelClick}
-      onkeydown={undefined}
-    >
-      {#if topSlot}
-        <div class="cd-date-picker__slot cd-date-picker__slot--top">
-          {@render topSlot()}
-        </div>
-      {/if}
-
-      <div
-        class="cd-date-picker__layout"
-        class:cd-date-picker__layout--presets={presets && presets.length > 0}
-        class:cd-date-picker__layout--presets-top={presets && presets.length > 0 && presetPosition === 'top'}
-        class:cd-date-picker__layout--presets-bottom={presets && presets.length > 0 && presetPosition === 'bottom'}
-        class:cd-date-picker__layout--presets-left={presets && presets.length > 0 && presetPosition === 'left'}
-        class:cd-date-picker__layout--presets-right={presets && presets.length > 0 && presetPosition === 'right'}
-      >
-        {#if leftSlot}
-          <div class="cd-date-picker__slot cd-date-picker__slot--left">
-            {@render leftSlot()}
-          </div>
-        {/if}
-
-        {#if presets && presets.length > 0 && (presetPosition === 'left' || presetPosition === 'top')}
-          <div
-            class="cd-date-picker__presets"
-            class:cd-date-picker__presets--vertical={presetsVertical}
-            role="group"
-            aria-label={loc().t('DatePicker.triggerLabel')}
-          >
-            {#each presets as preset, i (i)}
-              <button
-                type="button"
-                class="cd-date-picker__preset"
-                onclick={() => selectPreset(preset)}
-              >
-                {preset.label}
-              </button>
-            {/each}
-          </div>
-        {/if}
-
-        <div class="cd-date-picker__main">
-          <div class="cd-date-picker__body">
-            <div class="cd-date-picker__calendar">
-              <div class="cd-date-picker__header">
-                <button
-                  type="button"
-                  class="cd-date-picker__nav"
-                  aria-label={prevLabel}
-                  onclick={onPrev}
-                >
-                  <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                    <path fill="currentColor" d="M10 3.5 5.5 8l4.5 4.5 1-1L7.5 8 11 4.5l-1-1Z" />
-                  </svg>
-                </button>
-                <span class="cd-date-picker__title">{headerText}</span>
-                <button
-                  type="button"
-                  class="cd-date-picker__nav"
-                  aria-label={nextLabel}
-                  onclick={onNext}
-                >
-                  <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" focusable="false">
-                    <path fill="currentColor" d="M6 3.5 5 4.5 8.5 8 5 11.5l1 1L10.5 8 6 3.5Z" />
-                  </svg>
-                </button>
-              </div>
-
-              {#if isMonth}
-                <div class="cd-date-picker__grid cd-date-picker__grid--month" role="grid">
-                  {#each monthCells as cell (cell.month)}
-                    {@const isSelected =
-                      currentSingle !== null &&
-                      currentSingle.getFullYear() === cell.date.getFullYear() &&
-                      currentSingle.getMonth() === cell.month}
-                    {@const isCurrent =
-                      today.getFullYear() === cell.date.getFullYear() && today.getMonth() === cell.month}
-                    {@const isDisabled = disabledDate?.(cell.date) ?? false}
-                    <button
-                      type="button"
-                      class="cd-date-picker__cell cd-date-picker__cell--block"
-                      class:cd-date-picker__cell--selected={isSelected}
-                      class:cd-date-picker__cell--today={isCurrent}
-                      role="gridcell"
-                      aria-selected={isSelected}
-                      aria-disabled={isDisabled || undefined}
-                      disabled={isDisabled}
-                      tabindex={-1}
-                      onclick={() => selectMonth(cell.date)}
-                    >
-                      {cell.label}
-                    </button>
-                  {/each}
-                </div>
-              {:else if isYear}
-                <div class="cd-date-picker__grid cd-date-picker__grid--year" role="grid">
-                  {#each yearCells as cell (cell.year)}
-                    {@const isSelected = currentSingle !== null && currentSingle.getFullYear() === cell.year}
-                    {@const isCurrent = today.getFullYear() === cell.year}
-                    {@const isDisabled = (disabledDate?.(cell.date) ?? false) || !cell.inRange}
-                    <button
-                      type="button"
-                      class="cd-date-picker__cell cd-date-picker__cell--block"
-                      class:cd-date-picker__cell--muted={!cell.inDecade}
-                      class:cd-date-picker__cell--selected={isSelected}
-                      class:cd-date-picker__cell--today={isCurrent}
-                      role="gridcell"
-                      aria-selected={isSelected}
-                      aria-disabled={isDisabled || undefined}
-                      disabled={isDisabled}
-                      tabindex={-1}
-                      onclick={() => selectYear(cell.date)}
-                    >
-                      {cell.year}
-                    </button>
-                  {/each}
-                </div>
-              {:else}
-                <!-- WAI-ARIA grid：role=grid 容器 (aria-activedescendant 指当前高亮格)
-                     + 表头行 columnheader + 每周一行 row，格 role=gridcell。
-                     焦点落在容器，方向键经 onGridKeydown → gridFocusMove 移动高亮 (红线 #2)。 -->
-                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-                <div
-                  bind:this={gridEl}
-                  class="cd-date-picker__grid"
-                  role="grid"
-                  tabindex="0"
-                  aria-activedescendant={activeCellId}
-                  aria-label={headerText}
-                  onkeydown={onGridKeydown}
-                >
-                  <div class="cd-date-picker__row cd-date-picker__row--head" role="row">
-                    {#each weekdayNames as name, i (i)}
-                      <span class="cd-date-picker__weekday" role="columnheader" aria-label={weekdayLongNames[i]}>
-                        {name}
-                      </span>
-                    {/each}
-                  </div>
-                  {#each weekRows as row, wi (wi)}
-                    <div class="cd-date-picker__row" role="row">
-                      {#each row as cell (cell.date.getTime())}
-                        {@const isSelected = isDateSelected(cell.date)}
-                        {@const isToday = isSameDay(cell.date, today)}
-                        {@const isHighlight = isSameDay(cell.date, highlight)}
-                        {@const isDisabled = disabledDate?.(cell.date) ?? false}
-                        {@const dayStatus = { isSelected, isToday, isDisabled, isInMonth: cell.inMonth }}
-                        <button
-                          type="button"
-                          id={cellId(cell.date)}
-                          class="cd-date-picker__cell"
-                          class:cd-date-picker__cell--muted={!cell.inMonth}
-                          class:cd-date-picker__cell--selected={isSelected}
-                          class:cd-date-picker__cell--today={isToday}
-                          class:cd-date-picker__cell--highlight={isHighlight}
-                          role="gridcell"
-                          aria-selected={isSelected}
-                          aria-disabled={isDisabled || undefined}
-                          disabled={isDisabled}
-                          tabindex={-1}
-                          onclick={() => selectDate(cell.date)}
-                        >
-                          {#if renderFullDate}
-                            {@render renderFullDate({ day: cell.date.getDate(), fullDate: fullDateStr(cell.date), dayStatus })}
-                          {:else if renderDate}
-                            {@render renderDate({ day: cell.date.getDate(), fullDate: fullDateStr(cell.date) })}
-                          {:else}
-                            {cell.date.getDate()}
-                          {/if}
-                        </button>
-                      {/each}
-                    </div>
-                  {/each}
-                </div>
-              {/if}
-            </div>
-
-            {#if isDateTime && !disabledTimePicker}
-              <div class="cd-date-picker__time">
-                <ul class="cd-date-picker__time-col" role="listbox" aria-label={loc().t('TimePicker.hour')} bind:this={hourCol}>
-                  {#each hours as h (h)}
-                    {@const isHourDisabled = disabledHourSet.has(h)}
-                    {#if !(hideDisabledOptions && isHourDisabled)}
-                      <li
-                        class="cd-date-picker__time-item"
-                        class:cd-date-picker__time-item--selected={h === selectedHour}
-                        class:cd-date-picker__time-item--disabled={isHourDisabled}
-                        role="option"
-                        aria-selected={h === selectedHour}
-                        aria-disabled={isHourDisabled || undefined}
-                        tabindex="-1"
-                        onclick={() => pickHour(h)}
-                        onkeydown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            pickHour(h);
-                          }
-                        }}
-                      >
-                        {pad2(h)}
-                      </li>
-                    {/if}
-                  {/each}
-                </ul>
-                <ul class="cd-date-picker__time-col" role="listbox" aria-label={loc().t('TimePicker.minute')} bind:this={minuteCol}>
-                  {#each minutes as m (m)}
-                    {@const isMinuteDisabled = disabledMinuteSet.has(m)}
-                    {#if !(hideDisabledOptions && isMinuteDisabled)}
-                      <li
-                        class="cd-date-picker__time-item"
-                        class:cd-date-picker__time-item--selected={m === selectedMinute}
-                        class:cd-date-picker__time-item--disabled={isMinuteDisabled}
-                        role="option"
-                        aria-selected={m === selectedMinute}
-                        aria-disabled={isMinuteDisabled || undefined}
-                        tabindex="-1"
-                        onclick={() => pickMinute(m)}
-                        onkeydown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            pickMinute(m);
-                          }
-                        }}
-                      >
-                        {pad2(m)}
-                      </li>
-                    {/if}
-                  {/each}
-                </ul>
-                {#if showSecond}
-                  <ul class="cd-date-picker__time-col" role="listbox" aria-label={loc().t('TimePicker.second')} bind:this={secondCol}>
-                    {#each seconds as s (s)}
-                      {@const isSecondDisabled = disabledSecondSet.has(s)}
-                      {#if !(hideDisabledOptions && isSecondDisabled)}
-                        <li
-                          class="cd-date-picker__time-item"
-                          class:cd-date-picker__time-item--selected={s === selectedSecond}
-                          class:cd-date-picker__time-item--disabled={isSecondDisabled}
-                          role="option"
-                          aria-selected={s === selectedSecond}
-                          aria-disabled={isSecondDisabled || undefined}
-                          tabindex="-1"
-                          onclick={() => pickSecond(s)}
-                          onkeydown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-                              pickSecond(s);
-                            }
-                          }}
-                        >
-                          {pad2(s)}
-                        </li>
-                      {/if}
-                    {/each}
-                  </ul>
-                {/if}
-              </div>
-            {/if}
-          </div>
-
-          <div class="cd-date-picker__footer">
-            <button type="button" class="cd-date-picker__today" onclick={selectToday}>
-              {loc().t('DatePicker.today')}
-            </button>
-            {#if isDateTime || needConfirm}
-              {#if needConfirm}
-                <button type="button" class="cd-date-picker__cancel" onclick={cancelConfirm}>
-                  {loc().t('DatePicker.cancel') ?? '取消'}
-                </button>
-              {/if}
-              <button type="button" class="cd-date-picker__ok" onclick={confirm}>
-                {loc().t('TimePicker.confirm')}
-              </button>
-            {/if}
-          </div>
-        </div>
-
-        {#if presets && presets.length > 0 && (presetPosition === 'right' || presetPosition === 'bottom')}
-          <div
-            class="cd-date-picker__presets"
-            class:cd-date-picker__presets--vertical={presetsVertical}
-            role="group"
-            aria-label={loc().t('DatePicker.triggerLabel')}
-          >
-            {#each presets as preset, i (i)}
-              <button
-                type="button"
-                class="cd-date-picker__preset"
-                onclick={() => selectPreset(preset)}
-              >
-                {preset.label}
-              </button>
-            {/each}
-          </div>
-        {/if}
-
-        {#if rightSlot}
-          <div class="cd-date-picker__slot cd-date-picker__slot--right">
-            {@render rightSlot()}
-          </div>
-        {/if}
-      </div>
-
-      {#if bottomSlot}
-        <div class="cd-date-picker__slot cd-date-picker__slot--bottom">
-          {@render bottomSlot()}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cd-date-picker {
-    position: relative;
-    display: inline-flex;
-    inline-size: 100%;
-    font-size: var(--cd-input-font-size);
-  }
-  .cd-date-picker__control {
-    position: relative;
-    inline-size: 100%;
-  }
-  .cd-date-picker__trigger {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    inline-size: 100%;
-    block-size: var(--cd-input-height-default);
-    padding-inline-start: var(--cd-input-padding-x);
-    padding-inline-end: calc(var(--cd-input-padding-x) + 1.25rem);
-    background: var(--cd-input-color-bg);
-    color: var(--cd-input-color-text);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-date-picker--small .cd-date-picker__trigger {
-    block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-date-picker--large .cd-date-picker__trigger {
-    block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-3);
-  }
-  .cd-date-picker__trigger:focus-visible {
-    outline: none;
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker--open .cd-date-picker__trigger {
-    border-color: var(--cd-input-border-active);
-  }
-  .cd-date-picker--warning .cd-date-picker__trigger {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-date-picker--error .cd-date-picker__trigger {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-date-picker--disabled .cd-date-picker__trigger {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  /* borderless 模式 */
-  .cd-date-picker--borderless .cd-date-picker__trigger {
-    border-color: transparent;
-    background: transparent;
-  }
-  /* compact 密度 */
-  .cd-date-picker--compact .cd-date-picker__panel {
-    padding: var(--cd-spacing-2);
-  }
-  .cd-date-picker--compact .cd-date-picker__cell {
-    inline-size: calc(var(--cd-date-picker-cell-size) * 0.85);
-    block-size: calc(var(--cd-date-picker-cell-size) * 0.85);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-date-picker--compact .cd-date-picker__weekday {
-    block-size: calc(var(--cd-date-picker-cell-size) * 0.85);
-    font-size: var(--cd-font-size-0);
-  }
-  /* no-motion */
-  .cd-date-picker--no-motion .cd-date-picker__panel {
-    animation: none;
-  }
-  .cd-date-picker__value {
-    flex: 1 1 auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .cd-date-picker__value--placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-date-picker__prefix {
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-  }
-  /* format 可输入模式：原生 input 复用 trigger 外观 */
-  .cd-date-picker__input::placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-date-picker__input:disabled {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-date-picker__clear,
-  .cd-date-picker__icon {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--cd-input-padding-x);
-    transform: translateY(-50%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--cd-color-text-2);
-    pointer-events: none;
-  }
-  .cd-date-picker__clear {
-    padding: 0;
-    border: none;
-    background: var(--cd-input-color-bg);
-    cursor: pointer;
-    opacity: 0;
-    pointer-events: auto;
-    transition: opacity var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-date-picker__control:hover .cd-date-picker__clear,
-  .cd-date-picker__clear:focus-visible {
-    opacity: 1;
-  }
-  .cd-date-picker__clear:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-date-picker__clear:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-date-picker__panel {
-    position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-1));
-    inset-inline-start: 0;
-    z-index: var(--cd-date-picker-panel-z, 1030);
-    padding: var(--cd-spacing-3);
-    background: var(--cd-date-picker-panel-bg);
-    border-radius: var(--cd-date-picker-panel-radius);
-    box-shadow: var(--cd-date-picker-panel-shadow);
-  }
-  .cd-date-picker__panel:focus-visible {
-    outline: none;
-  }
-  /* 顶部/底部插槽 */
-  .cd-date-picker__slot--top {
-    margin-block-end: var(--cd-spacing-2);
-  }
-  .cd-date-picker__slot--bottom {
-    margin-block-start: var(--cd-spacing-2);
-  }
-  .cd-date-picker__slot--left {
-    margin-inline-end: var(--cd-spacing-2);
-  }
-  .cd-date-picker__slot--right {
-    margin-inline-start: var(--cd-spacing-2);
-  }
-  .cd-date-picker__layout {
-    display: flex;
-    align-items: stretch;
-  }
-  /* presets top/bottom 时竖向排列整体 */
-  .cd-date-picker__layout--presets-top,
-  .cd-date-picker__layout--presets-bottom {
-    flex-direction: column;
-  }
-  .cd-date-picker__main {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-  }
-  .cd-date-picker__presets {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-1);
-    margin-inline-end: var(--cd-spacing-3);
-    padding-inline-end: var(--cd-spacing-3);
-    border-inline-end: 1px solid var(--cd-color-border);
-    min-inline-size: 5rem;
-  }
-  /* top/bottom 时横向排列 presets */
-  .cd-date-picker__presets:not(.cd-date-picker__presets--vertical) {
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-inline-end: 0;
-    padding-inline-end: 0;
-    border-inline-end: none;
-    margin-block-end: var(--cd-spacing-2);
-    padding-block-end: var(--cd-spacing-2);
-    border-block-end: 1px solid var(--cd-color-border);
-    min-inline-size: unset;
-  }
-  /* right 侧预设：切换 margin/border 方向 */
-  .cd-date-picker__layout--presets-right .cd-date-picker__presets {
-    margin-inline-end: 0;
-    padding-inline-end: 0;
-    border-inline-end: none;
-    margin-inline-start: var(--cd-spacing-3);
-    padding-inline-start: var(--cd-spacing-3);
-    border-inline-start: 1px solid var(--cd-color-border);
-  }
-  /* bottom 预sets */
-  .cd-date-picker__layout--presets-bottom .cd-date-picker__presets {
-    margin-block-end: 0;
-    padding-block-end: 0;
-    border-block-end: none;
-    margin-block-start: var(--cd-spacing-2);
-    padding-block-start: var(--cd-spacing-2);
-    border-block-start: 1px solid var(--cd-color-border);
-  }
-  .cd-date-picker__preset {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
-    border: none;
-    border-radius: var(--cd-radius-1);
-    background: transparent;
-    color: var(--cd-color-text-0);
-    font: inherit;
-    text-align: start;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-date-picker__preset:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-    color: var(--cd-color-primary);
-  }
-  .cd-date-picker__preset:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker__body {
-    display: flex;
-    align-items: stretch;
-  }
-  .cd-date-picker__time {
-    display: flex;
-    margin-inline-start: var(--cd-spacing-2);
-    padding-inline-start: var(--cd-spacing-2);
-    border-inline-start: 1px solid var(--cd-color-border);
-  }
-  .cd-date-picker__time-col {
-    inline-size: var(--cd-time-picker-time-col-width);
-    block-size: calc(var(--cd-time-picker-time-item-height) * 7);
-    margin: 0;
-    padding: 0;
-    overflow-y: auto;
-    list-style: none;
-    scrollbar-width: thin;
-  }
-  .cd-date-picker__time-col + .cd-date-picker__time-col {
-    border-inline-start: 1px solid var(--cd-color-border);
-  }
-  .cd-date-picker__time-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--cd-time-picker-time-item-height);
-    color: var(--cd-color-text-0);
-    cursor: pointer;
-    transition: background var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-date-picker__time-item:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-  }
-  .cd-date-picker__time-item:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker__time-item--selected,
-  .cd-date-picker__time-item--selected:hover {
-    background: var(--cd-date-picker-cell-bg-selected);
-    color: var(--cd-date-picker-cell-color-selected);
-  }
-  .cd-date-picker__time-item--disabled,
-  .cd-date-picker__time-item--disabled:hover {
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-    background: transparent;
-  }
-  .cd-date-picker__ok {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
-    border: none;
-    border-radius: var(--cd-radius-1);
-    background: var(--cd-color-primary);
-    color: var(--cd-color-white, #fff);
-    font: inherit;
-    cursor: pointer;
-  }
-  .cd-date-picker__ok:hover {
-    background: var(--cd-color-primary-hover, var(--cd-color-primary));
-  }
-  .cd-date-picker__ok:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker__cancel {
-    padding-inline: var(--cd-spacing-2);
-    padding-block: var(--cd-spacing-1);
-    border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-1);
-    background: transparent;
-    color: var(--cd-color-text-0);
-    font: inherit;
-    cursor: pointer;
-  }
-  .cd-date-picker__cancel:hover {
-    border-color: var(--cd-color-primary);
-    color: var(--cd-color-primary);
-  }
-  .cd-date-picker__cancel:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cd-spacing-2);
-    margin-block-end: var(--cd-spacing-2);
-  }
-  .cd-date-picker__title {
-    flex: 1 1 auto;
-    text-align: center;
-    color: var(--cd-date-picker-header-color);
-    font-weight: var(--cd-font-weight-medium);
-  }
-  .cd-date-picker__nav {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    inline-size: var(--cd-date-picker-cell-size);
-    block-size: var(--cd-date-picker-cell-size);
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    border-radius: var(--cd-date-picker-cell-radius);
-    cursor: pointer;
-  }
-  .cd-date-picker__nav:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-    color: var(--cd-color-text-0);
-  }
-  .cd-date-picker__nav:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  /* 日期网格：role=grid 容器纵向堆行，每行 7 列 */
-  .cd-date-picker__grid {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .cd-date-picker__grid:focus-visible {
-    outline: none;
-  }
-  .cd-date-picker__row {
-    display: grid;
-    grid-template-columns: repeat(7, var(--cd-date-picker-cell-size));
-    gap: 2px;
-  }
-  /* month/year 面板：3 列大格 (仍用 grid 容器) */
-  .cd-date-picker__grid--month,
-  .cd-date-picker__grid--year {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--cd-spacing-1);
-    inline-size: calc(var(--cd-date-picker-cell-size) * 7 + 2px * 6);
-  }
-  .cd-date-picker__cell--block {
-    inline-size: auto;
-    padding-inline: var(--cd-spacing-2);
-    block-size: calc(var(--cd-date-picker-cell-size) * 1.4);
-  }
-  .cd-date-picker__weekday {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--cd-date-picker-cell-size);
-    color: var(--cd-date-picker-weekday-color);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-date-picker__cell {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--cd-date-picker-cell-size);
-    block-size: var(--cd-date-picker-cell-size);
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-0);
-    border-radius: var(--cd-date-picker-cell-radius);
-    font: inherit;
-    cursor: pointer;
-    transition: background var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-date-picker__cell:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-  }
-  .cd-date-picker__cell:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-date-picker__cell--muted {
-    color: var(--cd-date-picker-cell-color-muted);
-  }
-  .cd-date-picker__cell--today {
-    border-block-end: 2px solid var(--cd-date-picker-cell-bg-selected);
-  }
-  .cd-date-picker__cell--highlight {
-    background: var(--cd-date-picker-cell-bg-hover);
-  }
-  .cd-date-picker__cell--selected,
-  .cd-date-picker__cell--selected:hover {
-    background: var(--cd-date-picker-cell-bg-selected);
-    color: var(--cd-date-picker-cell-color-selected);
-  }
-  .cd-date-picker__cell:disabled {
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-    background: transparent;
-  }
-  .cd-date-picker__footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-2);
-    padding-block-start: var(--cd-spacing-2);
-    border-block-start: 1px solid var(--cd-color-border);
-  }
-  .cd-date-picker__panel--datetime .cd-date-picker__footer,
-  .cd-date-picker__footer:has(.cd-date-picker__ok) {
-    justify-content: space-between;
-  }
-  .cd-date-picker__today {
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-primary);
-    font: inherit;
-    cursor: pointer;
-  }
-  .cd-date-picker__today:hover {
-    text-decoration: underline;
-  }
-  .cd-date-picker__today:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-date-picker__trigger,
-    .cd-date-picker__clear,
-    .cd-date-picker__cell,
-    .cd-date-picker__preset {
-      transition: none;
-    }
-  }
-</style>