@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/date-picker/RangePicker.svelte

@@ -1,775 +0,0 @@
-<!--
-  RangePicker — see specs/components/input/DatePicker.spec.md（range 范围选择）
-  双面板（两个月并排，右面板=左面板+1）序列选择：第一次点击设起始、第二次设结束，
-  自动排序 start<=end，起止可落在不同面板，hover 跨面板预览区间。
-  受控 value=[start,end]（Date|null 元组）不回写 (红线 #1)，仅 onChange。
-  本地化走 Intl.DateTimeFormat。useDismiss / 几何由 $effect 管理 (红线 #3)。
-  复用 @chenzy-design/core 日期纯函数（getMonthGrid/addMonths/isSameDay/startOfDay/weekdayOrder）。
-  maxRange: 起止跨度上限（天）。选定起始后，超出 maxRange 天的日期置灰禁用（daysBetween 纯函数判定，红线 #2）。
--->
-<script lang="ts">
-  import { untrack, tick } from 'svelte';
-  import {
-    useId,
-    useDismiss,
-    useFocusTrap,
-    isSameDay,
-    startOfDay,
-    addMonths,
-    getMonthGrid,
-    weekdayOrder,
-    gridFocusMove,
-    daysBetween,
-    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;
-  type RangeValue = [Date | null, Date | null];
-
-  interface Props {
-    value?: RangeValue | null;
-    defaultValue?: RangeValue | null;
-    open?: boolean;
-    defaultOpen?: boolean;
-    startPlaceholder?: string;
-    endPlaceholder?: string;
-    size?: Size;
-    status?: Status;
-    disabled?: boolean;
-    clearable?: boolean;
-    disabledDate?: (date: Date) => boolean;
-    /** 起止跨度上限（天）。选定起始后，超出该跨度的日期被禁用。 */
-    maxRange?: number;
-    weekStart?: WeekStart;
-    locale?: string;
-    onChange?: (v: RangeValue | null) => void;
-    onOpenChange?: (open: boolean) => void;
-    /** 可见年月切换 (头部导航)。panelDate 为左面板月份。 */
-    onPanelChange?: (e: { panelDate: Date }) => void;
-    /** 点击清除。 */
-    onClear?: (e: Record<string, never>) => void;
-    /** 触发器获得焦点。 */
-    onFocus?: (e: FocusEvent) => void;
-    /** 触发器失去焦点。 */
-    onBlur?: (e: FocusEvent) => void;
-    ariaLabel?: string;
-  }
-
-  let {
-    value,
-    defaultValue = null,
-    open,
-    defaultOpen = false,
-    startPlaceholder,
-    endPlaceholder,
-    size = 'default',
-    status = 'default',
-    disabled = false,
-    clearable = true,
-    disabledDate,
-    maxRange,
-    weekStart = 0,
-    locale = 'zh-CN',
-    onChange,
-    onOpenChange,
-    onPanelChange,
-    onClear,
-    onFocus,
-    onBlur,
-    ariaLabel,
-  }: Props = $props();
-
-  const loc = useLocale();
-  const dialogId = useId('cd-range-picker-panel');
-  // 左右两个日期网格容器 id（aria-activedescendant 指向其中的 cell id 前缀）
-  const leftGridId = useId('cd-range-picker-grid-l');
-  const rightGridId = useId('cd-range-picker-grid-r');
-
-  function normPair(v: RangeValue | null | undefined): RangeValue {
-    if (!v) return [null, null];
-    return [v[0] ? startOfDay(v[0]) : null, v[1] ? startOfDay(v[1]) : null];
-  }
-
-  // --- 受控 value (红线 #1) ---
-  const isValueControlled = $derived(value !== undefined);
-  let innerValue = $state<RangeValue>(untrack(() => normPair(defaultValue)));
-  const current = $derived<RangeValue>(isValueControlled ? normPair(value) : innerValue);
-  const startVal = $derived(current[0]);
-  const endVal = $derived(current[1]);
-
-  function setValue(next: RangeValue) {
-    if (!isValueControlled) innerValue = next;
-    onChange?.(next[0] === null && next[1] === null ? null : next);
-  }
-
-  // --- 受控 open (红线 #1) ---
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(untrack(() => defaultOpen));
-  const isOpen = $derived(isOpenControlled ? !!open : innerOpen);
-
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.(next);
-  }
-
-  function toggleOpen() {
-    if (disabled) return;
-    setOpen(!isOpen);
-  }
-
-  // --- 选择状态机：null=待选起始；'end'=已选起始待选结束 ---
-  const today = startOfDay(new Date());
-  let phase = $state<'start' | 'end'>('start');
-  let pendingStart = $state<Date | null>(null);
-  let previewEnd = $state<Date | null>(null);
-
-  // --- 面板游标月份 ---
-  let cursor = $state(untrack(() => startOfDay(normPair(defaultValue)[0] ?? new Date())));
-  // 键盘高亮日 (网格 roving 焦点；aria-activedescendant 指向它)
-  let highlight = $state<Date | null>(null);
-  $effect(() => {
-    if (isOpen) {
-      cursor = startOfDay(startVal ?? new Date());
-      phase = 'start';
-      pendingStart = null;
-      previewEnd = null;
-      highlight = startOfDay(startVal ?? new Date());
-    } else {
-      highlight = null;
-    }
-  });
-
-  // --- Intl 格式化 ---
-  const triggerFormat = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' }),
-  );
-  const headerFormat = $derived(new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }));
-  const weekdayFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
-  const weekdayLongFormat = $derived(new Intl.DateTimeFormat(locale, { weekday: 'long' }));
-
-  const startText = $derived(
-    startVal ? triggerFormat.format(startVal) : (startPlaceholder ?? loc().t('DatePicker.startPlaceholder')),
-  );
-  const endText = $derived(
-    endVal ? triggerFormat.format(endVal) : (endPlaceholder ?? loc().t('DatePicker.endPlaceholder')),
-  );
-  // --- 双面板：cursor = 左面板月份，右面板 = 左 + 1 ---
-  const rightCursor = $derived(addMonths(cursor, 1));
-  const leftHeaderText = $derived(headerFormat.format(cursor));
-  const rightHeaderText = $derived(headerFormat.format(rightCursor));
-  const weekdayNames = $derived(
-    weekdayOrder(weekStart).map((dow) => weekdayFormat.format(new Date(2023, 0, 1 + dow))),
-  );
-  const weekdayLongNames = $derived(
-    weekdayOrder(weekStart).map((dow) => weekdayLongFormat.format(new Date(2023, 0, 1 + dow))),
-  );
-  const leftGrid = $derived(getMonthGrid(cursor, weekStart));
-  const rightGrid = $derived(getMonthGrid(rightCursor, weekStart));
-  // 6×7 行结构 (role=row / gridcell)。getMonthGrid 固定返回 42 格。
-  const leftRows = $derived(Array.from({ length: 6 }, (_, r) => leftGrid.slice(r * 7, r * 7 + 7)));
-  const rightRows = $derived(Array.from({ length: 6 }, (_, r) => rightGrid.slice(r * 7, r * 7 + 7)));
-  function cellId(prefix: string, date: Date): string {
-    return `${prefix}-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-  }
-  const showClear = $derived(clearable && !disabled && (startVal !== null || endVal !== null));
-
-  // 整体左右翻一个月（左面板 −1 / 右面板 +1 联动，两面板始终相邻）
-  function setCursor(next: Date) {
-    cursor = next;
-    onPanelChange?.({ panelDate: next });
-  }
-  function prevMonth() {
-    setCursor(addMonths(cursor, -1));
-  }
-  function nextMonth() {
-    setCursor(addMonths(cursor, 1));
-  }
-
-  // 选区端点（选择中用 pendingStart + previewEnd，否则用已提交值）
-  const rangeStart = $derived(phase === 'end' ? pendingStart : startVal);
-  const rangeEnd = $derived(phase === 'end' ? previewEnd : endVal);
-  // 归一后的 [lo, hi]（用于区间内判定）
-  const span = $derived.by<[number, number] | null>(() => {
-    const a = rangeStart;
-    const b = rangeEnd;
-    if (!a || !b) return null;
-    const ta = a.getTime();
-    const tb = b.getTime();
-    return ta <= tb ? [ta, tb] : [tb, ta];
-  });
-
-  function inRange(date: Date): boolean {
-    if (!span) return false;
-    const t = startOfDay(date).getTime();
-    return t > span[0] && t < span[1];
-  }
-  function isEdge(date: Date): boolean {
-    return isSameDay(date, rangeStart) || isSameDay(date, rangeEnd);
-  }
-
-  // maxRange：选定起始(phase==='end')后，离 pendingStart 超过 maxRange-1 天的日期禁用
-  // （跨度含两端，故 maxRange=7 表示最多 7 天，即间隔 ≤ 6）
-  function exceedsMaxRange(date: Date): boolean {
-    if (maxRange == null || maxRange <= 0) return false;
-    if (phase !== 'end' || !pendingStart) return false;
-    return Math.abs(daysBetween(pendingStart, date)) > maxRange - 1;
-  }
-
-  // 单元格综合禁用：外部 disabledDate 或 超出 maxRange
-  function isCellDisabled(date: Date): boolean {
-    return (disabledDate?.(date) ?? false) || exceedsMaxRange(date);
-  }
-
-  function selectDate(date: Date) {
-    if (isCellDisabled(date)) return;
-    const day = startOfDay(date);
-    if (phase === 'start') {
-      pendingStart = day;
-      previewEnd = day;
-      phase = 'end';
-      return;
-    }
-    // phase === 'end'：定第二端，排序后提交
-    const a = pendingStart ?? day;
-    const [lo, hi] = a.getTime() <= day.getTime() ? [a, day] : [day, a];
-    setValue([lo, hi]);
-    phase = 'start';
-    pendingStart = null;
-    previewEnd = null;
-    setOpen(false);
-  }
-
-  function onCellHover(date: Date) {
-    if (phase === 'end' && !isCellDisabled(date)) previewEnd = startOfDay(date);
-  }
-
-  function clear(e: MouseEvent) {
-    e.stopPropagation();
-    if (disabled) return;
-    setValue([null, null]);
-    phase = 'start';
-    pendingStart = null;
-    previewEnd = null;
-    onClear?.({});
-  }
-
-  // 高亮所在面板：在左面板月份则左，否则右（决定 aria-activedescendant 落哪个网格）
-  const highlightInLeft = $derived(
-    !!highlight &&
-      highlight.getFullYear() === cursor.getFullYear() &&
-      highlight.getMonth() === cursor.getMonth(),
-  );
-  const leftActiveId = $derived(
-    highlight && highlightInLeft ? cellId(leftGridId, highlight) : undefined,
-  );
-  const rightActiveId = $derived(
-    highlight && !highlightInLeft ? cellId(rightGridId, highlight) : undefined,
-  );
-
-  // 把高亮移到 next，跨出双面板可见范围时整体翻页（cursor=左面板月份）
-  function setHighlight(next: Date) {
-    highlight = startOfDay(next);
-    // 双面板显示 cursor 月 + cursor+1 月；高亮落在其中一个则不翻页
-    const inLeft = next.getFullYear() === cursor.getFullYear() && next.getMonth() === cursor.getMonth();
-    const inRight =
-      next.getFullYear() === rightCursor.getFullYear() && next.getMonth() === rightCursor.getMonth();
-    if (!inLeft && !inRight) {
-      setCursor(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)
-  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;
-    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', weekStart);
-    if (next) {
-      setHighlight(next);
-      if (phase === 'end' && !isCellDisabled(next)) previewEnd = startOfDay(next);
-    }
-  }
-
-  function onTriggerKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-      e.preventDefault();
-      setOpen(true);
-    } else if (e.key === 'Escape' && isOpen) {
-      e.preventDefault();
-      setOpen(false);
-    }
-  }
-
-  // --- useDismiss (红线 #3) ---
-  let rootEl = $state<HTMLDivElement | null>(null);
-  let panelEl = $state<HTMLDivElement | null>(null);
-  let leftGridEl = $state<HTMLDivElement | null>(null);
-  let rightGridEl = $state<HTMLDivElement | null>(null);
-  $effect(() => {
-    if (!isOpen || !rootEl) return;
-    return useDismiss(rootEl, {
-      onDismiss: () => setOpen(false),
-      escape: true,
-      outsideClick: true,
-    });
-  });
-
-  // --- focus trap (红线 #3): 困住 Tab、关闭归还焦点；进场落焦高亮所在网格 ---
-  $effect(() => {
-    if (!isOpen || !panelEl) return;
-    const trap = useFocusTrap(panelEl, { trapTab: true, returnFocus: true });
-    trap.activate();
-    void tick().then(() => {
-      const target = highlightInLeft ? leftGridEl : rightGridEl;
-      target?.focus();
-    });
-    return () => trap.deactivate();
-  });
-
-  const cls = $derived(
-    [
-      'cd-range-picker',
-      `cd-range-picker--${size}`,
-      `cd-range-picker--${status}`,
-      disabled && 'cd-range-picker--disabled',
-      isOpen && 'cd-range-picker--open',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-<div class={cls} bind:this={rootEl} aria-invalid={status === 'error' || undefined}>
-  <div class="cd-range-picker__control">
-    <button
-      type="button"
-      class="cd-range-picker__trigger"
-      aria-haspopup="dialog"
-      aria-expanded={isOpen}
-      aria-controls={dialogId}
-      aria-label={ariaLabel}
-      {disabled}
-      onclick={toggleOpen}
-      onkeydown={onTriggerKeydown}
-      onfocus={onFocus}
-      onblur={onBlur}
-    >
-      <span class="cd-range-picker__value" class:cd-range-picker__value--placeholder={startVal === null}>
-        {startText}
-      </span>
-      <span class="cd-range-picker__sep" aria-hidden="true">→</span>
-      <span class="cd-range-picker__value" class:cd-range-picker__value--placeholder={endVal === null}>
-        {endText}
-      </span>
-    </button>
-
-    {#if showClear}
-      <button type="button" class="cd-range-picker__clear" aria-label={loc().t('DatePicker.clear')} onclick={clear}>
-        <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>
-      </button>
-    {/if}
-  </div>
-
-  {#if isOpen}
-    <div bind:this={panelEl} class="cd-range-picker__panel" id={dialogId} role="dialog" aria-modal="false" aria-label={loc().t('DatePicker.rangeTriggerLabel')} tabindex="-1">
-      <div class="cd-range-picker__panels">
-        <!-- 左面板 -->
-        <div class="cd-range-picker__month">
-          <div class="cd-range-picker__header">
-            <button type="button" class="cd-range-picker__nav" aria-label={loc().t('DatePicker.prevMonth')} onclick={prevMonth}>
-              <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-range-picker__title">{leftHeaderText}</span>
-            <span class="cd-range-picker__nav cd-range-picker__nav--ghost" aria-hidden="true"></span>
-          </div>
-
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            bind:this={leftGridEl}
-            class="cd-range-picker__grid"
-            role="grid"
-            tabindex="0"
-            aria-label={leftHeaderText}
-            aria-activedescendant={leftActiveId}
-            onkeydown={onGridKeydown}
-          >
-            <div class="cd-range-picker__row cd-range-picker__row--head" role="row">
-              {#each weekdayNames as name, i (i)}
-                <span class="cd-range-picker__weekday" role="columnheader" aria-label={weekdayLongNames[i]}>{name}</span>
-              {/each}
-            </div>
-            {#each leftRows as row, wi (wi)}
-              <div class="cd-range-picker__row" role="row">
-                {#each row as cell (cell.date.getTime())}
-                  {@const edge = isEdge(cell.date)}
-                  {@const within = inRange(cell.date)}
-                  {@const isToday = isSameDay(cell.date, today)}
-                  {@const isHighlight = isSameDay(cell.date, highlight)}
-                  {@const isDisabled = isCellDisabled(cell.date)}
-                  <button
-                    type="button"
-                    id={cellId(leftGridId, cell.date)}
-                    class="cd-range-picker__cell"
-                    class:cd-range-picker__cell--muted={!cell.inMonth}
-                    class:cd-range-picker__cell--edge={edge}
-                    class:cd-range-picker__cell--in-range={within}
-                    class:cd-range-picker__cell--today={isToday}
-                    class:cd-range-picker__cell--highlight={isHighlight}
-                    role="gridcell"
-                    aria-selected={edge}
-                    aria-disabled={isDisabled || undefined}
-                    disabled={isDisabled}
-                    tabindex={-1}
-                    onclick={() => selectDate(cell.date)}
-                    onpointerenter={() => onCellHover(cell.date)}
-                  >
-                    {cell.date.getDate()}
-                  </button>
-                {/each}
-              </div>
-            {/each}
-          </div>
-        </div>
-
-        <!-- 右面板 -->
-        <div class="cd-range-picker__month">
-          <div class="cd-range-picker__header">
-            <span class="cd-range-picker__nav cd-range-picker__nav--ghost" aria-hidden="true"></span>
-            <span class="cd-range-picker__title">{rightHeaderText}</span>
-            <button type="button" class="cd-range-picker__nav" aria-label={loc().t('DatePicker.nextMonth')} onclick={nextMonth}>
-              <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>
-
-          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-          <div
-            bind:this={rightGridEl}
-            class="cd-range-picker__grid"
-            role="grid"
-            tabindex="0"
-            aria-label={rightHeaderText}
-            aria-activedescendant={rightActiveId}
-            onkeydown={onGridKeydown}
-          >
-            <div class="cd-range-picker__row cd-range-picker__row--head" role="row">
-              {#each weekdayNames as name, i (i)}
-                <span class="cd-range-picker__weekday" role="columnheader" aria-label={weekdayLongNames[i]}>{name}</span>
-              {/each}
-            </div>
-            {#each rightRows as row, wi (wi)}
-              <div class="cd-range-picker__row" role="row">
-                {#each row as cell (cell.date.getTime())}
-                  {@const edge = isEdge(cell.date)}
-                  {@const within = inRange(cell.date)}
-                  {@const isToday = isSameDay(cell.date, today)}
-                  {@const isHighlight = isSameDay(cell.date, highlight)}
-                  {@const isDisabled = isCellDisabled(cell.date)}
-                  <button
-                    type="button"
-                    id={cellId(rightGridId, cell.date)}
-                    class="cd-range-picker__cell"
-                    class:cd-range-picker__cell--muted={!cell.inMonth}
-                    class:cd-range-picker__cell--edge={edge}
-                    class:cd-range-picker__cell--in-range={within}
-                    class:cd-range-picker__cell--today={isToday}
-                    class:cd-range-picker__cell--highlight={isHighlight}
-                    role="gridcell"
-                    aria-selected={edge}
-                    aria-disabled={isDisabled || undefined}
-                    disabled={isDisabled}
-                    tabindex={-1}
-                    onclick={() => selectDate(cell.date)}
-                    onpointerenter={() => onCellHover(cell.date)}
-                  >
-                    {cell.date.getDate()}
-                  </button>
-                {/each}
-              </div>
-            {/each}
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cd-range-picker {
-    position: relative;
-    display: inline-flex;
-    inline-size: 100%;
-    font-size: var(--cd-input-font-size);
-  }
-  .cd-range-picker__control {
-    position: relative;
-    inline-size: 100%;
-  }
-  .cd-range-picker__trigger {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    inline-size: 100%;
-    block-size: var(--cd-input-height-default);
-    padding-inline: var(--cd-input-padding-x);
-    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-range-picker--small .cd-range-picker__trigger {
-    block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-range-picker--large .cd-range-picker__trigger {
-    block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-3);
-  }
-  .cd-range-picker__trigger:focus-visible {
-    outline: none;
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-range-picker--open .cd-range-picker__trigger {
-    border-color: var(--cd-input-border-active);
-  }
-  .cd-range-picker--warning .cd-range-picker__trigger {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-range-picker--error .cd-range-picker__trigger {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-range-picker--disabled .cd-range-picker__trigger {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-range-picker__value {
-    flex: 1 1 auto;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: center;
-  }
-  .cd-range-picker__value--placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-range-picker__sep {
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-  }
-  .cd-range-picker__clear {
-    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;
-    padding: 0;
-    border: none;
-    background: var(--cd-input-color-bg);
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-range-picker__control:hover .cd-range-picker__clear,
-  .cd-range-picker__clear:focus-visible {
-    opacity: 1;
-  }
-  .cd-range-picker__clear:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-range-picker__clear:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-range-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);
-    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-range-picker__panel:focus-visible {
-    outline: none;
-  }
-  /* 双面板：左右两个月历并排 */
-  .cd-range-picker__panels {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--cd-spacing-4);
-  }
-  .cd-range-picker__month {
-    flex: 0 0 auto;
-  }
-  .cd-range-picker__nav--ghost {
-    background: transparent;
-    cursor: default;
-    pointer-events: none;
-  }
-  .cd-range-picker__nav--ghost:hover {
-    background: transparent;
-  }
-  .cd-range-picker__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cd-spacing-2);
-    margin-block-end: var(--cd-spacing-2);
-  }
-  .cd-range-picker__title {
-    flex: 1 1 auto;
-    text-align: center;
-    color: var(--cd-date-picker-header-color);
-    font-weight: var(--cd-font-weight-medium);
-  }
-  .cd-range-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-range-picker__nav:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-    color: var(--cd-color-text-0);
-  }
-  .cd-range-picker__nav:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-range-picker__grid {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .cd-range-picker__grid:focus-visible {
-    outline: none;
-  }
-  .cd-range-picker__row {
-    display: grid;
-    grid-template-columns: repeat(7, var(--cd-date-picker-cell-size));
-    gap: 2px;
-  }
-  .cd-range-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-range-picker__cell {
-    position: relative;
-    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-range-picker__cell:hover {
-    background: var(--cd-date-picker-cell-bg-hover);
-  }
-  .cd-range-picker__cell:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-range-picker__cell--muted {
-    color: var(--cd-date-picker-cell-color-muted);
-  }
-  .cd-range-picker__cell--today {
-    border-block-end: 2px solid var(--cd-date-picker-cell-bg-selected);
-  }
-  /* 键盘高亮格（aria-activedescendant 当前格）：浅底提示 */
-  .cd-range-picker__cell--highlight {
-    background: var(--cd-date-picker-cell-bg-hover);
-  }
-  /* 区间内：浅底连续条 */
-  .cd-range-picker__cell--in-range {
-    background: var(--cd-date-picker-cell-bg-hover);
-    border-radius: 0;
-  }
-  /* 端点：实心高亮 */
-  .cd-range-picker__cell--edge,
-  .cd-range-picker__cell--edge:hover {
-    background: var(--cd-date-picker-cell-bg-selected);
-    color: var(--cd-date-picker-cell-color-selected);
-  }
-  .cd-range-picker__cell:disabled {
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-    background: transparent;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-range-picker__trigger,
-    .cd-range-picker__clear,
-    .cd-range-picker__cell {
-      transition: none;
-    }
-  }
-</style>